diff --git a/package-lock.json b/package-lock.json
index 432997c76366a2e7b51c296bf8fa931da096be08..498902492949887e658cd0c052a769cf398b84c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2209,9 +2209,9 @@
       "dev": true
     },
     "@types/babel__core": {
-      "version": "7.1.12",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.12.tgz",
-      "integrity": "sha512-wMTHiiTiBAAPebqaPiPDLFA4LYPKr6Ph0Xq/6rq1Ur3v66HXyG+clfR9CNETkD7MQS8ZHvpQOtA53DLws5WAEQ==",
+      "version": "7.1.14",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.14.tgz",
+      "integrity": "sha512-zGZJzzBUVDo/eV6KgbE0f0ZI7dInEYvo12Rb70uNQDshC3SkRMb67ja0GgRHZgAX3Za6rhaWlvbDO8rrGyAb1g==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.1.0",
@@ -2241,9 +2241,9 @@
       }
     },
     "@types/babel__traverse": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.11.0.tgz",
-      "integrity": "sha512-kSjgDMZONiIfSH1Nxcr5JIRMwUetDki63FSQfpTCz8ogF3Ulqm8+mr5f78dUYs6vMiB6gBusQqfQmBvHZj/lwg==",
+      "version": "7.11.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.11.1.tgz",
+      "integrity": "sha512-Vs0hm0vPahPMYi9tDjtP66llufgO3ST16WXaSTtDGEl9cewAl3AibmxWw6TINOqHPT9z0uABKAYjT9jNSg4npw==",
       "dev": true,
       "requires": {
         "@babel/types": "^7.3.0"
@@ -2751,6 +2751,12 @@
       "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
       "dev": true
     },
+    "astral-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
+      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
+      "dev": true
+    },
     "async-each": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
@@ -7310,39 +7316,6 @@
         "@jest/core": "^25.5.4",
         "import-local": "^3.0.2",
         "jest-cli": "^25.5.4"
