diff --git a/public/_data/table.ts b/public/_data/table.ts
new file mode 100644
index 0000000..d119a4a
--- /dev/null
+++ b/public/_data/table.ts
@@ -0,0 +1,128 @@
+function getRandomDate() {
+  const maxDate = Date.now();
+  const timestamp = Math.floor(Math.random() * maxDate);
+  return new Date(timestamp);
+}
+
+const tableData = [
+  {
+    id: 1,
+    model: "UX9XG2",
+    problem: "Screen cracked",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Nicolas",
+  },
+  {
+    id: 2,
+    model: "LKRA2Q",
+    problem: "Slow Phone",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Jessica",
+  },
+  {
+    id: 3,
+    model: "896C1D",
+    problem: "Bad Battery Life",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Steven",
+  },
+  {
+    id: 4,
+    model: "DU0NSZ",
+    problem: "Overheating Phone",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Willard",
+  },
+  {
+    id: 5,
+    model: "95PZXE",
+    problem: "App Crashes / Freezes",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Kezia",
+  },
+  {
+    id: 6,
+    model: "CSE7Q0",
+    problem: "Apps Not Downloading",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Krish",
+  },
+  {
+    id: 7,
+    model: "1WCZ3K",
+    problem: "MicroSD Card Not Working",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Lillian",
+  },
+  {
+    id: 8,
+    model: "RX0YF5",
+    problem: "Damaged Charging Port",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "John",
+  },
+  {
+    id: 9,
+    model: "Z9YK0C",
+    problem: "Connectivity Issues",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Olivier",
+  },
+  {
+    id: 10,
+    model: "FE7NSM",
+    problem: "The Screen Is Not Bright Enough",
+    category: "Mobile",
+    assessDate: "08 April 2023",
+    assessComplete: "08 April 2023",
+    repairDate: "09 April 2023",
+    repairComplete: "10 April 2023",
+    status: "",
+    tech: "Sandra",
+  },
+];
+export { tableData, getRandomDate };
diff --git a/public/images/1.jpg b/public/images/1.jpg
new file mode 100644
index 0000000..5945a53
Binary files /dev/null and b/public/images/1.jpg differ
diff --git a/public/images/10.jpg b/public/images/10.jpg
new file mode 100644
index 0000000..f1c885c
Binary files /dev/null and b/public/images/10.jpg differ
diff --git a/public/images/2.jpg b/public/images/2.jpg
new file mode 100644
index 0000000..7e8f0dd
Binary files /dev/null and b/public/images/2.jpg differ
diff --git a/public/images/3.jpg b/public/images/3.jpg
new file mode 100644
index 0000000..2a9300e
Binary files /dev/null and b/public/images/3.jpg differ
diff --git a/public/images/4.jpg b/public/images/4.jpg
new file mode 100644
index 0000000..2bee68c
Binary files /dev/null and b/public/images/4.jpg differ
diff --git a/public/images/5.jpg b/public/images/5.jpg
new file mode 100644
index 0000000..f22f1e1
Binary files /dev/null and b/public/images/5.jpg differ
diff --git a/public/images/6.jpg b/public/images/6.jpg
new file mode 100644
index 0000000..53579b9
Binary files /dev/null and b/public/images/6.jpg differ
diff --git a/public/images/7.jpg b/public/images/7.jpg
new file mode 100644
index 0000000..930fcee
Binary files /dev/null and b/public/images/7.jpg differ
diff --git a/public/images/8.jpg b/public/images/8.jpg
new file mode 100644
index 0000000..0461a9a
Binary files /dev/null and b/public/images/8.jpg differ
diff --git a/public/images/9.jpg b/public/images/9.jpg
new file mode 100644
index 0000000..9988f3c
Binary files /dev/null and b/public/images/9.jpg differ
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 7d93579..955872c 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -12,7 +12,7 @@ function classNames(...classes) {
 
 function Dashboard() {
     let [categories] = useState({
-        Table: [
+        Recent: [
             {
                 id: 1,
                 title: 'Does drinking coffee make you smarter?',
@@ -28,7 +28,7 @@ function Dashboard() {
                 shareCount: 2,
             },
         ],
-        Graph: [
+        Popular: [
             {
                 id: 1,
                 title: 'Is tech making coffee better or worse?',
@@ -61,51 +61,6 @@ function Dashboard() {
             },
         ],
     })
-
-    const data = [
-        {
-            name: 'Page A',
-            uv: 4000,
-            pv: 2400,
-            amt: 2400,
-        },
-        {
-            name: 'Page B',
-            uv: 3000,
-            pv: 1398,
-            amt: 2210,
-        },
-        {
-            name: 'Page C',
-            uv: 2000,
-            pv: 9800,
-            amt: 2290,
-        },
-        {
-            name: 'Page D',
-            uv: 2780,
-            pv: 3908,
-            amt: 2000,
-        },
-        {
-            name: 'Page E',
-            uv: 1890,
-            pv: 4800,
-            amt: 2181,
-        },
-        {
-            name: 'Page F',
-            uv: 2390,
-            pv: 3800,
-            amt: 2500,
-        },
-        {
-            name: 'Page G',
-            uv: 3490,
-            pv: 4300,
-            amt: 2100,
-        },
-    ];
     return (
         <>
             <Navbar />
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
index 1abb6d8..09a78f7 100644
--- a/src/pages/projects/index.tsx
+++ b/src/pages/projects/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Navbar from '../../../components/Navbar'
 import InputField from '../../../components/InputField'
+import { tableData } from '../../../public/_data/table'
 
 export default function Projects() {
   return (
@@ -8,53 +9,44 @@ export default function Projects() {
       <Navbar />
 
       <main>
-        <div className="container flex justify-center flex-col mx-auto">
+        <div className="container flex justify-center flex-col mx-auto p-2">
           <section className="my-4">
-            <h1 className="text-5xl font-bold">Projects</h1>
+            <h1 className="text-5xl font-semibold">Projects</h1>
           </section>
           <section className="my-4">
             <InputField className="searchInput input" name="search" type="search" placeholder="Search here" />
           </section>
           <section className="w-full overflow-x-auto">
             <table className="mt-4 border-collapse table-auto">
-              <thead className="bg-gray-100">
+              <thead className="bg-gray-100 text-gray-800">
                 <tr>
-                  <th>Units</th>
-                  <th>Unit name</th>
-                  <th>Date assessed</th>
-                  <th>Assessment completion date</th>
-                  <th>Date completed</th>
-                  <th>Status</th>
-                  <th>Technician</th>
-                  <th>Progress</th>
-                  <th>Unit problem</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Unit Model</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Unit Problem</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Category</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Date Assessed</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Assessment Completion</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Repair Date</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Repair Completed</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Status</th>
+                  <th className="text-gray-800 font-sans font-semibold text-center">Technician</th>
                 </tr>
               </thead>
               <tbody>
-                <tr>
-                  <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
-                  <td>Malcolm Lockyer</td>
-                  <td>1961</td>
-                  <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
-                  <td>Malcolm Lockyer</td>
-                  <td>1961</td>
-                </tr>
-                <tr>
-                  <td>Witchy Woman</td>
-                  <td>The Eagles</td>
-                  <td>1972</td>
-                  <td>Witchy Woman</td>
-                  <td>The Eagles</td>
-                  <td>1972</td>
-                </tr>
-                <tr>
-                  <td>Shining Star</td>
-                  <td>Earth, Wind, and Fire</td>
-                  <td>1975</td>
-                  <td>Shining Star</td>
-                  <td>Earth, Wind, and Fire</td>
-                  <td>1975</td>
-                </tr>
+                {
+                  tableData.map((item) => (
+                    <tr key={item.id}>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.model}</td>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.problem}</td>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.category}</td>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.assessDate}</td>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.assessComplete}</td>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.repairDate}</td>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.repairComplete}</td>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.status}</td>
+                      <td className="text-gray-800 font-sans font-normal text-center">{item.tech}</td>
+                    </tr>
+                  ))
+                }
               </tbody>
             </table>
           </section>