diff --git a/web/Neptechtribe/src/App.jsx b/web/Neptechtribe/src/App.jsx
index 44f3cd9..f89d41f 100644
--- a/web/Neptechtribe/src/App.jsx
+++ b/web/Neptechtribe/src/App.jsx
@@ -6,6 +6,7 @@ import About from "./components/About";
 import Footer from "./components/Footer";
 import Events from "./components/Events";
 import ContactUs from "./components/ContactUs";
+import Blogs from "./components/Blogs";
 
 
 const App = () => {
@@ -16,6 +17,7 @@ const App = () => {
         <main className="pt-20">
                <Hero />
                <About />
+               <Blogs />
                <Events />
                <ContactUs />
                <Footer />
diff --git a/web/Neptechtribe/src/components/About.jsx b/web/Neptechtribe/src/components/About.jsx
index 7f6fd49..8afde7c 100644
--- a/web/Neptechtribe/src/components/About.jsx
+++ b/web/Neptechtribe/src/components/About.jsx
@@ -127,7 +127,7 @@ function About() {
       <div className="absolute inset-0 bg-gradient-to-b from-black/80 via-black/70 to-black/80" />
       <div className="relative z-10 max-w-7xl mx-auto">
         <Head
-          title="About NEPTECH Tribe"
+          title="About NepTech Tribe"
           head={<span>Who Are <span className="text-yellow-400">We</span></span>}
         />
         <motion.div
diff --git a/web/Neptechtribe/src/components/Blogs.jsx b/web/Neptechtribe/src/components/Blogs.jsx
new file mode 100644
index 0000000..9c589f9
--- /dev/null
+++ b/web/Neptechtribe/src/components/Blogs.jsx
@@ -0,0 +1,313 @@
+/* eslint-disable no-unused-vars */
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+function Head({ title, head }) {
+  return (
+    <motion.div
+      className="text-center space-y-4 sm:space-y-6 mb-8 sm:mb-12"
+      initial={{ opacity: 0, y: 50 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.8, type: "spring", stiffness: 120 }}
+    >
+      <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold text-white drop-shadow-lg tracking-tight">
+        {head}
+      </h2>
+      <p className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-300 max-w-md sm:max-w-lg md:max-w-2xl mx-auto leading-relaxed">
+        {title}
+      </p>
+    </motion.div>
+  );
+}
+
+function Blogs() {
+  const [selectedPost, setSelectedPost] = useState(null);
+
+  const blogPosts = [
+    {
+      id: 1,
+      title: "Inside Nepal's Thriving Tech Hub: Startups and Success Stories",
+      excerpt: "Discover how government initiatives like Digital Nepal Framework are fueling IT exports to $515M and empowering young innovators.",
+      date: "Oct 18, 2025, 12:20 PM +0545",
+      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb",
+      fullContent: (
+        <div className="prose max-w-none text-blue-200"> {/* Added text-blue-200 here */}
+          <h3 className="text-blue-400">The Rise of Nepal's Tech Ecosystem</h3> {/* Specific heading color */}
+          <p>Nepal's tech industry is experiencing unprecedented growth, driven by initiatives like the <strong className="text-blue-300">Digital Nepal Framework</strong>. This government-led program has boosted IT exports to over $515 million in 2025, creating opportunities for startups and young entrepreneurs.</p>
+          <img
+            src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb"
+            alt="Nepal tech startup"
+            className="w-full h-64 object-cover rounded-lg my-4"
+            onError={(e) => (e.target.style.display = "none")}
+          />
+          <h4 className="text-blue-400">Leading Startups</h4> {/* Specific heading color */}
+          <ul className="list-disc pl-5"> {/* Added list styling */}
+            <li><strong className="text-blue-300">Fusemachines</strong>: Pioneering AI solutions for global markets.</li>
+            <li><strong className="text-blue-300">CloudFactory</strong>: Specializing in data annotation and AI training.</li>
+            <li><strong className="text-blue-300">Tootle</strong>: Revolutionizing ride-sharing in Kathmandu.</li>
+          </ul>
+          <p>These companies are leveraging Nepal's young talent pool and affordable infrastructure to compete globally. However, challenges like power outages and talent retention persist.</p>
+          <h4 className="text-blue-400">Future Outlook</h4> {/* Specific heading color */}
+          <p>With increasing foreign investment and government support, Nepal's tech hub is set to grow further. Programs like <em className="text-blue-300">Startup Nepal</em> are fostering innovation, making it an exciting time for tech enthusiasts.</p>
+        </div>
+      ),
+    },
+    {
+      id: 2,
+      title: "Top Tech Blogs in Nepal: Your Guide to Staying Updated",
+      excerpt: "From TechPana to GadgetByteNepal, explore trusted sources for IT news, gadget reviews, and cyber awareness in the Nepali tech scene.",
+      date: "Oct 15, 2025, 10:00 AM +0545",
+      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb",
+      fullContent: (
+        <div className="prose max-w-none text-blue-200"> {/* Added text-blue-200 here */}
+          <h3 className="text-blue-400">Why Follow Tech Blogs in Nepal?</h3> {/* Specific heading color */}
+          <p>Keeping up with Nepal's fast-evolving tech landscape is crucial for professionals and enthusiasts. Local blogs provide insights into innovations, gadget launches, and cybersecurity trends tailored to the Nepali context.</p>
+          <h4 className="text-blue-400">Top Blogs to Follow</h4> {/* Specific heading color */}
+          <ul className="list-disc pl-5">
+            <li><strong className="text-blue-300">TechPana</strong>: Covers IT news, startup stories, and policy updates.</li>
+            <li><strong className="text-blue-300">GadgetByteNepal</strong>: Offers detailed reviews of smartphones and tech gadgets.</li>
+            <li><strong className="text-blue-300">NepaliTech</strong>: Focuses on cybersecurity and digital literacy.</li>
+          </ul>
+          <img
+            src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb"
+            alt="Tech blogging"
+            className="w-full h-64 object-cover rounded-lg my-4"
+            onError={(e) => (e.target.style.display = "none")}
+          />
+          <p>These platforms also host community discussions and webinars, making them valuable resources for networking and learning.</p>
+          <h4 className="text-blue-400">Tips for Staying Updated</h4> {/* Specific heading color */}
+          <p>Subscribe to newsletters, follow their social media on platforms like X, and participate in comment sections to engage with Nepal's tech community.</p>
+        </div>
+      ),
+    },
+    {
+      id: 3,
+      title: "Empowering Nepal's Tech Community: Innovation and Collaboration",
+      excerpt: "Join NepaleseInTech and Fusemachines to bridge the digital divide through AI education, events, and global networking for all generations.",
+      date: "Oct 10, 2025, 9:30 AM +0545",
+      image: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb",
+      fullContent: (
+        <div className="prose max-w-none text-blue-200"> {/* Added text-blue-200 here */}
+          <h3 className="text-blue-400">Building a Strong Tech Community</h3> {/* Specific heading color */}
+          <p>Nepal's tech community is thriving, thanks to organizations like <strong className="text-blue-300">NepaleseInTech</strong> and <strong className="text-blue-300">Fusemachines</strong>. These groups are fostering collaboration and skill development to bridge the digital divide.</p>
+          <h4 className="text-blue-400">Key Initiatives</h4> {/* Specific heading color */}
+          <ul className="list-disc pl-5">
+            <li><strong className="text-blue-300">AI Education</strong>: Free coding bootcamps and AI workshops for students and professionals.</li>
+            <li><strong className="text-blue-300">Tech Events</strong>: Annual conferences like Nepal Tech Summit bring together innovators.</li>
+            <li><strong className="text-blue-300">Global Networking</strong>: Platforms connecting Nepali talent with international opportunities.</li>
+          </ul>
+          <img
+            src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb"
+            alt="Tech community event"
+            className="w-full h-64 object-cover rounded-lg my-4"
+            onError={(e) => (e.target.style.display = "none")}
+          />
+          <p>These initiatives empower both young coders and older professionals, ensuring inclusivity across generations.</p>
+          <h4 className="text-blue-400">How to Get Involved</h4> {/* Specific heading color */}
+          <p>Join online forums, attend meetups, or contribute to open-source projects. Follow NepaleseInTech on X for event updates and networking opportunities.</p>
+        </div>
+      ),
+    },
+  ];
+
+  const imageVariants = {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.8,
+        type: "spring",
+        stiffness: 120,
+        ease: "easeOut",
+      },
+    },
+  };
+
+  const cardVariants = {
+    initial: { opacity: 0, y: 30 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        type: "spring",
+        stiffness: 120,
+      },
+    },
+    hover: {
+      scale: 1.05,
+      boxShadow: "0px 0px 16px rgba(253, 224, 71, 0.8)",
+      transition: { duration: 0.3, ease: "easeOut" },
+    },
+  };
+
+  const containerVariants = {
+    initial: { opacity: 0 },
+    animate: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3,
+      },
+    },
+  };
+
+  const modalVariants = {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.4, type: "spring", stiffness: 120 },
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.9,
+      transition: { duration: 0.3 },
+    },
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const section = document.getElementById("blogs");
+      if (section) {
+        const rect = section.getBoundingClientRect();
+        const isVisible = rect.top >= 0 && rect.top < window.innerHeight;
+        section.classList.toggle("shadow-2xl", isVisible);
+      }
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const openModal = (post) => {
+    setSelectedPost(post);
+    document.body.style.overflow = "hidden"; // Prevent scrolling when modal is open
+  };
+
+  const closeModal = () => {
+    setSelectedPost(null);
+    document.body.style.overflow = "auto"; // Restore scrolling
+  };
+
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") closeModal();
+    };
+    if (selectedPost) {
+      window.addEventListener("keydown", handleEscape);
+    }
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [selectedPost]);
+
+  return (
+    <section
+      id="blogs"
+      className="relative bg-black py-12 sm:py-16 md:py-20 px-4 sm:px-6 md:px-8 lg:px-12 min-h-[600px] sm:min-h-[700px] transition-all duration-500"
+    >
+      <motion.img
+        src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb"
+        alt="Blogs Background"
+        className="absolute inset-0 w-full h-full object-cover sm:object-contain md:object-cover opacity-50"
+        initial={{ opacity: 0, scale: 1.2 }}
+        animate={{ opacity: 0.5, scale: 1 }}
+        transition={{ duration: 1.2, type: "spring", stiffness: 100, ease: "easeOut" }}
+        onError={(e) => {
+          e.target.style.display = "none";
+          console.error("Failed to load blogs background image");
+        }}
+      />
+      <div className="absolute inset-0 bg-gradient-to-b from-black/80 via-black/70 to-black/80" />
+      <div className="relative z-10 max-w-7xl mx-auto">
+        <Head
+          title="Insights on technology, innovation, and digital literacy in Nepal"
+          head={
+            <span>
+              NepTech Tribe <span className="text-yellow-400">Blogs</span>
+            </span>
+          }
+        />
+        <motion.div
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-12"
+          variants={containerVariants}
+          initial="initial"
+          animate="animate"
+        >
+          {blogPosts.map((post) => (
+            <motion.div
+              key={post.id}
+              className="bg-black/60 p-4 sm:p-6 rounded-xl shadow-lg border border-yellow-400/20 hover:border-yellow-400/40 transition-colors duration-300 cursor-pointer"
+              variants={cardVariants}
+              initial="initial"
+              animate="animate"
+              whileHover="hover"
+              onClick={() => openModal(post)}
+            >
+              <motion.img
+                src={post.image}
+                alt={post.title}
+                className="w-full h-48 sm:h-56 md:h-64 object-cover rounded-lg mb-4"
+                variants={imageVariants}
+                initial="initial"
+                animate="animate"
+                onError={(e) => {
+                  e.target.style.display = "none";
+                  console.error(`Failed to load image for ${post.title}`);
+                }}
+              />
+              <h3 className="text-lg sm:text-xl md:text-2xl font-semibold text-white mb-2 line-clamp-2">{post.title}</h3>
+              <p className="text-sm sm:text-base text-gray-200 mb-2 line-clamp-3">{post.excerpt}</p>
+              <p className="text-xs sm:text-sm text-gray-400">{post.date}</p>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+
+      <AnimatePresence>
+        {selectedPost && (
+          <motion.div
+            className="fixed inset-0 bg-black/80 flex items-start sm:items-center justify-center z-50 p-4 sm:p-6 overflow-y-auto"
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            variants={modalVariants}
+            onClick={closeModal}
+          >
+            <motion.div
+              className="bg-black/90 p-6 sm:p-8 rounded-xl max-w-4xl w-full mx-auto border border-yellow-400/30 relative max-h-[90vh] overflow-y-auto"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                className="absolute top-4 right-4 text-white text-2xl sm:text-3xl font-bold hover:text-yellow-400 transition-colors"
+                onClick={closeModal}
+                aria-label="Close modal"
+              >
+                &times;
+              </button>
+              <img
+                src={selectedPost.image}
+                alt={selectedPost.title}
+                className="w-full h-48 sm:h-64 md:h-80 object-cover rounded-lg mb-6"
+                onError={(e) => (e.target.style.display = "none")}
+              />
+              <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-white mb-4">{selectedPost.title}</h2>
+              <p className="text-xs sm:text-sm text-gray-400 mb-6">{selectedPost.date}</p>
+              {selectedPost.fullContent}
+              <div className="mt-8 flex justify-end">
+                <button
+                  className="bg-yellow-400 text-black px-4 sm:px-6 py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors"
+                  onClick={closeModal}
+                >
+                  Close
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </section>
+  );
+}
+
+export default Blogs;
\ No newline at end of file
diff --git a/web/PomoFlow/index.html b/web/PomoFlow/index.html
new file mode 100644
index 0000000..da46c5c
--- /dev/null
+++ b/web/PomoFlow/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>PomoFlow</title>
+
+  <!-- Tailwind CDN (No /namaste/) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <script>
+    tailwind.config = {
+      corePlugins: { preflight: false },
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'sans-serif'] },
+          animation: {
+            pulse: 'pulse 2s infinite',
+            float: 'float 3s ease-in-out infinite',
+            fade: 'fadeIn 0.6s ease-out'
+          },
+          keyframes: {
+            pulse: { '0%, 100%': { opacity: 1 }, '50%': { opacity: 0.8 } },
+            float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' } },
+            fadeIn: { '0%': { opacity: 0, transform: 'translateY(20px)' }, '100%': { opacity: 1, transform: 'translateY(0)' } }
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-gradient-to-br from-teal-50 via-cyan-50 to-blue-50 dark:from-gray-900 dark:to-teal-900 min-h-screen transition-all duration-500">
+
+  <div class="container max-w-4xl mx-auto p-4">
+    <div class="glass-card bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl rounded-3xl p-6 md:p-8 shadow-2xl border border-white/20">
+
+      <!-- Header -->
+      <div class="flex justify-between items-center mb-8">
+        <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white animate-fade">PomoFlow</h1>
+        <button id="theme-toggle" class="p-3 rounded-xl bg-gray-200 dark:bg-gray-700 hover:scale-110 transition-all">
+          Dark Mode
+        </button>
+      </div>
+
+      <div class="grid md:grid-cols-2 gap-8">
+
+        <!-- Timer -->
+        <div class="text-center animate-fade">
+          <div class="relative w-64 h-64 mx-auto mb-6">
+            <svg class="w-full h-full transform -rotate-90">
+              <circle cx="128" cy="128" r="120" stroke="currentColor" stroke-width="12" fill="none" class="text-gray-200 dark:text-gray-700"/>
+              <circle cx="128" cy="128" r="120" stroke="currentColor" stroke-width="12" fill="none" class="text-teal-500 dark:text-teal-400 timer-progress transition-all duration-1000" stroke-dasharray="754" stroke-dashoffset="754"/>
+            </svg>
+            <div class="absolute inset-0 flex flex-col items-center justify-center">
+              <p id="timer-mode" class="text-sm text-gray-600 dark:text-gray-400 font-medium">Focus Time</p>
+              <p id="timer-display" class="text-5xl font-bold text-gray-800 dark:text-white">25:00</p>
+            </div>
+          </div>
+
+          <div class="flex justify-center gap-4">
+            <button id="start-btn" class="px-6 py-3 bg-teal-500 text-white rounded-xl font-medium hover:bg-teal-600 active:scale-95 transition-all shadow-lg">Start</button>
+            <button id="reset-btn" class="px-6 py-3 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-white rounded-xl font-medium hover:bg-gray-400 dark:hover:bg-gray-500 active:scale-95 transition-all">Reset</button>
+          </div>
+
+          <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Sessions today: <span id="session-count" class="font-bold text-teal-600 dark:text-teal-400">0</span></p>
+        </div>
+
+        <!-- Tasks -->
+        <div class="animate-fade">
+          <div class="flex gap-2 mb-4">
+            <input type="text" id="task-input" placeholder="Add a task..." class="flex-1 px-4 py-3 rounded-xl bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm border border-gray-300 dark:border-gray-600 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-100 dark:focus:ring-teal-900 transition-all"/>
+            <button id="add-task" class="px-4 py-3 bg-teal-500 text-white rounded-xl hover:bg-teal-600 active:scale-95 transition-all text-xl font-bold">+</button>
+          </div>
+
+          <div id="task-list" class="space-y-2 max-h-96 overflow-y-auto pr-2"></div>
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/PomoFlow/script.js b/web/PomoFlow/script.js
new file mode 100644
index 0000000..5f4ada5
--- /dev/null
+++ b/web/PomoFlow/script.js
@@ -0,0 +1,148 @@
+// Elements
+const startBtn = document.getElementById('start-btn');
+const resetBtn = document.getElementById('reset-btn');
+const timerDisplay = document.getElementById('timer-display');
+const timerMode = document.getElementById('timer-mode');
+const progress = document.querySelector('.timer-progress');
+const taskInput = document.getElementById('task-input');
+const addTask = document.getElementById('add-task');
+const taskList = document.getElementById('task-list');
+const sessionCount = document.getElementById('session-count');
+
+// State
+let timeLeft = 25 * 60;
+let totalTime = 25 * 60;
+let isRunning = false;
+let isFocus = true;
+let timerId;
+let sessions = parseInt(localStorage.getItem('pomoflow-sessions')) || 0;
+let tasks = JSON.parse(localStorage.getItem('pomoflow-tasks')) || [];
+
+// Sound
+const bell = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-bell-notification-933.mp3');
+
+// Update Timer
+function updateTimer() {
+  const mins = Math.floor(timeLeft / 60).toString().padStart(2, '0');
+  const secs = (timeLeft % 60).toString().padStart(2, '0');
+  timerDisplay.textContent = `${mins}:${secs}`;
+
+  const offset = ((totalTime - timeLeft) / totalTime) * 754;
+  progress.style.strokeDashoffset = 754 - offset;
+}
+
+// Start Timer
+function startTimer() {
+  if (isRunning) return;
+  isRunning = true;
+  startBtn.textContent = 'Pause';
+
+  timerId = setInterval(() => {
+    timeLeft--;
+    updateTimer();
+
+    if (timeLeft <= 0) {
+      clearInterval(timerId);
+      isRunning = false;
+      startBtn.textContent = 'Start';
+      bell.play();
+
+      if (isFocus) {
+        sessions++;
+        sessionCount.textContent = sessions;
+        localStorage.setItem('pomoflow-sessions', sessions);
+        switchToBreak();
+      } else {
+        switchToFocus();
+      }
+    }
+  }, 1000);
+}
+
+// Switch Modes
+function switchToFocus() {
+  isFocus = true;
+  timeLeft = 25 * 60;
+  totalTime = 25 * 60;
+  timerMode.textContent = 'Focus Time';
+  document.body.classList.remove('break-mode');
+  updateTimer();
+}
+
+function switchToBreak() {
+  isFocus = false;
+  timeLeft = 5 * 60;
+  totalTime = 5 * 60;
+  timerMode.textContent = 'Break Time';
+  document.body.classList.add('break-mode');
+  updateTimer();
+}
+
+// Reset
+resetBtn.addEventListener('click', () => {
+  clearInterval(timerId);
+  isRunning = false;
+  startBtn.textContent = 'Start';
+  isFocus ? switchToFocus() : switchToBreak();
+});
+
+// Start/Pause
+startBtn.addEventListener('click', () => {
+  if (isRunning) {
+    clearInterval(timerId);
+    isRunning = false;
+    startBtn.textContent = 'Start';
+  } else {
+    startTimer();
+  }
+});
+
+// Tasks
+function renderTasks() {
+  taskList.innerHTML = '';
+  tasks.forEach((task, i) => {
+    const div = document.createElement('div');
+    div.className = `flex items-center gap-3 p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm transition-all ${task.done ? 'opacity-60 line-through' : ''}`;
+    div.innerHTML = `
+      <input type="checkbox" ${task.done ? 'checked' : ''} onchange="toggleTask(${i})" class="w-5 h-5 rounded text-teal-500 focus:ring-teal-400"/>
+      <span class="flex-1 text-gray-800 dark:text-gray-200">${task.text}</span>
+      <button onclick="deleteTask(${i})" class="text-red-500 hover:scale-110 transition-all text-sm">Delete</button>
+    `;
+    taskList.appendChild(div);
+  });
+  localStorage.setItem('pomoflow-tasks', JSON.stringify(tasks));
+}
+
+function toggleTask(i) {
+  tasks[i].done = !tasks[i].done;
+  renderTasks();
+}
+
+window.deleteTask = function(i) {
+  tasks.splice(i, 1);
+  renderTasks();
+};
+
+addTask.addEventListener('click', () => {
+  if (taskInput.value.trim()) {
+    tasks.push({ text: taskInput.value.trim(), done: false });
+    taskInput.value = '';
+    renderTasks();
+  }
+});
+
+taskInput.addEventListener('keypress', e => {
+  if (e.key === 'Enter') addTask.click();
+});
+
+// Dark Mode
+document.getElementById('theme-toggle').addEventListener('click', () => {
+  document.body.classList.toggle('dark');
+  const isDark = document.body.classList.contains('dark');
+  document.getElementById('theme-toggle').textContent = isDark ? 'Light Mode' : 'Dark Mode';
+});
+
+// Init
+switchToFocus();
+renderTasks();
+sessionCount.textContent = sessions;
\ No newline at end of file
diff --git a/web/PomoFlow/style.css b/web/PomoFlow/style.css
new file mode 100644
index 0000000..e69de29