-      }
-    },
-    "jest-changed-files": {
-      "version": "25.5.0",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-25.5.0.tgz",
-      "integrity": "sha512-EOw9QEqapsDT7mKF162m8HFzRPbmP8qJQny6ldVOdOVBz3ACgPm/1nAn5fPQ/NDaYhX/AHkrGwwkCncpAVSXcw==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^25.5.0",
-        "execa": "^3.2.0",
-        "throat": "^5.0.0"
-      }
-    },
-    "jest-cli": {
-      "version": "25.5.4",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-25.5.4.tgz",
-      "integrity": "sha512-rG8uJkIiOUpnREh1768/N3n27Cm+xPFkSNFO91tgg+8o2rXeVLStz+vkXkGr4UtzH6t1SNbjwoiswd7p4AhHTw==",
-      "dev": true,
-      "requires": {
-        "@jest/core": "^25.5.4",
-        "@jest/test-result": "^25.5.0",
-        "@jest/types": "^25.5.0",
-        "chalk": "^3.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "import-local": "^3.0.2",
-        "is-ci": "^2.0.0",
-        "jest-config": "^25.5.4",
-        "jest-util": "^25.5.0",
-        "jest-validate": "^25.5.0",
-        "prompts": "^2.0.1",
-        "realpath-native": "^2.0.0",
-        "yargs": "^15.3.1"
       },
       "dependencies": {
         "ansi-styles": {
@@ -7385,6 +7358,28 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "jest-cli": {
+          "version": "25.5.4",
+          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-25.5.4.tgz",
+          "integrity": "sha512-rG8uJkIiOUpnREh1768/N3n27Cm+xPFkSNFO91tgg+8o2rXeVLStz+vkXkGr4UtzH6t1SNbjwoiswd7p4AhHTw==",
+          "dev": true,
+          "requires": {
+            "@jest/core": "^25.5.4",
+            "@jest/test-result": "^25.5.0",
+            "@jest/types": "^25.5.0",
+            "chalk": "^3.0.0",
+            "exit": "^0.1.2",
+            "graceful-fs": "^4.2.4",
+            "import-local": "^3.0.2",
+            "is-ci": "^2.0.0",
+            "jest-config": "^25.5.4",
+            "jest-util": "^25.5.0",
+            "jest-validate": "^25.5.0",
+            "prompts": "^2.0.1",
+            "realpath-native": "^2.0.0",
+            "yargs": "^15.3.1"
+          }
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7396,6 +7391,17 @@
         }
       }
     },
+    "jest-changed-files": {
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-25.5.0.tgz",
+      "integrity": "sha512-EOw9QEqapsDT7mKF162m8HFzRPbmP8qJQny6ldVOdOVBz3ACgPm/1nAn5fPQ/NDaYhX/AHkrGwwkCncpAVSXcw==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^25.5.0",
+        "execa": "^3.2.0",
+        "throat": "^5.0.0"
+      }
+    },
     "jest-config": {
       "version": "25.5.4",
       "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-25.5.4.tgz",
@@ -14448,14 +14454,6 @@
       "requires": {
         "astral-regex": "^1.0.0",
         "strip-ansi": "^5.2.0"
-      },
-      "dependencies": {
-        "astral-regex": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-          "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
-          "dev": true
-        }
       }
     },
     "string-width": {
diff --git a/src/__test__/bank/EditBank.test.js b/src/__test__/bank/EditBank.test.js
index b3259c353232d0c4aed8b19cf45541d803d80308..4fd19d676be468ad3672cdb001875df7ee47a343 100644
--- a/src/__test__/bank/EditBank.test.js
+++ b/src/__test__/bank/EditBank.test.js
@@ -74,3 +74,27 @@ test("Test edit bank error", async () => {
   expect(bank.textContent).toContain("Error !, Data tidak dapat disimpan");
   expect(fetch.mock.calls.length).toEqual(2);
 });
+
+test("Test edit bank required marks", async () => {
+  fetch
+  .once(
+    JSON.stringify({
+      id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
+      bank_name: "bca",
+      bank_account_number: "1234456",
+      bank_account_name: "test bca",
+    })
+  )
+  .once(JSON.stringify({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditBank />
+    </AuthContext.Provider>
+  );
+  const waitBank = getByTestId("waiting-edit-bank");
+  expect(waitBank.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-bank"));
+  const formBank = getByTestId("form-bank");
+  expect(formBank.textContent).toContain("* Perlu diisi", "Nama bank*", "Nomor rekening*", "Nama pemilik rekening*");
+});
\ No newline at end of file
diff --git a/src/__test__/bank/TambahBank.test.js b/src/__test__/bank/TambahBank.test.js
index 089a9b45e16be735e55fb2ff779faf3f272d5f89..27d7770a906cfa0b42801d6b5ad31addf1478220 100644
--- a/src/__test__/bank/TambahBank.test.js
+++ b/src/__test__/bank/TambahBank.test.js
@@ -23,3 +23,13 @@ test("Test tambah bank renders", async () => {
   });
   expect(fetch.mock.calls.length).toEqual(0);
 });
+
+test("Test tambah bank required marks", async () => {
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahBank />
+    </AuthContext.Provider>
+  );
+  const formBank = getByTestId("tambah-bank");
+  expect(formBank.textContent).toContain("* Perlu diisi", "Nama bank*", "Nomor rekening*", "Nama pemilik rekening*");
+});
\ No newline at end of file
diff --git a/src/__test__/kategori/EditKategori.test.js b/src/__test__/kategori/EditKategori.test.js
index 08ad8ac15d0a40c4e9066433dfa90d00b98f76d8..d20633fa23c48101ef06af2158e6e60c0033fad3 100644
--- a/src/__test__/kategori/EditKategori.test.js
+++ b/src/__test__/kategori/EditKategori.test.js
@@ -72,3 +72,26 @@ test("Test Edit kategori error", async () => {
   expect(category.textContent).toContain("Error !, Data tidak dapat disimpan");
   expect(fetch.mock.calls.length).toEqual(2);
 });
+
+test("Test edit kategori required marks", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+        name: "Baju",
+        image: null,
+      })
+    )
+    .once(JSON.stringify({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditKategori />
+    </AuthContext.Provider>
+  );
+  const waitKategori = getByTestId("waiting-edit-kategori");
+  expect(waitKategori.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-kategori"));
+  const formKategori = getByTestId("edit-kategori");
+  expect(formKategori.textContent).toContain("* Perlu diisi", "Nama kategori*");
+});
\ No newline at end of file
diff --git a/src/__test__/kategori/TambahKategori.test.js b/src/__test__/kategori/TambahKategori.test.js
index fed5dc6ffd8f427400ed0d233811e6d4672c0c6f..2eff26f3cf38e01337e2b1f2a38afe46bcfe0583 100644
--- a/src/__test__/kategori/TambahKategori.test.js
+++ b/src/__test__/kategori/TambahKategori.test.js
@@ -58,3 +58,13 @@ test("Test tambah kategori error", async () => {
   expect(category.textContent).toContain("Error !, Data tidak dapat disimpan");
   expect(fetch.mock.calls.length).toEqual(1);
 });
+
+test("Test tambah kategori required marks", async () => {
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahKategori />
+    </AuthContext.Provider>
+  );
+  const formKategori = getByTestId("tambah-kategori");
+  expect(formKategori.textContent).toContain("* Perlu diisi", "Nama kategori*");
+});
\ No newline at end of file
diff --git a/src/__test__/produk/TambahProduk.test.js b/src/__test__/produk/TambahProduk.test.js
index b730cf3eaea22673c444480e59656eb94a8ba27b..79208a5f23b5b89b9f2c76bde8ee272f63c21fbe 100644
--- a/src/__test__/produk/TambahProduk.test.js
+++ b/src/__test__/produk/TambahProduk.test.js
@@ -438,4 +438,72 @@ test("Test modal produk required", async () => {
   const formCategory = getByTestId("form-produk");
   expect(formCategory.textContent).toContain("Modal tidak boleh kosong");
   expect(fetch.mock.calls.length).toEqual(3);
+});
+
+test("Test tambah produk required marks", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        count: 4,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            name: "Baju",
+            image: null,
+          },
+          {
+            id: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
+            name: "Mainan",
+            image: null,
+          },
+          {
+            id: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
+            name: "Makanan",
+            image: null,
+          },
+          {
+            id: "b8a9909b-9131-4c2b-bcc5-6bceb18f702c",
+            name: "Minuman",
+            image: null,
+          },
+        ],
+      })
+    )
+    .once(
+      JSON.stringify({
+        count: 7,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "626aa022-50a7-4d3a-b658-79cb0f059b03",
+            name: "Baju Tidur hehe",
+            category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            category_name: "Baju",
+            image: null,
+          },
+          {
+            id: "ab222bb8-46e4-40bb-bd47-7f546d356de1",
+            name: "joker baru",
+            category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            category_name: "Baju",
+            image: null,
+          },
+        ],
+      })
+    )
+    .once(JSON.stringify({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahProduk />
+    </AuthContext.Provider>
+  );
+  await act(async () => {
+    await fireEvent.submit(getByTestId("submit-produk"));
+  });
+  const formProduk = getByTestId("tambah-produk");
+  expect(formProduk.textContent).toContain("* Perlu diisi", "Nama Produk*", "Kategori*", "Subkategori*", "Deskripsi Produk*", "Modal/satuan*", "Harga/satuan*", "Satuan*", "Stok*");
 });
