diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx
new file mode 100644
index 0000000..3606157
--- /dev/null
+++ b/src/app/app/page.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import { useState } from "react";
+
+export default function AppPage() {
+  const [equation, setEquation] = useState("");
+  const [latex, setLatex] = useState("");
+
+  const handleFormatEquation = () => {
+    // Placeholder for equation formatting logic
+    setLatex(`\\text{Formatted: } ${equation}`);
+  };
+
+  const handleCopyLatex = () => {
+    navigator.clipboard.writeText(latex);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="EquationFlow"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Features", id: "/#features" },
+            { name: "How It Works", id: "/#how-it-works" },
+            { name: "GitHub", id: "https://github.com" },
+            { name: "Docs", id: "https://docs.example.com" },
+          ]}
+          button={{ text: "Home", href: "/" }}
+        />
+      </div>
+
+      <div className="min-h-screen w-full flex items-center justify-center py-20 px-4">
+        <div className="w-full max-w-2xl">
+          <div className="text-center mb-12">
+            <h1 className="text-5xl md:text-6xl font-bold mb-4 text-foreground">
+              Equation Formatter
+            </h1>
+            <p className="text-lg text-foreground/70">
+              Type your equation and watch it format in real-time
+            </p>
+          </div>
+
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Enter your equation:
+              </label>
+              <textarea
+                value={equation}
+                onChange={(e) => setEquation(e.target.value)}
+                placeholder="e.g., x^2 + y^2 = r^2"
+                className="w-full p-4 border-2 border-accent rounded-lg focus:outline-none focus:border-primary-cta bg-card text-foreground"
+                rows={4}
+              />
+            </div>
+
+            <button
+              onClick={handleFormatEquation}
+              className="w-full py-3 px-6 bg-primary-cta text-primary-cta-text font-semibold rounded-lg hover:opacity-90 transition-opacity"
+            >
+              Format Equation
+            </button>
+
+            {latex && (
+              <div className="bg-card border-2 border-accent rounded-lg p-6">
+                <h3 className="text-sm font-medium text-foreground mb-2">
+                  LaTeX Output:
+                </h3>
+                <code className="text-foreground/80 break-all">{latex}</code>
+                <button
+                  onClick={handleCopyLatex}
+                  className="mt-4 w-full py-2 px-4 bg-secondary-cta text-secondary-cta-text font-medium rounded-lg hover:opacity-90 transition-opacity"
+                >
+                  Copy LaTeX
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6f0afd0..7c14c5f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,11 +1,14 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
+import "./styles/variables.css";
+import "./styles/base.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-  title: "EquationFlow",  description: "Instantly convert plain-text equations into professionally formatted formulas."};
+  title: "EquationFlow - Fast Equation Formatter",  description: "Convert plain-text equations into professionally formatted formulas. Real-time preview, zero friction, offline-ready."};
 
 export default function RootLayout({
   children,
@@ -13,8 +16,21 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.variable}>
+        {children}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark');
+              } else {
+                document.documentElement.classList.remove('dark');
+              }
+            `,
+          }}
+        />
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0753ecb..790871e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,6 +28,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Features", id: "features" },
             { name: "How It Works", id: "how-it-works" },
+            { name: "App", id: "/app" },
             { name: "GitHub", id: "https://github.com" },
             { name: "Docs", id: "https://docs.example.com" },
           ]}
@@ -44,7 +45,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           background={{ variant: "canvas-reveal" }}
           buttons={[
-            { text: "Start Formatting", href: "#features" },
+            { text: "Start Formatting", href: "/app" },
             { text: "View on GitHub", href: "https://github.com" },
           ]}
           imageSrc="http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=1"
@@ -58,23 +59,17 @@ export default function LandingPage() {
           description="Everything you need to format equations fast—no bloat, no sign-ups, no distractions."
           features={[
             {
-              id: "real-time-preview",              title: "Real-Time Preview",              description: "See your formula rendered as you type. Inline validation catches errors instantly with zero layout shift.",              imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=2",              imageAlt: "Real-time equation preview"
-            },
+              id: "real-time-preview",              title: "Real-Time Preview",              description: "See your formula rendered as you type. Inline validation catches errors instantly with zero layout shift.",              imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=2",              imageAlt: "Real-time equation preview"},
             {
-              id: "copy-latex",              title: "Copy Clean LaTeX",              description: "One-click export of valid LaTeX for seamless integration into Markdown, documents, and technical writing.",              imageSrc: "http://img.b2bpic.net/free-photo/view-school-items-arrangement_23-2149001115.jpg",              imageAlt: "LaTeX code export"
-            },
+              id: "copy-latex",              title: "Copy Clean LaTeX",              description: "One-click export of valid LaTeX for seamless integration into Markdown, documents, and technical writing.",              imageSrc: "http://img.b2bpic.net/free-photo/view-school-items-arrangement_23-2149001115.jpg",              imageAlt: "LaTeX code export"},
             {
-              id: "png-export",              title: "High-Resolution PNG Export",              description: "Export professionally typeset equations as high-resolution images for presentations, blogs, and papers.",              imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=3",              imageAlt: "PNG image export"
-            },
+              id: "png-export",              title: "High-Resolution PNG Export",              description: "Export professionally typeset equations as high-resolution images for presentations, blogs, and papers.",              imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=3",              imageAlt: "PNG image export"},
             {
-              id: "offline-support",              title: "Works Offline",              description: "No internet required. KaTeX rendering runs entirely in your browser with full offline support.",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-terrace_23-2148103942.jpg?_wi=1",              imageAlt: "Offline functionality"
-            },
+              id: "offline-support",              title: "Works Offline",              description: "No internet required. KaTeX rendering runs entirely in your browser with full offline support.",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-terrace_23-2148103942.jpg?_wi=1",              imageAlt: "Offline functionality"},
             {
-              id: "mobile-ready",              title: "Sub-100ms on Mobile",              description: "Lightning-fast rendering even on mid-range devices. Optimized for performance without compromise.",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-terrace_23-2148103942.jpg?_wi=2",              imageAlt: "Mobile performance"
-            },
+              id: "mobile-ready",              title: "Sub-100ms on Mobile",              description: "Lightning-fast rendering even on mid-range devices. Optimized for performance without compromise.",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-terrace_23-2148103942.jpg?_wi=2",              imageAlt: "Mobile performance"},
             {
-              id: "zero-complexity",              title: "No Accounts. No Overhead.",              description: "Zero setup. No login. No configuration. Just open and start typing—truly frictionless equation formatting.",              imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=4",              imageAlt: "Simple interface"
-            },
+              id: "zero-complexity",              title: "No Accounts. No Overhead.",              description: "Zero setup. No login. No configuration. Just open and start typing—truly frictionless equation formatting.",              imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=4",              imageAlt: "Simple interface"},
           ]}
           gridVariant="two-columns-alternating-heights"
           animationType="slide-up"
@@ -106,10 +101,7 @@ export default function LandingPage() {
               title: "Export & Share",              description: "Copy clean LaTeX for Markdown or export high-resolution PNG images in one click. Ready for any platform.",              icon: Download,
             },
           ]}
-          buttons={[
-            { text: "Start Formatting", href: "#hero" },
-            { text: "See Example", href: "#features" },
-          ]}
+          buttons={[{ text: "Try the App", href: "/app" }]}
         />
       </div>