diff --git a/frontend/src/components/logistics/materialHelper/consumption/ConsumeMaterial.tsx b/frontend/src/components/logistics/materialHelper/consumption/ConsumeMaterial.tsx
new file mode 100644
index 0000000..ca53ab2
--- /dev/null
+++ b/frontend/src/components/logistics/materialHelper/consumption/ConsumeMaterial.tsx
@@ -0,0 +1,97 @@
+import {LstCard} from "@/components/extendedUI/LstCard";
+import {Button} from "@/components/ui/button";
+import {CardHeader} from "@/components/ui/card";
+import {Input} from "@/components/ui/input";
+import {Label} from "@/components/ui/label";
+import axios from "axios";
+import {useState} from "react";
+
+import {useForm} from "react-hook-form";
+import {toast} from "sonner";
+
+export default function ConsumeMaterial() {
+    const {register: register1, handleSubmit: handleSubmit1, reset} = useForm();
+    const [submitting, setSubmitting] = useState(false);
+    const token = localStorage.getItem("auth_token");
+
+    const handleConsume = async (data: any) => {
+        setSubmitting(!submitting);
+        try {
+            const result = await axios.post(`/api/logistics/consume`, data, {
+                headers: {Authorization: `Bearer ${token}`},
+            });
+            if (result.data.success) {
+                toast.success(result.data.message);
+                setSubmitting(!submitting);
+                reset();
+            }
+            if (!result.data.success) {
+                //console.log(result.data);
+                setSubmitting(!submitting);
+                toast.error(result.data.message);
+            }
+        } catch (error: any) {
+            //console.log(error);
+            setSubmitting(!submitting);
+            if (error.status === 401) {
+                toast.error("Unauthorized to do this task.");
+            } else {
+                toast.error("Unexpected error if this continues please constact an admin.");
+            }
+        }
+    };
+    return (
+        <div className="m-2">
+            <LstCard>
+                <CardHeader>
+                    <p className="text-center text-lg">Consuming Material.</p>
+                </CardHeader>
+                <div className="flex m-1">
+                    <div className="w-96 m-1">
+                        <LstCard>
+                            <form onSubmit={handleSubmit1(handleConsume)}>
+                                <div className="m-2">
+                                    <Label htmlFor="runningNr">Enter unit running number</Label>
+                                    <Input
+                                        className="mt-2"
+                                        //defaultValue="634"
+                                        type="number"
+                                        {...register1("runningNr")}
+                                    />
+                                </div>
+                                <div className="m-2">
+                                    <Label htmlFor="lotNum">Enter lot number</Label>
+                                    <Input
+                                        className="mt-2"
+                                        //defaultValue="634"
+                                        type="number"
+                                        {...register1("lotNum")}
+                                    />
+                                </div>
+
+                                <Button className="m-2" color="primary" type="submit" disabled={submitting}>
+                                    Consume materal
+                                </Button>
+                            </form>
+                        </LstCard>
+                    </div>
+                    <div className="m-1 p-1">
+                        <LstCard>
+                            <div className="w-96 p-1">
+                                <ol>
+                                    <li>1. Enter the running number of the material you would like to consume</li>
+                                    <li>2. Enter the lot number you will be consuming to</li>
+                                    <li>3. Press consume material</li>
+                                </ol>
+                                <p className="text-pretty w-96">
+                                    *This process is only for barcoded material, if it is set to auto consume you will
+                                    encounter and error.
+                                </p>
+                            </div>
+                        </LstCard>
+                    </div>
+                </div>
+            </LstCard>
+        </div>
+    );
+}
diff --git a/frontend/src/routes/(logistics)/materialHelper/consumption/index.tsx b/frontend/src/routes/(logistics)/materialHelper/consumption/index.tsx
index 34766a4..9f98756 100644
--- a/frontend/src/routes/(logistics)/materialHelper/consumption/index.tsx
+++ b/frontend/src/routes/(logistics)/materialHelper/consumption/index.tsx
@@ -1,11 +1,25 @@
-import { createFileRoute } from '@tanstack/react-router'
+import ConsumeMaterial from "@/components/logistics/materialHelper/consumption/ConsumeMaterial";
+import {createFileRoute} from "@tanstack/react-router";
 
-export const Route = createFileRoute(
-  '/(logistics)/materialHelper/consumption/',
-)({
-  component: RouteComponent,
-})
+export const Route = createFileRoute("/(logistics)/materialHelper/consumption/")({
+    component: RouteComponent,
+    head: () => ({
+        meta: [
+            {
+                name: "description",
+                content: "My App is a web application",
+            },
+            {
+                title: "LST - Logistics",
+            },
+        ],
+    }),
+});
 
 function RouteComponent() {
-  return <div>Hello "/(logistics)/materialHelper/consumption/"!</div>
+    return (
+        <div>
+            <ConsumeMaterial />
+        </div>
+    );
 }
diff --git a/frontend/src/routes/(logistics)/materialHelper/index.tsx b/frontend/src/routes/(logistics)/materialHelper/index.tsx
index e48b301..2f94d5d 100644
--- a/frontend/src/routes/(logistics)/materialHelper/index.tsx
+++ b/frontend/src/routes/(logistics)/materialHelper/index.tsx
@@ -3,6 +3,17 @@ import {createFileRoute} from "@tanstack/react-router";
 
 export const Route = createFileRoute("/(logistics)/materialHelper/")({
     component: RouteComponent,
+    head: () => ({
+        meta: [
+            {
+                name: "description",
+                content: "My App is a web application",
+            },
+            {
+                title: "LST - Logistics",
+            },
+        ],
+    }),
 });
 
 function RouteComponent() {