\ No newline at end of file
diff --git a/src/__test__/program/TambahProgram.test.js b/src/__test__/program/TambahProgram.test.js
index db22db1224f407e2b0d5f4a9e8e11f1d69c431c9..bea84fea6cce471c06bcc46863c6b848f92f876b 100644
--- a/src/__test__/program/TambahProgram.test.js
+++ b/src/__test__/program/TambahProgram.test.js
@@ -71,3 +71,13 @@ test("Test tambah program renders", async () => {
   });
   expect(fetch.mock.calls.length).toEqual(1);
 });
+
+test("Test tambah program required marks", async () => {
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahProgram />
+    </AuthContext.Provider>
+  );
+  const formProgram = getByTestId("tambah-program");
+  expect(formProgram.textContent).toContain("* Perlu diisi", "Nama program*", "Deskripsi*", "Donasi*", "Tanggal dan waktu mulai*", "Tanggal dan waktu berakhir");
+});
\ No newline at end of file
diff --git a/src/__test__/subkategori/EditSubCategory.test.js b/src/__test__/subkategori/EditSubCategory.test.js
index e6b63a724b88ef13b0cf5ee1bed4b8e00525d2f8..de27d84d04fbea79e903b4b2fa83befe9f27db3d 100644
--- a/src/__test__/subkategori/EditSubCategory.test.js
+++ b/src/__test__/subkategori/EditSubCategory.test.js
@@ -147,3 +147,53 @@ test("Test Edit subkategori error", async () => {
   );
   expect(fetch.mock.calls.length).toEqual(3);
 });
