diff --git a/postcss.config.js b/postcss.config.js
index 96bb01e..33ad091 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
\ No newline at end of file
+}
diff --git a/src/App.js b/src/App.js
index f8d2f8e..eed198f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ThemeProvider from './components/theme/ThemeProvider';
+import { ThemeProvider } from './components/theme/ThemeProvider';
 import NavbarStyleApple from './components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroBillboard from './components/sections/hero/HeroBillboard';
 import FeatureCardOne from './components/sections/feature/FeatureCardOne';
@@ -16,4 +16,4 @@ function App() {
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js
index c6d400e..29e9746 100644
--- a/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js
+++ b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js
@@ -1,61 +1,81 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Menu, X } from 'lucide-react';
+import { useTheme } from '../../theme/ThemeProvider';
 
-function NavbarStyleApple() {
-  const [isOpen, setIsOpen] = React.useState(false);
+const NavbarStyleApple = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { theme, toggleTheme } = useTheme();
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
 
   return (
-    <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
+    <nav className="bg-white/80 dark:bg-black/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-16">
-          <div className="flex items-center">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo */}
+          <div className="flex-shrink-0">
             <img
-              className="h-8 w-8"
-              src="/images/logo-small-gradient.0ed287ce-1768917245367.svg"
+              className="h-8 w-auto"
+              src="/images/placeholder.webp"
               alt="Logo"
             />
-            <span className="ml-2 text-xl font-semibold text-gray-900">Brand</span>
-          </div>
-          
-          <div className="hidden md:flex items-center space-x-8">
-            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
-              Home
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
-              Features
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
-              About
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
-              Contact
-            </a>
           </div>
 
-          <div className="md:hidden flex items-center">
+          {/* Desktop Menu */}
+          <div className="hidden md:block">
+            <div className="ml-10 flex items-baseline space-x-4">
+              <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                Home
+              </a>
+              <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                About
+              </a>
+              <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                Services
+              </a>
+              <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                Contact
+              </a>
+            </div>
+          </div>
+
+          {/* Theme Toggle & Mobile Menu Button */}
+          <div className="flex items-center space-x-2">
             <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="text-gray-900 hover:text-gray-700"
+              onClick={toggleTheme}
+              className="p-2 rounded-md text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
             >
-              {isOpen ? <X size={24} /> : <Menu size={24} />}
+              {theme === 'light' ? '🌙' : '☀️'}
             </button>
+            
+            <div className="md:hidden">
+              <button
+                onClick={toggleMenu}
+                className="p-2 rounded-md text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              >
+                {isOpen ? <X size={24} /> : <Menu size={24} />}
+              </button>
+            </div>
           </div>
         </div>
       </div>
 
+      {/* Mobile Menu */}
       {isOpen && (
         <div className="md:hidden">
-          <div className="px-2 pt-2 pb-3 space-y-1 bg-white border-t border-gray-200">
-            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white/95 dark:bg-black/95 backdrop-blur-md border-t border-gray-200 dark:border-gray-800">
+            <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">
               Home
             </a>
-            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
-              Features
-            </a>
-            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+            <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">
               About
             </a>
-            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+            <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">
+              Services
+            </a>
+            <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">
               Contact
             </a>
           </div>
@@ -63,6 +83,6 @@ function NavbarStyleApple() {
       )}
     </nav>
   );
-}
+};
 
-export default NavbarStyleApple;
\ No newline at end of file
+export default NavbarStyleApple;
diff --git a/src/components/sections/feature/FeatureCardOne.js b/src/components/sections/feature/FeatureCardOne.js
index 4da2f80..d1beda2 100644
--- a/src/components/sections/feature/FeatureCardOne.js
+++ b/src/components/sections/feature/FeatureCardOne.js
@@ -1,57 +1,85 @@
 import React from 'react';
