diff --git a/app/admin/AddProduct.tsx b/app/admin/AddProduct.tsx
new file mode 100644
index 0000000..0d5cb0e
--- /dev/null
+++ b/app/admin/AddProduct.tsx
@@ -0,0 +1,195 @@
+"use client"
+
+import { useState, type ChangeEvent } from "react"
+import type { Bike } from "@/utils/getBike"
+import type React from "react" // Import React
+import uploadImage from "./image";
+import { useRouter } from "next/navigation";
+
+export default function AddProduct() {
+  const router = useRouter();
+  const [newBike, setNewBike] = useState<Omit<Bike, "bike_id">>({
+    name: "",
+    description: "",
+    image: null,
+    amount_stocked: 0,
+    rental_rate: 0,
+    sell_price: 0,
+    damage_rate: 0,
+    for_rent: false,
+  })
+  const [uploading, setUploading] = useState(false)
+
+  const handleChange = (field: keyof Omit<Bike, "bike_id">, value: string | number | boolean) => {
+    setNewBike((prev) => ({ ...prev, [field]: value }))
+  }
+
+  const handleUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    setUploading(true)
+    uploadImage(e).then((signedUrl) => {
+      if (signedUrl) {
+        setNewBike((prev) => ({ ...prev, image: signedUrl }))
+      } else {
+        console.error("Error uploading image")
+      }
+      setUploading(false)
+    })
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    console.log("New bike to be added:", newBike)
+    // Here you would typically send the data to your backend API
+    // Reset the form after submission
+    try {
+      const response = await fetch("/api/add-bike", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(newBike),
+      })
+      if (!response.ok) {
+        throw new Error("Failed to add bike")
+      } else {
+        console.log("Bike added successfully")
+        router.refresh()
+      }
+    } catch (error) {
+      console.error("Error adding bike:", error)
+    }
+    setNewBike({
+      name: "",
+      description: "",
+      image: null,
+      amount_stocked: 0,
+      rental_rate: 0,
+      sell_price: 0,
+      damage_rate: 0,
+      for_rent: false,
+    })
+  }
+
+  return (
+    <div id="add-product" className="bg-green-50 p-6 rounded-lg">
+      <h2 className="text-2xl font-bold mb-4 text-green-700">Add New Bike</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+            Name
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={newBike.name}
+            onChange={(e) => handleChange("name", e.target.value)}
+            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+            Description
+          </label>
+          <textarea
+            id="description"
+            value={newBike.description}
+            onChange={(e) => handleChange("description", e.target.value)}
+            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="image" className="block text-sm font-medium text-gray-700">
+            Image
+          </label>
+          <input
+            id="image"
+            type="file"
+            accept="image/*"
+            onChange={handleUpload}
+            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+          />
+          {uploading && <p className="mt-2 text-sm text-gray-500">Uploading...</p>}
+          {newBike.image && <p className="mt-2 text-sm text-gray-500">Image uploaded: {newBike.image}</p>}
+        </div>
+        <div>
+          <label htmlFor="amount_stocked" className="block text-sm font-medium text-gray-700">
+            Amount Stocked
+          </label>
+          <input
+            id="amount_stocked"
+            type="number"
+            value={newBike.amount_stocked}
+            onChange={(e) => handleChange("amount_stocked", Number(e.target.value))}
+            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="rental_rate" className="block text-sm font-medium text-gray-700">
+            Rental Rate
+          </label>
+          <input
+            id="rental_rate"
+            type="number"
+            step="0.01"
+            value={newBike.rental_rate}
+            onChange={(e) => handleChange("rental_rate", Number(e.target.value))}
+            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="sell_price" className="block text-sm font-medium text-gray-700">
+            Sell Price
+          </label>
+          <input
+            id="sell_price"
+            type="number"
+            step="0.01"
+            value={newBike.sell_price}
+            onChange={(e) => handleChange("sell_price", Number(e.target.value))}
+            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="damage_rate" className="block text-sm font-medium text-gray-700">
+            Damage Rate
+          </label>
+          <input
+            id="damage_rate"
+            type="number"
+            step="0.01"
+            value={newBike.damage_rate}
+            onChange={(e) => handleChange("damage_rate", Number(e.target.value))}
+            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="for_rent" className="block text-sm font-medium text-gray-700">
+            For Rent
+          </label>
+          <select
+            id="for_rent"
+            value={newBike.for_rent.toString()}
+            onChange={(e) => handleChange("for_rent", e.target.value === "true")}
+            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+          >
+            <option value="true">Yes</option>
+            <option value="false">No</option>
+          </select>
+        </div>
+        <button
+          type="submit"
+          className="w-full bg-green-700 text-white px-4 py-2 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
+        >
+          Add New Bike
+        </button>
+      </form>
+    </div>
+  )
+}
+
diff --git a/app/admin/Inventory.tsx b/app/admin/Inventory.tsx
new file mode 100644
index 0000000..39b99e9
--- /dev/null
+++ b/app/admin/Inventory.tsx
@@ -0,0 +1,184 @@
+"use client"
+
+import { ChangeEvent, useEffect, useState } from "react"
+import type { Bike } from "@/utils/getBike"
+import { createClient } from "@/utils/supabase/client";
+import uploadImage from "./image";
+
+export default function Inventory() {
+  const [inventoryData, setInventoryData] = useState<Bike[]>([])
+  const [editingId, setEditingId] = useState<number | null>(null)
+  const [uploading, setUploading] = useState(false)
+
+  const supabase = createClient()
+
+  useEffect(() => {
+    async function fetchInventory() {
+      const { data, error } = await supabase.from("bikes").select("*").order("bike_id")
+
+      if (error) {
+        console.error("Error fetching inventory:", error.message)
+      } else if (data) {
+        setInventoryData(data)
+      }
+    }
+    fetchInventory()
+  }, [])
+
+  const handleUpload = async (e: ChangeEvent<HTMLInputElement>, id: number) => {
+    setUploading(true)
+
+    const signedUrl = await uploadImage(e)
+    if (signedUrl) {
+      handleChange(id, "image", signedUrl)
+    } else {
+      console.error("Error uploading image")
+    }
+  }
+
+  const handleChange = async (id: number, field: keyof Bike, value: string | number | boolean) => {
+    setInventoryData(inventoryData.map((item) => (item.bike_id === id ? { ...item, [field]: value } : item)))
+  }
+
+  const handleSave = async (id: number) => {
+    await supabase.from("bikes").upsert(inventoryData).eq("bike_id", id)
+    console.log(inventoryData)
+    setEditingId(null)
+  }
+
+  const handleDelete = async (id: number) => {
+    await supabase.from("bikes").delete().eq("bike_id", id)
+    setInventoryData(inventoryData.filter((item) => item.bike_id !== id))
+  }
+
+  return (
+    <div id="inventory" className="overflow-x-auto">
+      <h2 className="text-2xl font-bold mb-4 text-green-700">Bike Inventory</h2>
+      <table className="min-w-full bg-white border border-gray-300">
+        <thead>
+          <tr className="bg-gray-100">
+            <th className="py-2 px-4 border-b">ID</th>
+            <th className="py-2 px-4 border-b">Name</th>
+            <th className="py-2 px-4 border-b">Description</th>
+            <th className="py-2 px-4 border-b">Image</th>
+            <th className="py-2 px-4 border-b">Stock</th>
+            <th className="py-2 px-4 border-b">Rental Rate</th>
+            <th className="py-2 px-4 border-b">Sell Price</th>
+            <th className="py-2 px-4 border-b">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {inventoryData.map((bike) => (
+            <tr key={bike.bike_id}>
+              <td className="py-2 px-4 border-b">{bike.bike_id}</td>
+              <td className="py-2 px-4 border-b">
+                {editingId === bike.bike_id ? (
+                  <input
+                    type="text"
+                    value={bike.name}
+                    onChange={(e) => handleChange(bike.bike_id, "name", e.target.value)}
+                    className="w-full p-1 border rounded"
+                  />
+                ) : (
+                  bike.name
+                )}
+              </td>
+              <td className="py-2 px-4 border-b">
+                {editingId === bike.bike_id ? (
+                  <textarea
+                    value={bike.description}
+                    onChange={(e) => handleChange(bike.bike_id, "description", e.target.value)}
+                    className="w-full p-1 border rounded"
+                  />
+                ) : (
+                  bike.description
+                )}
+              </td>
+              <td className="py-2 px-4 border-b">
+                {editingId === bike.bike_id ? (
+                  <div>
+                    <input
+                      type="file"
+                      accept="image/*"
+                      onChange={(e) => handleUpload(e, bike.bike_id)}
+                      className="w-full p-1 border rounded"
+                    />
+                    {uploading && <p className="mt-2 text-sm text-gray-500">Uploading...</p>}
+                    {bike.image && <p className="mt-2 text-sm text-gray-500">Current image:
+                      <img src={bike.image} alt={bike.name} className="w-16 h-16" /></p>}
+                  </div>
+                ) : bike.image ? (
+                  <img src={bike.image} alt={bike.name} className="w-32 h-32 object-cover" />
+                ) : (
+                  "No image"
+                )}
+              </td>
+              <td className="py-2 px-4 border-b">
+                {editingId === bike.bike_id ? (
+                  <input
+                    type="number"
+                    value={bike.amount_stocked}
+                    onChange={(e) => handleChange(bike.bike_id, "amount_stocked", Number(e.target.value))}
+                    className="w-20 p-1 border rounded"
+                  />
+                ) : (
+                  bike.amount_stocked
+                )}
+              </td>
+              <td className="py-2 px-4 border-b">
+                {editingId === bike.bike_id ? (
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={bike.rental_rate}
+                    onChange={(e) => handleChange(bike.bike_id, "rental_rate", Number(e.target.value))}
+                    className="w-20 p-1 border rounded"
+                  />
+                ) : (
+                  `$${bike.rental_rate.toFixed(2)}`
+                )}
+              </td>
+              <td className="py-2 px-4 border-b">
+                {editingId === bike.bike_id ? (
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={bike.sell_price}
+                    onChange={(e) => handleChange(bike.bike_id, "sell_price", Number(e.target.value))}
+                    className="w-20 p-1 border rounded"
+                  />
+                ) : (
+                  `$${bike.sell_price.toFixed(2)}`
+                )}
+              </td>
+              <td className="py-2 px-4 border-b">
+                {editingId === bike.bike_id ? (
+                  <button
+                    onClick={() => handleSave(bike.bike_id)}
+                    className="bg-green-700 text-white px-3 py-1 rounded hover:bg-green-600"
+                  >
+                    Save
+                  </button>
+                ) : (
+                  <button
+                    onClick={() => setEditingId(bike.bike_id)}
+                    className="border border-green-700 text-green-700 px-3 py-1 rounded hover:bg-green-50"
+                  >
+                    Edit
+                  </button>
+                )}
+                  <button
+                    onClick={() => handleDelete(bike.bike_id)}
+                    className="border border-red-700 text-red-700 px-3 py-1 rounded hover:bg-red-700 hover:text-white"
+                  >
+                    Delete
+                  </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
diff --git a/app/admin/Orders.tsx b/app/admin/Orders.tsx
new file mode 100644
index 0000000..b600e46
--- /dev/null
+++ b/app/admin/Orders.tsx
@@ -0,0 +1,34 @@
+const ordersData = [
+  { id: 1, customer: "John Doe", total: 59.98, status: "Shipped" },
+  { id: 2, customer: "Jane Smith", total: 89.97, status: "Processing" },
+  { id: 3, customer: "Bob Johnson", total: 39.99, status: "Delivered" },
+]
+
+export default function Orders() {
+  return (
+    <div id="orders">
+      <h2 className="text-2xl font-bold mb-4 text-green-700">Recent Orders</h2>
+      <table className="min-w-full bg-white border border-gray-300">
+        <thead>
+          <tr className="bg-gray-100">
+            <th className="py-2 px-4 border-b">Order ID</th>
+            <th className="py-2 px-4 border-b">Customer</th>
+            <th className="py-2 px-4 border-b">Total</th>
+            <th className="py-2 px-4 border-b">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {ordersData.map((order) => (
+            <tr key={order.id}>
+              <td className="py-2 px-4 border-b">{order.id}</td>
+              <td className="py-2 px-4 border-b">{order.customer}</td>
+              <td className="py-2 px-4 border-b">${order.total.toFixed(2)}</td>
+              <td className="py-2 px-4 border-b">{order.status}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
diff --git a/app/admin/image.ts b/app/admin/image.ts
new file mode 100644
index 0000000..1f1e759
--- /dev/null
+++ b/app/admin/image.ts
@@ -0,0 +1,42 @@
+import { type ChangeEvent, type Dispatch } from "react"
+import { createClient } from "@/utils/supabase/client";
+
+const uploadImage = async (e: ChangeEvent<HTMLInputElement>) => {
+    const supabase = await createClient()
+    if (!e.target.files || e.target.files.length === 0) {
+        console.error("No file selected")
+        return
+    }
+
+    const file = e.target.files[0]
+    const formData = new FormData()
+    formData.append("file", file)
+
+    try {
+        const response = await fetch("/api/upload", {
+            method: "POST",
+            body: formData,
+        })
+
+        if (!response.ok) {
+            throw new Error("Upload failed")
+        }
+
+        const data = await response.json()
+
+        if (data.success) {
+            await new Promise(r => setTimeout(r, 1000));
+            console.log('Data:', data)
+            const { data: result, error } = await supabase.storage.from('Images').createSignedUrl(data.data.path, 315569520);
+            if (error) {
+                throw error;
+            }
+            return result.signedUrl 
+        } else {
+            console.error("Upload failed")
+        }
+    } catch (error) {
+        console.error("Error uploading file:", error)
+    } 
+}
+export default uploadImage;
\ No newline at end of file
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
new file mode 100644
index 0000000..8d7f69a
--- /dev/null
+++ b/app/admin/page.tsx
@@ -0,0 +1,26 @@
+import Inventory from "./Inventory"
+import AddProduct from "./AddProduct"
+import Orders from "./Orders"
+import { createClient } from "@/utils/supabase/server"
+import { redirect } from "next/navigation";
+
+export default async function AdminPage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    redirect("/login")
+  }
+  if (supabase.from('admin').select('id').eq('id', user.id).single() === null) {
+    alert('You are not authorized to view this page')
+    redirect("/")
+  }
+  return (
+    <div className="space-y-8 p-8 h-full bg-white">
+      <h1 className="text-3xl font-bold text-green-700">Admin Dashboard</h1>
+      <Inventory />
+      <AddProduct />
+      <Orders />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/api/add-bike/route.ts b/app/api/add-bike/route.ts
new file mode 100644
index 0000000..e010ffa
--- /dev/null
+++ b/app/api/add-bike/route.ts
@@ -0,0 +1,36 @@
+'use server'
+
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@/utils/supabase/server";
+import { type Bike } from "@/utils/getBike";
+
+export async function POST(req: NextRequest) {
+    const supabase = await createClient();
+    const bike = await req.json() as Bike;
+
+    if (!bike) {
+        return NextResponse.json({ success: false, message: 'Missing required fields' }, { status: 400 });
+    }
+
+    try {
+        const { data, error } = await supabase
+            .from('bikes')
+            .insert({
+                name: bike.name,
+                description: bike.description,
+                image: bike.image,
+                amount_stocked: bike.amount_stocked,
+                rental_rate: bike.rental_rate,
+                sell_price: bike.sell_price,
+                damage_rate: bike.damage_rate,
+            });
+
+        if (error) {
+            throw error;
+        }
+
+        return NextResponse.json({ success: true, data }, { status: 200 });
+    } catch (error) {
+        return NextResponse.json({ success: false, message: error}, { status: 500 });
+    }
+}
\ No newline at end of file
diff --git a/app/api/upload/route.ts b/app/api/upload/route.ts
new file mode 100644
index 0000000..42d2c61
--- /dev/null
+++ b/app/api/upload/route.ts
@@ -0,0 +1,35 @@
+'use server'
+
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@/utils/supabase/server";
+
+export async function POST(request: NextRequest) {
+    const formData = await request.formData();
+    const file = formData.get('file') as File;
+    const supabase = await createClient();
+
+    if (!file) {
+        return NextResponse.json({ success: false, message: 'No file uploaded' }, { status: 400 });
+    }
+
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const filename = `${Date.now()}-${file.name}`;
+
+    try {
+        const { data, error } = await supabase.storage
+            .from('Images')
+            .upload(filename, buffer, {
+                cacheControl: '3600',
+                upsert: false
+            });
+        if (error) {
+            throw error;
+        }
+        console.log('File uploaded:', data);
+        return NextResponse.json({ success: true, data }, { status: 200 });
+    } catch (error) {
+        console.error('Error saving file:', error);
+        return NextResponse.json({ success: false, message: 'Error saving file' }, { status: 500 });
+    }
+}
\ No newline at end of file