diff --git a/src/app/_components/HomePage.tsx b/src/app/_components/HomePage.tsx
index 436ff5b..aaa28b9 100644
--- a/src/app/_components/HomePage.tsx
+++ b/src/app/_components/HomePage.tsx
@@ -10,10 +10,10 @@ export const HomePage = () => {
             <Navbar />
             <div className="w-4/5 mx-auto mt-6">
                 <Tabs defaultValue="single" className="w-full">
-                    <TabsList className="grid w-full grid-cols-3 mb-8">
+                    <TabsList className="grid w-full grid-cols-2 mb-8">
                         <TabsTrigger value="single" className="font-bold">Single QR Code</TabsTrigger>
                         <TabsTrigger value="bulk" className="font-bold">Bulk Creation</TabsTrigger>
-                        <TabsTrigger value="style" className="font-bold">Configure QR Style</TabsTrigger>
+                        {/* <TabsTrigger value="style" className="font-bold">Configure QR Style</TabsTrigger> */}
                     </TabsList>
                     
                     <TabsContent value="single">
@@ -28,11 +28,11 @@ export const HomePage = () => {
                         </div>
                     </TabsContent>
 
-                    <TabsContent value="style">
+                    {/* <TabsContent value="style">
                         <div className="space-y-4">
                             <QRStyle />
                         </div>
-                    </TabsContent>
+                    </TabsContent> */}
                 </Tabs>
             </div>
         </section>
diff --git a/src/app/_components/Navbar.tsx b/src/app/_components/Navbar.tsx
index ccd1911..9f22765 100644
--- a/src/app/_components/Navbar.tsx
+++ b/src/app/_components/Navbar.tsx
@@ -2,11 +2,13 @@
 
 import React from 'react';
 import { Button } from "@/components/ui/button";
-import { MoonIcon, SunIcon } from "lucide-react";
+import { MoonIcon, SunIcon, Settings } from "lucide-react";
 import { useTheme } from "next-themes";
+import { useRouter } from "next/navigation";
 
 const Navbar = () => {
   const { theme, setTheme } = useTheme();
+  const router = useRouter();
 
   return (
     <div className="border-b">
@@ -16,8 +18,8 @@ const Navbar = () => {
           <span className="text-xl font-bold">QR-23</span>
         </div>
 
-        {/* Theme Toggle */}
-        <div className="ml-auto">
+        {/* Theme Toggle and Configuration */}
+        <div className="ml-auto flex items-center space-x-2">
           <Button 
             variant="ghost" 
             size="icon" 
@@ -28,6 +30,16 @@ const Navbar = () => {
             <MoonIcon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span className="sr-only">Toggle theme</span>
           </Button>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9"
+            onClick={() => router.push('/configure')}
+          >
+            <Settings className="h-4 w-4" />
+            <span className="sr-only">Open configuration</span>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/app/configure/page.tsx b/src/app/configure/page.tsx
new file mode 100644
index 0000000..2dde9aa
--- /dev/null
+++ b/src/app/configure/page.tsx
@@ -0,0 +1,9 @@
+import QRStyle from "../_components/QR/QRStyle/QRStyle";
+
+const ConfigurePage = () => {
+    return <div className="w-[80%] h-screen flex justify-center items-center">
+        <QRStyle/>
+    </div>
+}
+
+export default ConfigurePage;
\ No newline at end of file