-import { Rocket, Zap, Shield, Users } from 'lucide-react';
+import { Shield, Zap, Globe, Users } from 'lucide-react';
 
-function FeatureCardOne() {
+const FeatureCard = ({ icon: Icon, title, description }) => {
+  return (
+    <div className="group p-6 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 dark:border-gray-700">
+      <div className="mb-4">
+        <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+          <Icon className="w-6 h-6 text-white" />
+        </div>
+      </div>
+      
+      <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+        {title}
+      </h3>
+      
+      <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+        {description}
+      </p>
+    </div>
+  );
+};
+
+const FeatureCardOne = () => {
   const features = [
     {
-      icon: <Rocket size={32} />,
-      title: "Fast Performance",      description: "Lightning-fast loading times with optimized components and modern build tools.",      image: "/images/rocket.518dadfa-1768917245450.svg"
+      icon: Shield,
+      title: "Enterprise Security",      description: "Advanced encryption and security protocols to protect your data with military-grade protection systems."
     },
     {
-      icon: <Zap size={32} />,
-      title: "Easy to Use",      description: "Simple APIs and intuitive design make development a breeze for teams of all sizes.",      image: "/images/magic-wand.ff01fe1d-1768917245455.svg"
+      icon: Zap,
+      title: "Lightning Performance",      description: "Optimized for speed and efficiency, delivering results in milliseconds with our advanced infrastructure."
     },
     {
-      icon: <Shield size={32} />,
-      title: "Type Safe",      description: "Built with TypeScript for better developer experience and fewer runtime errors.",      image: "/images/type-safety.34453790-1768917245458.svg"
+      icon: Globe,
+      title: "Global Reach",      description: "Worldwide coverage with 99.9% uptime guarantee, ensuring your services are always accessible."
     },
     {
-      icon: <Users size={32} />,
-      title: "Team Friendly",      description: "Collaborative tools and documentation to help your team work together effectively.",      image: "/images/quality.d1d04ce8-1768917245456.svg"
+      icon: Users,
+      title: "Team Collaboration",      description: "Seamless collaboration tools designed for modern teams to work together efficiently and effectively."
     }
   ];
 
   return (
-    <section className="py-20 bg-white">
+    <section className="py-20 bg-gray-50 dark:bg-gray-900">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            Why Choose Our Platform?
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
+            Why Choose
+            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
+              Our Platform
+            </span>
           </h2>
-          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-            We've built everything you need to create amazing web experiences, 
-            from the ground up with modern best practices.
+          
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Discover the features that make us the preferred choice for businesses worldwide, 
+            delivering excellence in every aspect of our service.
           </p>
         </div>
-        
+
+        {/* Features Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {features.map((feature, index) => (
-            <div key={index} className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
-              <div className="text-blue-600 mb-4">
-                {feature.icon}
-              </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">
-                {feature.title}
-              </h3>
-              <p className="text-gray-600 leading-relaxed">
-                {feature.description}
-              </p>
-            </div>
+            <FeatureCard
+              key={index}
+              icon={feature.icon}
+              title={feature.title}
+              description={feature.description}
+            />
           ))}
         </div>
+
+        {/* CTA Section */}
+        <div className="text-center mt-16">
+          <button className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-full font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
+            Explore All Features
+          </button>
+        </div>
       </div>
     </section>
   );
-}
+};
 
-export default FeatureCardOne;
\ No newline at end of file
+export default FeatureCardOne;
diff --git a/src/components/sections/hero/HeroBillboard.js b/src/components/sections/hero/HeroBillboard.js
index 8f47c5a..7eb3db1 100644
--- a/src/components/sections/hero/HeroBillboard.js
+++ b/src/components/sections/hero/HeroBillboard.js
@@ -1,45 +1,55 @@
 import React from 'react';
-import { ArrowRight } from 'lucide-react';
+import { Play, ChevronDown } from 'lucide-react';
 