+
+test("Test edit subkategori required marks", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        id: "cbc3dcdd-98e2-459f-b244-6f07819dda8a",
+        name: "avengers endgame",
+        category: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
+        category_name: "Mainan",
+        image:
+          "https://industripilar-api-staging.s3.amazonaws.com/media/uploads/subcategories/1_txtcYocQEGtOFN33ZCTDbw.png",
+      })
+    )
+    .once(
+      JSON.stringify({
+        count: 3,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            name: "Baju",
+            image: null,
+          },
+          {
+            id: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
+            name: "Mainan",
+            image: null,
+          },
+          {
+            id: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
+            name: "Makanan",
+            image: null,
+          },
+        ],
+      })
+    )
+    .once(JSON.stringify({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditSubkategori />
+    </AuthContext.Provider>
+  );
+  const waitSubkategori = getByTestId("waiting-edit-subkategori");
+  expect(waitSubkategori.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-subkategori"));
+  const formSub = getByTestId("edit-subkategori");
+  expect(formSub.textContent).toContain("* Perlu diisi", "Nama subkategori*", "Kategori *");
+});
\ No newline at end of file
diff --git a/src/__test__/subkategori/TambahSubCategory.test.js b/src/__test__/subkategori/TambahSubCategory.test.js
index e8a888e1cb57fd04f2d4e9e3569a711044d5e46e..d4bf6af8fb025ba843a5fb84d4e89274147526b3 100644
--- a/src/__test__/subkategori/TambahSubCategory.test.js
+++ b/src/__test__/subkategori/TambahSubCategory.test.js
@@ -174,3 +174,41 @@ test("Test tambah subkategori form error", async () => {
     "Error loading form !, Please relogin.."
   );
 });
