diff --git a/package.json b/package.json
index 5d801dc..5659621 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite-react-ssg build",
+    "build": "vite build",
     "lint": "eslint .",
     "format": "prettier --write .",
     "preview": "vite preview"
@@ -44,7 +44,6 @@
     "globals": "^16.3.0",
     "prettier": "^3.6.2",
     "tw-animate-css": "^1.3.5",
-    "vite": "^7.0.4",
-    "vite-react-ssg": "^0.8.8"
+    "vite": "^7.0.4"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
index d50f400..12450ee 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,19 +2,22 @@ import { Routes, Route } from 'react-router-dom'
 import ParticleApp from './components/ParticleApp'
 import Navbar from './components/ui/Navbar'
 import Footer from './components/ui/Footer'
-import Features from './components/Features'
-import Docs from './components/Docs'
+import { lazy, Suspense } from "react"
+const Features = lazy(() => import("./components/Features"))
+const Docs = lazy(() => import("./components/Docs"))
 
 export default function App() {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex flex-col min-h-screen">
       <Navbar />
-      <main className="flex-1">
-        <Routes>
-          <Route path="/" element={<ParticleApp />} />
-          <Route path="/features" element={<Features />} />
-          <Route path="/docs" element={<Docs />} />
-        </Routes>
+      <main className="flex-grow">
+        <Suspense fallback={<div className="text-center py-10">Loading...</div>}>
+          <Routes>
+            <Route path="/" element={<ParticleApp />} />
+            <Route path="/features" element={<Features />} />
+            <Route path="/docs" element={<Docs />} />
+          </Routes>
+        </Suspense>
       </main>
       <Footer />
     </div>
diff --git a/src/components/Docs.jsx b/src/components/Docs.jsx
index 1002705..ad4d27c 100644
--- a/src/components/Docs.jsx
+++ b/src/components/Docs.jsx
@@ -177,8 +177,8 @@ const Docs = () => {
   ];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-background via-background to-primary/5">
-      <div className="container max-w-6xl mx-auto py-16 px-6">
+    <div className="bg-gradient-to-br from-background via-background to-primary/5">
+      <div className="container max-w-6xl mx-auto py-14 px-6">
         {/* Enhanced Header */}
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
@@ -195,13 +195,13 @@ const Docs = () => {
             </div>
           </div>
           
-          <h1 className="text-5xl md:text-6xl font-black mb-6">
+          <h1 className="text-5xl md:text-6xl lg:text-8xl font-black mb-6">
             <span className="bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
               Documentation
             </span>
           </h1>
           
-          <div className="max-w-4xl mx-auto mb-8">
+          <div className="max-w-4xl mx-auto m-10">
             <p className="text-xl md:text-2xl text-muted-foreground leading-relaxed mb-6">
               Complete guide to <span className="text-primary font-bold">package-particlefx</span> - A lightweight, framework-agnostic JavaScript library for interactive particle effects.
             </p>
diff --git a/src/components/Features.jsx b/src/components/Features.jsx
index bb12eee..7860e39 100644
--- a/src/components/Features.jsx
+++ b/src/components/Features.jsx
@@ -132,14 +132,14 @@ const Features = () => {
   ]
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-background via-background to-primary/5">
-      <div className="container mx-auto px-4 py-16">
+    <div className="bg-gradient-to-br from-background via-background to-primary/5">
+      <div className="container max-w-6xl mx-auto py-14 px-6">
         {/* Enhanced Hero Section */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
-          className="relative text-center mb-20 pt-16"
+          className="text-center mb-20"
         >
           {/* Background Effects */}
           <div className="absolute inset-0 -z-10">
@@ -151,7 +151,7 @@ const Features = () => {
             initial={{ scale: 0.8, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             transition={{ duration: 0.8, delay: 0.2, type: "spring", bounce: 0.4 }}
-            className="flex items-center justify-center mb-8 pt-8"
+            className="flex items-center justify-center mb-8"
           >
             <div className="relative group p-6">
               <Sparkles className="h-20 w-20 text-primary drop-shadow-xl group-hover:scale-110 transition-transform duration-300" />
@@ -164,19 +164,19 @@ const Features = () => {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.4 }}
-            className="text-5xl md:text-7xl font-black mb-6 relative"
+            className="text-5xl md:text-7xl lg:text-8xl font-black mb-6 relative"
           >
             <span className="bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent animate-gradient bg-300% drop-shadow-2xl">
               Powerful Features
             </span>
-            <div className="absolute inset-0 bg-gradient-to-r from-primary/20 via-accent/20 to-primary/20 blur-3xl -z-10" />
+            <div className="absolute inset-0 bg-gradient-to-r from-primary/20 via-accent/20 to-primary/20 blur-2xl -z-10" />
           </motion.h1>
 
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.6 }}
-            className="text-xl md:text-2xl text-muted-foreground max-w-4xl mx-auto mb-10 leading-relaxed"
+            className="text-xl md:text-2xl text-muted-foreground max-w-4xl mx-auto m-10 leading-relaxed"
           >
             Discover the powerful capabilities of our interactive particle effects library.
             <br />
@@ -187,7 +187,7 @@ const Features = () => {
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.6, delay: 0.8 }}
-            className="flex flex-wrap justify-center gap-6"
+            className="flex flex-wrap justify-center gap-6 m-15"
           >
             <motion.div whileHover={{ scale: 1.05, y: -3 }} whileTap={{ scale: 0.95 }}>
               <Button asChild size="lg" className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-primary-foreground shadow-lg hover:shadow-xl px-8 py-4">
@@ -221,7 +221,7 @@ const Features = () => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.8, delay: 0.2 }}
-          className="mb-20"
+          className="mb-20 mt-40"
         >
           <h2 className="text-3xl font-bold text-center mb-12">Core Features</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
