diff --git a/src/App/Container/Assets/Css/main.css b/src/App/Container/Assets/Css/main.css
index ef6823f..351e8f3 100644
--- a/src/App/Container/Assets/Css/main.css
+++ b/src/App/Container/Assets/Css/main.css
@@ -1050,10 +1050,22 @@ video {
   background-color: #162f42;
 }
 
+.bg-bluepindad-300 {
+  background-color: #0078a9
+}
+
 .bg-yellowpindad-100 {
   background-color: #D4AF37;
 }
 
+.bg-orangepindad-100 {
+  background-color: #EC971F
+}
+
+.bg-greenpindad-100 {
+  background-color: #449D44
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index 243cfbb..07bbe90 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -1,25 +1,35 @@
 import React from "react";
 
-export const MainApp = ({ title, children }) => {
+export const MainApp = ({ title, children, button = "" }) => {
   return (
-    <div className="w-full h-full overflow-y-auto">
-      <div className="w-full border-b-2 bg-gray-200">
-        <div className="text-left py-2 pl-6 text-gray-600 text-sm font-semibold">
-          {title}
-        </div>
-      </div>
-      <div className="w-full bg-white">
-        <div className="text-left py-3 px-6">{children}</div>
-      </div>
+    <div className="w-full h-full">
       <div className="w-full">
-        <div className="text-left py-3 px-6">
-          <p className="text-xs text-gray-700 font-semibold">Perhatian :</p>
-          <p className="text-xs text-gray-700 text-justify">
-            This program is protected by copyright law and international
-            treaties. Unauthorized reproduction or distribution of the program,
-            or any portion, may result in civil and criminal penalties, and will
-            be prosecuted to the maximum extent under the law.
-          </p>
+        <div className="w-full border-b-2 bg-gray-200">
+          <div className="flex flex-row justify-between">
+            <div className="text-left py-2 pl-6 text-gray-600 text-sm font-semibold">
+              {title}
+            </div>
+            {button}
+          </div>
+        </div>
+        <div className="w-full bg-white">
+          <div>
+            <div className="text-left py-3 px-6">{children}</div>
+          </div>
+        </div>
+        <div className="w-full">
+          <div>
+            <div className="text-left py-3 px-6">
+              <p className="text-xs text-gray-700 font-semibold">Perhatian :</p>
+              <p className="text-xs text-gray-700 text-justify">
+                This program is protected by copyright law and international
+                treaties. Unauthorized reproduction or distribution of the
+                program, or any portion, may result in civil and criminal
+                penalties, and will be prosecuted to the maximum extent under
+                the law.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 3b5f13a..515f966 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -1,21 +1,92 @@
-import React from "react";
+import React, { useContext } from "react";
 import Table from "./Table";
+import { Modal } from "../../../../../../Components";
+import { GeneralContext } from "../Controller";
+import { MainApp } from "../../../../../../Components";
+import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
-  return (
-    <div className="flex flex-col">
-      <div className="w-full flex flex-col w-4/5 bg-white text-sm">
-        <div className="flex flex-row py-6">
-          <label className="w-1/5 text-right px-4 font-bold">
-            Nama Perusahaan
-          </label>
-          <label className="w-4/5 text-left px-4">PINDAD JAYA</label>
-        </div>
+  const { open, setOpen, _handleSubmit } = useContext(GeneralContext);
+
+  const ButtonMainApp = () => {
+    return (
+      <div className="text-xs mr-6 flex flex-row items-center">
         <div>
-          <Table />
+          <button className="my-0 mr-6">
+            <svg
+              className="fill-current h-3 w-3 text-blue-800"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+            >
+              <path
+                fill="currentColor"
+                d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        {/* <button className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500">
+          <svg
+            className="fill-current h-3 w-3 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 18 18"
+          >
+            <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
+          </svg>
+          <span>Set Primary Data</span>
+        </button> */}
+        <button className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-blue-800">
+          Selesai
+        </button>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600"
+        >
+          <svg
+            className="fill-current w-3 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 5 5"
+          >
+            <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
+          </svg>
+          <span>Buat Entri Baru</span>
+        </button>
+      </div>
+    );
+  };
+
+  return (
+    <MainApp title="PROFIL PERUSAHAAN" button={<ButtonMainApp />}>
+      <div className="flex flex-col">
+        <div className="w-full flex flex-col w-4/5 bg-white text-sm">
+          <div className="flex flex-row py-6">
+            <label className="w-1/5 text-right px-4 font-bold">
+              Nama Perusahaan
+            </label>
+            <label className="w-4/5 text-left px-4">PINDAD JAYA</label>
+          </div>
+          <div>
+            <Table />
+          </div>
         </div>
+        <Modal
+          title="Perusahaan"
+          open={open}
+          width="w-4/5"
+          onClose={() => {
+            setOpen(false);
+          }}
+          onActionOne={() => {
+            setOpen(false);
+          }}
+          onActionTwo={async () => _handleSubmit()}
+          textOne="Batal"
+          textTwo="Simpan"
+        >
+          <ModalComponent />
+        </Modal>
       </div>
-    </div>
+    </MainApp>
   );
 };
 
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
new file mode 100644
index 0000000..edb6faf
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -0,0 +1,526 @@
+import React, { useContext } from "react";
+import { useFormContext } from "react-hook-form";
+import Select from "react-select";
+import { GeneralContext } from "../Controller";
+
+const ModalComponent = () => {
+  const {
+    customStyles,
+    setBranchName,
+    setAddress,
+    country,
+    setCountry,
+    province,
+    setProvince,
+    city,
+    setCity,
+    setDistrict,
+    setPostalCode,
+    setPhoneNumber,
+    setPhoneNumberExt,
+    setFaxNumber,
+    setFaxNumberExt,
+    setWebsite,
+    setCompanyEmail,
+    optionsCompanyType,
+    Indonesia,
+    Yogya,
+    Sleman,
+    register,
+  } = useContext(GeneralContext);
+  const { errors } = useFormContext();
+
+  return (
+    <div className="bg-white">
+      <div className="block text-xs">
+        <div className="py-1 px-4 mt-6">
+          <span className="text-gray-900 text-2xl">Use as Branch Office</span>
+        </div>
+        <form>
+          <div className="w-full">
+            <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
+              <div className="w-full py-4">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full leading-none sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nama Cabang/Lokasi Cabang</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="branchName"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setBranchName(val.target.value)}
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                      placeholder="Nama Cabang/Lokasi Cabang"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    {errors.branchName && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.branchName && errors.branchName.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Alamat</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <textarea
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                      placeholder="Alamat"
+                      name="address"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setAddress(val.target.value)}
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    {errors.address && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.address && errors.address.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Negara</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      className="country"
+                      name="country"
+                      isClearable
+                      onChange={(val) =>
+                        val ? setCountry(val.value) : setCountry("")
+                      }
+                      options={optionsCompanyType}
+                      placeholder="Negara"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errors.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Provinsi</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      className="province"
+                      name="province"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setProvince(val.value) : setProvince("")
+                      }
+                      options={country === "Indonesia" ? Indonesia : null}
+                      placeholder="Provinsi"
+                      isDisabled={country ? false : true}
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errors.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Kota/Kabupaten</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      className="city"
+                      name="city"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      // value={Yogya.find((val) => val.value === city)}
+                      onChange={(val) =>
+                        val ? setCity(val.value) : setCity("")
+                      }
+                      options={Yogya}
+                      placeholder="Kota/Kabupaten"
+                      isDisabled={country && province ? false : true}
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errors.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Kecamatan</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      className="district"
+                      name="district"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setDistrict(val.value) : setDistrict("")
+                      }
+                      options={city === "Sleman" ? Sleman : null}
+                      placeholder="Kecamatan"
+                      isDisabled={country && province && city ? false : true}
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errors.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Kode Pos</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="number"
+                      name="postalCode"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 5,
+                          message: "This input is less than 5 characters",
+                        },
+                        maxLength: {
+                          value: 5,
+                          message: "This input is more than 5 characters",
+                        },
+                        pattern: {
+                          value: /^\d+$/,
+                          message: "This input is number 0-9",
+                        },
+                      })}
+                      onChange={(val) => setPostalCode(val.target.value)}
+                      className="w-full rounded bg-white border border-gray-400 hover:border-gray-500 py-1 px-2 no-arrow"
+                      placeholder="Kode Pos"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    {errors.postalCode && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.postalCode && errors.postalCode.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+              {/* Right */}
+              <div className="w-full py-4">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Telepon</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <input
+                        name="phoneNumber"
+                        ref={register({
+                          required: "This is required",
+                          minLength: {
+                            value: 4,
+                            message: "This input is less than 4 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/g,
+                            message: "This input is number 0-9",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumber(val.target.value)}
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                        placeholder="+62xx-xxxxxxxxxxxx"
+                      />
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        name="phoneNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 4,
+                            message: "This input is less than 4 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      {errors.phoneNumber && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.phoneNumber && errors.phoneNumber.message}
+                        </p>
+                      )}
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      {errors.phoneNumberExt && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.phoneNumberExt &&
+                            errors.phoneNumberExt.message}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Faksimile</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <input
+                        type="number"
+                        name="faxNumber"
+                        ref={register({
+                          minLength: {
+                            value: 4,
+                            message: "This input is less than 4 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
+                          },
+                        })}
+                        onChange={(val) => setFaxNumber(val.target.value)}
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2 no-arrow"
+                        placeholder="Nomor Faksimile"
+                      />
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        type="number"
+                        name="faxNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 4,
+                            message: "This input is less than 4 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
+                          },
+                        })}
+                        onChange={(val) => setFaxNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2 no-arrow"
+                        placeholder="Ext."
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      {errors.faxNumber && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.faxNumber && errors.faxNumber.message}
+                        </p>
+                      )}
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      {errors.faxNumberExt && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.faxNumberExt && errors.faxNumberExt.message}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Situs</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="website"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setWebsite(val.target.value)}
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                      placeholder="example.com"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    {errors.website && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.website && errors.website.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>E-mail Perusahaan</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="companyEmail"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setCompanyEmail(val.target.value)}
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                      placeholder="me@example.com"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    {errors.companyEmail && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.companyEmail && errors.companyEmail.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ModalComponent;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
index fa1398c..74d0c84 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import "../../../../../../Assets/Css/App.css";
+import { HomeContext } from "../../../Controller";
 
 const Table = () => {
+  const { generalList } = useContext(HomeContext);
+  console.log("CEK", generalList);
+
   return (
     <div>
       <table className="w-full">
@@ -28,17 +32,22 @@ const Table = () => {
           </tr>
         </thead>
         <tbody>
+          {/* {generalList &&
+            generalList.map((e: any, i: any) => (
+              <Fragment key={i}> */}
           <tr className="hover:bg-gray-200">
             <td
               className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
               rowSpan={13}
             >
-              1.
+              {/* {i + 1} */}1
             </td>
             <td className="border border-gray-400 py-1 px-4">
               Nama Perusahaan
             </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.companyName} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4">Dipersiapkan</td>
             <td
@@ -66,49 +75,65 @@ const Table = () => {
             <td className="border border-gray-400 py-1 px-4">
               Kategori Lokasi
             </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.address} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
           <tr className="hover:bg-gray-200">
             <td className="border border-gray-400 py-1 px-4">Negara</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.county} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
           <tr className="hover:bg-gray-200">
             <td className="border border-gray-400 py-1 px-4">Provinsi</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.province} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
           <tr className="hover:bg-gray-200">
             <td className="border border-gray-400 py-1 px-4">Kota</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.city} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
           <tr className="hover:bg-gray-200">
             <td className="border border-gray-400 py-1 px-4">Kecamatan</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.district} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
           <tr className="hover:bg-gray-200">
             <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.postalCode} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
           <tr className="hover:bg-gray-200">
             <td className="border border-gray-400 py-1 px-4">alamat</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.address} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
           <tr className="hover:bg-gray-200">
             <td className="border border-gray-400 py-1 px-4">Nomor Telepon</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.phoneNumber} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