+
+test("Test tambah subkategori required marks", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        count: 3,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            name: "Baju",
+            image: null,
+          },
+          {
+            id: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
+            name: "Mainan",
+            image: null,
+          },
+          {
+            id: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
+            name: "Makanan",
+            image: null,
+          },
+        ],
+      })
+    )
+    .once(JSON.stringify({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahSubkategori />
+    </AuthContext.Provider>
+  );
+  await waitFor(() => getByTestId("category-subcategory-input"));
+  const formSub = getByTestId("tambah-subkategori");
+  expect(formSub.textContent).toContain("* Perlu diisi", "Nama subkategori*", "Kategori*");
+});
\ No newline at end of file
diff --git a/src/page/bank/FormBank.jsx b/src/page/bank/FormBank.jsx
index 8239bd90941149375b067796d003873d2cccffb3..7c8fecb90bb8cdd713b988f54234d72ae0de44b0 100644
--- a/src/page/bank/FormBank.jsx
+++ b/src/page/bank/FormBank.jsx
@@ -1,77 +1,88 @@
-import React from "react";
-import { useForm } from "react-hook-form";
-import {
-  ErrorDiv,
-  RowInput,
-  InputForm,
-  LabelInput,
-  InputSubmitForm,
-} from "../../component/html/html";
-import { css } from "@emotion/core";
-
-const FormBank = ({ onSubmit, initialData = null }) => {
-  const { register, handleSubmit, errors } = useForm({
-    defaultValues:
-      initialData !== null
-        ? {
-            bank_name: initialData["bank_name"],
-            bank_account_number: initialData["bank_account_number"],
-            bank_account_name: initialData["bank_account_name"],
-          }
-        : {},
-  });
-  return (
-    <form
-      data-testid="form-bank"
-      onSubmit={handleSubmit(onSubmit)}
-      css={css`
-        display: flex;
-        flex-direction: column;
-      `}
-    >
-      <RowInput>
-        <LabelInput htmlFor="bank_name">Nama bank</LabelInput>
-        <InputForm
-          data-testid="name-bank-input"
-          name="bank_name"
-          ref={register({ required: true })}
-        />
-        {errors.bank_name && <ErrorDiv>Nama bank tidak boleh kosong</ErrorDiv>}
-      </RowInput>
-      <RowInput>
-        <LabelInput htmlFor="account_number">Nomor rekening</LabelInput>
-        <InputForm
-          data-testid="account-number-input"
-          name="bank_account_number"
-          ref={register({ required: true })}
-        />
-        {errors.bank_account_number && (
-          <ErrorDiv>Nomor rekening tidak boleh kosong</ErrorDiv>
-        )}
-      </RowInput>
-      <RowInput>
-        <LabelInput htmlFor="account_name">Nama pemilik rekening</LabelInput>
-        <InputForm
-          data-testid="account-name-input"
-          name="bank_account_name"
-          ref={register({ required: true })}
-        />
-        {errors.bank_account_name && (
-          <ErrorDiv>Nama pemilik rekening tidak boleh kosong</ErrorDiv>
-        )}
-      </RowInput>
-      <RowInput>
-        <InputSubmitForm
-          type="submit"
-          data-testid="submit-bank"
-          value="SUBMIT"
-          css={css`
-            height: 100%;
-          `}
-        />
-      </RowInput>
-    </form>
-  );
-};
-
-export default FormBank;
+import React from "react";
+import { useForm } from "react-hook-form";
+import {
+  ErrorDiv,
+  RowInput,
+  InputForm,
+  LabelInput,
+  InputSubmitForm,
+} from "../../component/html/html";
+import { css } from "@emotion/core";
+
+const FormBank = ({ onSubmit, initialData = null }) => {
+  const { register, handleSubmit, errors } = useForm({
+    defaultValues:
+      initialData !== null
+        ? {
+            bank_name: initialData["bank_name"],
+            bank_account_number: initialData["bank_account_number"],
+            bank_account_name: initialData["bank_account_name"],
+          }
+        : {},
+  });
+  return (
+    <form
+      data-testid="form-bank"
+      onSubmit={handleSubmit(onSubmit)}
+      css={css`
+        display: flex;
+        flex-direction: column;
+      `}
+    >
+      <div
+      css={css`
+        font-size: 15px;
+        color:red;
+      `}>
+        * Perlu diisi
+      </div>
+      <RowInput>
+        <LabelInput htmlFor="bank_name">Nama bank
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="name-bank-input"
+          name="bank_name"
+          ref={register({ required: true })}
+        />
+        {errors.bank_name && <ErrorDiv>Nama bank tidak boleh kosong</ErrorDiv>}
+      </RowInput>
+      <RowInput>
+        <LabelInput htmlFor="account_number">Nomor rekening
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="account-number-input"
+          name="bank_account_number"
+          ref={register({ required: true })}
+        />
+        {errors.bank_account_number && (
+          <ErrorDiv>Nomor rekening tidak boleh kosong</ErrorDiv>
+        )}
+      </RowInput>
+      <RowInput>
+        <LabelInput htmlFor="account_name">Nama pemilik rekening
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="account-name-input"
+          name="bank_account_name"
+          ref={register({ required: true })}
+        />
+        {errors.bank_account_name && (
+          <ErrorDiv>Nama pemilik rekening tidak boleh kosong</ErrorDiv>
+        )}
+      </RowInput>
+
+      <RowInput>
+        <InputSubmitForm
+          type="submit"
+          data-testid="submit-bank"
+          value="SUBMIT"
+          css={css`
+            height: 100%;
+          `}
+        />
+      </RowInput>
+    </form>
+  );
+};
+
+export default FormBank;
diff --git a/src/page/kategori/FormKategori.jsx b/src/page/kategori/FormKategori.jsx
index 58b15eef49f0c91355516a22339909ae74add6c9..6b02924a94f118036192badad7d0df87a91d839a 100644
--- a/src/page/kategori/FormKategori.jsx
+++ b/src/page/kategori/FormKategori.jsx
@@ -22,8 +22,16 @@ const FormKategori = ({ onSubmit, initialData = null }) => {
         flex-direction: column;
       `}
     >
+      <div
+      css={css`
+        font-size: 15px;
+        color:red;
+      `}>
+        * Perlu diisi
+      </div>
       <RowInput>
-        <LabelInput htmlFor="name">Nama kategori </LabelInput>
+        <LabelInput htmlFor="name">Nama kategori
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="name-kategori-input"
           name="name"
diff --git a/src/page/produk/FormProduk.jsx b/src/page/produk/FormProduk.jsx
index f0b3f00e8ae3f9eedb95eaa66074d6ee2fa7f194..96358e87d3d7f0265d22fc1548e411f88811a220 100644
--- a/src/page/produk/FormProduk.jsx
+++ b/src/page/produk/FormProduk.jsx
@@ -73,8 +73,16 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
             <ErrorDiv>Error loading form !, Please relogin..</ErrorDiv>
           ))}
       </div>
+      <div
+      css={css`
+        font-size: 15px;
+        color:red;
+      `}>
+        * Perlu diisi
+      </div>
       <RowInput>
-        <LabelInput htmlFor="name">Nama Produk </LabelInput>
+        <LabelInput htmlFor="name">Nama Produk
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="name-produk-input"
           name="name"
@@ -84,7 +92,8 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
       </RowInput>
       {results === undefined || Object.keys(results).length === 0 ? null : (
         <RowInput>
-          <LabelInput htmlFor="name">Kategori </LabelInput>
+          <LabelInput htmlFor="name">Kategori
+          <span css={css`color:red`}>*</span></LabelInput>
           <InputSelectForm
             data-testid="category-produk-input"
             name="category"
@@ -103,7 +112,8 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
       Object.keys(resultsSubcategory).length === 0 ||
       Object.keys(results).length === 0 ? null : (
         <RowInput>
-          <LabelInput htmlFor="name">Subkategori </LabelInput>
+          <LabelInput htmlFor="name">Subkategori
+          <span css={css`color:red`}>*</span></LabelInput>
           <InputSelectForm
             data-testid="subcategory-produk-input"
             name="subcategory"
@@ -125,7 +135,8 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
         `}
         data-testid="desc-produk-input-parent"
       >