-function HeroBillboard() {
+const HeroBillboard = () => {
   return (
-    <div className="relative bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center">
-      <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
-      
-      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
-            Build Amazing
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600"> Web Experiences</span>
-          </h1>
+    <section className="relative h-screen flex items-center justify-center overflow-hidden">
+      {/* Background Image */}
+      <div className="absolute inset-0 z-0">
+        <img
+          src="/images/placeholder.webp"
+          alt="Hero Background"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-black/40"></div>
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 text-center text-white max-w-4xl mx-auto px-4">
+        <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
+          Innovation
+          <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600">
+            Redefined
+          </span>
+        </h1>
+        
+        <p className="text-xl md:text-2xl mb-8 text-gray-200 max-w-2xl mx-auto">
+          Experience the future of technology with our cutting-edge solutions designed to transform your digital landscape.
+        </p>
+
+        {/* CTA Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <button className="bg-white text-black px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105">
+            Get Started
+          </button>
           
-          <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
-            Create stunning, responsive websites with our modern component library. 
-            Fast, accessible, and beautifully designed.
-          </p>
-          
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors flex items-center gap-2">
-              Get Started
-              <ArrowRight size={20} />
-            </button>
-            
-            <button className="border-2 border-gray-300 hover:border-gray-400 text-gray-700 px-8 py-4 rounded-lg font-semibold text-lg transition-colors">
-              View Demo
-            </button>
-          </div>
-          
-          <div className="mt-12">
-            <img
-              src="/images/header.e5c9eff6-1768917245945.webp"
-              alt="Hero Banner"
-              className="w-full max-w-4xl mx-auto rounded-lg shadow-2xl"
-            />
-          </div>
+          <button className="flex items-center gap-2 border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-black transition-all duration-300">
+            <Play size={20} />
+            Watch Demo
+          </button>
         </div>
       </div>
-    </div>
-  );
-}
 
-export default HeroBillboard;
\ No newline at end of file
+      {/* Scroll Indicator */}
+      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
+        <ChevronDown size={32} />
+      </div>
+
+      {/* Decorative Elements */}
+      <div className="absolute top-20 left-20 w-20 h-20 bg-blue-500/20 rounded-full blur-xl animate-pulse"></div>
+      <div className="absolute bottom-20 right-20 w-32 h-32 bg-purple-500/20 rounded-full blur-xl animate-pulse delay-1000"></div>
+    </section>
+  );
+};
+
+export default HeroBillboard;
diff --git a/src/components/theme/ThemeProvider.js b/src/components/theme/ThemeProvider.js
index 6462b50..ab3bbad 100644
--- a/src/components/theme/ThemeProvider.js
+++ b/src/components/theme/ThemeProvider.js
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useState, useEffect } from 'react';
 
 const ThemeContext = createContext();
 
@@ -10,20 +10,32 @@ export const useTheme = () => {
   return context;
 };
 
-function ThemeProvider({ children }) {
+export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState('light');
 
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+  }, []);
+
   const toggleTheme = () => {
-    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  const value = {
+    theme,
+    toggleTheme,
   };
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+    <ThemeContext.Provider value={value}>
       <div className={theme}>
         {children}
       </div>
     </ThemeContext.Provider>
   );
-}
-
-export default ThemeProvider;
\ No newline at end of file
+};
diff --git a/src/index.css b/src/index.css
index 4bf1c5d..17df0e7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,4 +14,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
\ No newline at end of file
+}
diff --git a/src/index.js b/src/index.js
index 1675893..2cb1087 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,4 +8,4 @@ root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
\ No newline at end of file
+);
diff --git a/tailwind.config.js b/tailwind.config.js
index 92a7d97..d06db25 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}"],
+    "./src/**/*.{js,jsx,ts,tsx}",    "./public/index.html"
+  ],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'bounce': 'bounce 1s infinite',
+      }
+    },
   },
   plugins: [],
-}
\ No newline at end of file
+}