@@ -116,13 +141,17 @@ const Table = () => {
             <td className="border border-gray-400 py-1 px-4">
               Nomor Faksimile
             </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.faxNumber} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
           <tr className="hover:bg-gray-200">
             <td className="border border-gray-400 py-1 px-4">Situs</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.website} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
@@ -130,7 +159,9 @@ const Table = () => {
             <td className="border border-gray-400 py-1 px-4">
               E-mail Perusahaan
             </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.eMail} */}
+            </td>
             <td className="border border-gray-400 py-1 px-4"></td>
             <td className="border border-gray-400 py-1 px-4"></td>
           </tr>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
new file mode 100644
index 0000000..9e515a6
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -0,0 +1,319 @@
+import React, { createContext, useState, useEffect } from "react";
+import { useForm, FormContext } from "react-hook-form";
+import { getToken } from "../../../../../../Misc/Cookies";
+import { INSERT_VENDOR_CONTACT } from "./Query";
+import { useMutation } from "react-apollo";
+
+interface InitialState {
+  customStyles: object;
+  _isLogin: string | null;
+  open: boolean;
+  setOpen: Function;
+  optionsCompanyType: Array<object>;
+  Indonesia: Array<object>;
+  Yogya: Array<object>;
+  Sleman: Array<object>;
+  branchName: string;
+  address: string;
+  country: string;
+  province: string;
+  city: string;
+  district: string;
+  postalCode: string;
+  phoneNumber: string;
+  phoneNumberExt: string;
+  faxNumber: string;
+  faxNumberExt: string;
+  website: string;
+  companyEmail: string;
+  setBranchName: Function;
+  setAddress: Function;
+  setCountry: Function;
+  setProvince: Function;
+  setCity: Function;
+  setDistrict: Function;
+  setPostalCode: Function;
+  setPhoneNumber: Function;
+  setPhoneNumberExt: Function;
+  setFaxNumber: Function;
+  setFaxNumberExt: Function;
+  setCompanyEmail: Function;
+  setWebsite: Function;
+  _handleCountry: Function;
+  _handleProvince: Function;
+  _handleCity: Function;
+  _handleDistrict: Function;
+  _handleSubmit: Function;
+  register: Function;
+}
+
+const initialState = {
+  customStyles: {},
+  _isLogin: null,
+  open: false,
+  setOpen: () => {},
+  register: () => {},
+  optionsCompanyType: [{}],
+  Indonesia: [{}],
+  Yogya: [{}],
+  Sleman: [{}],
+  branchName: "",
+  setBranchName: () => {},
+  address: "",
+  setAddress: () => {},
+  country: "",
+  setCountry: () => {},
+  province: "",
+  setProvince: () => {},
+  city: "",
+  setCity: () => {},
+  district: "",
+  setDistrict: () => {},
+  postalCode: "",
+  setPostalCode: () => {},
+  phoneNumber: "",
+  setPhoneNumber: () => {},
+  phoneNumberExt: "",
+  setPhoneNumberExt: () => {},
+  faxNumber: "",
+  setFaxNumber: () => {},
+  faxNumberExt: "",
+  setFaxNumberExt: () => {},
+  companyEmail: "",
+  setCompanyEmail: () => {},
+  website: "",
+  setWebsite: () => {},
+  _handleCountry: () => {},
+  _handleProvince: () => {},
+  _handleCity: () => {},
+  _handleDistrict: () => {},
+  _handleSubmit: () => {},
+};
+
+export const GeneralContext = createContext<InitialState>(initialState);
+
+export const {
+  Provider: GeneralProvider,
+  Consumer: GeneralConsumer,
+} = GeneralContext;
+
+export const GeneralController = ({ children }) => {
+  const _isLogin = getToken();
+  const [open, setOpen] = useState(false);
+  const [branchName, setBranchName] = useState("");
+  const [address, setAddress] = useState("");
+  const [country, setCountry] = useState("");
+  const [province, setProvince] = useState("");
+  const [city, setCity] = useState("");
+  const [district, setDistrict] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [phoneNumberExt, setPhoneNumberExt] = useState("");
+  const [faxNumber, setFaxNumber] = useState("");
+  const [faxNumberExt, setFaxNumberExt] = useState("");
+  const [website, setWebsite] = useState("");
+  const [companyEmail, setCompanyEmail] = useState("");
+
+  const optionsCompanyType = [
+    {
+      label: "10 dari 255 (harap ketik untuk memfilter)",
+      isDisabled: true,
+    },
+    { value: "Indonesia", label: "Indonesia" },
+  ];
+  const Indonesia = [{ value: "Yogyakarta", label: "Yogyakarta" }];
+  const Yogya = [{ value: "Sleman", label: "Sleman" }];
+  const Sleman = [{ value: "Ngaglik", label: "Ngaglik" }];
+  const customStyles = {
+    control: (base) => ({
+      ...base,
+      height: 32,
+      minHeight: 32,
+    }),
+  };
+
+  // FormContext
+  const methods = useForm({
+    mode: "onChange",
+  });
+  const { register, setValue, triggerValidation } = methods;
+
+  useEffect(() => {
+    register(
+      { name: "business_type" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [register]);
+
+  useEffect(() => {
+    register(
+      { name: "country" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [register]);
+
+  useEffect(() => {
+    register(
+      { name: "province" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [register]);
+
+  useEffect(() => {
+    register(
+      { name: "city" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [register]);
+
+  useEffect(() => {
+    register(
+      { name: "district" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [register]);
+
+  const _handleCountry = (e: any) => {
+    setCountry(e && e.value);
+    setValue("country", e && e.value);
+    triggerValidation("country");
+  };
+
+  const _handleProvince = (e: any) => {
+    setProvince(e && e.value);
+    setValue("province", e && e.value);
+    triggerValidation("province");
+  };
+
+  const _handleCity = (e: any) => {
+    setCity(e && e.value);
+    setValue("city", e && e.value);
+    triggerValidation("city");
+  };
+
+  const _handleDistrict = (e: any) => {
+    setDistrict(e && e.value);
+    setValue("district", e && e.value);
+    triggerValidation("district");
+  };
+
+  const val = [
+    "branchName",
+    "address",
+    "country",
+    "province",
+    "city",
+    "district",
+    "postalCode",
+    "phoneNumber",
+    "phoneNumberExt",
+    "faxNumber",
+    "faxNumberExt",
+    "website",
+    "companyEmail",
+  ];
+
+  // Add
+  const [submitAdd] = useMutation(INSERT_VENDOR_CONTACT, {
+    errorPolicy: "all",
+  });
+
+  const _handleSubmit = async () => {
+    if (await triggerValidation(val)) {
+      try {
+        await submitAdd({
+          variables: {
+            company_name: branchName,
+            address,
+            country,
+            province,
+            city,
+            district,
+            postal_code: postalCode,
+            phone_number: phoneNumber,
+            website,
+            e_mail: companyEmail,
+          },
+        });
+      } catch (error) {}
+    } else {
+      console.log("Gagal");
+    }
+  };
+
+  return (
+    <FormContext {...methods}>
+      <GeneralProvider
+        value={{
+          customStyles,
+          _isLogin,
+          open,
+          setOpen,
+          optionsCompanyType,
+          Indonesia,
+          Yogya,
+          Sleman,
+          branchName,
+          address,
+          country,
+          province,
+          city,
+          district,
+          postalCode,
+          phoneNumber,
+          phoneNumberExt,
+          faxNumber,
+          faxNumberExt,
+          website,
+          companyEmail,
+          setBranchName,
+          setAddress,
+          setCountry,
+          setProvince,
+          setCity,
+          setDistrict,
+          setPostalCode,
+          setPhoneNumber,
+          setPhoneNumberExt,
+          setFaxNumber,
+          setFaxNumberExt,
+          setCompanyEmail,
+          setWebsite,
+          _handleCountry,
+          _handleProvince,
+          _handleCity,
+          _handleDistrict,
+          _handleSubmit,
+          register,
+        }}
+      >
+        {children}
+      </GeneralProvider>
+    </FormContext>
+  );
+};
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts b/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts
new file mode 100644
index 0000000..e563fb6
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts
@@ -0,0 +1,49 @@
+import gql from "graphql-tag";
+
+export const GENERAL_LIST = gql`
+  {
+    GetVendorContacts {
+      id
+      companyName
+      address
+      county
+      province
+      city
+      district
+      phoneNumber
+      faxNumber
+      website
+      eMail
+    }
+  }
+`;
+
+export const INSERT_VENDOR_CONTACT = gql`
+  mutation(
+    $company_name: String
+    $address: String
+    $country: String
+    $province: String
+    $city: String
+    $district: String
+    $postal_code: Int
+    $phone_number: String
+    $website: String
+    $e_mail: String
+  ) {
+    InsertVendorContact(
+      data: {
+        company_name: $company_name
+        address: $address
+        country: $country
+        province: $province
+        city: $city
+        district: $district
+        postal_code: $postal_code
+        phone_number: $phone_number
+        website: $website
+        e_mail: $e_mail
+      }
+    )
+  }
+`;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index 47a1713..c7c1e5b 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import { MainApp } from "../../../../../Components";
 import GeneralComponent from "./Component/General";
+import { GeneralController } from "./Controller";
 
 const General = () => {
   return (
-    <MainApp title="PROFIL PERUSAHAAN">
+    <GeneralController>
       <GeneralComponent />
-    </MainApp>
+    </GeneralController>
   );
 };
 
diff --git a/src/App/Container/Views/Private/VendorProfile/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Controller.tsx
index 60bdce9..f809a34 100644
--- a/src/App/Container/Views/Private/VendorProfile/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Controller.tsx
@@ -1,9 +1,21 @@
-import React from 'react'
-
-export const HomeController = () => {
-    return (
-        <div>
-            Home Controller
-        </div>
-    )
+import React, { createContext } from "react";
+import { useQuery } from "react-apollo";
+import { GENERAL_LIST } from "../VendorProfile/Component/General/Query";
+
+interface InitialState {
+  generalList: object;
 }
+
+const initialState = {
+  generalList: {},
+};
+
+export const HomeContext = createContext<InitialState>(initialState);
+
+export const { Provider: HomeProvider, Consumer: HomeConsumer } = HomeContext;
+
+export const HomeController = ({ children }) => {
+  const { data: generalList } = useQuery(GENERAL_LIST);
+
+  return <HomeProvider value={{ generalList }}>{children}</HomeProvider>;
+};
diff --git a/src/App/Container/Views/Public/Registration/Component/Registration.tsx b/src/App/Container/Views/Public/Registration/Component/Registration.tsx
index d8675f7..97a98a6 100644
--- a/src/App/Container/Views/Public/Registration/Component/Registration.tsx
+++ b/src/App/Container/Views/Public/Registration/Component/Registration.tsx
@@ -553,12 +553,12 @@ const RegistrationComponent = () => {
                     ref={register({
                       required: "This is required",
                       minLength: {
-                        value: 4,
-                        message: "This input is less than 4 characters",
+                        value: 5,
+                        message: "This input is less than 5 characters",
                       },
                       maxLength: {
-                        value: 30,
-                        message: "This input is more than 30 characters",
+                        value: 5,
+                        message: "This input is more than 5 characters",
                       },
                       pattern: {
                         value: /^\d+$/,
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 34c568a..325fbac 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -15,7 +15,7 @@ import {
   TermCondition,
   UserManual,
 } from "./App/Container/Views/Public/index";
-import { VendorProfile,ChangePassword,Beranda } from "./App/Container/Views/Private/index";
+import { ChangePassword, Beranda } from "./App/Container/Views/Private/index";
 import { PublicHeader, PublicSidebar } from "./App/Layout/Public/index";
 import { PrivateSidebar } from "./App/Layout/Private/index";
 import history from "./App/Misc/BrowserHistory";
@@ -103,12 +103,8 @@ const Routes = () => {
                 path="/registration"
                 component={Registration}
               />
+              <PrivateRoute exact path="/vendor" component={Beranda} />
               <PrivateRoute
-                exact
-                path="/vendor"
-                component={Beranda}
-              />
-               <PrivateRoute
                 exact
                 path="/vendor/password_updates"
                 component={ChangePassword}