-        <LabelInput htmlFor="deskripsi">Deskripsi Produk </LabelInput>
+        <LabelInput htmlFor="deskripsi">Deskripsi Produk
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputTextArea
           data-testid="desc-produk-input"
           name="description"
@@ -137,7 +148,8 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
         )}
       </RowInput>
       <RowInput>
-        <LabelInput htmlFor="modal">Modal/satuan </LabelInput>
+        <LabelInput htmlFor="modal">Modal/satuan
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="modal-produk-input"
           type="number"
@@ -147,7 +159,8 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
         {errors.modal && <ErrorDiv>Modal tidak boleh kosong</ErrorDiv>}
       </RowInput>
       <RowInput>
-        <LabelInput htmlFor="harga">Harga/satuan </LabelInput>
+        <LabelInput htmlFor="harga">Harga/satuan
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="price-produk-input"
           type="number"
@@ -157,7 +170,8 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
         {errors.price && <ErrorDiv>Harga Produk tidak boleh kosong</ErrorDiv>}
       </RowInput>
       <RowInput>
-        <LabelInput htmlFor="stock">Stok </LabelInput>
+        <LabelInput htmlFor="stock">Stok
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="stock-produk-input"
           type="number"
@@ -167,7 +181,8 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
         {errors.stock && <ErrorDiv>Stok Produk tidak boleh kosong</ErrorDiv>}
       </RowInput>
       <RowInput>
