diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..87cc0b3
Binary files /dev/null and b/.DS_Store differ
diff --git a/frontend/app/about/page.tsx b/frontend/app/about/page.tsx
new file mode 100644
index 0000000..ef19d4e
--- /dev/null
+++ b/frontend/app/about/page.tsx
@@ -0,0 +1,82 @@
+import Austin from "../../assets/austin.png";
+import Shawn from "../../assets/shawn.jpg";
+import Brandon from "../../assets/brandon.jpeg";
+
+const test = () => {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between pt-24">
+      <div id="textWrapper" className="w-1/2 h-full flex flex-col mt-10">
+        <div className="text-4xl p-2 text-center">The Model</div>
+        <div className="text-lg p-2 pb-8">
+          This neural network model is based on EfficientNetB3, comprising
+          11,184,179 parameters (approximately 42.66 MB). It's designed for
+          image classification with 256x256x3 input images. The model includes a
+          Batch Normalization layer, a Dense layer with 256 neurons, dropout for
+          regularization, and an output layer with 4 classes. While leveraging a
+          pre-trained model like EfficientNetB3 boosts performance, it presents
+          challenges such as high parameter count, fine-tuning complexities,
+          memory/storage demands, and the need for substantial training data.
+          These aspects should be considered when using this model in practice.
+          Still we were able to reach an accuracy of 0.9925 on our testing set.
+          We got our dataset from
+          <a href="https://www.kaggle.com/datasets/masoudnickparvar/brain-tumor-mri-dataset/data." target="_blank">
+            {" "}
+            <u> Kaggle</u>
+          </a>
+          . We used the
+          <a href="https://arxiv.org/abs/1905.11946" target="_blank">
+            {" "}
+            <u> Effecient Net V3</u>.
+          </a>
+        </div>
+      </div>
+
+      <div className="flex justify-center items-center space-x-32">
+        <div className="flex flex-col items-center">
+          <img
+            src={Austin.src}
+            alt="Image 1"
+            className="w-48 h-64 border-stone-200 border-x-4 border-y-4"
+          />
+          <p className="mt-2 text-center">Austin Robertson</p>
+        </div>
+
+        <div className="flex flex-col items-center">
+          <img
+            src={Shawn.src}
+            alt="Image 2"
+            className="w-48 h-64  border-stone-200 border-x-4 border-y-4"
+          />
+          <p className="mt-2 text-center">Shuqing (Shawn) Chen</p>
+        </div>
+
+        <div className="flex flex-col items-center">
+          <img
+            src={Brandon.src}
+            alt="Image 3"
+            className="w-48 h-64  border-stone-200 border-x-4 border-y-4"
+          />
+          <p className="mt-2 text-center">Brandon Wand</p>
+        </div>
+
+        <div className="flex flex-col items-center">
+          <img
+            src={Austin.src}
+            alt="Image 4"
+            className="w-48 h-64  border-stone-200 border-x-4 border-y-4"
+          />
+          <p className="mt-2 text-center">Nathan Wand</p>
+        </div>
+      </div>
+
+      <div className="flex justify-center items-center space-x-32">
+        <p className="mt-2 text-center w-48 h-64">Testing</p>
+        <p className="mt-2 text-center w-48 h-64">Testing</p>
+        <p className="mt-2 text-center w-48 h-64">Testing</p>
+        <p className="mt-2 text-center w-48 h-64">Testing</p>
+      </div>
+    </main>
+  );
+};
+
+export default test;
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index fd81e88..2e27c71 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -2,26 +2,32 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base{
+  html {
+    @apply text-white;
+  }
+}
+
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --gradient: linear-gradient(45deg, #424141, #086cb5, #00b9b4);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+.background_gradient {
+  background-size: 200%;
+  background-image: var(--gradient);
+  animation: g_anime 8s ease infinite alternate;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+@keyframes g_anime {
+  0% {
+    background-position: left;
+  }
+  100% {
+    background-position: right;
+  }
 }
+
+
+
+
+
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index ee0d758..a48eb85 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={`${inter.className} background_gradient`}>
         <Navbar/>
         {children}
       </body>
diff --git a/frontend/app/navbar.tsx b/frontend/app/navbar.tsx
index f2a577f..d5390c8 100644
--- a/frontend/app/navbar.tsx
+++ b/frontend/app/navbar.tsx
@@ -1,4 +1,6 @@
+"use client";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const Navbar = () => {
   const routes = [
@@ -10,12 +12,25 @@ const Navbar = () => {
       path: "/test",
       title: "Test",
     },
+    {
+      path: "/about",
+      title: "About",
+    },
   ];
 
+  const currentPath = usePathname();
+  console.log(currentPath);
+
   return (
-    <div className="absolute inset-x-1 mx-auto w-8/12 h-fit mt-6 py-2 rounded-full flex flex-row justify-evenly border-solid bg-mriSlate">
+    <div className="absolute inset-x-1 mx-auto w-8/12 h-fit mt-14 py-2 rounded-full flex flex-row justify-evenly border-solid bg-mriSlate">
       {routes.map((route, index) => (
-        <Link className="hover:bg-mriBlue rounded-full px-16 transition ease-in text-lg" href={route.path} key={index}>
+        <Link
+          className={`${
+            currentPath === route.path ? "bg-mriBlue" : "hover:bg-mriBlue"
+          } rounded-full px-16 transition ease-in text-lg`}
+          href={route.path}
+          key={index}
+        >
           {route.title}
         </Link>
       ))}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 31a4101..36e63e2 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,9 +1,28 @@
-import Image from 'next/image'
+import Image from "next/image";
+import Mri from "../assets/mri.png"
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between pt-24 bg-mriCyan">
-      <div>test home</div>
+    <main className="transition-all flex h-screen flex-col items-center justify-between pt-24">
+      <div className="flex w-screen h-full">
+        <div id="leftFlex" className="flex-1 flex justify-center h-full">
+          <div className="w-auto my-auto ml-36">
+            <h1 className="text-2xl p-2">TumorFinders</h1>
+            <h1 className="text-5xl text-bold p-2">
+              Exploring AI Precision in Brain Tumor Detection
+            </h1>
+            <p className="text-base p-2">
+              At TumorFinders, we delve deep into AI precision. Our app is a
+              playground for testing and optimizing custom AI models for brain
+              tumor identification from MRI scans. Join us on a journey through
+              the technical frontier of medical AI at TumorFinders.
+            </p>
+          </div>
+        </div>
+        <div id="rightFlex" className="flex-1 flex justify-center h-full">
+          <div className="w-auto my-auto justify-start"><img src={Mri.src} alt="" /></div>
+        </div>
+      </div>
     </main>
-  )
+  );
 }
