diff --git a/client/package-lock.json b/client/package-lock.json
index f9648a0..46f7ac1 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -145,6 +145,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -168,6 +169,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1380,6 +1382,7 @@
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.80.7.tgz",
       "integrity": "sha512-u2F0VK6+anItoEvB3+rfvTO9GEh2vb00Je05OwlUe/A0lkJBgW1HckiY3f9YZa+jx6IOe4dHPh10dyp9aY3iRQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.80.7"
       },
@@ -1445,6 +1448,7 @@
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1465,6 +1469,7 @@
       "integrity": "sha512-4O3idHxhyzjClSMJ0a29AcoK0+YwnEqzI6oz3vlRf3xw0zbzt15MzXwItOlnr5nIth6zlY2RENLsOPvhyrKAQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.34.1",
         "@typescript-eslint/types": "8.34.1",
@@ -1669,6 +1674,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2110,6 +2116,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001718",
         "electron-to-chromium": "^1.5.160",
@@ -2846,6 +2853,7 @@
       "integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3051,6 +3059,7 @@
       "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.8",
@@ -4549,6 +4558,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -5473,6 +5483,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5578,6 +5589,7 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -5720,6 +5732,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5729,6 +5742,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -6593,6 +6607,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -6847,6 +6862,7 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/client/src/components/ui/button_go_organization_dashboard.tsx b/client/src/components/ui/button_go_organization_dashboard.tsx
new file mode 100644
index 0000000..e4f53c4
--- /dev/null
+++ b/client/src/components/ui/button_go_organization_dashboard.tsx
@@ -0,0 +1,41 @@
+// src/components/ui/button_go_organization_dashboard.tsx
+
+/* 
+This is the button component that will take us to the organization dashboard page
+Copy this function into its own file so it can be reused in multiple places
+*/
+
+// Next.js uses the Link component for client-side navigation
+// better and faster then <a> tags.
+import Link from "next/link";
+import React from "react";
+
+/* 
+legacyBehavior is used to enable the older behavior of Link component 
+we dont actually need to have an <a> tag inside Link cause Link itself can handle it,
+but for styling purposes we are using it here
+*/
+const ButtonGoOrganizationDashboard = () => {
+  return (
+    // Change the href to match the new page name, the name is based on the file name
+    // example: organization_dashboard.tsx -> /organization_dashboard
+    <Link href="/organization_dashboard" legacyBehavior>
+      <a
+        style={{
+          padding: "10px 20px",
+          marginTop: "20px",
+          backgroundColor: "#0070f3",
+          color: "white",
+          borderRadius: "5px",
+          textDecoration: "none",
+          fontSize: "1.1em",
+        }}
+      >
+        Go to Dashboard
+      </a>
+    </Link>
+  );
+};
+
+// Use default export so it can be easily imported into the page
+export default ButtonGoOrganizationDashboard;
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index c051281..02c599a 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -1,36 +1,33 @@
-import { Inter as FontSans } from "next/font/google";
-import { useState } from "react";
+// this is the path to this page
+// src/pages/index.tsx
 
-import { usePings } from "@/hooks/pings";
-import { cn } from "@/lib/utils";
-
-import { Button } from "../components/ui/button";
-
-const fontSans = FontSans({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
-export default function Home() {
-  const [clicked, setClicked] = useState(false);
-  const { data, isLoading } = usePings({
-    enabled: clicked,
-  });
+import ButtonGoOrganizationDashboard from "../components/ui/button_go_organization_dashboard";
 
+// this is a react functional component
+// it returns a html element that will render the jsx inside it
+const LandingPage = () => {
   return (
-    <main
-      className={cn(
-        "flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
-        fontSans.variable,
-      )}
+    <div
+      // Simple inline styles for centering content
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "100vh",
+        textAlign: "center",
+      }}
     >
-      <h1 className="text-3xl text-primary">Test title</h1>
-      <Button onClick={() => setClicked(true)}>
-        {isLoading ? "Loading" : "Ping"}
-      </Button>
-      <p>
-        Response from server: <span>{data as string}</span>
-      </p>
-    </main>
+      <h1>Welcome to the Inventory Management System</h1>
+      <p>This is the main landing page for your application.</p>
+
+      {/* The Next.js Link component handles navigation. 
+        href="/dashboard" will take us to the page we just renamed.
+      */}
+
+      <ButtonGoOrganizationDashboard />
+    </div>
   );
-}
+};
+
+export default LandingPage;
diff --git a/client/src/pages/organization_dashboard.tsx b/client/src/pages/organization_dashboard.tsx
new file mode 100644
index 0000000..97f3674
--- /dev/null
+++ b/client/src/pages/organization_dashboard.tsx
@@ -0,0 +1,30 @@
+// src/pages/organization_dashboard.tsx (Update the import path)
+
+import Head from "next/head";
+// The Header component is now one directory level up from 'pages',
+// so the path is '../components/Header'
+//import Header from '../components/Header';
+
+const DashboardPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Inventory Dashboard</title>
+      </Head>
+      <div className="dashboard-container">
+        {/* 1. Navigation Bar */}
+        {/* <Header /> */}
+
+        {/* 2. Main content wrapper */}
+        <main className="dashboard-content">
+          {/* Components for Statistics, Recent Activity, and Quick Actions */}
+          <h1>Welcome to the Dashboard!</h1>{" "}
+          {/* Add a temporary header to confirm it works */}
+        </main>
+      </div>
+    </>
+  );
+};
+
+// export to make the function available to other parts of the app
+export default DashboardPage;
diff --git a/client/src/pages/original_index.txt b/client/src/pages/original_index.txt
new file mode 100644
index 0000000..c051281
--- /dev/null
+++ b/client/src/pages/original_index.txt
@@ -0,0 +1,36 @@
+import { Inter as FontSans } from "next/font/google";
+import { useState } from "react";
+
+import { usePings } from "@/hooks/pings";
+import { cn } from "@/lib/utils";
+
+import { Button } from "../components/ui/button";
+
+const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+export default function Home() {
+  const [clicked, setClicked] = useState(false);
+  const { data, isLoading } = usePings({
+    enabled: clicked,
+  });
+
+  return (
+    <main
+      className={cn(
+        "flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
+        fontSans.variable,
+      )}
+    >
+      <h1 className="text-3xl text-primary">Test title</h1>
+      <Button onClick={() => setClicked(true)}>
+        {isLoading ? "Loading" : "Ping"}
+      </Button>
+      <p>
+        Response from server: <span>{data as string}</span>
+      </p>
+    </main>
+  );
+}