diff --git a/package-lock.json b/package-lock.json
index 486dcb9..b287e15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "calcforcardiac",
       "version": "0.1.0",
       "dependencies": {
+        "animate.css": "^4.1.1",
         "next": "16.2.1",
         "react": "19.2.4",
         "react-dom": "19.2.4"
@@ -18,6 +19,7 @@
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "babel-plugin-react-compiler": "1.0.0",
+        "daisyui": "^5.5.19",
         "eslint": "^9",
         "eslint-config-next": "16.2.1",
         "tailwindcss": "^4",
@@ -2180,6 +2182,12 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -2672,6 +2680,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/daisyui": {
+      "version": "5.5.19",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.19.tgz",
+      "integrity": "sha512-pbFAkl1VCEh/MPCeclKL61I/MqRIFFhNU7yiXoDDRapXN4/qNCoMxeCCswyxEEhqL5eiTTfwHvucFtOE71C9sA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
diff --git a/package.json b/package.json
index 11579b1..a48b44f 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "next": "16.2.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
@@ -19,6 +20,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "babel-plugin-react-compiler": "1.0.0",
+    "daisyui": "^5.5.19",
     "eslint": "^9",
     "eslint-config-next": "16.2.1",
     "tailwindcss": "^4",
diff --git a/public/calcforcardiac_logo.png b/public/calcforcardiac_logo.png
new file mode 100644
index 0000000..c94cec5
Binary files /dev/null and b/public/calcforcardiac_logo.png differ
diff --git a/src/app/(calculators)/calculators/page.tsx b/src/app/(calculators)/calculators/page.tsx
new file mode 100644
index 0000000..96da397
--- /dev/null
+++ b/src/app/(calculators)/calculators/page.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import Navbar from "@/app/utils/Navbar"
+import Sidemenu from "@/app/utils/Sidemenu";
+import { useState } from "react";
+
+export default function Calculators(){
+    const [navbar, setNavbar] = useState<boolean>(false);
+    return(
+        <div className="grid grid-cols-[300px_1fr] grid-rows-[60px_1fr_40px] overflow-hidden calculators-container">
+            <Navbar navbarToggle={setNavbar}/>
+            <Sidemenu isNavOpen={navbar}/>
+            <div className="content"></div>
+            <div className="footer"></div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..a638af1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,38 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@plugin "daisyui";
+.calculators-container{
+  display: grid;
+  grid-template-areas:"navbar navbar" "sidebar content" "footer footer";
+  height: 100vh;
 }
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+.navbar{
+  grid-area: navbar;
+  background: 	#ed1b24;     
+  color: #FFFFFF;
 }
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+#logo{
+  transform: translateY(1px);
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.sidebar{
+  grid-area: sidebar;
+  color: #E5E7EB;
+  background: #F9FAFB;
 }
+.content{
+  grid-area: content;
+  background: #F9FAFB;  /* soft white */
+}
+.footer{
+  grid-area: footer;
+  background: #cccccc;   
+}
+.website-name {
+  font-size: 18px;
+  font-weight: 600;
+  align-self: center;
+  line-height: 1;
+}
+.sidemenu{
+  height:100%;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 976eb90..f1d8007 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,16 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import 'animate.css';
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -25,7 +15,6 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3f36f7c..d1e61da 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,64 +2,6 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <></>
   );
 }
diff --git a/src/app/utils/Navbar.tsx b/src/app/utils/Navbar.tsx
new file mode 100644
index 0000000..e65c3fd
--- /dev/null
+++ b/src/app/utils/Navbar.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+type Props = {
+  navbarToggle: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function Navbar({navbarToggle}: Props){
+    return(
+        <div className="navbar bg-base-100 shadow-sm z-50">
+            <div className="navbar-start">
+                <div className="dropdown">
+                    <button onClick={
+                        () => {
+                            navbarToggle(prev => !prev);
+                        }
+                    }>
+                        <div tabIndex={0} role="button" className="btn btn-ghost btn-circle" >
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
+                    </div>
+                    </button>
+                    
+                </div>
+            </div>
+            <div className="navbar-center">
+                <a href="/" className="flex items-center gap-2 leading-none translate-y-[10px]">
+                    <img src="/calcforcardiac_logo.png" className="w-32 h-32 object-contain" />
+                    <span className="text-lg font-semibold flex items-center relative top-[-10px]">CalcForCardiac</span>
+                </a>
+            </div>
+            <div className="navbar-end">
+                <button className="btn btn-ghost btn-circle">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>
+                </button>
+                <button className="btn btn-ghost btn-circle">
+                <div className="indicator">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>
+                    <span className="badge badge-xs badge-primary indicator-item"></span>
+                </div>
+                </button>
+            </div>
+            </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/utils/Sidemenu.tsx b/src/app/utils/Sidemenu.tsx
new file mode 100644
index 0000000..a4cd6e5
--- /dev/null
+++ b/src/app/utils/Sidemenu.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+type Props = {
+    isNavOpen: boolean;
+}
+
+export default function Sidemenu({isNavOpen}: Props){
+    return(
+    <div className="flex flex-col items-center sidebar pointer-events-auto">
+        <ul className={`menu bg-base-200 rounded-box
+    w-[300px] h-full
+    fixed top-[60px] left-0 z-40
+
+    transform-gpu will-change-transform
+    transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isNavOpen 
+      ? "translate-x-0 opacity-100 visible" 
+      : "-translate-x-[110%] opacity-0 invisible pointer-events-none"}`} id="calclist">
+            <li>
+                <details open>
+                <summary>Parent</summary>
+                <ul>
+                    <li><a>Submenu 1</a></li>
+                    <li><a>Submenu 2</a></li>
+                </ul>
+                </details>
+            </li>
+        </ul>
+    </div>
+    );
+}
\ No newline at end of file