diff --git a/src/components/ParticleApp.jsx b/src/components/ParticleApp.jsx
index 466e765..47a9fef 100644
--- a/src/components/ParticleApp.jsx
+++ b/src/components/ParticleApp.jsx
@@ -147,14 +147,14 @@ const ParticleApp = () => {
   }, []);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-background via-background to-primary/5">
-      <div className="container mx-auto px-4 py-8">
-        {/* Hero Section - Enhanced */}
+    <div className="bg-gradient-to-br from-background via-background to-primary/5">
+      <div className="container max-w-6xl mx-auto py-16 px-6">
+        {/* Hero Section */}
         <motion.div
-          initial={{ opacity: 0, y: -20 }}
+          initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, ease: 'easeOut' }}
-          className="relative text-center space-y-8 mb-16 pt-16"
+          transition={{ duration: 0.8 }}
+          className="text-center mb-20"
         >
           {/* Advanced Animated Background */}
           <div className="absolute inset-0 -z-10 overflow-hidden">
@@ -262,7 +262,7 @@ const ParticleApp = () => {
             </svg>
           </div>
 
-          <div className="space-y-6">
+          <div className="space-y- py-3 ">
             {/* Logo and Title - Redesigned with Enhanced Animation */}
             <motion.div
               initial={{ scale: 0.8, opacity: 0, rotateX: -15 }}
@@ -270,8 +270,8 @@ const ParticleApp = () => {
               transition={{ duration: 0.8, delay: 0.2, type: 'spring', bounce: 0.4 }}
               className="relative"
             >
-              <div className="flex items-center justify-center space-x-4 mb-4 pt-8">
-                <motion.div
+              <div className="flex items-center justify-center space-x-4 mb-8">
+                <motion.div 
                   className="relative group p-4"
                   animate={{
                     y: [0, -10, 0],
@@ -332,8 +332,8 @@ const ParticleApp = () => {
                   />
                 </motion.div>
               </div>
-
-              <h1 className="text-5xl md:text-7xl lg:text-8xl font-black mb-2 relative">
+              
+              <h1 className="text-5xl md:text-7xl lg:text-8xl font-black relative mb-5">
                 <span className="bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent animate-gradient bg-300% drop-shadow-2xl">
                   ParticleFX
                 </span>
@@ -346,7 +346,7 @@ const ParticleApp = () => {
                 transition={{ duration: 0.6, delay: 0.4 }}
                 className="text-lg md:text-xl text-muted-foreground font-mono tracking-wider"
               >
-                <span className="bg-gradient-to-r from-muted-foreground to-primary/80 bg-clip-text text-transparent">
+                <span className="bg-gradient-to-r from-muted-foreground to-primary/80 bg-clip-text text-transparent mb-5">
                   package-particlefx playground
                 </span>
               </motion.p>
@@ -357,7 +357,7 @@ const ParticleApp = () => {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.7, delay: 0.5 }}
-              className="max-w-4xl mx-auto"
+              className="max-w-4xl mx-auto mt-4"
             >
               <p className="text-lg md:text-2xl text-muted-foreground leading-relaxed">
                 Interactive playground for{' '}
@@ -387,7 +387,7 @@ const ParticleApp = () => {
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ duration: 0.6, delay: 0.8 }}
-              className="flex flex-wrap items-center justify-center gap-4 max-w-4xl mx-auto"
+              className="flex flex-wrap items-center justify-center gap-4 max-w-4xl mx-auto m-7"
             >
               <motion.div whileHover={{ scale: 1.05, y: -2 }} whileTap={{ scale: 0.95 }}>
                 <Button
@@ -495,7 +495,7 @@ const ParticleApp = () => {
         </motion.div>
 
         {/* Enhanced Main Playground Layout */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-16">
           {/* Canvas Section - Enhanced */}
           <motion.div
             initial={{ opacity: 0, x: -50 }}
@@ -693,7 +693,7 @@ const ParticleApp = () => {
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, type: 'spring', bounce: 0.3 }}
           viewport={{ once: true }}
-          className="mt-20"
+          className="mt-12"
         >
           <motion.div
             whileHover={{ scale: 1.02, rotateX: 1 }}
diff --git a/src/components/ui/Footer.jsx b/src/components/ui/Footer.jsx
index d174a30..b89bff2 100644
--- a/src/components/ui/Footer.jsx
+++ b/src/components/ui/Footer.jsx
@@ -36,7 +36,7 @@ const Footer = () => {
   ]
 
   return (
-    <footer className="relative border-t border-primary/20 bg-gradient-to-b from-background to-background/90 backdrop-blur-xl mt-20">
+    <footer className="relative border-t border-primary/20 bg-gradient-to-b from-background to-background/90 backdrop-blur-xl mt-20 z-50">
       {/* Background Effects */}
       <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-accent/5" />
       <div className="absolute top-0 left-1/4 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
diff --git a/src/main.jsx b/src/main.jsx
index f483149..eeb63bb 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,17 +1,13 @@
-import React from 'react'
-import { ViteReactSSG } from 'vite-react-ssg'
-import { routes } from './routes'
-import App from './App'
-import './index.css'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
+import App from "./App"
+import "./index.css"
 
-// ViteReactSSG expects a *function* that returns the app tree
-export const createRoot = ViteReactSSG(
-  { routes, basename: '/' },
-  ({ isClient }) => {
-    // optional: do client-only setup here
-  },
-  ({ url, isClient }) => (
-    // Minimal wrapper that mimics your old BrowserRouter setup
-    <App />   // App already contains <Routes>, <Navbar>, <Footer>
-  )
-)
\ No newline at end of file
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+)