diff --git a/web/src/components/CreateDocumentModal/CreateDocModal.tsx b/web/src/components/CreateDocumentModal/CreateDocModal.tsx
index b9cec5d..d938d1c 100644
--- a/web/src/components/CreateDocumentModal/CreateDocModal.tsx
+++ b/web/src/components/CreateDocumentModal/CreateDocModal.tsx
@@ -7,7 +7,6 @@ import data from "@emoji-mart/data";
 import { EmojiMartData } from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
 import EmojiClickData from "@emoji-mart/react";
-import { Field, Label, Switch } from "@headlessui/react";
 import { Icon } from "@iconify/react";
 import { AnimatePresence, motion } from "framer-motion";
 import React, { useContext, useEffect, useRef, useState } from "react";
@@ -23,10 +22,15 @@ import {
 } from "../../api/Requests";
 import { ModalContext } from "../../context/ModalContext";
 import { ThemeContext, ThemeContextType } from "../../context/ThemeContext";
+import AddButton from "../../lib/components/AddButton";
+import DeleteButton from "../../lib/components/DeleteButton";
+import ToggleSwitch from "../../lib/components/ToggleSwitch";
 import {
   Documentation,
   Features,
   FooterLabelLinks,
+  FormData,
+  FormFieldData,
   LanderDetails,
   MoreLabelLinks,
 } from "../../types/doc";
@@ -42,18 +46,6 @@ import { toastMessage } from "../../utils/Toast";
 import { customCSSInitial, SocialLinkIcon } from "../../utils/Utils";
 import Breadcrumb from "../Breadcrumb/Breadcrumb";
 
