diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 9354cbd..d68ff66 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,166 +1,186 @@
-
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
+import {
+  mdiRocketLaunch,
+  mdiChartPie,
+  mdiAccountGroup,
+  mdiMessageText,
+  mdiShieldCheck,
+  mdiGithub,
+  mdiChevronRight,
+} from '@mdi/js';
 import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
+import BaseIcon from '../components/BaseIcon';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
 import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
 
+export default function LandingPage() {
+  const darkMode = useAppSelector((state) => state.style.darkMode);
+  const textColor = useAppSelector((state) => state.style.linkColor);
 
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('image');
-    const [contentPosition, setContentPosition] = useState('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'App Preview'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
+  const features = [
+    {
+      title: 'Advanced Analytics',
+      description: 'Gain deep insights into your projects with our powerful dashboard and reporting tools.',
+      icon: mdiChartPie,
+      color: 'text-blue-500',
+    },
+    {
+      title: 'Team Collaboration',
+      description: 'Communicate seamlessly with your team using built-in conversations and real-time messaging.',
+      icon: mdiMessageText,
+      color: 'text-emerald-500',
+    },
+    {
+      title: 'RBAC Management',
+      description: 'Granular roles and permissions ensure your data stays secure and accessible only to the right people.',
+      icon: mdiShieldCheck,
+      color: 'text-purple-500',
+    },
+    {
+      title: 'User Management',
+      description: 'Effortlessly manage users, project memberships, and organizational structures.',
+      icon: mdiAccountGroup,
+      color: 'text-amber-500',
+    },
+  ];
 
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+    <div className={`${darkMode ? 'dark' : ''} bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 min-h-screen font-sans`}>
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Home')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your App Preview app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
+      {/* Navbar */}
+      <nav className="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-100 dark:border-slate-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16 items-center">
+            <div className="flex items-center space-x-2">
+              <div className="bg-indigo-600 p-1.5 rounded-lg">
+                <BaseIcon path={mdiRocketLaunch} size={24} className="text-white" />
+              </div>
+              <span className="text-xl font-bold tracking-tight">SaaS Core</span>
             </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
+            <div className="hidden md:flex items-center space-x-8">
+              <a href="#features" className="text-sm font-medium hover:text-indigo-600 transition-colors">Features</a>
+              <a href="#about" className="text-sm font-medium hover:text-indigo-600 transition-colors">About</a>
+              <Link href="/login" className="text-sm font-medium hover:text-indigo-600 transition-colors">Login</Link>
+              <BaseButton
+                href="/register"
+                label="Get Started"
+                color="info"
+                className="rounded-full px-6 shadow-md hover:shadow-lg transition-all"
+              />
+            </div>
+          </div>
         </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
+      </nav>
 
+      {/* Hero Section */}
+      <section className="pt-32 pb-20 px-4">
+        <div className="max-w-7xl mx-auto text-center">
+          <div className="inline-flex items-center space-x-2 bg-indigo-50 dark:bg-indigo-900/30 px-4 py-2 rounded-full mb-8 border border-indigo-100 dark:border-indigo-800">
+            <span className="flex h-2 w-2 rounded-full bg-indigo-600 animate-ping"></span>
+            <span className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">New: AI-Powered Insights</span>
+          </div>
+          <h1 className="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-slate-900 via-indigo-900 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-500">
+            Build Your SaaS Faster <br className="hidden md:block" /> with Modern Architecture.
+          </h1>
+          <p className="text-lg md:text-xl text-slate-600 dark:text-slate-400 mb-10 max-w-2xl mx-auto leading-relaxed">
+            The ultimate foundation for your next big idea. Fully featured with Auth, RBAC, Projects, and AI capabilities out of the box.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4">
+            <BaseButton
+              href="/register"
+              label="Launch App"
+              color="info"
+              className="w-full sm:w-auto px-10 py-4 text-lg rounded-xl shadow-xl hover:scale-105 transition-transform"
+            />
+            <BaseButton
+              href="/login"
+              label="Live Demo"
+              color="whiteDark"
+              className="w-full sm:w-auto px-10 py-4 text-lg rounded-xl border-slate-200 dark:border-slate-700"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Feature Section */}
+      <section id="features" className="py-24 bg-slate-50 dark:bg-slate-800/50">
+        <div className="max-w-7xl mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">Everything You Need</h2>
+            <p className="text-slate-600 dark:text-slate-400 max-w-xl mx-auto">
+              A comprehensive set of tools designed to help you manage your business and team efficiently.
+            </p>
+          </div>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, idx) => (
+              <div key={idx} className="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 hover:shadow-md transition-shadow">
+                <div className={`${feature.color} bg-slate-50 dark:bg-slate-800 w-12 h-12 rounded-xl flex items-center justify-center mb-6`}>
+                  <BaseIcon path={feature.icon} size={28} />
+                </div>
+                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+                <p className="text-slate-600 dark:text-slate-400 leading-relaxed text-sm">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 px-4">
+        <div className="max-w-5xl mx-auto bg-indigo-600 rounded-3xl p-8 md:p-16 text-center text-white relative overflow-hidden shadow-2xl">
+          <div className="absolute top-0 right-0 -mt-8 -mr-8 w-64 h-64 bg-indigo-500 rounded-full opacity-20 blur-3xl"></div>
+          <div className="absolute bottom-0 left-0 -mb-8 -ml-8 w-64 h-64 bg-indigo-700 rounded-full opacity-20 blur-3xl"></div>
+          
+          <h2 className="text-3xl md:text-5xl font-bold mb-6 relative z-10">Ready to take off?</h2>
+          <p className="text-indigo-100 text-lg mb-10 max-w-xl mx-auto relative z-10">
+            Join hundreds of developers building the future. Start your 14-day free trial today.
+          </p>
+          <div className="relative z-10">
+            <BaseButton
+              href="/register"
+              label="Start Building Now"
+              color="whiteDark"
+              className="px-10 py-4 text-lg rounded-xl text-indigo-600 font-bold hover:bg-slate-50 transition-colors"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-12 border-t border-slate-100 dark:border-slate-800 px-4">
+        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
+          <div className="flex items-center space-x-2 mb-6 md:mb-0">
+            <BaseIcon path={mdiRocketLaunch} size={24} className="text-indigo-600" />
+            <span className="text-lg font-bold">SaaS Core</span>
+          </div>
+          <div className="flex space-x-8 text-sm font-medium text-slate-500 mb-6 md:mb-0">
+            <a href="#" className="hover:text-indigo-600 transition-colors">Privacy</a>
+            <a href="#" className="hover:text-indigo-600 transition-colors">Terms</a>
+            <a href="#" className="hover:text-indigo-600 transition-colors">Contact</a>
+          </div>
+          <div className="flex items-center space-x-4">
+            <a href="https://github.com/flatlogic" target="_blank" rel="noreferrer" className="text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors">
+              <BaseIcon path={mdiGithub} size={24} />
+            </a>
+          </div>
+        </div>
+        <div className="max-w-7xl mx-auto mt-8 pt-8 border-t border-slate-50 dark:border-slate-800/50 text-center text-sm text-slate-400">
+          © {new Date().getFullYear()} SaaS Core. Built with ❤️ by <a href="https://flatlogic.com" className="underline hover:text-indigo-600">Flatlogic</a>.
+        </div>
+      </footer>
     </div>
   );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
+LandingPage.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+};
\ No newline at end of file