diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ad8fcccd..7994a538 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
         "html-to-image": "^1.11.13",
         "html2canvas": "^1.4.1",
         "lucide-react": "^0.562.0",
+        "ogl": "^1.0.11",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.10.1",
@@ -4146,6 +4147,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ogl": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.11.tgz",
+      "integrity": "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==",
+      "license": "Unlicense"
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f275e45f..37060843 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
     "html-to-image": "^1.11.13",
     "html2canvas": "^1.4.1",
     "lucide-react": "^0.562.0",
+    "ogl": "^1.0.11",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.10.1",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 6a028c35..0dbb116b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -15,6 +15,7 @@ import NotFound from "./pages/NotFound.jsx";
 import About from "./pages/About.jsx";
 import Profile from './pages/Profile.jsx';
 import ScrollToTop from "./components/ScrollToTop.jsx";
+import Pomodoro from "./pages/Pomodoro.jsx";
 import PageTransition from "./components/PageTransition.jsx";
 
 const AuthLayout = ({ children }) => (
@@ -84,6 +85,45 @@ const App = () => {
     <BrowserRouter>
       <Navbar />
       <main className="app-bg min-h-screen pt-15 flex flex-col">
+        <Routes>
+          <Route path="/"       element={<PublicRoute><AuthLayout><Login /></AuthLayout></PublicRoute>} />
+          <Route path="/login"  element={<PublicRoute><AuthLayout><Login /></AuthLayout></PublicRoute>} />
+          <Route path="/signup" element={<PublicRoute><AuthLayout><Signup /></AuthLayout></PublicRoute>} />
+          <Route path="/about"  element={<AuthLayout><About /></AuthLayout>} />
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoutes>
+                <Dashboard />
+              </ProtectedRoutes>
+            }
+          />
+          <Route
+            path="/tasks"
+            element={
+              <ProtectedRoutes>
+                <Tasks />
+              </ProtectedRoutes>
+            }
+          />
+          <Route
+            path="/routine-builder"
+            element={
+              <ProtectedRoutes>
+                <RoutineBuilder />
+              </ProtectedRoutes>
+            }
+          />
+          <Route
+            path="/focus-mode"
+            element={
+              <ProtectedRoutes>
+                <Pomodoro />
+              </ProtectedRoutes>
+            }
+          />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
         <AnimatedRoutes />
       </main>
       <Footer />
diff --git a/frontend/src/assets/sounds/fin.mp3 b/frontend/src/assets/sounds/fin.mp3
new file mode 100644
index 00000000..7d581673
Binary files /dev/null and b/frontend/src/assets/sounds/fin.mp3 differ
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 9e118010..9bb60069 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -2,7 +2,7 @@ import { useState, useContext, useEffect } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 // eslint-disable-next-line no-unused-vars
 import { motion, AnimatePresence } from "framer-motion";
-import { Menu, X, LayoutDashboard, CheckSquare, Calendar, LogOut, LogIn, User, Sun, Moon, TrendingUp } from "lucide-react";
+import { Menu, X, LayoutDashboard, CheckSquare, Calendar, LogOut, LogIn, UserPlus, Sun, Moon, Timer, TrendingUp, User } from "lucide-react";
 import { AuthContext } from "../context/AuthContext";
 import { ThemeContext } from "../context/ThemeContext";
 import gsap from "gsap";
@@ -102,29 +102,29 @@ const Navbar = () => {
   const handleConfirmLogout = (e) => {
     setShowLogoutModal(false);
     setIsOpen(false);
-    
+
     if (!e || !e.clientX) {
       logout();
       return;
     }
 
     const { clientX, clientY } = e;
-    
+
     const overlay = document.createElement("div");
     overlay.id = "logout-transition-overlay";
     overlay.style.position = "fixed";
-    overlay.style.backgroundColor = "#f97316"; 
+    overlay.style.backgroundColor = "#f97316";
     overlay.style.borderRadius = "50%";
-    overlay.style.zIndex = "9999"; 
+    overlay.style.zIndex = "9999";
     overlay.style.pointerEvents = "none";
-    
+
     const size = 10;
     overlay.style.width = `${size}px`;
     overlay.style.height = `${size}px`;
     overlay.style.top = `${clientY - size / 2}px`;
     overlay.style.left = `${clientX - size / 2}px`;
     overlay.style.transformOrigin = "center center";
-    
+
     document.body.appendChild(overlay);
 
     const maxDistX = Math.max(clientX, window.innerWidth - clientX);
@@ -138,7 +138,7 @@ const Navbar = () => {
       ease: "power2.inOut",
       onComplete: () => {
         logout();
-        
+
         setTimeout(() => {
           gsap.to(overlay, {
             opacity: 0,
@@ -159,25 +159,25 @@ const Navbar = () => {
 
     const { clientX, clientY } = e;
     const isDark = theme === "dark";
-    
+
     // Background color of the TARGET theme
-    const targetColor = isDark ? "#ffffff" : "#0f172a"; 
+    const targetColor = isDark ? "#ffffff" : "#0f172a";
 
     const overlay = document.createElement("div");
     overlay.id = "theme-transition-overlay";
     overlay.style.position = "fixed";
     overlay.style.backgroundColor = targetColor;
     overlay.style.borderRadius = "50%";
-    overlay.style.zIndex = "9999"; 
+    overlay.style.zIndex = "9999";
     overlay.style.pointerEvents = "none";
-    
+
     const size = 10;
     overlay.style.width = `${size}px`;
     overlay.style.height = `${size}px`;
     overlay.style.top = `${clientY - size / 2}px`;
     overlay.style.left = `${clientX - size / 2}px`;
     overlay.style.transformOrigin = "center center";
-    
+
     document.body.appendChild(overlay);
 
     const maxDistX = Math.max(clientX, window.innerWidth - clientX);
@@ -191,7 +191,7 @@ const Navbar = () => {
       ease: "power2.inOut",
       onComplete: () => {
         toggleTheme();
-        
+
         setTimeout(() => {
           gsap.to(overlay, {
             opacity: 0,
@@ -249,6 +249,7 @@ const Navbar = () => {
               </span>
             </Link>
 
+
             {/* Desktop Navigation */}
             {user && (
               <div className="hidden md:flex items-center gap-2">
@@ -305,96 +306,109 @@ const Navbar = () => {
                   </Link>
                 </>
               ) : (
+                <>
+                  {/*pomodoro focus mode*/}
+
+                  <Link
+                    to="/focus-mode"
+                    className="px-4 py-2 rounded-xl btn btn-primary flex items-center gap-2 text-sm font-bold"
+                  >
+                    <Timer size={16} />
+                    Focus Mode
+                  </Link>
+
+                  <button
+                    onClick={handleLogoutClick}
+                    className="btn btn-primary text-sm flex items-center gap-2 shadow-md hover:shadow-lg transition-all"
+                  >
+                    <LogOut size={16} />
+                    Logout
+                  </button>
+                </>
+              )}
+              {/* Mobile Menu Toggle Button */}
+              <div className="md:hidden flex items-center">
                 <button
-                  onClick={handleLogoutClick}
-                  className="btn btn-primary text-sm flex items-center gap-2 shadow-md hover:shadow-lg transition-all"
+                  onClick={() => setIsOpen(!isOpen)}
+                  className="p-2 rounded-xl text-[#3b8ea0] hover:bg-[#d0f6e3] transition-colors focus:outline-none"
+                  aria-label="Toggle menu"
+                  aria-expanded={isOpen}
+                  aria-controls="mobile-navigation-menu"
                 >
-                  <LogOut size={16} />
-                  Logout
+                  <AnimatePresence mode="wait">
+                    <motion.div
+                      key={isOpen ? "close" : "open"}
+                      initial={{ opacity: 0, rotate: -90 }}
+                      animate={{ opacity: 1, rotate: 0 }}
+                      exit={{ opacity: 0, rotate: 90 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      {isOpen ? <X size={24} /> : <Menu size={24} />}
+                    </motion.div>
+                  </AnimatePresence>
                 </button>
-              )}
-            </div>
-
-            {/* Mobile Menu Toggle Button */}
-            <div className="md:hidden flex items-center">
-              <button
-                onClick={() => setIsOpen(!isOpen)}
-                className="p-2 rounded-xl text-[#3b8ea0] hover:bg-[#d0f6e3] transition-colors focus:outline-none"
-                aria-label="Toggle menu"
-                aria-expanded={isOpen}
-                aria-controls="mobile-navigation-menu"
-              >
-                <AnimatePresence mode="wait">
-                  <motion.div
-                    key={isOpen ? "close" : "open"}
-                    initial={{ opacity: 0, rotate: -90 }}
-                    animate={{ opacity: 1, rotate: 0 }}
-                    exit={{ opacity: 0, rotate: 90 }}
-                    transition={{ duration: 0.15 }}
-                  >
-                    {isOpen ? <X size={24} /> : <Menu size={24} />}
-                  </motion.div>
-                </AnimatePresence>
-              </button>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Mobile Navigation Dropdown */}
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              id="mobile-navigation-menu"
-              initial={{ opacity: 0, height: 0 }}
-              animate={{ opacity: 1, height: "auto" }}
-              exit={{ opacity: 0, height: 0 }}
-              transition={{ duration: 0.2, ease: "easeInOut" }}
-              className="md:hidden border-b border-soft bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl overflow-hidden"
-            >
-              <div className="px-4 pt-2 pb-6 space-y-1">
-                {user && navLinks.map((link) => (
-                  <NavLink
-                    key={link.name}
-                    to={link.path}
-                    onClick={() => setIsOpen(false)}
-                    className={({ isActive }) =>
-                      cn(
-                        "px-4 py-3 rounded-xl text-base font-medium transition-colors flex items-center gap-3 w-full",
-                        isActive
-                          ? "bg-[#d0f6e3] text-[#3b8ea0]"
-                          : "text-[#4eb7b3] hover:bg-[#d0f6e3]/50 hover:text-[#3b8ea0]"
-                      )
-                    }
-                  >
-                    <link.icon size={18} />
-                    {link.name}
-                  </NavLink>
-                ))}
+          {/* Mobile Navigation Dropdown */}
+          <AnimatePresence>
+            {isOpen && (
+              <motion.div
+                id="mobile-navigation-menu"
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: "auto" }}
+                exit={{ opacity: 0, height: 0 }}
+                transition={{ duration: 0.2, ease: "easeInOut" }}
+                className="md:hidden border-b border-soft bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl overflow-hidden"
+              >
+                <div className="px-4 pt-2 pb-6 space-y-1">
+                  {user && navLinks.map((link) => (
+                    <NavLink
+                      key={link.name}
+                      to={link.path}
+                      onClick={() => setIsOpen(false)}
+                      className={({ isActive }) =>
+                        cn(
+                          "px-4 py-3 rounded-xl text-base font-medium transition-colors flex items-center gap-3 w-full",
+                          isActive
+                            ? "bg-[#d0f6e3] text-[#3b8ea0]"
+                            : "text-[#4eb7b3] hover:bg-[#d0f6e3]/50 hover:text-[#3b8ea0]"
+                        )
+                      }
+                    >
+                      <link.icon size={18} />
+                      {link.name}
+                    </NavLink>
+                  ))}
 
-                {/* Premium Mobile Dark Mode Toggle */}
-                <div className="flex items-center justify-between px-4 py-2 border-t border-soft/30 mt-2">
-                  <span className="text-sm font-medium text-main">Theme Mode</span>
-                  <motion.button
-                    whileTap={{ scale: 0.95 }}
-                    onClick={handleThemeToggle}
-                    className="p-2 rounded-xl border border-soft text-main hover:bg-[#d0f6e3]/30 dark:hover:bg-slate-800 transition-colors focus:outline-none cursor-pointer flex items-center gap-2"
-                    aria-label="Toggle dark mode"
-                  >
-                    {theme === "dark" ? (
-                      <>
-                        <Sun size={16} className="text-yellow-400 fill-yellow-400" />
-                        <span className="text-xs text-yellow-400 font-semibold uppercase tracking-wider">Light</span>
-                      </>
-                    ) : (
-                      <>
-                        <Moon size={16} className="text-[#3b8ea0] fill-[#3b8ea0]/10" />
-                        <span className="text-xs text-[#3b8ea0] font-semibold uppercase tracking-wider">Dark</span>
-                      </>
-                    )}
-                  </motion.button>
+                  {/* Premium Mobile Dark Mode Toggle */}
+                  <div className="flex items-center justify-between px-4 py-2 border-t border-soft/30 mt-2">
+                    <span className="text-sm font-medium text-main">Theme Mode</span>
+                    <motion.button
+                      whileTap={{ scale: 0.95 }}
+                      onClick={handleThemeToggle}
+                      className="p-2 rounded-xl border border-soft text-main hover:bg-[#d0f6e3]/30 dark:hover:bg-slate-800 transition-colors focus:outline-none cursor-pointer flex items-center gap-2"
+                      aria-label="Toggle dark mode"
+                    >
+                      {theme === "dark" ? (
+                        <>
+                          <Sun size={16} className="text-yellow-400 fill-yellow-400" />
+                          <span className="text-xs text-yellow-400 font-semibold uppercase tracking-wider">Light</span>
+                        </>
+                      ) : (
+                        <>
+                          <Moon size={16} className="text-[#3b8ea0] fill-[#3b8ea0]/10" />
+                          <span className="text-xs text-[#3b8ea0] font-semibold uppercase tracking-wider">Dark</span>
+                        </>
+                      )}
+                    </motion.button>
+                  </div>
                 </div>
 
                 <div className={cn("flex flex-col gap-2", user ? "pt-4 mt-2 border-t border-[#98e1d7]/30" : "pt-2")}>
+
+
                   {!user ? (
                     <>
                       <Link
@@ -415,19 +429,26 @@ const Navbar = () => {
                       </Link>
                     </>
                   ) : (
-                    <button
-                      onClick={handleLogoutClick}
-                      className="w-full flex items-center justify-center gap-2 btn btn-primary py-3"
-                    >
-                      <LogOut size={18} />
-                      Logout
-                    </button>
+                    <>
+                      {/* Mobile focus mode*/}
+                      <Link to="/focus-mode" className="btn btn-primary flex gap-2">
+                        <Timer size={16} />
+                        Focus Mode
+                      </Link>
+                      <button
+                        onClick={handleLogoutClick}
+                        className="w-full flex items-center justify-center gap-2 btn btn-primary py-3"
+                      >
+                        <LogOut size={18} />
+                        Logout
+                      </button>
+                    </>
                   )}
                 </div>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
       </motion.nav>
     </>
   );
diff --git a/frontend/src/pages/Pomodoro.jsx b/frontend/src/pages/Pomodoro.jsx
new file mode 100644
index 00000000..2086a4ce
--- /dev/null
+++ b/frontend/src/pages/Pomodoro.jsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Particles from "../react-ui/Particles"
+import finSound from "../assets/sounds/fin.mp3"
+
+const Pomodoro = () => {
+
+    const [showPopUp, setShowPopUp]= useState(false);
+    const [timeLeft, setTimeLeft] = useState(25*60);
+    const [isRunning, setIsRunning]= useState(false);
+
+    const finRef = useRef(new Audio(finSound));
+
+    useEffect(()=>{
+        let interval;
+
+        if(isRunning){
+            interval= setInterval(()=>{
+                setTimeLeft((prev)=>{
+                    if(prev<=1){
+                        clearInterval(interval);
+                        setTimeLeft(25*60);
+                        setIsRunning(false);
+                        finRef.current.loop = true;
+                        finRef.current.play();
+                        setShowPopUp(true);
+                        return 0;
+                    }
+
+                    return prev-1;
+                })
+            },1000);
+        }
+
+        return ()=> clearInterval(interval)
+    },[isRunning, timeLeft]);
+
+    const formatTime= ()=>{
+        const minutes = Math.floor(timeLeft/60);
+        const seconds = timeLeft%60;
+
+        return `${String(minutes).padStart(2,"0")}:${String(seconds).padStart(2,"0")}`;
+    }
+
+
+    return (
+        <div className='w-full h-full'>
+            <div style={{ width: '100%', height: '600px', position: 'relative', zIndex: '0' }}>
+                <Particles
+                    particleColors={["#4eb7b3"]}
+                    particleCount={200}
+                    particleSpread={10}
+                    speed={0.1}
+                    particleBaseSize={100}
+                    moveParticlesOnHover
+                    alphaParticles={false}
+                    disableRotation={false}
+                    pixelRatio={1}
+                />
+            </div>
+
+            <div className='absolute inset-0 flex flex-col items-center justify-center z-10 gap-5'>
+                <h1 className='font-bold text-3xl mb-3 p-3 flex justify-center text-center text-[#4eb7b3]'>Complete your tasks with a pomodoro timer.</h1>
+                <div className='w-[280px] h-[280px] rounded-full bg-white backdrop-blur-xl border border-white/20 shadow-xl flex items-center justify-center'>
+                    <h1 className='text-7xl font-bold text-[#4eb7b3]'>{formatTime()}</h1>
+                </div>
+
+                <div className='mt-5 z-20'>
+                    <div className='flex flex-row gap-4'>
+                        <button className='cursor-pointer btn btn-primary'
+                            onClick={()=> setIsRunning(true)}
+                        >
+                            Start
+                        </button>
+
+                        <button className='cursor-pointer btn btn-primary'
+                            onClick={()=> setIsRunning(false)}
+                        >
+                            Pause
+                        </button>
+
+                        <button className='cursor-pointer btn btn-primary'
+                            onClick={()=>{setTimeLeft(25*60); setIsRunning(false)}}
+                        >
+                            Reset
+                        </button>
+
+                    </div>
+                </div>
+
+                {showPopUp && <div className='fixed inset-0 z-30 flex items-center justify-center'>
+                        <div className='border border-[#4eb7b3] bg-[#0f172a] rounded-xl p-6 shadow-3xl flex flex-col items-center gap-4'>
+                            <h1 className='text-3xl font-bold text-[#4eb7b3] text-center'>Session Complete!</h1>
+                            <p className='text-center text-md text-[#4eb7b3]'>Great work. Take a break!</p>
+
+                            <button className='btn btn-primary cursor-pointer' onClick={()=> {finRef.current.pause(); finRef.current.currentTime=0; setShowPopUp(false)}}>
+                                Close
+                            </button>
+                        </div>
+                    </div>}
+            </div>
+        </div>
+    )
+}
+
+export default Pomodoro
diff --git a/frontend/src/react-ui/Particles.css b/frontend/src/react-ui/Particles.css
new file mode 100644
index 00000000..5ec1fa1f
--- /dev/null
+++ b/frontend/src/react-ui/Particles.css
@@ -0,0 +1,5 @@
+.particles-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
diff --git a/frontend/src/react-ui/Particles.jsx b/frontend/src/react-ui/Particles.jsx
new file mode 100644
index 00000000..7c1fa7e5
--- /dev/null
+++ b/frontend/src/react-ui/Particles.jsx
@@ -0,0 +1,244 @@
+import { useEffect, useRef } from 'react';
+import { Renderer, Camera, Geometry, Program, Mesh } from 'ogl';
+
+import './Particles.css';
+
+const defaultColors = ['#ffffff', '#ffffff', '#ffffff'];
+
+const hexToRgb = hex => {
+  hex = hex.replace(/^#/, '');
+  if (hex.length === 3) {
+    hex = hex
+      .split('')
+      .map(c => c + c)
+      .join('');
+  }
+  const int = parseInt(hex, 16);
+  const r = ((int >> 16) & 255) / 255;
+  const g = ((int >> 8) & 255) / 255;
+  const b = (int & 255) / 255;
+  return [r, g, b];
+};
+
+const vertex = /* glsl */ `
+  attribute vec3 position;
+  attribute vec4 random;
+  attribute vec3 color;
+  
+  uniform mat4 modelMatrix;
+  uniform mat4 viewMatrix;
+  uniform mat4 projectionMatrix;
+  uniform float uTime;
+  uniform float uSpread;
+  uniform float uBaseSize;
+  uniform float uSizeRandomness;
+  
+  varying vec4 vRandom;
+  varying vec3 vColor;
+  
+  void main() {
+    vRandom = random;
+    vColor = color;
+    
+    vec3 pos = position * uSpread;
+    pos.z *= 10.0;
+    
+    vec4 mPos = modelMatrix * vec4(pos, 1.0);
+    float t = uTime;
+    mPos.x += sin(t * random.z + 6.28 * random.w) * mix(0.1, 1.5, random.x);
+    mPos.y += sin(t * random.y + 6.28 * random.x) * mix(0.1, 1.5, random.w);
+    mPos.z += sin(t * random.w + 6.28 * random.y) * mix(0.1, 1.5, random.z);
+    
+    vec4 mvPos = viewMatrix * mPos;
+
+    if (uSizeRandomness == 0.0) {
+      gl_PointSize = uBaseSize;
+    } else {
+      gl_PointSize = (uBaseSize * (1.0 + uSizeRandomness * (random.x - 0.5))) / length(mvPos.xyz);
+    }
+
+    gl_Position = projectionMatrix * mvPos;
+  }
+`;
+
+const fragment = /* glsl */ `
+  precision highp float;
+  
+  uniform float uTime;
+  uniform float uAlphaParticles;
+  varying vec4 vRandom;
+  varying vec3 vColor;
+  
+  void main() {
+    vec2 uv = gl_PointCoord.xy;
+    float d = length(uv - vec2(0.5));
+    
+    if(uAlphaParticles < 0.5) {
+      if(d > 0.5) {
+        discard;
+      }
+      gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), 1.0);
+    } else {
+      float circle = smoothstep(0.5, 0.4, d) * 0.8;
+      gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), circle);
+    }
+  }
+`;
+
+const Particles = ({
+  particleCount = 200,
+  particleSpread = 10,
+  speed = 0.1,
+  particleColors,
+  moveParticlesOnHover = false,
+  particleHoverFactor = 1,
+  alphaParticles = false,
+  particleBaseSize = 100,
+  sizeRandomness = 1,
+  cameraDistance = 20,
+  disableRotation = false,
+  pixelRatio = 1,
+  className
+}) => {
+  const containerRef = useRef(null);
+  const mouseRef = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const renderer = new Renderer({
+      dpr: pixelRatio,
+      depth: false,
+      alpha: true
+    });
+    const gl = renderer.gl;
+    container.appendChild(gl.canvas);
+    gl.clearColor(0, 0, 0, 0);
+
+    const camera = new Camera(gl, { fov: 15 });
+    camera.position.set(0, 0, cameraDistance);
+
+    const resize = () => {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width, height);
+      camera.perspective({ aspect: gl.canvas.width / gl.canvas.height });
+    };
+    window.addEventListener('resize', resize, false);
+    resize();
+
+    const handleMouseMove = e => {
+      const rect = container.getBoundingClientRect();
+      const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+      const y = -(((e.clientY - rect.top) / rect.height) * 2 - 1);
+      mouseRef.current = { x, y };
+    };
+
+    if (moveParticlesOnHover) {
+      container.addEventListener('mousemove', handleMouseMove);
+    }
+
+    const count = particleCount;
+    const positions = new Float32Array(count * 3);
+    const randoms = new Float32Array(count * 4);
+    const colors = new Float32Array(count * 3);
+    const palette = particleColors && particleColors.length > 0 ? particleColors : defaultColors;
+
+    for (let i = 0; i < count; i++) {
+      let x, y, z, len;
+      do {
+        x = Math.random() * 2 - 1;
+        y = Math.random() * 2 - 1;
+        z = Math.random() * 2 - 1;
+        len = x * x + y * y + z * z;
+      } while (len > 1 || len === 0);
+      const r = Math.cbrt(Math.random());
+      positions.set([x * r, y * r, z * r], i * 3);
+      randoms.set([Math.random(), Math.random(), Math.random(), Math.random()], i * 4);
+      const col = hexToRgb(palette[Math.floor(Math.random() * palette.length)]);
+      colors.set(col, i * 3);
+    }
+
+    const geometry = new Geometry(gl, {
+      position: { size: 3, data: positions },
+      random: { size: 4, data: randoms },
+      color: { size: 3, data: colors }
+    });
+
+    const program = new Program(gl, {
+      vertex,
+      fragment,
+      uniforms: {
+        uTime: { value: 0 },
+        uSpread: { value: particleSpread },
+        uBaseSize: { value: particleBaseSize * pixelRatio },
+        uSizeRandomness: { value: sizeRandomness },
+        uAlphaParticles: { value: alphaParticles ? 1 : 0 }
+      },
+      transparent: true,
+      depthTest: false
+    });
+
+    const particles = new Mesh(gl, { mode: gl.POINTS, geometry, program });
+
+    let animationFrameId;
+    let lastTime = performance.now();
+    let elapsed = 0;
+
+    const update = t => {
+      animationFrameId = requestAnimationFrame(update);
+      const delta = t - lastTime;
+      lastTime = t;
+      elapsed += delta * speed;
+
+      program.uniforms.uTime.value = elapsed * 0.001;
+
+      if (moveParticlesOnHover) {
+        particles.position.x = -mouseRef.current.x * particleHoverFactor;
+        particles.position.y = -mouseRef.current.y * particleHoverFactor;
+      } else {
+        particles.position.x = 0;
+        particles.position.y = 0;
+      }
+
+      if (!disableRotation) {
+        particles.rotation.x = Math.sin(elapsed * 0.0002) * 0.1;
+        particles.rotation.y = Math.cos(elapsed * 0.0005) * 0.15;
+        particles.rotation.z += 0.01 * speed;
+      }
+
+      renderer.render({ scene: particles, camera });
+    };
+
+    animationFrameId = requestAnimationFrame(update);
+
+    return () => {
+      window.removeEventListener('resize', resize);
+      if (moveParticlesOnHover) {
+        container.removeEventListener('mousemove', handleMouseMove);
+      }
+      cancelAnimationFrame(animationFrameId);
+      if (container.contains(gl.canvas)) {
+        container.removeChild(gl.canvas);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    particleCount,
+    particleSpread,
+    speed,
+    moveParticlesOnHover,
+    particleHoverFactor,
+    alphaParticles,
+    particleBaseSize,
+    sizeRandomness,
+    cameraDistance,
+    disableRotation,
+    pixelRatio
+  ]);
+
+  return <div ref={containerRef} className={`particles-container ${className}`} />;
+};
+
+export default Particles;