diff --git a/src/pages/CabinetCreation.jsx b/src/pages/CabinetCreation.jsx
index 5245fbb..0a4d913 100644
--- a/src/pages/CabinetCreation.jsx
+++ b/src/pages/CabinetCreation.jsx
@@ -3,131 +3,109 @@ import { useTranslation } from "react-i18next";
 import FormBox from "../components/FormBox";
 import Button from "../components/Button";
 import { useNavigate } from "react-router-dom";
-import { AnimatePresence, motion } from "motion/react";
-import clsx from "clsx";
+import FieldsWrapper from "../components/FieldsWrapper";
+import FormField from "../components/FormField";
+import FormInput from "../components/FormInput";
+import FormSelect from "../components/FormSelect";
 
 function CabinetCreation() {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const [cabinetId, setCabinetId] = useState({ id: "", valid: true });
-  const [cabinetKeyId, setCabinetKeyId] = useState({ id: "", valid: true });
-  const [noOfLockers, setNoOfLockers] = useState({ number: 0, valid: true });
+  const [cabinetDetails, setCabinetDetails] = useState({
+    cabinetId: "",
+    cabinetIdValid: true,
+    cabinetKeyId: "",
+    cabinetKeyIdValid: true,
+    noOfLockers: 0,
+    noOfLockersValid: true,
+  });
 
   const handleNext = (e) => {
     e.preventDefault();
-    const idRegex = /^[A-Z]{2}[0-9]{4}$/;
-    if (!idRegex.test(cabinetId.id)) {
-      setCabinetId({ id: cabinetId.id, valid: false });
-      return;
-    } else if (!idRegex.test(cabinetKeyId.id)) {
-      setCabinetKeyId({ id: cabinetKeyId.id, valid: false });
-      return;
-    } else if (noOfLockers.number === 0) {
-      setNoOfLockers({ number: noOfLockers.number, valid: false });
+    let isFormValid = true;
+    const newValues = {...cabinetDetails};
+    formFields.forEach(field => {
+      if(field.validate) {
+        const isFieldValid = field.validate(cabinetDetails[field.name])
+        newValues[`${field.name}Valid`] = isFieldValid;
+        if(!isFieldValid) isFormValid = false;
+      }
+    });
+    
+    if(!isFormValid) {
+      setCabinetDetails(newValues);
       return;
     }
+
     navigate("register-lockers", {
       state: {
-        cabinetId: cabinetId.id,
-        cabinetKeyId: cabinetKeyId.id,
-        noOfLockers: noOfLockers.number,
+        cabinetId: cabinetDetails.cabinetId,
+        cabinetKeyId: cabinetDetails.cabinetKeyId,
+        noOfLockers: parseInt(cabinetDetails.noOfLockers),
       },
     });
   };
+
+  const formFields = [
+    {
+      name: "cabinetId",
+      label: t("cabinetId"),
+      type: "input",
+      maxLength: 6,
+      validate: v => /^\w{2}\d{4}$/.test(v)
+    },
+    {
+      name: "cabinetKeyId",
+      label: t("cabinetKeyId"),
+      type: "input",
+      maxLength: 6,
+      validate: v => /^\w{2}\d{4}$/.test(v)
+    },
+    {
+      name: "noOfLockers",
+      label: t("noOfLockers"),
+      type: "input",
+      subType: "number",
+      validate: v => parseInt(v) > 0
+    },
+  ];
+
+  const renderField = (field) => {
+    const commonProps = {
+      value: cabinetDetails[field.name],
+      onChange: (e) => {
+        const newCabinetDetails = { ...cabinetDetails };
+        newCabinetDetails[field.name] = e.target.value.toUpperCase();
+        newCabinetDetails[`${field.name}Valid`] = true;
+        setCabinetDetails(newCabinetDetails);
+      },
+      maxLength: field.maxLength,
+      type: field.subType,
+    };
+    const valid = cabinetDetails[`${field.name}Valid`];
+
+    return (
+      <FormField key={field.name} label={field.label}>
+        {field.type === "input" ? (
+          <FormInput props={commonProps} valid={valid} />
+        ) : (
+          <FormSelect
+            props={commonProps}
+            valid={valid}
+            options={field.options}
+          />
+        )}
+      </FormField>
+    );
+  };
+
   return (
     <FormBox title={t("cabinetCreation")}>
-      <div className="p-2 pt-7 flex flex-col gap-4">
-        <div className="flex">
-          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
-            {t("cabinetId")}
-          </label>
-          <div className="w-full">
-            <input
-              value={cabinetId.id}
-              className={clsx(
-                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                !cabinetId.valid && "border-error"
-              )}
-              onChange={(e) =>
-                setCabinetId({
-                  id: e.target.value.toUpperCase(),
-                  valid: true,
-                })
-              }
-              type="text"
-              maxLength={6}
-            />
-            <AnimatePresence initial={false}>
-              {!cabinetId.valid && (
-                <motion.div
-                  className="w-1/5 text-sm text-error ml-3 pt-1"
-                  initial={{ opacity: 0, scale: 0 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0 }}
-                  key="cabinetIdError"
-                >
-                  Invalid Cabinet Id
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-        <div className="flex">
-          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
-            {t("cabinetKeyId")}
-          </label>
-          <div className="w-full">
-            <input
-              value={cabinetKeyId.id}
-              className={clsx(
-                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                !cabinetKeyId.valid && "border-error"
-              )}
-              onChange={(e) =>
-                setCabinetKeyId({
-                  id: e.target.value.toUpperCase(),
-                  valid: true,
-                })
-              }
-              type="text"
-              maxLength={6}
-            />
-            {!cabinetKeyId.valid && (
-              <div className="text-sm text-error ml-3 pt-1">Invalid Key Id</div>
-            )}
-          </div>
-        </div>
-        <div className="flex">
-          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
-            {t("noOfLockers")}
-          </label>
-          <div className="w-full">
-            <input
-              value={noOfLockers.number}
-              className={clsx(
-                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                !noOfLockers.valid && "border-error"
-              )}
-              onChange={(e) =>
-                setNoOfLockers({ number: e.target.value, valid: true })
-              }
-              type="number"
-            />
-            {!noOfLockers.valid && (
-              <div className="text-sm text-error ml-3 pt-1">
-                Invalid Number of Lockers
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-      <Button
-        text={t("next")}
-        onClick={(e) => {
-          handleNext(e);
-        }}
-      />
+      <FieldsWrapper>
+        {formFields.map(renderField)}
+      </FieldsWrapper>
+      <Button text={t('next')} onClick={handleNext} />
     </FormBox>
   );
 }