-interface FormFieldData {
-  label: string;
-  placeholder: string;
-  value?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  name: string;
-  type?: string;
-  required?: boolean;
-  ref?: React.Ref<HTMLInputElement>;
-}
-
-
 const FormField: React.FC<FormFieldData> = ({
   label,
   placeholder,
@@ -109,156 +101,43 @@ type HandleArrayFieldChange = (
   saveField: "moreFooter" | "socialPlatform",
 ) => void;
 
-interface OnClick {
-  onClick: () => Promise<void>;
-}
-
-interface LabelAndCommunity {
-  index: number;
-  labelId: string;
-  linkId: string;
-  data: {
-    label: string;
-    link: string;
-  };
-  onChange: HandleArrayFieldChange;
-  state: {
-    label: string;
-    link: string;
-  }[];
-}
-
-const LabelAndCommunityComponent = ({
-  index,
-  labelId,
-  linkId,
-  data,
-  onChange,
-  state,
-}: LabelAndCommunity) => {
-  const { t } = useTranslation();
-  return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      className="grid gap-4 grid-cols-2 my-2"
-      key={`footer-more-field-${index}`}
-    >
-      <div>
-        <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-          {t("label")}
-        </span>
-        <input
-          type="text"
-          id={labelId}
-          value={data?.label || ""}
-          name={index.toString()}
-          onChange={(e) =>
-            onChange(index, "label", e.target.value, state, "moreFooter")
-          }
-          placeholder={t("label_placeholder")}
-          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-        />
-      </div>
-      <div>
-        <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-          {t("link")}
-        </span>
-        <input
-          type="text"
-          value={data?.link || ""}
-          id={linkId}
-          name={index.toString()}
-          onChange={(e) =>
-            onChange(index, "link", e.target.value, state, "moreFooter")
-          }
-          placeholder={t("more_footer_link_placeholder")}
-          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-        />
-      </div>
-    </motion.div>
-  );
-};
-
-const AddButton: React.FC<OnClick> = ({ onClick }) => {
-  const { t } = useTranslation();
-  return (
-    <button
-      title={t("add_new_field")}
-      onClick={onClick}
-      className="flex items-center gap-1 text-blue-600 rounded-lg text-sm  "
-    >
-      <Icon icon="ei:plus" className="w-8 h-8  hover:text-blue-400" />
-    </button>
-  );
-};
-
-const DeleteButton: React.FC<OnClick> = ({ onClick }) => {
-  const { t } = useTranslation();
-  return (
-    <button
-      onClick={onClick}
-      title={t("delete_field")}
-      className="flex items-center gap-1 rounded-lg text-sm "
-    >
-      <Icon
-        icon="material-symbols:delete"
-        className="text-red-500 dark:text-red-600 hover:text-red-800 h-7 w-7"
-      />
-    </button>
-  );
-};
-
-interface FormData {
-  name: string;
-  description: string;
-  version: string;
-  baseURL: string;
-  url: string;
-  organizationName: string;
-  projectName: string;
-  customCSS: string;
-  favicon: string;
-  navImageDark: string;
-  navImage: string;
-  copyrightText: string;
-  metaImage: string;
-  gitUser: string | undefined;
-  gitRepo: string | undefined;
-  gitEmail: string | undefined;
-  gitPassword: string | undefined;
-  gitBranch: string | undefined;
-}
-
 type LanderDetailsKeys = keyof LanderDetails;
 
 export default function CreateDocModal() {
+  // Contexts
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [searchParam] = useSearchParams();
-  const docIdString = searchParam.get("id");
-  const docId: number | null = docIdString ? parseInt(docIdString) : null;
-  const mode = searchParam.get("mode");
   const { openModal, closeModal, setLoadingMessage } = useContext(ModalContext);
   const themeContext = useContext(ThemeContext);
   const { darkMode } = themeContext as ThemeContextType;
+
+  // Search Parameters
+  const docIdString = searchParam.get("id");
+  const docId: number | null = docIdString ? parseInt(docIdString) : null;
+  const mode = searchParam.get("mode");
+
+  // State Variables
   const [isAuthenticationToggleOn, SetIsAuthenticationToggleOn] = useState<
     boolean | undefined
   >(false);
-  const [isToggleOn, SetIsToggleOn] = useState<boolean>(false);
-  const [gitDeployOn, SetGitDeployOn] = useState<boolean>(false);
+  const [isToggleOn, SetIsToggleOn] = useState<boolean | undefined>(false);
+  const [gitDeployOn, SetGitDeployOn] = useState<boolean | undefined>(false);
   const [activeFieldIndex, setActiveFieldIndex] = useState<number | null>(null);
   const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-  const titleRef = useRef<HTMLInputElement | null>(null);
   const [openDropdownIndex, setOpenDropdownIndex] = useState<number | null>(
     null,
   );
+  const [isIconSelectOpen, setIsIconSelectOpen] = useState<boolean>(false);
+
+  // Refs
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const titleRef = useRef<HTMLInputElement | null>(null);
+
   const pickerRef = useRef<HTMLDivElement | null>(null);
   const socialMediaRef = useRef<HTMLDivElement | null>(null);
-  const [isIconSelectOpen, setIsIconSelectOpen] = useState<boolean>(false);
 
+  // Form Data
   const [formData, setFormData] = useState<FormData>({
     name: "",
     description: "",
@@ -303,6 +182,7 @@ export default function CreateDocModal() {
   useOutsideAlerter(pickerRef, () => setShowEmojiPicker(false));
 
   useOutsideAlerter(socialMediaRef, () => setIsIconSelectOpen(false));
+
   useEffect(() => {
     if (isToggleOn || gitDeployOn) {
       window.scrollTo({
@@ -377,6 +257,7 @@ export default function CreateDocModal() {
           }
         } else {
           console.error("docId is null");
+          return;
         }
       };
       fetchDoc();
@@ -594,7 +475,7 @@ export default function CreateDocModal() {
 
     if (saveField === "moreFooter") {
       setMoreField(updatedFields as MoreLabelLinks[]);
-    } else {
+    } else if (saveField === "socialPlatform") {
       setSocialPlatformField(updatedFields as FooterLabelLinks[]);
     }
   };
@@ -662,20 +543,11 @@ export default function CreateDocModal() {
             <div className="overflow-auto p-1">
               <div className="space-y-6">
                 <div className="grid gap-4 sm:grid-cols-1">
-                  <label className="inline-flex items-center cursor-pointer gpa-5 mb-4">
-                    <span className="text-lg font-medium text-gray-900 dark:text-gray-300 mr-3">
-                      {t("enableAuthentication")}
-                    </span>
-                    <input
-                      type="checkbox"
-                      checked={isAuthenticationToggleOn}
-                      onChange={(e) => {
-                        SetIsAuthenticationToggleOn(e.target.checked);
-                      }}
-                      className="sr-only peer"
-                    />
-                    <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                  </label>
+                  <ToggleSwitch
+                    name="enableAuthentication"
+                    checked={isAuthenticationToggleOn}
+                    setChange={SetIsAuthenticationToggleOn}
+                  />
                 </div>
                 <div className="grid gap-4 sm:grid-cols-2">
                   <FormField
@@ -944,14 +816,58 @@ export default function CreateDocModal() {
                   {moreField &&
                     moreField.map((obj, index) => (
                       <div key={`more-label-${index}`}>
-                        <LabelAndCommunityComponent
-                          labelId={`more-label-${index}`}
-                          linkId={`more-link-${index}`}
-                          index={index}
-                          data={obj}
-                          state={moreField}
-                          onChange={handleArrayFieldChange}
-                        />
+                        <motion.div
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          exit={{ opacity: 0 }}
+                          className="grid gap-4 grid-cols-2 my-2"
+                          key={`footer-more-field-${index}`}
+                        >
+                          <div>
+                            <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                              {t("label")}
+                            </span>
+                            <input
+                              type="text"
+                              id={`more-label-${index}`}
+                              value={obj?.label || ""}
+                              name={index.toString()}
+                              onChange={(e) =>
+                                handleArrayFieldChange(
+                                  index,
+                                  "label",
+                                  e.target.value,
+                                  moreField,
+                                  "moreFooter",
+                                )
+                              }
+                              placeholder={t("label_placeholder")}
+                              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                            />
+                          </div>
+                          <div>
+                            <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                              {t("link")}
+                            </span>
+                            <input
+                              type="text"
+                              value={obj?.link || ""}
+                              id={`more-link-${index}`}
+                              name={index.toString()}
+                              onChange={(e) =>
+                                handleArrayFieldChange(
+                                  index,
+                                  "link",
+                                  e.target.value,
+                                  moreField,
+                                  "moreFooter",
+                                )
+                              }
+                              placeholder={t("more_footer_link_placeholder")}
+                              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                            />
+                          </div>
+                        </motion.div>
                       </div>
                     ))}
                 </div>
@@ -964,20 +880,11 @@ export default function CreateDocModal() {
               </div>
 
               <div>
-                <label className="inline-flex items-center cursor-pointer gpa-5 mb-4">
-                  <span className="text-lg font-medium text-gray-900 dark:text-gray-300 mr-3">
-                    {t("enable_landing_page")}
-                  </span>
-                  <input
-                    type="checkbox"
-                    checked={isToggleOn}
-                    onChange={(e) => {
-                      SetIsToggleOn(e.target.checked);
-                    }}
-                    className="sr-only peer"
-                  />
-                  <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                </label>
+                <ToggleSwitch
+                  name="enable_landing_page"
+                  checked={isToggleOn}
+                  setChange={SetIsToggleOn}
+                />
 
                 {isToggleOn && (
                   <div className="">
@@ -1147,19 +1054,12 @@ export default function CreateDocModal() {
                 )}
               </div>
 
-              <div className="space-y-4">
-                <Field className="inline-flex items-center space-x-3">
-                  <Label className="text-lg font-medium text-gray-900 dark:text-gray-300 ">
-                    {t("deploy_to_git")}
-                  </Label>
-                  <Switch
-                    checked={gitDeployOn}
-                    onChange={SetGitDeployOn}
-                    className="group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-600 transition data-[checked]:bg-blue-600 dark:data-[checked]:bg-blue-600 "
-                  >
-                    <span className="size-4 translate-x-1 rounded-full bg-white dark:bg-white transition group-data-[checked]:translate-x-6" />
-                  </Switch>
-                </Field>
+              <div className="mt-3 space-y-4">
+                <ToggleSwitch
+                  name="deploy_to_git"
+                  checked={gitDeployOn}
+                  setChange={SetGitDeployOn}
+                />
 
                 {gitDeployOn && (
                   <div className="">
diff --git a/web/src/lib/components/AddButton.tsx b/web/src/lib/components/AddButton.tsx
new file mode 100644
index 0000000..5fa5e1a
--- /dev/null
+++ b/web/src/lib/components/AddButton.tsx
@@ -0,0 +1,21 @@
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslation } from "react-i18next";
+
+/* eslint-disable react/prop-types */
+interface OnClick {
+  onClick: () => Promise<void>;
+}
+const AddButton: React.FC<OnClick> = ({ onClick }) => {
+  const { t } = useTranslation();
+  return (
+    <button
+      title={t("add_new_field")}
+      onClick={onClick}
+      className="flex items-center gap-1 text-blue-600 rounded-lg text-sm  "
+    >
+      <Icon icon="ei:plus" className="w-8 h-8  hover:text-blue-400" />
+    </button>
+  );
+};
+
+export default AddButton;
diff --git a/web/src/lib/components/DeleteButton.tsx b/web/src/lib/components/DeleteButton.tsx
new file mode 100644
index 0000000..1c3ea84
--- /dev/null
+++ b/web/src/lib/components/DeleteButton.tsx
@@ -0,0 +1,25 @@
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslation } from "react-i18next";
+
+/* eslint-disable react/prop-types */
+interface OnClick {
+  onClick: () => Promise<void>;
+}
+
+const DeleteButton: React.FC<OnClick> = ({ onClick }) => {
+  const { t } = useTranslation();
+  return (
+    <button
+      onClick={onClick}
+      title={t("delete_field")}
+      className="flex items-center gap-1 rounded-lg text-sm "
+    >
+      <Icon
+        icon="material-symbols:delete"
+        className="text-red-500 dark:text-red-600 hover:text-red-800 h-7 w-7"
+      />
+    </button>
+  );
+};
+
+export default DeleteButton;
diff --git a/web/src/lib/components/ToggleSwitch.tsx b/web/src/lib/components/ToggleSwitch.tsx
new file mode 100644
index 0000000..e4e86c2
--- /dev/null
+++ b/web/src/lib/components/ToggleSwitch.tsx
@@ -0,0 +1,32 @@
+import { Field, Label, Switch } from "@headlessui/react";
+import { Dispatch, SetStateAction } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ToggleSwitchProps {
+  name: string;
+  checked: boolean | undefined;
+  setChange: Dispatch<SetStateAction<boolean | undefined>>;
+}
+
+export default function ToggleSwitch({
+  name,
+  checked,
+  setChange,
+}: ToggleSwitchProps): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Field className="inline-flex items-center space-x-3">
+      <Label className="text-lg font-medium text-gray-900 dark:text-gray-300 ">
+        {t(name)}
+      </Label>
+      <Switch
+        checked={checked}
+        onChange={setChange}
+        className="group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-600 transition data-[checked]:bg-blue-600 dark:data-[checked]:bg-blue-600"
+      >
+        <span className="size-4 translate-x-1 rounded-full bg-white dark:bg-white transition group-data-[checked]:translate-x-6" />
+      </Switch>
+    </Field>
+  );
+}
diff --git a/web/src/types/doc.ts b/web/src/types/doc.ts
index f0b5adf..8b6dcec 100644
--- a/web/src/types/doc.ts
+++ b/web/src/types/doc.ts
@@ -121,6 +121,38 @@ export interface FormField {
   ref: React.RefObject<HTMLInputElement>;
 }
 
+export interface FormFieldData {
+  label: string;
+  placeholder: string;
+  value?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  name: string;
+  type?: string;
+  required?: boolean;
+  ref?: React.Ref<HTMLInputElement>;
+}
+
+export interface FormData {
+  name: string;
+  description: string;
+  version: string;
+  baseURL: string;
+  url: string;
+  organizationName: string;
+  projectName: string;
+  customCSS: string;
+  favicon: string;
+  navImageDark: string;
+  navImage: string;
+  copyrightText: string;
+  metaImage: string;
+  gitUser: string | undefined;
+  gitRepo: string | undefined;
+  gitEmail: string | undefined;
+  gitPassword: string | undefined;
+  gitBranch: string | undefined;
+}
+
 export function isPage(item: PageOrGroup): item is Page {
   return (item as Page).title !== undefined;
 }