-        <LabelInput htmlFor="unit">Satuan </LabelInput>
+        <LabelInput htmlFor="unit">Satuan
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="unit-produk-input"
           name="unit"
diff --git a/src/page/program/FormProgram.jsx b/src/page/program/FormProgram.jsx
index a36f1cb1f6232af983d862c0eda36fa60eaf5149..4b457a05d52009974ad43ab1b9d464e998c32c8d 100644
--- a/src/page/program/FormProgram.jsx
+++ b/src/page/program/FormProgram.jsx
@@ -73,8 +73,16 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
         flex-direction: column;
       `}
     >
+      <div
+      css={css`
+        font-size: 15px;
+        color:red;
+      `}>
+        * Perlu diisi
+      </div>
       <RowInput>
-        <LabelInput htmlFor="name">Nama program </LabelInput>
+        <LabelInput htmlFor="name">Nama program
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="name-program-input"
           name="program_name"
@@ -91,7 +99,8 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
           min-height: 30px;
         `}
       >
-        <LabelInput htmlFor="description">Deskripsi </LabelInput>
+        <LabelInput htmlFor="description">Deskripsi
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputTextArea
           data-testid="description-program-input"
           name="description"
@@ -115,7 +124,8 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
       </RowInput>
       <RowInput>
         <LabelInput htmlFor="start_date_time">
-          Tanggal dan waktu mulai{" "}
+          Tanggal dan waktu mulai
+          <span css={css`color:red`}>*</span>
         </LabelInput>
         <InputForm
           type="datetime-local"
@@ -126,7 +136,8 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
       </RowInput>
       <RowInput>
         <LabelInput htmlFor="end_date_time">
-          Tanggal dan waktu berakhir{" "}
+          Tanggal dan waktu berakhir
+          <span css={css`color:red`}>*</span>
         </LabelInput>
         <InputForm
           type="datetime-local"
@@ -152,7 +163,8 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
         />
       </RowInput>
       <RowInput>
-        <LabelInput htmlFor="open_donation">Donasi</LabelInput>
+        <LabelInput htmlFor="open_donation">Donasi
+        <span css={css`color:red`}>*</span></LabelInput>
         <div
           css={css`
             display: flex;
diff --git a/src/page/subkategori/FormSubkategori.jsx b/src/page/subkategori/FormSubkategori.jsx
index 3389cd54e043fe3d9ff000305f1030523e13742c..3864d11061dd47bb321f6368ec2e18e4381a2e87 100644
--- a/src/page/subkategori/FormSubkategori.jsx
+++ b/src/page/subkategori/FormSubkategori.jsx
@@ -40,8 +40,16 @@ const FormSubkategori = ({ onSubmit, initialData = null }) => {
           <ErrorDiv>Error loading form !, Please relogin..</ErrorDiv>
         )}
       </div>
+      <div
+      css={css`
+        font-size: 15px;
+        color:red;
+      `}>
+        * Perlu diisi
+      </div>
       <RowInput>
-        <LabelInput htmlFor="name">Nama subkategori </LabelInput>
+        <LabelInput htmlFor="name">Nama subkategori
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="name-subkategori-input"
           name="name"
@@ -53,7 +61,8 @@ const FormSubkategori = ({ onSubmit, initialData = null }) => {
       </RowInput>
       {results === undefined || Object.keys(results).length === 0 ? null : (
         <RowInput>
-          <LabelInput htmlFor="name">Kategori </LabelInput>
+          <LabelInput htmlFor="name">Kategori
+          <span css={css`color:red`}>*</span></LabelInput>
           <InputSelectForm
             data-testid="category-subcategory-input"
             name="category"