diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
new file mode 100644
index 0000000..1d16cd7
--- /dev/null
+++ b/app/(root)/layout.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Header from "../../components/Header";
+
+const Layout = ({ children }: { children : React.ReactNode }) => {
+    return (
+        <main className="min-h-screen text-gray-400">
+            <Header/>
+
+            <div className="container py-10">
+                {children}
+            </div>
+        </main>
+    )
+}
+export default Layout
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
new file mode 100644
index 0000000..7bfb095
--- /dev/null
+++ b/app/(root)/page.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import {Button} from "../../components/ui/button";
+
+const Home = () => {
+    return (
+        <div className="flex min-h-screen home-wrapper">
+            <div className="flex flex-col items-center justify-center w-full">
+                <h1 className="text-4xl font-bold mb-4">Welcome to OpenStock</h1>
+                <p className="text-lg mb-8 text-center max-w-2xl">
+                    OpenStock is an open-source alternative to expensive market platforms.
+                    Track real-time prices, set personalized alerts, and explore detailed company insights.
+                </p>
+                <Button>Get Started</Button>
+            </div>
+        </div>
+    )
+}
+export default Home
diff --git a/app/layout.tsx b/app/layout.tsx
index 07b9b52..233636e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -18,17 +18,17 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
+                                       children,
+                                   }: Readonly<{
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en" className="dark">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    return (
+        <html lang="en" className="dark">
+        <body
+            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        >
         {children}
-      </body>
-    </html>
-  );
+        </body>
+        </html>
+    );
 }
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index 5ae6a5e..0000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import {Button} from "@/components/ui/button";
-
-const Page = () => {
-    return (
-        <div className="flex justify-center items-center h-screen">
-            <Button>Click Me</Button>
-        </div>
-    )
-}
-export default Page
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..259141c
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+const Header = () => {
+    return (
+        <div>Header</div>
+    )
+}
+export default Header
