diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
new file mode 100644
index 0000000..13ee4e3
--- /dev/null
+++ b/frontend/src/app/blog/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <main className="flex items-center justify-center h-screen">
+      This is blog list page
+    </main>
+  );
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 59a32e6..fa2d610 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -3,6 +3,8 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
 import "./globals.css";
 
+import { NavigationMenu } from "@/components/Navbar";
+
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -40,7 +42,12 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
+    <div className="min-h-screen">
+      <NavigationMenu />
           {children}
+      <footer className=""></footer>
+    </div>
+
         </ThemeProvider>
       </body>
     </html>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index ae312d1..29895dd 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,14 +1,9 @@
-import { NavigationMenu } from "@/components/Navbar";
 import { NameComponent } from "@/components/NameComponent";
 
 export default function Home() {
   return (
-    <div className="min-h-screen">
-      <NavigationMenu />
-      <main className="flex items-center justify-center h-screen">
-        <NameComponent />
-      </main>
-      <footer className=""></footer>
-    </div>
+    <main className="flex items-center justify-center h-screen">
+      <NameComponent />
+    </main>
   );
 }
diff --git a/frontend/src/app/portfolio/page.tsx b/frontend/src/app/portfolio/page.tsx
new file mode 100644
index 0000000..ec7c08a
--- /dev/null
+++ b/frontend/src/app/portfolio/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <main className="flex items-center justify-center h-screen">
+      This is portfolio
+    </main>
+  );
+}
diff --git a/frontend/src/components/NameComponent.tsx b/frontend/src/components/NameComponent.tsx
index 8b5bd67..f75d165 100644
--- a/frontend/src/components/NameComponent.tsx
+++ b/frontend/src/components/NameComponent.tsx
@@ -1,17 +1,12 @@
-"use client";
-
 import * as React from "react";
-import { useTheme } from "next-themes";
 
 export function NameComponent() {
-  const { theme } = useTheme();
-
   return (
     <div className="flex justify-center font-[family-name:var(--font-spacegrotesk-sans)] font-semibold text-fluid tracking-tighter">
       <p>
         <span className="selection:bg-red-500">Ameya </span>
         <span
-          className={`text-red-500 ${theme === "light" ? "selection:bg-black" : "selection:bg-white"}`}
+          className={`text-red-500 selection:bg-black dark:selection:bg-white`}
         >
           Shenoy
         </span>