diff --git a/backend/routes/app/database/products.database.js b/backend/routes/app/database/products.database.js
index b91dfe8..515f354 100644
--- a/backend/routes/app/database/products.database.js
+++ b/backend/routes/app/database/products.database.js
@@ -20,12 +20,19 @@ export const newProduct = async (
   expiry_date,
   bottling_date,
 ) => {
+  let newPrice;
+  if (price == "") {
+    newPrice = null;
+  } else {
+    newPrice = price;
+  }
+
   const [result] = await pool.query(
     "INSERT INTO products (name, description, price, amount, storage_location, expiry_date, bottling_date) VALUES (?, ?, ?, ?, UUID_TO_BIN(?), ?, ?)",
     [
       name,
       description,
-      price,
+      newPrice,
       amount,
       storage_location,
       expiry_date,
diff --git a/frontend/src/pages/AddProduct.tsx b/frontend/src/pages/AddProduct.tsx
new file mode 100644
index 0000000..5a644ac
--- /dev/null
+++ b/frontend/src/pages/AddProduct.tsx
@@ -0,0 +1,271 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  Divider,
+  Input,
+  Option,
+  Select,
+  Typography,
+} from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { useForm } from "@tanstack/react-form";
+import { createProduct, getStorages } from "../utils/uxFncs";
+import type { ProductFormValues } from "../misc/interfaces";
+
+export const AddProduct = () => {
+  const { t } = useTranslation();
+  const [success, setSuccess] = useState(false);
+
+  const { data: storages } = useQuery({
+    queryKey: ["storages"],
+    queryFn: () => getStorages(),
+  });
+
+  const form = useForm({
+    defaultValues: {
+      amount: 0,
+      bottling_date: "",
+      description: "",
+      expiry_date: "",
+      name: "",
+      price: "",
+      storage_location_uuid: "",
+    },
+    onSubmit: async ({ value }) => {
+      setSuccess(false);
+      mutate(value);
+    },
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (values: ProductFormValues) => createProduct(values),
+    onSuccess: () => {
+      setSuccess(true);
+    },
+  });
+
+  return (
+    <>
+      <div className="space-y-6">
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="space-y-1">
+            <Typography level="h2" className="text-slate-900">
+              {t("add-product")}
+            </Typography>
+            <Typography level="body-lg" className="text-slate-500">
+              {t("inventory-header")}
+            </Typography>
+          </div>
+          <Chip
+            variant="soft"
+            color="primary"
+            className="ml-auto rounded-full px-3"
+          >
+            {t("details")}
+          </Chip>
+        </div>
+      </div>
+      <Box className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
+        <form
+          className="space-y-6"
+          onSubmit={(e) => {
+            e.preventDefault();
+            form.handleSubmit();
+          }}
+        >
+          <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
+            <div className="space-y-4">
+              <div className="space-y-1">
+                <Typography level="title-md" className="text-slate-900">
+                  {t("product-name")}
+                </Typography>
+                <form.Field name="name">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      value={field.state.value}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                      size="lg"
+                      variant="outlined"
+                      className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                    />
+                  )}
+                </form.Field>
+              </div>
+              <div className="space-y-1">
+                <Typography level="title-md" className="text-slate-900">
+                  {t("description")}
+                </Typography>
+                <form.Field name="description">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      value={field.state.value}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                      size="lg"
+                      variant="outlined"
+                      className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                    />
+                  )}
+                </form.Field>
+              </div>
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-1">
+                  <Typography level="title-md" className="text-slate-900">
+                    {t("expiry-date")}
+                  </Typography>
+                  <form.Field name="expiry_date">
+                    {(field) => (
+                      <Input
+                        type="date"
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                        size="lg"
+                        variant="outlined"
+                        className="rounded-2xl bg-white/90"
+                      />
+                    )}
+                  </form.Field>
+                </div>
+                <div className="space-y-1">
+                  <Typography level="title-md" className="text-slate-900">
+                    {t("bottling-date")}
+                  </Typography>
+                  <form.Field name="bottling_date">
+                    {(field) => (
+                      <Input
+                        type="date"
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                        size="lg"
+                        variant="outlined"
+                        className="rounded-2xl bg-white/90"
+                      />
+                    )}
+                  </form.Field>
+                </div>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <div className="rounded-2xl border border-white/70 bg-linear-to-br from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] p-5 shadow-[0_16px_40px_rgba(12,38,78,0.08)]">
+                <Typography level="title-md" className="text-slate-900">
+                  {t("inventory")}
+                </Typography>
+                <Divider className="my-3" />
+                <div className="grid gap-4">
+                  <div className="space-y-1">
+                    <Typography level="title-md" className="text-slate-900">
+                      {t("amount")}
+                    </Typography>
+                    <form.Field name="amount">
+                      {(field) => (
+                        <Input
+                          type="number"
+                          color="neutral"
+                          id="amountInput"
+                          placeholder={t("amount")}
+                          value={field.state.value}
+                          variant="soft"
+                          size="lg"
+                          onChange={(e) => {
+                            const nextValue = Number(e.target.value);
+                            field.handleChange(
+                              Number.isNaN(nextValue) ? 0 : nextValue,
+                            );
+                          }}
+                          onBlur={field.handleBlur}
+                          className="rounded-2xl bg-white/80"
+                        />
+                      )}
+                    </form.Field>
+                  </div>
+                  <div className="space-y-1">
+                    <Typography level="title-md" className="text-slate-900">
+                      {t("price")}
+                    </Typography>
+                    <form.Field name="price">
+                      {(field) => (
+                        <Input
+                          type="text"
+                          value={field.state.value}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          onBlur={field.handleBlur}
+                          size="lg"
+                          variant="outlined"
+                          className="rounded-2xl bg-white/90"
+                        />
+                      )}
+                    </form.Field>
+                    <Typography level="body-sm" className="text-slate-500">
+                      {t("currency")}
+                    </Typography>
+                  </div>
+                  <div className="space-y-1">
+                    <Typography level="title-md" className="text-slate-900">
+                      {t("storage-place")}
+                    </Typography>
+                    <form.Field name="storage_location_uuid">
+                      {(field) => (
+                        <Select
+                          value={field.state.value}
+                          onChange={(_event, value) =>
+                            field.handleChange(value ?? "")
+                          }
+                          size="lg"
+                          variant="outlined"
+                          className="rounded-2xl bg-white/90"
+                        >
+                          {storages?.map(
+                            (storage: { uuid: string; name: string }) => (
+                              <Option key={storage.uuid} value={storage.uuid}>
+                                {storage.name}
+                              </Option>
+                            ),
+                          )}
+                        </Select>
+                      )}
+                    </form.Field>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <Typography level="body-sm" className="text-slate-500">
+              {t("product-details")}
+            </Typography>
+            <Button
+              type="submit"
+              loading={isPending}
+              size="lg"
+              className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
+            >
+              {t("save")}
+            </Button>
+          </div>
+          {success && (
+            <Alert
+              color="success"
+              variant="soft"
+              className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
+            >
+              <div className="flex w-full items-center justify-between">
+                <Typography level="body-sm" className="text-emerald-700">
+                  {t("success")}
+                </Typography>
+              </div>
+            </Alert>
+          )}
+        </form>
+      </Box>
+    </>
+  );
+};
diff --git a/frontend/src/routes/app/_hiddenLayout/add-product.tsx b/frontend/src/routes/app/_hiddenLayout/add-product.tsx
index f2307b9..f069f08 100644
--- a/frontend/src/routes/app/_hiddenLayout/add-product.tsx
+++ b/frontend/src/routes/app/_hiddenLayout/add-product.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { isAuthenticated } from "../../../utils/auth";
+import { AddProduct } from "../../../pages/AddProduct";
 
 export const Route = createFileRoute("/app/_hiddenLayout/add-product")({
   beforeLoad: async () => {
@@ -13,5 +14,5 @@ export const Route = createFileRoute("/app/_hiddenLayout/add-product")({
 });
 
 function RouteComponent() {
-  return <div>Hello "/app/add-product"!</div>;
+  return <AddProduct />;
 }
diff --git a/frontend/src/utils/uxFncs.ts b/frontend/src/utils/uxFncs.ts
index 5b8d1c9..7b9ee85 100644
--- a/frontend/src/utils/uxFncs.ts
+++ b/frontend/src/utils/uxFncs.ts
@@ -111,3 +111,35 @@ export const getStorages = async () => {
     return response.data;
   }
 };
+
+export const createProduct = async (values: ProductFormValues) => {
+  const payload = {
+    name: values.name,
+    description: values.description,
+    price: values.price,
+    amount: values.amount,
+    storage_location: values.storage_location_uuid,
+    expiry_date: values.expiry_date || null,
+    bottling_date: values.bottling_date || null,
+  };
+
+  const result = await fetch(`${API_BASE}/products/new-product`, {
+    method: "POST",
+    body: JSON.stringify(payload),
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "ep001") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "sp001") {
+    return response.data;
+  }
+};