diff --git a/frontend/app/test/page.tsx b/frontend/app/test/page.tsx
index 005fe68..b560935 100644
--- a/frontend/app/test/page.tsx
+++ b/frontend/app/test/page.tsx
@@ -1,6 +1,6 @@
 const test = () => {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between pt-24 bg-mriCyan">
+    <main className="flex min-h-screen flex-col items-center justify-between pt-24">
       <div>test test :P</div>
     </main>
   );
diff --git a/frontend/assets/austin.png b/frontend/assets/austin.png
new file mode 100644
index 0000000..5366062
Binary files /dev/null and b/frontend/assets/austin.png differ
diff --git a/frontend/assets/brandon.jpeg b/frontend/assets/brandon.jpeg
new file mode 100644
index 0000000..5dd3044
Binary files /dev/null and b/frontend/assets/brandon.jpeg differ
diff --git a/frontend/assets/mri.png b/frontend/assets/mri.png
new file mode 100644
index 0000000..efc18b1
Binary files /dev/null and b/frontend/assets/mri.png differ
diff --git a/frontend/assets/shawn.jpg b/frontend/assets/shawn.jpg
new file mode 100644
index 0000000..1914b22
Binary files /dev/null and b/frontend/assets/shawn.jpg differ
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ae8d069..9ece2e3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "13.5.4",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "vanta": "^0.5.24"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -4169,6 +4170,11 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/vanta": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/vanta/-/vanta-0.5.24.tgz",
+      "integrity": "sha512-fvieEbHy1ZS23zrcX+topzqAgA4Uct1enngOEWLFBgs9TtOf6RDFOYatH7KSVdrABzQDMCQ5myQy+nTSZZwLzg=="
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e89006f..1a75029 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "13.5.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "13.5.4"
+    "vanta": "^0.5.24"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.4",
     "postcss": "^8",
     "tailwindcss": "^3",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.4"
+    "typescript": "^5"
   }
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index acd8064..1e2bccd 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -6,6 +6,7 @@ const config: Config = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       backgroundImage: {