diff --git a/src/components/accessories/admin/suppliers/Suppliers.tsx b/src/components/accessories/admin/suppliers/Suppliers.tsx
index 0b2ae547a..0576c073e 100644
--- a/src/components/accessories/admin/suppliers/Suppliers.tsx
+++ b/src/components/accessories/admin/suppliers/Suppliers.tsx
@@ -1,7 +1,37 @@
 import React from "react";
 
 import SuppliersTable from "./suppliersTable";
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import { SupplierDTO } from "../../../../generated";
+import { PATHS } from "../../../../consts";
+import Button from "../../button/Button";
 
 export const Suppliers = () => {
-  return <SuppliersTable />;
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const handleEdit = (row: SupplierDTO) => {
+    navigate(PATHS.admin_suppliers_edit.replace(":id", `${row.supId}`), {
+      state: row,
+    });
+  };
+
+  return (
+    <SuppliersTable
+      onEdit={handleEdit}
+      headerActions={
+        <Button
+          onClick={() => {
+            navigate(PATHS.admin_suppliers_new);
+          }}
+          type="button"
+          variant="contained"
+          color="primary"
+        >
+          {t("supplier.addSupplier")}
+        </Button>
+      }
+    />
+  );
 };
diff --git a/src/components/accessories/admin/suppliers/editSupplier/EditSupplier.tsx b/src/components/accessories/admin/suppliers/editSupplier/EditSupplier.tsx
new file mode 100644
index 000000000..47b4890f5
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/editSupplier/EditSupplier.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { SupplierDTO } from "../../../../../generated";
+import { ApiResponse } from "../../../../../state/types";
+import { IState } from "../../../../../types";
+import { useLocation, useNavigate, useParams } from "react-router";
+import { PATHS } from "../../../../../consts";
+import SupplierForm from "../supplierForm/SupplierForm";
+import { getInitialFields } from "../supplierForm/consts";
+import { updateSupplier } from "../../../../../state/suppliers/actions";
+
+export const EditSupplier = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const { state }: { state: SupplierDTO | undefined } = useLocation();
+  const { id } = useParams();
+  const update = useSelector<IState, ApiResponse<SupplierDTO>>(
+    (state) => state.suppliers.update
+  );
+  const navigate = useNavigate();
+
+  const handleSubmit = (value: SupplierDTO) => {
+    dispatch(updateSupplier(value));
+  };
+
+  useEffect(() => {
+    if (state?.supId !== Number(id)) {
+      navigate(PATHS.admin_suppliers);
+    }
+  }, [id, state]);
+
+  return (
+    <SupplierForm
+      creationMode={false}
+      onSubmit={handleSubmit}
+      isLoading={!!update.isLoading}
+      resetButtonLabel={t("common.cancel")}
+      submitButtonLabel={t("supplier.updateSupplier")}
+      fields={getInitialFields(state)}
+    />
+  );
+};
diff --git a/src/components/accessories/admin/suppliers/editSupplier/index.ts b/src/components/accessories/admin/suppliers/editSupplier/index.ts
new file mode 100644
index 000000000..7e704d47f
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/editSupplier/index.ts
@@ -0,0 +1 @@
+export * from "./EditSupplier";
diff --git a/src/components/accessories/admin/suppliers/newSupplier/NewSupplier.tsx b/src/components/accessories/admin/suppliers/newSupplier/NewSupplier.tsx
new file mode 100644
index 000000000..ec5951fc5
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/newSupplier/NewSupplier.tsx
@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { SupplierDTO } from "../../../../../generated";
+import { IState } from "../../../../../types";
+import { ApiResponse } from "../../../../../state/types";
+import SupplierForm from "../supplierForm/SupplierForm";
+import { getInitialFields } from "../supplierForm/consts";
+import { createSupplier } from "../../../../../state/suppliers/actions";
+
+export const NewSupplier = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const create = useSelector<IState, ApiResponse<SupplierDTO>>(
+    (state) => state.suppliers.create
+  );
+
+  const handleSubmit = (value: SupplierDTO) => {
+    dispatch(createSupplier(value));
+  };
+
+  return (
+    <SupplierForm
+      creationMode
+      onSubmit={handleSubmit}
+      isLoading={!!create.isLoading}
+      resetButtonLabel={t("common.cancel")}
+      submitButtonLabel={t("supplier.saveSupplier")}
+      fields={getInitialFields(undefined)}
+    />
+  );
+};
diff --git a/src/components/accessories/admin/suppliers/newSupplier/index.ts b/src/components/accessories/admin/suppliers/newSupplier/index.ts
new file mode 100644
index 000000000..4528cf34a
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/newSupplier/index.ts
@@ -0,0 +1 @@
+export * from "./NewSupplier";
diff --git a/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx b/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx
new file mode 100644
index 000000000..178dbf395
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx
@@ -0,0 +1,292 @@
+import { useFormik } from "formik";
+import { get, has } from "lodash";
+import React, {
+  FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { object, string } from "yup";
+import warningIcon from "../../../../../assets/warning-icon.png";
+import {
+  formatAllFieldValues,
+  getFromFields,
+} from "../../../../../libraries/formDataHandling/functions";
+import checkIcon from "../../../../../assets/check-icon.png";
+import Button from "../../../button/Button";
+import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
+import TextField from "../../../textField/TextField";
+import { ISupplierFormProps } from "./types";
+import { useDispatch, useSelector } from "react-redux";
+import { IState } from "../../../../../types";
+import InfoBox from "../../../infoBox/InfoBox";
+import { useNavigate } from "react-router";
+import { PATHS } from "../../../../../consts";
+import { ISupplierState } from "../../../../../state/suppliers/types";
+import {
+  createSupplierReset,
+  updateSupplierReset,
+} from "../../../../../state/suppliers/actions";
+import "./styles.scss";
+
+const FORMAT = /^([0-9]{3})?[0-9]{2,10}$/;
+
+const SupplierForm: FC<ISupplierFormProps> = ({
+  fields,
+  onSubmit,
+  creationMode,
+  submitButtonLabel,
+  resetButtonLabel,
+  isLoading,
+}) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const infoBoxRef = useRef<HTMLDivElement>(null);
+  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
+
+  const supplierStore = useSelector<IState, ISupplierState>(
+    (state) => state.suppliers
+  );
+
+  const errorMessage = useMemo(
+    () =>
+      (creationMode
+        ? supplierStore.create.error?.message
+        : supplierStore.update.error?.message) ?? t("common.somethingwrong"),
+    [
+      creationMode,
+      t,
+      supplierStore.create.error?.message,
+      supplierStore.update.error?.message,
+    ]
+  );
+
+  const initialValues = getFromFields(fields, "value");
+
+  const validationSchema = object({
+    supId: string().notRequired(),
+    supName: string().required(t("common.required")),
+    supAddress: string().notRequired(),
+    supTaxcode: string().notRequired(),
+    supPhone: string().notRequired(),
+    //.matches(FORMAT, t("common.incorrectformat")),
+    supFax: string().notRequired(),
+    //.matches(FORMAT, t("common.incorrectformat")),
+    supEmail: string().notRequired().email(t("validations.email")),
+    supNote: string().notRequired(),
+  });
+
+  const formik = useFormik({
+    initialValues,
+    validationSchema,
+    enableReinitialize: true,
+    onSubmit: (values) => {
+      const formattedValues = formatAllFieldValues(fields, values);
+      if (creationMode) {
+        formattedValues.supId = 0;
+      }
+      onSubmit(formattedValues as any);
+    },
+  });
+
+  const isValid = (fieldName: string): boolean => {
+    return has(formik.touched, fieldName) && has(formik.errors, fieldName);
+  };
+
+  const getErrorText = (fieldName: string): string => {
+    return has(formik.touched, fieldName)
+      ? (get(formik.errors, fieldName) as string)
+      : "";
+  };
+
+  const handleResetConfirmation = () => {
+    setOpenResetConfirmation(false);
+    navigate(-1);
+  };
+
+  const cleanUp = useCallback(() => {
+    if (creationMode) {
+      dispatch(createSupplierReset());
+    } else {
+      dispatch(updateSupplierReset());
+    }
+  }, [creationMode, dispatch]);
+
+  useEffect(() => {
+    return cleanUp;
+  }, [cleanUp]);
+
+  return (
+    <div className="supplierForm">
+      <form className="supplierForm__form" onSubmit={formik.handleSubmit}>
+        <div className="row start-sm center-xs">
+          {!creationMode && (
+            <div className="supplierForm__item halfWidth">
+              <TextField
+                field={formik.getFieldProps("supId")}
+                theme="regular"
+                label={t("supplier.id")}
+                isValid={isValid("supId")}
+                errorText={getErrorText("supId")}
+                onBlur={formik.handleBlur}
+                type="text"
+                disabled={isLoading || !creationMode}
+              />
+            </div>
+          )}
+          <div className="supplierForm__item halfWidth">
+            <TextField
+              field={formik.getFieldProps("supName")}
+              theme="regular"
+              label={t("supplier.name")}
+              isValid={isValid("supName")}
+              errorText={getErrorText("supName")}
+              onBlur={formik.handleBlur}
+              type="text"
+              disabled={isLoading}
+            />
+          </div>
+          <div className="supplierForm__item halfWidth">
+            <TextField
+              field={formik.getFieldProps("supAddress")}
+              theme="regular"
+              label={t("supplier.address")}
+              isValid={isValid("supAddress")}
+              errorText={getErrorText("supAddress")}
+              onBlur={formik.handleBlur}
+              type="text"
+              disabled={isLoading}
+            />
+          </div>
+          <div className="supplierForm__item halfWidth">
+            <TextField
+              field={formik.getFieldProps("supTaxcode")}
+              theme="regular"
+              label={t("supplier.taxcode")}
+              isValid={isValid("supTaxcode")}
+              errorText={getErrorText("supTaxcode")}
+              onBlur={formik.handleBlur}
+              type="text"
+              disabled={isLoading}
+            />
+          </div>
+
+          <div className="supplierForm__item halfWidth">
+            <TextField
+              field={formik.getFieldProps("supPhone")}
+              theme="regular"
+              label={t("supplier.phone")}
+              isValid={isValid("supPhone")}
+              errorText={getErrorText("supPhone")}
+              onBlur={formik.handleBlur}
+              type="text"
+              disabled={isLoading}
+            />
+          </div>
+          <div className="supplierForm__item halfWidth">
+            <TextField
+              field={formik.getFieldProps("supFax")}
+              theme="regular"
+              label={t("supplier.fax")}
+              isValid={isValid("supFax")}
+              errorText={getErrorText("supFax")}
+              onBlur={formik.handleBlur}
+              type="text"
+              disabled={isLoading}
+            />
+          </div>
+          <div className="supplierForm__item halfWidth">
+            <TextField
+              field={formik.getFieldProps("supEmail")}
+              theme="regular"
+              label={t("supplier.email")}
+              isValid={isValid("supEmail")}
+              errorText={getErrorText("supEmail")}
+              onBlur={formik.handleBlur}
+              type="email"
+              disabled={isLoading}
+            />
+          </div>
+        </div>
+
+        <div className="row start-sm center-xs">
+          <div className="supplierForm__item fullWidth">
+            <TextField
+              field={formik.getFieldProps("supNote")}
+              theme="regular"
+              label={t("supplier.note")}
+              multiline={true}
+              type="text"
+              isValid={isValid("supNote")}
+              errorText={getErrorText("supNote")}
+              onBlur={formik.handleBlur}
+              rows={3}
+              disabled={isLoading}
+              maxLength={1500}
+            />
+          </div>
+        </div>
+
+        <div className="supplierForm__buttonSet">
+          <div className="submit_button">
+            <Button type="submit" variant="contained" disabled={isLoading}>
+              {submitButtonLabel}
+            </Button>
+          </div>
+          <div className="reset_button">
+            <Button
+              type="reset"
+              variant="text"
+              disabled={isLoading}
+              onClick={() => setOpenResetConfirmation(true)}
+            >
+              {resetButtonLabel}
+            </Button>
+          </div>
+        </div>
+        <ConfirmationDialog
+          isOpen={openResetConfirmation}
+          title={resetButtonLabel.toUpperCase()}
+          info={t("common.resetform")}
+          icon={warningIcon}
+          primaryButtonLabel={t("common.ok")}
+          secondaryButtonLabel={t("common.discard")}
+          handlePrimaryButtonClick={handleResetConfirmation}
+          handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+        />
+        {(creationMode
+          ? supplierStore.create.status === "FAIL"
+          : supplierStore.update.status === "FAIL") && (
+          <div ref={infoBoxRef} className="info-box-container">
+            <InfoBox type="error" message={errorMessage} />
+          </div>
+        )}
+        <ConfirmationDialog
+          isOpen={
+            !!(creationMode
+              ? supplierStore.create.hasSucceeded
+              : supplierStore.update.hasSucceeded)
+          }
+          title={creationMode ? t("supplier.created") : t("supplier.updated")}
+          icon={checkIcon}
+          info={
+            creationMode
+              ? t("supplier.createSuccess")
+              : t("supplier.updateSuccess", { supId: formik.values.supId })
+          }
+          primaryButtonLabel="Ok"
+          handlePrimaryButtonClick={() => {
+            navigate(PATHS.admin_suppliers);
+          }}
+          handleSecondaryButtonClick={() => ({})}
+        />
+      </form>
+    </div>
+  );
+};
+
+export default SupplierForm;
diff --git a/src/components/accessories/admin/suppliers/supplierForm/consts.ts b/src/components/accessories/admin/suppliers/supplierForm/consts.ts
new file mode 100644
index 000000000..9a4fbc169
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/supplierForm/consts.ts
@@ -0,0 +1,28 @@
+import { TFields } from "../../../../../libraries/formDataHandling/types";
+import { SupplierFormFieldName } from ".";
+import { SupplierDTO } from "../../../../../generated";
+
+export const getInitialFields: (
+  supplier: SupplierDTO | undefined
+) => TFields<SupplierFormFieldName> = (supplier) => ({
+  supId: { type: "number", value: `${supplier?.supId}` ?? "" },
+  supName: { type: "text", value: supplier?.supName ?? "" },
+  supAddress: {
+    type: "text",
+    value: supplier?.supAddress ? supplier?.supAddress : "",
+  },
+  supEmail: {
+    type: "text",
+    value: supplier?.supEmail ? supplier?.supEmail : "",
+  },
+  supFax: { type: "text", value: supplier?.supFax ? supplier?.supFax : "" },
+  supTaxcode: {
+    type: "text",
+    value: supplier?.supTaxcode ? supplier?.supTaxcode : "",
+  },
+  supPhone: {
+    type: "text",
+    value: supplier?.supPhone ? supplier?.supPhone : "",
+  },
+  supNote: { type: "text", value: supplier?.supNote ? supplier?.supNote : "" },
+});
diff --git a/src/components/accessories/admin/suppliers/supplierForm/index.ts b/src/components/accessories/admin/suppliers/supplierForm/index.ts
new file mode 100644
index 000000000..836c410c5
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/supplierForm/index.ts
@@ -0,0 +1,3 @@
+export * from "./SupplierForm";
+export * from "./types";
+export * from "./types";
diff --git a/src/components/accessories/admin/suppliers/supplierForm/styles.scss b/src/components/accessories/admin/suppliers/supplierForm/styles.scss
new file mode 100644
index 000000000..9d487f745
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/supplierForm/styles.scss
@@ -0,0 +1,84 @@
+@import "../../../../../styles/variables";
+@import "../../../../../../node_modules/susy/sass/susy";
+
+.supplierForm {
+  display: inline-block;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  .formInsertMode {
+    margin: 0px 0px 20px;
+  }
+
+  .row {
+    justify-content: space-between;
+  }
+
+  .supplierForm__item {
+    margin: 7px 0px;
+    padding: 0px 15px;
+    width: 50%;
+    @include susy-media($narrow) {
+      padding: 0px 10px;
+    }
+    @include susy-media($tablet_land) {
+      padding: 0px 10px;
+    }
+    @include susy-media($medium-up) {
+      width: 25%;
+    }
+    @include susy-media($tablet_port) {
+      width: 50%;
+    }
+    @include susy-media($smartphone) {
+      width: 100%;
+    }
+    .textField,
+    .selectField {
+      width: 100%;
+    }
+
+    &.fullWidth {
+      width: 100%;
+    }
+
+    &.halfWidth {
+      width: 50%;
+      @include susy-media($smartphone) {
+        width: 100%;
+      }
+    }
+    &.thirdWidth {
+      width: 33%;
+      @include susy-media($smartphone) {
+        width: 100%;
+      }
+    }
+  }
+
+  .supplierForm__buttonSet {
+    display: flex;
+    margin-top: 25px;
+    padding: 0px 15px;
+    flex-direction: row-reverse;
+    @include susy-media($smartphone_small) {
+      display: block;
+    }
+
+    .submit_button,
+    .reset_button {
+      .MuiButton-label {
+        font-size: smaller;
+        letter-spacing: 1px;
+        font-weight: 600;
+      }
+      button {
+        @include susy-media($smartphone_small) {
+          width: 100%;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/accessories/admin/suppliers/supplierForm/types.ts b/src/components/accessories/admin/suppliers/supplierForm/types.ts
new file mode 100644
index 000000000..8386a1304
--- /dev/null
+++ b/src/components/accessories/admin/suppliers/supplierForm/types.ts
@@ -0,0 +1,21 @@
+import { SupplierDTO } from "../../../../../generated";
+import { TFields } from "../../../../../libraries/formDataHandling/types";
+
+export interface ISupplierFormProps {
+  fields: TFields<SupplierFormFieldName>;
+  onSubmit: (adm: SupplierDTO) => void;
+  creationMode: boolean;
+  submitButtonLabel: string;
+  resetButtonLabel: string;
+  isLoading: boolean;
+}
+
+export type SupplierFormFieldName =
+  | "supId"
+  | "supName"
+  | "supAddress"
+  | "supTaxcode"
+  | "supPhone"
+  | "supFax"
+  | "supEmail"
+  | "supNote";
diff --git a/src/components/accessories/admin/suppliers/suppliersTable/SuppliersTable.tsx b/src/components/accessories/admin/suppliers/suppliersTable/SuppliersTable.tsx
index af0163c81..315532276 100644
--- a/src/components/accessories/admin/suppliers/suppliersTable/SuppliersTable.tsx
+++ b/src/components/accessories/admin/suppliers/suppliersTable/SuppliersTable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { ReactNode, useEffect } from "react";
 import Table from "../../../table/Table";
 import { useTranslation } from "react-i18next";
 import InfoBox from "../../../infoBox/InfoBox";
@@ -11,7 +11,12 @@ import { getSuppliers } from "../../../../../state/suppliers/actions";
 import { TFilterField } from "../../../table/filter/types";
 import classes from "./SuppliersTable.module.scss";
 
-export const SuppliersTable = () => {
+interface IOwnProps {
+  onEdit: (row: any) => void;
+  headerActions?: ReactNode;
+}
+
+export const SuppliersTable = ({ onEdit, headerActions }: IOwnProps) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
@@ -52,10 +57,15 @@ export const SuppliersTable = () => {
         fax: item.supFax ?? "",
         email: item.supEmail ?? "",
         note: item.supNote ?? "",
+        supId: item.supId,
       };
     });
   };
 
+  const handleEdit = (row: SupplierDTO) => {
+    onEdit((data ?? []).find((item) => item.supId === row?.supId));
+  };
+
   return (
     <div className={classes.table}>
       {(() => {
@@ -77,11 +87,13 @@ export const SuppliersTable = () => {
                 labelData={label}
                 columnsOrder={order}
                 rowsPerPage={10}
-                filterColumns={filters}
                 isCollapsabile={true}
+                onEdit={handleEdit}
+                filterColumns={filters}
                 showEmptyCell={false}
                 rowKey="name"
                 manualFilter={false}
+                headerActions={headerActions}
               />
             );
           case "SUCCESS_EMPTY":
diff --git a/src/components/activities/adminActivity/AdminActivity.module.scss b/src/components/activities/adminActivity/AdminActivity.module.scss
index 5429b4de6..22d4f3937 100644
--- a/src/components/activities/adminActivity/AdminActivity.module.scss
+++ b/src/components/activities/adminActivity/AdminActivity.module.scss
@@ -14,7 +14,7 @@
   border-radius: 8px;
   flex-grow: 1;
   margin: 30px 160px;
-  align-self: center;
+  // align-self: center;
   @include susy-media($medium-down) {
     flex-direction: column;
     margin: 20px 20px;
diff --git a/src/consts.ts b/src/consts.ts
index 63e5fcb2c..71c5b493c 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -24,6 +24,11 @@ export const PATHS = {
   diseases: "/admin/diseases",
   diseases_new: "/admin/diseases/new",
   diseases_edit: "/admin/diseases/#id/edit",
+  operations: "/admin/operations",
+  operations_edit: "/admin/operations/#id/edit",
+  admin_suppliers: "/admin/suppliers",
+  admin_suppliers_new: "/admin/suppliers/new",
+  admin_suppliers_edit: "/admin/suppliers/:id/edit",
   admin_operations: "/admin/operations",
   admin_operations_edit: "/admin/operations/#id/edit",
   admin_operations_new: "/admin/operations/new",
diff --git a/src/mockServer/routes/suppliers.js b/src/mockServer/routes/suppliers.js
index 0645c9787..be3f9f0ce 100644
--- a/src/mockServer/routes/suppliers.js
+++ b/src/mockServer/routes/suppliers.js
@@ -5,5 +5,26 @@ export const suppliersRoutes = (server) => {
         server.get("/").intercept((req, res) => {
             res.status(200).json(supplierDTO);
         });
+        server.post("/").intercept((req, res) => {
+            let body = req.jsonBody();
+            switch (body.supId) {
+                case "FAIL":
+                    res.status(400).json({ message: "Fail to create supplier" });
+                    break;
+                default:
+                    body.supId = 100;
+                    res.status(200).json(body);
+            }
+        });
+        server.put("/").intercept((req, res) => {
+            const body = req.jsonBody();
+            switch (body.supId) {
+                case "FAIL":
+                    res.status(400).json({ message: "Fail to update supplier" });
+                    break;
+                default:
+                    res.status(200).json(body);
+            }
+        });
     });
 }
\ No newline at end of file
diff --git a/src/resources/i18n/en.json b/src/resources/i18n/en.json
index d8cb94763..155bc550a 100644
--- a/src/resources/i18n/en.json
+++ b/src/resources/i18n/en.json
@@ -823,13 +823,23 @@
     "defaultResult": "Default value"
   },
   "supplier": {
+    "id": "Supplier ID",
     "name": "Name",
     "address": "Address",
     "taxcode": "Tax Number ID",
     "phone": "Phone number",
     "fax": "Fax",
     "email": "Email Address",
-    "note": "Note"
+    "note": "Note",
+    "addNewSupplier": "Add a new supplier",
+    "editSupplier": "Edit supplier",
+    "updateSupplier": "Save changes",
+    "saveSupplier": "Save",
+    "addSupplier": "New supplier",
+    "updated": "Supplier updated",
+    "updateSuccess": "Supplier has been updated successfully!",
+    "created": "Supplier created",
+    "createSuccess": "Supplier has been created successfully!"
   },
   "ward": {
     "code": "Code",
diff --git a/src/routes/Admin/AdminRoutes.tsx b/src/routes/Admin/AdminRoutes.tsx
index 3052a0643..4a4e2ffa8 100644
--- a/src/routes/Admin/AdminRoutes.tsx
+++ b/src/routes/Admin/AdminRoutes.tsx
@@ -17,6 +17,8 @@ import {
   EditOperation,
   Suppliers,
 } from "../../components/accessories/admin";
+import { NewSupplier } from "../../components/accessories/admin/suppliers/newSupplier";
+import { EditSupplier } from "../../components/accessories/admin/suppliers/editSupplier";
 
 export const AdminRoutes = () => {
   const { t } = useTranslation();
@@ -106,6 +108,24 @@ export const AdminRoutes = () => {
           />
         ),
       },
+      {
+        path: "suppliers/new",
+        element: (
+          <AdminActivityContent
+            title={t("supplier.addNewSupplier")}
+            children={<NewSupplier />}
+          />
+        ),
+      },
+      {
+        path: "suppliers/:id/edit",
+        element: (
+          <AdminActivityContent
+            title={t("supplier.editSupplier")}
+            children={<EditSupplier />}
+          />
+        ),
+      },
       {
         path: "users",
         element: (
diff --git a/src/state/suppliers/actions.ts b/src/state/suppliers/actions.ts
index 5f03a0b26..8f5236400 100644
--- a/src/state/suppliers/actions.ts
+++ b/src/state/suppliers/actions.ts
@@ -3,9 +3,17 @@ import { Dispatch } from "redux";
 import { customConfiguration } from "../../libraries/apiUtils/configuration";
 import { IAction } from "../types";
 import {
+  CREATE_SUPPLIER_FAIL,
+  CREATE_SUPPLIER_LOADING,
+  CREATE_SUPPLIER_RESET,
+  CREATE_SUPPLIER_SUCCESS,
   GET_SUPPLIERS_FAIL,
   GET_SUPPLIERS_LOADING,
   GET_SUPPLIERS_SUCCESS,
+  UPDATE_SUPPLIER_FAIL,
+  UPDATE_SUPPLIER_LOADING,
+  UPDATE_SUPPLIER_RESET,
+  UPDATE_SUPPLIER_SUCCESS,
 } from "./consts";
 import { SupplierDTO, SuppliersApi } from "../../generated";
 
@@ -39,3 +47,63 @@ export const getSuppliers =
       }
     );
   };
+
+export const createSupplier =
+  (supplierDTO: SupplierDTO) =>
+  (dispatch: Dispatch<IAction<SupplierDTO, {}>>): void => {
+    dispatch({
+      type: CREATE_SUPPLIER_LOADING,
+    });
+    suppliersApi.saveSupplier({ supplierDTO }).subscribe(
+      (payload) => {
+        dispatch({
+          type: CREATE_SUPPLIER_SUCCESS,
+          payload: payload,
+        });
+      },
+      (error) => {
+        dispatch({
+          type: CREATE_SUPPLIER_FAIL,
+          error: error?.response,
+        });
+      }
+    );
+  };
+
+export const updateSupplier =
+  (supplierDTO: SupplierDTO) =>
+  (dispatch: Dispatch<IAction<SupplierDTO, {}>>): void => {
+    dispatch({
+      type: UPDATE_SUPPLIER_LOADING,
+    });
+    suppliersApi.updateSupplier({ supplierDTO }).subscribe(
+      (payload) => {
+        dispatch({
+          type: UPDATE_SUPPLIER_SUCCESS,
+          payload: payload,
+        });
+      },
+      (error) => {
+        dispatch({
+          type: UPDATE_SUPPLIER_FAIL,
+          error: error?.response,
+        });
+      }
+    );
+  };
+
+export const createSupplierReset =
+  () =>
+  (dispatch: Dispatch<IAction<null, {}>>): void => {
+    dispatch({
+      type: CREATE_SUPPLIER_RESET,
+    });
+  };
+
+export const updateSupplierReset =
+  () =>
+  (dispatch: Dispatch<IAction<null, {}>>): void => {
+    dispatch({
+      type: UPDATE_SUPPLIER_RESET,
+    });
+  };
diff --git a/src/state/suppliers/consts.ts b/src/state/suppliers/consts.ts
index 3899674dc..448373163 100644
--- a/src/state/suppliers/consts.ts
+++ b/src/state/suppliers/consts.ts
@@ -1,3 +1,13 @@
 export const GET_SUPPLIERS_LOADING = "suppliers/GET_SUPPLIERS_LOADING";
 export const GET_SUPPLIERS_SUCCESS = "suppliers/GET_SUPPLIERS_SUCCESS";
 export const GET_SUPPLIERS_FAIL = "suppliers/GET_SUPPLIERS_FAIL";
+
+export const CREATE_SUPPLIER_LOADING = "suppliers/CREATE_SUPPLIER_LOADING";
+export const CREATE_SUPPLIER_SUCCESS = "suppliers/CREATE_SUPPLIER_SUCCESS";
+export const CREATE_SUPPLIER_FAIL = "suppliers/CREATE_SUPPLIER_FAIL";
+export const CREATE_SUPPLIER_RESET = "suppliers/CREATE_SUPPLIER_RESET";
+
+export const UPDATE_SUPPLIER_LOADING = "suppliers/UPDATE_SUPPLIER_LOADING";
+export const UPDATE_SUPPLIER_SUCCESS = "suppliers/UPDATE_SUPPLIER_SUCCESS";
+export const UPDATE_SUPPLIER_FAIL = "suppliers/UPDATE_SUPPLIER_FAIL";
+export const UPDATE_SUPPLIER_RESET = "suppliers/UPDATE_SUPPLIER_RESET";
diff --git a/src/state/suppliers/initial.ts b/src/state/suppliers/initial.ts
index ed5e9e801..894f45168 100644
--- a/src/state/suppliers/initial.ts
+++ b/src/state/suppliers/initial.ts
@@ -2,6 +2,9 @@ import { ISupplierState } from "./types";
 import { ApiResponse } from "../types";
 
 export const initial: ISupplierState = {
+  create: new ApiResponse({ status: "IDLE" }),
+  update: new ApiResponse({ status: "IDLE" }),
+  delete: new ApiResponse({ status: "IDLE" }),
   supplierList: new ApiResponse({
     status: "IDLE",
     data: [],
diff --git a/src/state/suppliers/reducer.ts b/src/state/suppliers/reducer.ts
index 85900eb35..b6245954d 100644
--- a/src/state/suppliers/reducer.ts
+++ b/src/state/suppliers/reducer.ts
@@ -1,9 +1,17 @@
 import produce from "immer";
 import { IAction } from "../types";
 import {
+  CREATE_SUPPLIER_FAIL,
+  CREATE_SUPPLIER_LOADING,
+  CREATE_SUPPLIER_RESET,
+  CREATE_SUPPLIER_SUCCESS,
   GET_SUPPLIERS_FAIL,
   GET_SUPPLIERS_LOADING,
   GET_SUPPLIERS_SUCCESS,
+  UPDATE_SUPPLIER_FAIL,
+  UPDATE_SUPPLIER_LOADING,
+  UPDATE_SUPPLIER_RESET,
+  UPDATE_SUPPLIER_SUCCESS,
 } from "./consts";
 import { initial } from "./initial";
 import { ISupplierState } from "./types";
@@ -11,7 +19,7 @@ import { ISupplierState } from "./types";
 export default produce((draft: ISupplierState, action: IAction<any, any>) => {
   switch (action.type) {
     /**
-     * GET_EXAMS
+     * GET_SUPPLIERS
      */
     case GET_SUPPLIERS_LOADING: {
       draft.supplierList.status = "LOADING";
@@ -30,5 +38,61 @@ export default produce((draft: ISupplierState, action: IAction<any, any>) => {
       draft.supplierList.error = action.error;
       break;
     }
+
+    /**
+     * CREATE_SUPPLIER
+     */
+    case CREATE_SUPPLIER_LOADING: {
+      draft.create.status = "LOADING";
+      break;
+    }
+
+    case CREATE_SUPPLIER_SUCCESS: {
+      draft.create.status = "SUCCESS";
+      draft.create.data = action.payload;
+      delete draft.create.error;
+      break;
+    }
+
+    case CREATE_SUPPLIER_FAIL: {
+      draft.create.status = "FAIL";
+      draft.create.error = action.error;
+      break;
+    }
+
+    case CREATE_SUPPLIER_RESET: {
+      draft.create.status = "IDLE";
+      delete draft.create.error;
+      delete draft.create.data;
+      break;
+    }
+
+    /**
+     * UPDATE_SUPPLIER
+     */
+    case UPDATE_SUPPLIER_LOADING: {
+      draft.update.status = "LOADING";
+      break;
+    }
+
+    case UPDATE_SUPPLIER_SUCCESS: {
+      draft.update.status = "SUCCESS";
+      draft.update.data = action.payload;
+      delete draft.update.error;
+      break;
+    }
+
+    case UPDATE_SUPPLIER_FAIL: {
+      draft.update.status = "FAIL";
+      draft.update.error = action.error;
+      break;
+    }
+
+    case UPDATE_SUPPLIER_RESET: {
+      draft.update.status = "IDLE";
+      delete draft.update.error;
+      delete draft.update.data;
+      break;
+    }
   }
 }, initial);
diff --git a/src/state/suppliers/types.ts b/src/state/suppliers/types.ts
index cbb043fbb..bc9e2ae7a 100644
--- a/src/state/suppliers/types.ts
+++ b/src/state/suppliers/types.ts
@@ -3,4 +3,7 @@ import { ApiResponse } from "../types";
 
 export type ISupplierState = {
   supplierList: ApiResponse<Array<SupplierDTO>>;
+  create: ApiResponse<SupplierDTO>;
+  update: ApiResponse<SupplierDTO>;
+  delete: ApiResponse<boolean>;
 };