diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index 8a306d2..2c520df 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -1,31 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-/* 
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-} */
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -52,7 +28,7 @@ body {
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
+    --radius: 0.5rem;
   }
   .dark {
     --background: 240 10% 3.9%;
@@ -78,14 +54,30 @@ body {
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
+    --chart-5: 340 75% 55%;
   }
 }
+
 @layer base {
   * {
     @apply border-border;
   }
+  
   body {
     @apply bg-background text-foreground;
+    background-image: url('https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    min-height: 100vh;
   }
-}
\ No newline at end of file
+
+  .line-chart {
+    height: 400px; /* Desired height */
+    width: 100%; /* Full width */
+    max-width: 800px; /* Optional: Limit max width */
+    margin: 20px auto; /* Center it */
+    position: relative; /* Ensure positioning */
+  }
+  
+}
diff --git a/client/src/components/Navbar/index.tsx b/client/src/components/Navbar/index.tsx
index d675ba9..a89ace3 100644
--- a/client/src/components/Navbar/index.tsx
+++ b/client/src/components/Navbar/index.tsx
@@ -2,51 +2,61 @@ import * as React from "react";
 import {
   NavigationMenu,
   NavigationMenuContent,
-  NavigationMenuIndicator,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  NavigationMenuViewport,
 } from "@radix-ui/react-navigation-menu";
+import StockChart from '../StockChart'; // Adjust the path if necessary
 
-export default function Navbar() {
+export default function Home() {
   return (
-    <div className="flex flex-col w-full">
-      <div className="bg-black text-white py-2">
-        <div className="max-w-7xl mx-auto">
-          <h1 className="text-2xl px-4">Greenline</h1>
+    <div className="relative">
+      <div className="flex flex-col w-full">
+        <div className="bg-black text-white py-2">
+          <div className="max-w-7xl mx-auto">
+            <h1 className="text-2xl px-4 italic">
+              <span className="text-green-400">green</span>line
+            </h1>
+          </div>
         </div>
-      </div>
-
-      <NavigationMenu className="bg-zinc-900 text-white">
-        <div className="max-w-7xl mx-auto">
-          <NavigationMenuList className="flex">
-
-            <NavigationMenuItem className="group">
-              <NavigationMenuTrigger className="flex items-center space-x-2 hover:bg-zinc-800 text-sm font-semibold py-2 px-4 group-hover:bg-zinc-800">
-                <span>Markets</span>
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Chevron Down" role="img"><title>Chevron Down</title><path d="M11.9954 15.0785L19.5387 7.54001L21 9.00226L11.9945 18.002L3 9.00179L4.46225 7.54047L11.9954 15.0785Z" fill="currentColor"></path></svg>
-              </NavigationMenuTrigger>
-
-              <NavigationMenuContent>
-                <NavigationMenuLink>Link</NavigationMenuLink>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
 
-            <NavigationMenuItem className="group">
-              <NavigationMenuTrigger className="flex items-center space-x-2 hover:bg-zinc-800 text-sm font-semibold py-2 px-4 group-hover:bg-zinc-800">
-                <span>Markets</span>
-              </NavigationMenuTrigger>
-
-              <NavigationMenuContent>
-                <NavigationMenuLink>Link</NavigationMenuLink>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
+        <NavigationMenu className="bg-zinc-900 text-white">
+          <div className="max-w-7xl mx-auto">
+            <NavigationMenuList className="flex">
+              <NavigationMenuItem className="group">
+                <NavigationMenuTrigger className="flex items-center space-x-2 hover:bg-zinc-800 text-sm font-semibold py-2 px-4 group-hover:bg-zinc-800">
+                  <span>Glossary</span>
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Chevron Down" role="img">
+                    <title>Chevron Down</title>
+                    <path d="M11.9954 15.0785L19.5387 7.54001L21 9.00226L11.9945 18.002L3 9.00179L4.46225 7.54047L11.9954 15.0785Z" fill="currentColor"></path>
+                  </svg>
+                </NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <NavigationMenuLink>Link</NavigationMenuLink>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem className="group">
+                <NavigationMenuTrigger className="flex items-center space-x-2 hover:bg-zinc-800 text-sm font-semibold py-2 px-4 group-hover:bg-zinc-800">
+                  <span>Resources</span>
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Chevron Down" role="img">
+                    <title>Chevron Down</title>
+                    <path d="M11.9954 15.0785L19.5387 7.54001L21 9.00226L11.9945 18.002L3 9.00179L4.46225 7.54047L11.9954 15.0785Z" fill="currentColor"></path>
+                  </svg>
+                </NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <NavigationMenuLink>Link</NavigationMenuLink>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </div>
+        </NavigationMenu>
+      </div>
 
-          </NavigationMenuList>
-        </div>
-      </NavigationMenu>
+      {/* Chart Container */}
+      <div className="chart-container absolute top-40 left-1/2 transform -translate-x-1/2">
+        <StockChart />
+      </div>
     </div>
   );
 }
diff --git a/client/src/components/StockChart.tsx b/client/src/components/StockChart.tsx
new file mode 100644
index 0000000..5818314
--- /dev/null
+++ b/client/src/components/StockChart.tsx
@@ -0,0 +1,66 @@
+"use client"; // Add this line
+
+import React, { useRef } from 'react';
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler } from 'chart.js';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler);
+
+const StockChart: React.FC = () => {
+  const chartRef = useRef(null); // Example usage of useRef
+
+  const data = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label: 'Stock Price',
+        data: [65, 59, 80, 81, 56, 55, 40],
+        fill: false, // CHANGE TO TRUE FOR HIGHLIGHT UNDER LINE
+        backgroundColor: 'rgba(75, 192, 192, 0.2)',
+        borderColor: '#22c55e', // Set line color to green
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top' as const,
+        labels: {
+          color: 'white', // Set legend text color to white
+        },
+      },
+      title: {
+        display: true,
+        text: 'Stock Prices Over Time',
+        color: 'white', // Set title color to white
+      },
+    },
+    scales: {
+      x: {
+        ticks: {
+          color: 'white', // Set x-axis tick color to white
+        },
+      },
+      y: {
+        ticks: {
+          color: 'white', // Set y-axis tick color to white
+        },
+      },
+    },
+  };
+
+  return (
+    <div className="line-chart">
+      <Line
+        options={options}
+        data={data}
+        style={{ height: '500px', width: '100%' }} // Force size
+      />
+    </div>
+  );
+};
+
+export default StockChart;