diff --git a/OSEB CHARGES-1_page-0001.jpg b/OSEB CHARGES-1_page-0001.jpg
new file mode 100644
index 0000000..9cb009a
Binary files /dev/null and b/OSEB CHARGES-1_page-0001.jpg differ
diff --git a/OSEB_CHARGES-1_page-0001-removebg-preview.png b/OSEB_CHARGES-1_page-0001-removebg-preview.png
new file mode 100644
index 0000000..2211079
Binary files /dev/null and b/OSEB_CHARGES-1_page-0001-removebg-preview.png differ
diff --git a/index.html b/index.html
index be74364..8a6545b 100644
--- a/index.html
+++ b/index.html
@@ -1,1421 +1,491 @@
 <!DOCTYPE html>
-
 <html lang="en">
 
-
-
 <head>
-    <link rel="stylesheet" type="text/css" href="davidobo.css">
-
     <meta charset="UTF-8">
-
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <title>Akamuli ka Lillie 🌷</title>
-
+    <title>Outreach School Examinations Board</title>
     <!-- Bootstrap CSS link -->
-<!-- Vendor JS Files -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-     <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
-     <script src="assets/vendor/aos/aos.js"></script>
-     <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-     <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
-     <script src="assets/vendor/php-email-form/validate.js"></script>
-     <script src="https://code.iconify.design/iconify-icon/1.0.0-beta.3/iconify-icon.min.js"></script>
-    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
-        <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
-        <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
-    
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
-
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!-- Custom CSS -->
     <style>
-        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap");
-@import url("//fonts.googleapis.com/earlyaccess/droidarabicnaskh.css");
-* {
-    margin: 0;
-    padding: 0;
-    font-family: Poppins, Droid Arabic Naskh;
-    font-weight: normal;
-    box-sizing: border-box;
-}
-
-body {
-    direction: lfl;
-    background: #ffffff;
-}
-
-a {
-    text-decoration: none;
-}
-
-.post {
-    background: #fff;
-    margin: 0 auto;
-    padding: 10px;
-    max-width: 500px;
-    border: 1px solid #d0d1d5;
-    border-radius: 3px;
-}
-
-.post img {
-    width: 100%;
-}
-
-.welcome {
-    font-size: 15px;
-}
-
-.amount,
-#getname {
-    color: #098105;
-    text-decoration: none;
-}
-
-.done {
-    text-align: center;
-    color: #27ae60;
-}
-
-.tip {
-    font-size: 14px;
-}
-
-.title {
-    text-align: center;
-}
-
-.error {
-    display: none;
-    text-align: center;
-    font-size: 14px;
-    color: #e74c3c;
-}
-
-button {
-    display: block;
-    width: 200px;
-    height: 50px;
-    color: #fff;
-    border: none;
-    outline: none;
-    font-size: 24px;
-    cursor: pointer;
-    border-radius: 5px;
-    padding: 0 10px;
-    margin: 10px auto;
-    background: rgb(254, 202, 5);
-    transition: background 0.3s ease;
-}
-
-button:hover {
-    background: #098105;
-}
-
-.phone {
-    max-width: 400px;
-    margin: 10px auto;
-}
-
-.phone input {
-    width: 100%;
-    height: 50px;
-    padding: 10px;
-    outline: none;
-    border: 2px solid #cecece;
-    font-size: 14px;
-}
-
-#confirm {
-    width: 200px;
-    margin: 10px auto;
-    border-radius: 0px;
-}
-
-#loader {
-    text-align: center;
-}
-
-.spin {
-    width: 50px;
-    height: 50px;
-    background: transparent;
-    border: solid 8px rgb(254, 202, 5);
-    border-right-color: transparent;
-    border-radius: 50%;
-    margin: 10px auto;
-    animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-    100% {
-        transform: rotate(1turn);
-    }
-}
-
-#loader,
-#info,
-#checking,
-#share,
-#claim {
-    display: none;
-}
-
-.center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.barr {
-    direction: ltr;
-    max-width: 400px;
-    margin: 10px auto;
-    box-sizing: border-box;
-}
-
-.fill {
-    position: relative;
-    display: inline-block;
-    width: calc(100% - 100px);
-    height: 35px;
-    padding: 2px;
-    border: 2px solid #098105;
-}
-
-#fill,
-#fill2 {
-    background: #098105;
-    width: 0%;
-    height: 100%;
-}
-
-.percentage {
-    width: 100px;
-    float: right;
-    height: 35px;
-    font-size: 16px;
-    border: 2px solid #098105;
-}
-
-#percentage,
-#percentage2 {
-    margin-left: 5px;
-}
-
-#check,
-#check2 {
-    display: none;
-}
-
-.counter {
-    color: #7f7f7f;
-    font-size: 12px;
-    text-align: right;
-    padding: 10px 0 10px 2px;
-    border-bottom: 1px solid #e1e2e3;
-}
-
-.reactions {
-    display: inline-flex;
-    align-items: center;
-    float: left;
-}
-
-.counter img {
-    float: left;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    border: 2px solid #fff;
-    box-sizing: content-box;
-}
-
-.like,
-.love {
-    margin-right: -5px;
-}
-
-.like {
-    z-index: 2;
-}
-
-.love {
-    z-index: 1;
-}
-
-.bar {
-    display: table;
-    width: 100%;
-    border-bottom: 1px solid #e1e2e3;
-}
-
-.bar .react {
-    display: table-cell;
-    width: calc(100% / 3);
-    font-size: 12px;
-    color: #7f7f7f;
-    text-align: center;
-    padding: 10px 0;
-    cursor: pointer;
-}
-
-.comments {
-    direction: ltr;
-}
-
-.comment {
-    padding: 6px 0;
-    margin-top: 5px;
-}
-
-.comment img {
-    float: left;
-    width: 32px;
-    height: 32px;
-    border: none;
-    border-radius: 18px;
-    cursor: pointer;
-}
-
-.reply {
-    margin-left: 37px;
-}
-
-.single-container {
-    margin-left: 37px;
-    background: #f1f2f6;
-    padding: 10px;
-    border-radius: 15px;
-    font-size: 12px;
-}
-
-.single-container .user {
-    display: inline-block;
-    cursor: pointer;
-    color: #365899;
-    margin-bottom: 5px;
-}
-
-.single-container .text {
-    display: block;
-}
-
-.buttons {
-    font-size: 12px;
-    font-weight: bold;
-    margin: 10px 0 0 47px;
-    color: #90949c;
-}
-
-.action {
-    cursor: pointer;
-}
-
-.action:hover {
-    text-decoration: underline;
-}
-
-.input {
-    padding: 6px 12px 12px;
-}
-
-.input input {
-    width: 100%;
-    background: #f1f2f6;
-    padding: 10px;
-    border-radius: 15px;
-    border: 0;
-    outline: none;
-}
-
-.A {
-    text-align: center;
-    background-color: rgb(254, 202, 5);
-}
-     /*--------------------------------------------------------------
-# Gallery
---------------------------------------------------------------*/
-.gallery .gallery-item {
-  overflow: hidden;
-  border-right: 3px solid #fff;
-  border-bottom: 3px solid #fff;
-}
-
-.gallery .gallery-item img {
-  transition: all ease-in-out 0.4s;
-}
-
-.gallery .gallery-item:hover img {
-  transform: scale(1.1);
-}
-        body {
-
-            padding-top: 70px; /* Offset for fixed navbar */
-
-            background-color: #f4c2c2;
-            
-
+        /* Custom CSS for navbar color */
+        .navbar-custom {
+            background-color: #ff2f00;
+            /* Change this color to your desired color */
         }
 
-
-
-        h1 {
-
-            text-align: center;
-
-            margin-bottom: 30px;
-
-            font-size: 36px; /* Decreased font size */
-
+        .navbar-custom .navbar-brand,
+        .navbar-custom .navbar-nav .nav-link {
+            color: #ffffff;
+            /* Change this color to your desired color */
         }
 
-
-
-        .event {
-
-            margin-bottom: 30px;
-
-            position: relative;
-
-            cursor: pointer; /* Change cursor to hand */
-
+        .navbar-brand img {
+            max-height: 30px;
+            /* Adjust the max-height as needed */
         }
 
-
-
-        .event img {
-
-            max-width: 100%;
-
-            height: auto;
-
-            transition: transform 0.3s;
-
-        }
-
-
-
-        .event:hover img {
-
-            transform: scale(1.1);
-
-        }
-
-
-
-        .modal-content iframe {
-
-            width: 100%;
-
-            height: 100%;
-
-        }
-
-
-
-        
-        /* Navbar styling */
-        .navbar {
-            background-color: #ff0000; /* Dark grey */
-        }
-
-        .navbar-brand,
-        .navbar-nav .nav-link {
-            color: #ffffff; /* White */
-        }
-
-        .navbar-brand:hover,
-        .navbar-nav .nav-link:hover {
-            color: #ffffff; /* White */
-        }
-
-        /* Footer styling */
-        .footer {
-            background-color: #ff0000; /* Dark grey */
-            color: #ffc0cb; /* White */
-            text-align: center;
-            padding: 20px 0;
-        }
-
-
-
-        #snowflakeContainer {
-
-                position: absolute;
-
-                left: 0;
-
-                top: 0;
-
-                pointer-events: none
-
+        /* Shaking animation */
+        @keyframes shake {
+            0% {
+                transform: translateX(0);
             }
 
-
-
-            .snowflake {
-
-                position: fixed;
-
-                user-select: none;
-
-                z-index: 1000;
-
-                color: #ffffff;
-
-                opacity: .8;
-
-                pointer-events: none
-
+            25% {
+                transform: translateX(-5px);
             }
 
-
-
-            @keyframes fall {
-
-                0% {
-
-                    top: -10%
-
-                }
-
-                100% {
-
-                    top: 100%
-
-                }
-
+            50% {
+                transform: translateX(5px);
             }
 
-            .m1 {
-
-            position: fixed;
-
-            left: 1%;
-
-            width: auto;
-
-            height: 100%;
-
-            top: 1%;
+            75% {
+                transform: translateX(-5px);
+            }
 
-            color: #000;
+            100% {
+                transform: translateX(0);
+            }
+        }
 
+        .btn-shake {
+            animation: shake 0.9s infinite;
         }
 
 
 
-        .m2 {
+        /* Black text in the jumbotron */
+        .jumbotron .lead {
+            color: transparent;
+            /* Make the text transparent */
+        }
 
+        /* Scroll to top button */
+        #scrollToTop {
+            display: none;
+            /* Initially hide the button */
             position: fixed;
-
-            right: 1%;
-
-            width: auto;
-
-            height: 100%;
-
-            top: 1%;
-
-            color: #000;
-
+            bottom: 20px;
+            right: 20px;
+            z-index: 99;
+            font-size: 18px;
+            border: none;
+            outline: none;
+            background-color: #ff2f00;
+            color: #ffffff;
+            cursor: pointer;
+            padding: 15px;
+            border-radius: 50%;
         }
 
-        /* CSS for pulsating animation */
-    @keyframes pulse {
-        0% {
-            transform: scale(1);
+        #scrollToTop:hover {
+            background-color: #ff5e3a;
         }
-        50% {
-            transform: scale(1.1);
-        }
-        100% {
-            transform: scale(1);
+          /* Confetti CSS */
+          .confetti {
+            position: fixed;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 9999;
         }
+            /* Shakes animation */
+    @keyframes shakes {
+        0% { transform: translateY(0); }
+        50% { transform: translateY(-5px); }
+        100% { transform: translateY(0); }
     }
 
-    .btn-pulse {
-        animation: pulse 1.5s infinite;
+    .btn-shakes {
+        animation: shakes 1s infinite;
     }
-    .disabled-comments {
-        margin-top: 20px; /* Adjust the top margin as needed */
-        text-align: center; /* Center the text */
-        color: #888; /* Set the text color */
-        font-style: italic; /* Italicize the text */
-    }
-
-    </style>
-
-</head>
-
-
-
-<div id="snowflakeContainer"></div>
-
-<script>
-
-    const snowflakeContainer = document.getElementById("snowflakeContainer");
-
-    let snowflakes = [];
-
-    const numberOfSnowflakes = 20,
-
-        characters = ["❤️", "💕"];
-
-
-
-    function createSnowflake() {
-
-        let e = document.createElement("div");
-
-        e.className = "snowflake", e.textContent = characters[Math.floor(Math.random() * characters.length)], e.style.fontSize = `${12+20*Math.random()}px`, e.style.left = `${100*Math.random()}%`, e.style.animationDuration = `${5+5*Math.random()}s`, e.style.animationName = "fall", e.style.animationIterationCount = "infinite", snowflakeContainer.appendChild(e)
-
+        /* Heart animation */
+        @keyframes heartbeat {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.2); }
+        100% { transform: scale(1); }
     }
 
-
-
-    function updateSnowflakes() {
-
-        snowflakes.forEach(e => {
-
-            parseInt(e.style.top, 10) > window.innerHeight && (e.style.top = "-25px")
-
-        }), requestAnimationFrame(updateSnowflakes)
+    .heart {
+        display: inline-block;
+        animation: heartbeat 1s infinite;
+        color: red; /* Add color property for red color */
 
     }
-
-    for (let i = 0; i < 30; i++) createSnowflake(), snowflakes.push(snowflakeContainer.lastChild);
-
-    updateSnowflakes();
-
-</script>
+    </style>
+</head>
 
 <body>
-
-
-
-   <marquee class="m1" behavior="scroll" direction="up" scrolldelay="0"> <br>
-
-    💐<br><br> <!-- Bouquet -->
-
-    🌹<br><br> <!-- Rose -->
-
-    🌻<br><br> <!-- Sunflower -->
-
-    🌷<br><br> <!-- Tulip -->
-
-    🌼<br><br> <!-- Blossom -->
-
-    💮<br><br> <!-- White Flower -->
-
-    🏵️<br><br> <!-- Rosette -->
-
-    💐<br><br> <!-- Bouquet -->
-
-    🌹<br><br> <!-- Rose -->
-
-    🌻<br><br> <!-- Sunflower -->
-
-    🌷<br><br> <!-- Tulip -->
-
-    🌼<br><br> <!-- Blossom -->
-
-    💮<br><br> <!-- White Flower -->
-
-    🏵️<br><br> <!-- Rosette -->
-
-</marquee>
-
-<marquee class="m2" behavior="scroll" direction="down" scrolldelay="0"> <br>
-
-    💐<br><br> <!-- Bouquet -->
-
-    🌹<br><br> <!-- Rose -->
-
-    🌻<br><br> <!-- Sunflower -->
-
-    🌷<br><br> <!-- Tulip -->
-
-    🌼<br><br> <!-- Blossom -->
-
-    💮<br><br> <!-- White Flower -->
-
-    🏵️<br><br> <!-- Rosette -->
-
-    💐<br><br> <!-- Bouquet -->
-
-    🌹<br><br> <!-- Rose -->
-
-    🌻<br><br> <!-- Sunflower -->
-
-    🌷<br><br> <!-- Tulip -->
-
-    🌼<br><br> <!-- Blossom -->
-
-    💮<br><br> <!-- White Flower -->
-
-    🏵️<br><br> <!-- Rosette -->
-
-</marquee>
-
-    
-
-
+      <!-- Confetti canvas -->
+      <canvas class="confetti" id="canvas"></canvas>
 
     <!-- Navigation bar -->
-
-    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
-
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
         <div class="container">
-
-            <a class="navbar-brand" href="#">Jesse <span style="color: white;">❦</span> Lillian </a>
-
+            <a class="navbar-brand" href="#">
+                <img src="OSEB_CHARGES-1_page-0001-removebg-preview.png" alt="Logo">
+                <!-- Replace 'your-logo.png' with the path to your logo -->
+                OSEB
+            </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
-
                 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-
                 <span class="navbar-toggler-icon"></span>
-
             </button>
-
             <div class="collapse navbar-collapse" id="navbarNav">
-
                 <ul class="navbar-nav ml-auto">
-
                     <li class="nav-item active">
-
-                        <a class="nav-link" href="#biography">Biography <span class="sr-only">(current)</span></a>
-
+                        <a class="nav-link" href="#exams">Exams <span class="sr-only">(current)</span></a>
                     </li>
-
                     <li class="nav-item">
-
-                        <a class="nav-link" href="#songs">Songs</a>
-
+                        <a class="nav-link" href="#schemes_of_work">Schemes of Work</a>
                     </li>
-
                     <li class="nav-item">
-
-                        <a class="nav-link" href="#books">Books</a>
-
+                        <a class="nav-link" href="#textbooks">Textbooks</a>
                     </li>
-
-     <li class="nav-item">
-
-                        <a class="nav-link" href="#gallery">Gallery</a>
-
+                    <li class="nav-item">
+                        <a class="nav-link" href="#lesson_notes">Lesson Notes</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#holiday_packages">Holiday Packages</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#learners_workbooks"> Workbooks</a>
                     </li>
-
                 </ul>
-
             </div>
-
         </div>
-
     </nav>
+    <p></p><br><br>
+
+    <!-- Scroll to top button -->
+    <button id="scrollToTop" onclick="scrollToTop()"><i class="fas fa-arrow-up"></i></button>
+    <center>
+        <!-- Image for exams section -->
+        <img src="OSEB CHARGES-1_page-0001.jpg" alt="OSEB Logo" class="img-fluid w-100">
+    </center>
+    <header class="container mt-5 text-center">
+        <h1>Welcome to OSEB</h1>
+        <p>We are delighted to have you here! Explore our packages and empower your educational journey.</p>
+        <a href="OSEB CHARGES.pdf" class="btn btn-primary btn-shakes">Download Packages ↓</a>
+    </header>
+    
+    <section id="exams" class="container mt-5">
+        <h3>Exams</h3>
+        <p>Prepare for your academic journey with our comprehensive range of exams. Thousands of teachers have utilized
+            our exams and witnessed remarkable improvements in their pupils' performance. With a wide variety of
+            subjects and levels covered, our exams are designed to challenge and motivate learners to excel. <p></p>Avail the
+            soft copy of our exams at a nominal price of only Shs. 60,000.</p>
+        <a href="https://fresh-teacher.github.io/" class="btn btn-danger btn-shake">Purchase Now ➮ </a>
+    </section>
+
+    <section id="schemes_of_work" class="container mt-5">
+        <h3>Schemes of Work</h3>
+        <p>Explore our meticulously crafted schemes of work tailored to meet the diverse needs of educators. Our schemes
+            of work have been praised by educators worldwide for their clarity, effectiveness, and alignment with
+            curriculum standards. Join the thousands of satisfied teachers who have successfully implemented our schemes
+            of work and witnessed remarkable improvements in pupil engagement and achievement.
+        <p></p>Get the soft copies of our schemes of work for only Shs. 5,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="textbooks" class="container mt-5">
+        <h3>Textbooks</h3>
+        <p>Browse through our extensive collection of textbooks, carefully curated to support effective teaching and
+            learning. Our textbooks have received rave reviews from educators for their comprehensive coverage, clarity,
+            and engaging content. A lot of teachers have trusted our textbooks to deliver quality education and inspire
+            pupils to reach their full potential.
+        <p></p> Get the soft copies of our textbooks at a budget-friendly price.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="lesson_notes" class="container mt-5">
+        <h3>Lesson Notes</h3>
+        <p>Access a treasure trove of lesson notes designed to enrich your teaching and captivate your pupils' interest.
+            Our lesson notes have been tried and tested by educators worldwide, with outstanding results. Join the
+            countless teachers who have utilized our lesson notes to create dynamic and engaging lessons that foster
+            deep learning and inspire academic excellence.
+        <p></p> Purchase the soft copies of our lesson notes for only Shs. 5,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="holiday_packages" class="container mt-5">
+        <h3>Holiday Packages</h3>
+        <p>Join the ranks of educators who have transformed vacations into valuable learning experiences for their
+            pupils. Our holiday packages offer a perfect blend of fun and education, ensuring that pupils return
+            refreshed, inspired, and ready to tackle new challenges. <p></p>Benefit from our holiday packages at an affordable
+            rate of Shs. 5000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="weekly_homeworks" class="container mt-5">
+        <h3>Weekly Homeworks</h3>
+        <p>Elevate your pupils' learning with our professionally prepared weekly homework assignments. Experience the
+            positive impact of consistent and meaningful homework on pupil progress and academic achievement. Join the
+            multitude of educators who have witnessed remarkable improvements in pupil engagement, retention, and
+            academic performance with our weekly homeworks.
+        <p></p> Get the soft copies of our weekly homeworks for only Shs. 5,000 per class.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="topical_questions" class="container mt-5">
+        <h3>Topical Questions</h3>
+        <p>Enhance your pupils' understanding and mastery of key concepts with our comprehensive collection of topical
+            questions. Thousands of educators have utilized our topical questions to reinforce learning, stimulate
+            critical thinking, and prepare pupils for exams. Witness firsthand the transformative power of focused
+            practice and targeted revision with our top-quality topical questions.
+        <p></p> Purchase the soft copies of our topical questions for just Shs. 8,000 per subject.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="learners_workbooks" class="container mt-5">
+        <h3>Learner's Workbooks</h3>
+        <p>Empower your pupils to take ownership of their learning journey with our learner's workbooks. Our workbooks
+            are designed to foster independent learning, critical thinking, and problem-solving skills. Join the growing
+            community of educators who have seen their pupils thrive academically and develop a lifelong love for
+            learning through the use of our learner's workbooks.
+        <p></p>Purchase the soft copies of our learner's workbooks at a reasonable price of Shs. 8,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="lesson_plan_templates" class="container mt-5">
+        <h3>Lesson Plan Templates</h3>
+        <p>Simplify your lesson planning process with our professionally crafted lesson plan templates. Designed by
+            experienced educators, our templates streamline lesson preparation, ensuring that every lesson is
+            well-structured, engaging, and aligned with learning objectives. Join those teachers who have saved valuable
+            time and energy with our user-friendly lesson plan templates.
+        <p></p> Avail the soft copies of our lesson plan templates for only Shs. 2,500.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="ple_pamphlets" class="container mt-5">
+        <h3>PLE Pamphlets</h3>
+        <p>Guide your pupils through the Primary Leaving Examinations (PLE) with our informative pamphlets. Trusted by
+            educators for their clarity and relevance, our PLE pamphlets provide valuable insights, tips, and strategies
+            to help pupils excel in their exams. Join the teachers who have relied on our PLE pamphlets to empower their
+            pupils and achieve outstanding results.
+        <p></p> Purchase the soft copies of our PLE pamphlets at an affordable price of Shs. 10,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="p7_topical_questions" class="container mt-5">
+        <h3>P.7 Topical Questions</h3>
+        <p>Prepare your Primary 7 pupils for success with our targeted P.7 topical questions. Our carefully set
+            questions cover key topics and concepts, allowing pupils to gain confidence and proficiency in their exam
+            preparations. Join the legions of educators who have witnessed the transformative impact of our P.7 topical
+            questions on pupil performance and success.
+        <p></p>Purchase the soft copies of our P.7 topical questions at a give-away fee of Shs. 8,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <!-- New Sections -->
+<section id="p7_special_sets" class="container mt-5">
+    <h3>P7 Special Sets Series</h3>
+    <p>Equip your Primary 7 pupils for excellence with our exclusive P7 Special Sets Series. Each set is strategically
+        curated to cover key topics and concepts essential for exam success. Witness remarkable improvements in pupil
+        performance and confidence with this invaluable resource, available now for only Shs. 15,000 per set.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="interview_exams" class="container mt-5">
+    <h3>Interview Exams</h3>
+    <p>Prepare for your teaching career with our comprehensive Interview Exams series. Each set includes a variety of
+        questions and scenarios commonly encountered in interviews, ensuring you're fully prepared to ace your job
+        interviews. Boost your confidence and land your dream teaching job now for only Shs. 8,000 per set.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="ple_spot_exams" class="container mt-5">
+    <h3>PLE Spot Exams</h3>
+    <p>Empower your pupils for success in the Primary Leaving Examinations (PLE) with our PLE Spot Exams. Each set
+        contains a selection of exam-style questions covering various subjects, providing invaluable practice and
+        preparation. Elevate your pupils' confidence and proficiency with this essential resource, available now for
+        only Shs. 12,000 per set.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="book_cover_hardcopies" class="container mt-5">
+    <h3>Book Cover Hardcopies</h3>
+    <p>Protect your valuable textbooks and exercise books with our durable Book Cover Hardcopies. Available in two sizes (A4 and A3),
+        these covers ensure your books stay in pristine condition throughout the academic year. Invest in the longevity
+        of your educational resources now for just Shs. 200 each or Shs. 100 each, depending on the size.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="teachers_interview_papers" class="container mt-5">
+    <h3>Teacher's Interview Papers</h3>
+    <p>Prepare for your teaching job interviews with confidence using our comprehensive Teacher's Interview Papers.
+        This essential resource includes a collection of interview questions, tips, and strategies to help you secure
+        your dream teaching position. Invest in your career success now for only Shs. 15,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="weekend_tests" class="container mt-5">
+    <h3>Weekend Tests</h3>
+    <p>Elevate your class' learning experience with our Weekend Tests series. Each test is designed to
+        reinforce key concepts and topics covered during the week, ensuring maximum pupil engagement and retention.
+        Empower your learners for success now for just Shs. 5,000 per class.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+
+    <!-- Bootstrap JS and jQuery -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <!-- Font Awesome -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
+    <!-- Custom JavaScript for scroll to top button -->
+    <script>
+               // Smooth scrolling for navigation links
+               document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+
+        // Trigger confetti on page load
+        window.addEventListener('load', function() {
+            startConfetti();
+        });
+
+        // Function to start confetti
+        function startConfetti() {
+            // Confetti initialization code
+            canvas = document.getElementById("canvas");
+            ctx = canvas.getContext("2d");
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            cx = ctx.canvas.width / 2;
+            cy = ctx.canvas.height / 2;
+
+            let confetti = [];
+            const confettiCount = 150;
+            const gravity = 1.5;
+            const terminalVelocity = 5;
+            const drag = 0.075;
+            const colors = [
+                { front: 'red', back: 'darkred' },
+                { front: 'green', back: 'darkgreen' },
+                { front: 'blue', back: 'darkblue' },
+                { front: 'yellow', back: 'darkyellow' },
+                { front: 'orange', back: 'darkorange' },
+                { front: 'pink', back: 'darkpink' },
+                { front: 'purple', back: 'darkpurple' },
+                { front: 'turquoise', back: 'darkturquoise' }
+            ];
+
+            // Initialize confetti
+            for (let i = 0; i < confettiCount; i++) {
+                confetti.push({
+                    color: colors[Math.floor(Math.random() * colors.length)],
+                    dimensions: { x: Math.random() * 10 + 10, y: Math.random() * 20 + 10 },
+                    position: { x: Math.random() * canvas.width, y: canvas.height - 1 },
+                    rotation: Math.random() * 2 * Math.PI,
+                    scale: { x: 1, y: 1 },
+                    velocity: { x: Math.random() * 50 - 25, y: Math.random() * -50 }
+                });
+            }
 
+            // Render confetti
+            function render() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
 
+                confetti.forEach((confetto, index) => {
+                    let width = confetto.dimensions.x * confetto.scale.x;
+                    let height = confetto.dimensions.y * confetto.scale.y;
 
-    <div class="container mt-5" id="biography">
-        <br>
-        <center><div class="container mt-5">
-            <a href="app.apk" class="btn btn-primary btn-pulse">Install Our App</a>
-        </div></center>
-        
-        <br>
-        <h1>Biography ✍🏻</h1>
-
-    <p>Jesse and Lillian, their hearts drawn together like magnets, crossed paths <span id="yearsPassed"></span> years ago. 
-Strangers at first, they exchanged quick glances, unaware of the journey fate had in store for them. Little did they know that they would craft a love story which would stand the test of time! ⏳️
-
-</p>
-
-
-
-<script>
-
-    // Calculate years passed since 2020
-
-    const meetingYear = 2020;
-
-    const currentYear = new Date().getFullYear();
-
-    const yearsPassed = currentYear - meetingYear;
-
-
-
-    // Write years passed into the HTML
-
-    document.getElementById('yearsPassed').textContent = yearsPassed;
-
-</script>
-
-
-<p>But it was not until they became best friends that Jesse and Lillian truly realised the depth of their connection. They confided in each other, supported each other, and cherished each other's company in ways they never thought possible. 🫂
-
-
-
-
-
-
-
-
-
-
-
-</p>   </div>
-
-
-
-    <div class="container mt-5" id="songs">
-
-        <h2>The Song 🎵</h2> 
-
-<p>In the quiet moments of solitude, Jesse poured his heart into the creation of his love song, channeling every tiny bit of his feelings and emotions into its melody. 🗣️<br><p></p>Each note carried the weight of his admiration, each verse a reflection of his adoration towards Lillian. Through music, Jesse sought to capture the essence of their connection, immortalising their love story in the timeless lyrics of <strong>"Akamuli ka Lillie."</strong>
-
-🎶
-
-</p>       <br>
-
-        <div class="audio-container">
-
-            <audio controls style="max-width: 100%;">
-
-                <source src="Akamuli ka Lillie.mp3" type="audio/mpeg">
-
-                Your browser does not support the audio element.
-
-            </audio>
-
-        </div>
-
-        <br>
-
-        <p>Click on player to listen</p>
-
-        <br>
-
-        <div class="row">
-
-            <div class="col-md-4">
-
-                <div class="event" data-toggle="modal" data-target="#tourDayModal">
-
-                    <img src="lillie.jpg" alt="Akamuli Ka Lillie" class="img-fluid"><br>   <center>
-
-                        <p>Click on video to Watch</p>
-
-                    </center>
-
-                </div>
-
-            </div>
-
-        </div>
-
-    </div>
-
- 
-
-    <!-- Modals -->
-
-    <div class="modal fade" id="tourDayModal" tabindex="-1" role="dialog" aria-labelledby="tourDayModalLabel"
-
-        aria-hidden="true">
-
-        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-
-            <div class="modal-content">
-
-                <div class="modal-header">
-
-                    <h5 class="modal-title" id="tourDayModalLabel">Akamuli Ka Lillie</h5>
-
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-
-                        <span aria-hidden="true">&times;</span>
-
-                    </button>
-
-                </div>
-
-
-
-                <div class="modal-body">
-
-                    <iframe width="560" height="315" src="https://www.youtube.com/embed/NKcb40ztds0?si=3igZ9nFBBTbvaE0g"
-
-                        frameborder="0" allowfullscreen></iframe>
-
-                </div>
-
-                <div class="modal-footer">
-
-                    <a href="Akamuli ka Lillie.mp3" class="btn btn-primary">Download Song</a>
+                    // Move canvas to position and rotate
+                    ctx.translate(confetto.position.x, confetto.position.y);
+                    ctx.rotate(confetto.rotation);
 
-                </div>
+                    // Apply forces to velocity
+                    confetto.velocity.x -= confetto.velocity.x * drag;
+                    confetto.velocity.y = Math.min(confetto.velocity.y + gravity, terminalVelocity);
+                    confetto.velocity.x += Math.random() > 0.5 ? Math.random() : -Math.random();
 
-            </div>
+                    // Set position
+                    confetto.position.x += confetto.velocity.x;
+                    confetto.position.y += confetto.velocity.y;
 
-        </div>
+                    // Delete confetti when out of frame
+                    if (confetto.position.y >= canvas.height) confetti.splice(index, 1);
 
-    </div>
+                    // Loop confetto x position
+                    if (confetto.position.x > canvas.width) confetto.position.x = 0;
+                    if (confetto.position.x < 0) confetto.position.x = canvas.width;
 
+                    // Spin confetto by scaling y
+                    confetto.scale.y = Math.cos(confetto.position.y * 0.1);
+                    ctx.fillStyle = confetto.scale.y > 0 ? confetto.color.front : confetto.color.back;
 
-         <!-- ======= Gallery Section ======= -->
-        <section id="gallery" class="gallery">
-            <div class="container">
-                <div class="section-title" data-aos="fade-up">
-                    <h2>Gallery</h2>
-                    <p>Check Out Our Lovely Gallery</p>
-                </div>
-                <div class="row g-0" data-aos="fade-left">
-                    <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Photo from Fresh Teacher (17).jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Photo from Fresh Teacher (17).jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div> <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Fresh Teacher and Lillian.jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Fresh Teacher and Lillian.jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div> <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="lillie.jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/lillie.jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Fresh Teacher Uganda (13).jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Fresh Teacher Uganda (13).jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Fresh Teacher Uganda (14).jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Fresh Teacher Uganda (14).jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Fresh Teacher Uganda (16).jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Fresh Teacher Uganda (16).jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>
+                    // Draw confetti
+                    ctx.fillRect(-width / 2, -height / 2, width, height);
 
+                    // Reset transform matrix
+                    ctx.setTransform(1, 0, 0, 1, 0, 0);
+                });
 
-                    <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Fresh Teacher Uganda (19).jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Fresh Teacher Uganda (19).jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Fresh Teacher Uganda (20).jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Fresh Teacher Uganda (20).jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Fresh Teacher Uganda (4).jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Fresh Teacher Uganda (4).jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>         
-                               <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="Fresh Family.jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/Fresh Family.jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-3 col-md-4">
-                        <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400">
-                            <a href="The Fresh Family.jpg" class="gallery-lightbox">
-                                <img src="https://fresh-teacher.github.io/large/The Fresh Family.jpg" alt="" class="img-fluid">
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div><br>
-
+                if (confetti.length > 0) {
+                    requestAnimationFrame(render);
+                } else {
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    canvas.style.zIndex = -1;
+                }
+            }
 
-        </section>
-        <!-- End Gallery Section -->
+            render();
+        }
+        // Get the button
+        var scrollToTopBtn = document.getElementById("scrollToTop");
 
-        <div class="container mt-5" id="books">
+        // When the user scrolls down 20px from the top of the document, show the button
+        window.onscroll = function () { scrollFunction() };
 
-            <h2>LOVE AT LAST SIGHT 📘</h2> 
-    
-    <p>Within the pages of <strong>"Love at Last Sight,"</strong> Jesse unfolds the chapters of their love journey with a romantic tone. Like a skilled weaver, he carefully stitches together moments of their shared past, creating a narrative of love that spans the pages of their story. 📖<p></p>Each chapter serves as a living proof to the depth of their connection, a testament to the enduring bond that binds their hearts together. 💝
-    
-    
-    
-    </p>        <div class="embed-responsive embed-responsive-16by9">
-    
-                <iframe src="https://drive.google.com/file/d/1LksOiMVEM1PtCz00931-DyR8vmFDSEjM/preview" width="640" height="480"></iframe>
-    
-            </div>
-    
-            <div class="mt-3">
-    
-                <a href="LOVE AT LAST SIGHT BOOK.pdf" class="btn btn-primary" download>Download the book</a>
-    
-            </div>
-    
-        </div>
-    
-        <br><br> 
-        <div class="container mt-5" id="books">
-    
-            <h2>THE EYE 📕</h2> 
-    
-            <p>Step into the magical realm of <strong>"The Eye"</strong>, a captivating novel penned by the talented wordsmith, Kimuli Bob. Within its pages, you'll discover a love story that unfolds amidst a tapestry of mystery and romance. With masterful strokes of his pen, Bob blurs the boundaries between reality and fantasy, weaving a tale that tugs at the heartstrings and ignites the imagination. From the very first page, readers are drawn into a lyrical journey that brings to life the characters of Jesse and Lillian.</p>
-            
-    
-    </p>        <div class="embed-responsive embed-responsive-16by9">
-    
-<iframe src="https://drive.google.com/file/d/1UQ6qlsiyGT2OCFnpdB6vaHwjQLeGuOT6/preview" width="640" height="480"></iframe>
-    
-            </div>
-    
-            <div class="mt-3">
-    
-                <a href="The Eye.pdf" class="btn btn-primary" download>Download the book</a>
-    
-            </div>
-    
-        </div>
-        <div class="comments">
-            <div class="counter">
-                <div class="reactions">
-                    <img class="like" src="avatar1.jpg" /> <img class="love" src="avatar10.jpg" /> <img class="care"
-                        src="avatar19.jpg" /> <span id="likes">153 people</span>
-                </div>
-                <span id="comments"><i class="far fa-comment"></i> 23 Comments </span>
-            </div>
-            <div class="bar">
-                <span class="react"><i class="fas fa-thumbs-up"></i> <a class="liked">153 Likes</a></span> <span
-                    class="react"><i class="fas fa-flag"></i> Report</span> <span class="react" id="share-button"><i
-                        class="fa fa-share"></i> Share</span>
-    
-            </div>
-            <div>
-                <div class="comment">
-                </div>
-            </div>
-            <div class="comment">
-                <img src="kalalu ivan.jpg" />
-                <div class="single-container">
-                    <span class="user"> Joseph Emmanuel </span>
-                    <span class="text">
-                        Love at Last Sight brought tears to my eyes! Such a beautiful story. 🥺
-                    </span>
-                </div>
-                <div class="buttons"> <span class="action liked">Like</span> · <span class="action">Reply</span></div>
-            </div>
-            <div class="comment">
-                <img
-                    src="https://1.bp.blogspot.com/--d2BBdGugW8/XpdlXRvB-HI/AAAAAAAAAJ8/xcstaPQkWoszaizR_rkK2Nc5L7xN2o7WACLcBGAsYHQ/s1600/FB_IMG_15869726679037399.jpg" />
-                <div class="single-container"><span class="user">David Anthony</span> <span class="text"> I can't get enough
-                        of this author's books. He is a literary genius! His books have the power to transport you to
-                        another world. I can't recommend him enough. Follow him for more captivating reads!</span></div>
-                <div class="buttons"> <span class="action liked">Like</span> · <span class="action">Reply</span></div>
-            </div>
-            <div class="comment reply">
-                <img
-                    src="https://1.bp.blogspot.com/-UQW1DxDR9Ko/XpdlghF8wJI/AAAAAAAAAKU/EXuIMhMGNeED6BwLWbxkGgtBe3HL0RTTACLcBGAsYHQ/s1600/FB_IMG_15869730921979436.jpg" />
-                <div class="single-container"><span class="user">Amahle John </span> <span class="text"> Absolutely agree!
-                        I've recommended this author to all of my friends, and they've become fans too! I've read all of his
-                        books, and I'm always left wanting more. His writing style is captivating, and his stories are
-                        unforgettable. Follow him for more!</span></div>
-                <div class="buttons"> <span class="action liked">Like</span> · <span class="action">Reply</span></div>
-            </div>
-            <!-- Bonolo's last comment -->
-            <div class="comment">
-                <img
-                    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETuUnZKp3TrK9zDTqBtlN4ahx1RrCH6RqG14wW5J8CIBv6HYs7gQSvAiZBwn8NT3lXcz3h8jR87s1z_qZ2kzEoZ7HRnWzskSuqK5NOfKyiQByU3BgypGHXP-m9LlPyFh2FhIsUdN6cO1DnZb-GTtRMDQk8L75NDDUnEC4JxQ6OwsnAjbKVhhlNxrLyQ/s320/9F5D4C76-9CCB-45EB-BA73-73A125849593.jpeg">
-                <div class="single-container">
-                    <span class="user">Bonolo</span>
-                    <span class="text">Akamuli ka Lillie is on repeat! Can't get enough of it 🎧</span>
-                </div>
-                <div class="buttons">
-                    <span class="action liked">Like</span> <span class="dot">·</span>
-    
-                    <span class="action">Reply</span>
-                </div>
-            </div>
-             <!-- Add a container for hidden comments -->
-             <div class="hidden-comments hidden">
-                <!-- Ngozi Annet's comment -->
-    <div class="comment">
-        <img src="avatar1.jpg" />
-        <div class="single-container">
-            <span class="user">Ngozi Annet</span>
-            <span class="text">OMG! I just finished reading Love at Last Sight, and I'm speechless 😍</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
+        function scrollFunction() {
+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                scrollToTopBtn.style.display = "block";
+            } else {
+                scrollToTopBtn.style.display = "none";
+            }
+        }
 
-            <span class="action">Reply</span>
-        </div>
+        // When the user clicks on the button, scroll to the top of the document
+        function scrollToTop() {
+            // Scroll to top smoothly
+            window.scrollTo({
+                top: 0,
+                behavior: "smooth"
+            });
+        }
+    </script><br>
+     <div class="container">
+        <p><strong><h3>CONTACT US</h3> </strong>
+            <strong>EMAIL:</strong> <a href="mailto:dicktuge@gmail.com">dicktuge@gmail.com</a>
+            <br><strong>PHONE:</strong> <a href="tel:+256775787978"><br>0775787978</a>
+            <br> <a href="tel:+256742845900">0742845900</a>
+            <br><strong>LOCATION:</strong><p>6 Miles off Gayaza Road-Kampala</p>Wilsem Plaza Room Number 03 <p></p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.725161469977!2d32.577275971490636!3d0.3915380996046231!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177db0891f472cc1%3A0xfa65a91d8342630a!2sGayaza%20-Kampala%20Rd!5e0!3m2!1sen!2sug!4v1710436920884!5m2!1sen!2sug" width="250" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </p>
     </div>
-    
-    <!-- Kato Joseph's comment -->
-    <div class="comment">
-        <img src="avatar2.jpg" />
-        <div class="single-container">
-            <span class="user">Kato Joseph</span>
-            <span class="text">The Eye is such an intriguing read! Couldn't put it down until I finished!</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Aminata Esther's comment -->
-    <div class="comment">
-        <img src="avatar3.jpg" />
-        <div class="single-container">
-            <span class="user">Aminata Esther</span>
-            <span class="text">Akamuli ka Lillie is my new favorite song! It's so beautiful ❤️🎶</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Chinwendu Moses's comment -->
-    <div class="comment">
-        <img src="avatar4.jpg" />
-        <div class="single-container">
-            <span class="user">Chinwendu Moses</span>
-            <span class="text">Wow, Love at Last Sight is a true masterpiece! Can't wait to read it again.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Kagiso Gabriel's comment -->
-    <div class="comment">
-        <img src="avatar5.jpg" />
-        <div class="single-container">
-            <span class="user">Kagiso Gabriel</span>
-            <span class="text">The Eye took me on an emotional rollercoaster ride! Highly recommended!</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Aisha Solomon's comment -->
-    <div class="comment">
-        <img src="avatar6.jpg" />
-        <div class="single-container">
-            <span class="user">Aisha Solomon</span>
-            <span class="text">Akamuli ka Lillie's melody is stuck in my head! It's so catchy 🎵</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Obi Peter's comment -->
-    <div class="comment">
-        <img src="avatar7.jpg" />
-        <div class="single-container">
-            <span class="user">Obi Peter</span>
-            <span class="text">Love at Last Sight is a heartwarming tale of true love! 😊</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Akosua Mary's comment -->
-    <div class="comment">
-        <img src="avatar8.jpg" />
-        <div class="single-container">
-            <span class="user">Akosua Mary</span>
-            <span class="text">The Eye kept me guessing until the very end! Such a thrilling read.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Kwabena Paul's comment -->
-    <div class="comment">
-        <img src="avatar9.jpg" />
-        <div class="single-container">
-            <span class="user">Kwabena Paul</span>
-            <span class="text">Fresh Teacher never disappoints! He has a unique talent for storytelling. I highly recommend following him for more good reads!</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Simba John's comment -->
-    <div class="comment">
-        <img src="avatar10.jpg" />
-        <div class="single-container">
-            <span class="user">Simba John</span>
-            <span class="text">The author has a gift for storytelling that is truly remarkable. His books are a living proof to his talent and creativity.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Tariro Daniel's comment -->
-    <div class="comment">
-        <img src="avatar11.jpg" />
-        <div class="single-container">
-            <span class="user">Tariro Daniel</span>
-            <span class="text">The Eye is a mind-bending thriller! Kept me on the edge of my seat.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Zanele Grace's comment -->
-    <div class="comment">
-        <img src="avatar12.jpg" />
-        <div class="single-container">
-            <span class="user">Zanele Grace</span>
-            <span class="text">Akamuli ka Lillie's lyrics are so poetic! Absolutely love it 💕</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Mpho Samuel's comment -->
-    <div class="comment">
-        <img src="avatar17.jpg" />
-        <div class="single-container">
-            <span class="user">Mpho Samuel</span>
-            <span class="text">Love at Last Sight made me believe in true love again! 😊</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Chidinma Emmanuel's comment -->
-    <div class="comment">
-        <img src="avatar14.jpg" />
-        <div class="single-container">
-            <span class="user">Chidinma Emmanuel</span>
-            <span class="text">The Eye is a page-turner! Couldn't stop reading until I reached the end.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Munyaradzi Michael's comment -->
-    <div class="comment">
-        <img src="avatar15.jpg" />
-        <div class="single-container">
-            <span class="user">Munyaradzi Michael</span>
-            <span class="text">Akamuli ka Lillie's chorus is so catchy! Can't stop humming it.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Chiamaka Andrew's comment -->
-    <div class="comment">
-        <img src="avatar16.jpg" />
-        <div class="single-container">
-            <span class="user">Chiamaka Andrew</span>
-            <span class="text">Love at Last Sight touched my heart! Such a beautiful story of love.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Chizoba David's comment -->
-    <div class="comment">
-        <img src="avatar17.jpg" />
-        <div class="single-container">
-            <span class="user">Chizoba David</span>
-            <span class="text">The Eye is a gripping thriller! Couldn't predict the ending.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Thabo Isaac's comment -->
-    <div class="comment">
-        <img src="avatar18.jpg" />
-        <div class="single-container">
-            <span class="user">Thabo Isaac</span>
-            <span class="text">Akamuli ka Lillie's melody is so enchanting! Can't get enough of it.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Buhle Benjamin's comment -->
-    <div class="comment">
-        <img src="avatar19.jpg" />
-        <div class="single-container">
-            <span class="user">Buhle Benjamin</span>
-            <span class="text">Love at Last Sight is a must-read for anyone who believes in love! ❤️</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-    <!-- Thandiwe Joshua's comment -->
-    <div class="comment">
-        <img src="avatar17.jpg" />
-        <div class="single-container">
-            <span class="user">Thandiwe Joshua</span>
-            <span class="text">The Eye is a gripping psychological thriller! Kept me on the edge of my seat.</span>
-        </div>
-        <div class="buttons">
-            <span class="action liked">Like</span> <span class="dot">·</span>
-
-            <span class="action">Reply</span>
-        </div>    </div>
-    
-   
-        </div>
-        </div>
-
-        
-        <div class="input"><input placeholder="Write a comment..." />
-            <div class="disabled-comments">
-                <p>Comments have been disabled!</p>
-            </div>
-        </div>
-        <br><br>
-    
-    
-        <!-- Bootstrap JS and Popper.js scripts -->
-    
-        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
-    
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
-    
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-    
-    
-    
+    <center>
         <!-- Footer -->
-    
         <footer class="footer" id="contact">
-    
             <div class="container">
-    
-                <p>&copy; Jesse and Family <br>All feelings reserved <span id="currentYear"></span></p>
-    
-                <p><em>Page visits:</em> <span id="visitCount">Loading...</span></p><br>
-    
+                <p>&copy; 2024 Outreach Schools Examinations Board</p>
+                <p>Coded with <span class="heart">&hearts;</span> by <a href="https://fresh-teacher.github.io"> Fresh Teacher</a></p>
+
             </div>
-    
         </footer>
-    
-        <!-- End of Footer -->
-    
-    
-    
-        <script>
-           
-            // Get the share button element
-            const shareButton = document.getElementById('share-button');
-    
-            // Add event listener to the share button
-            shareButton.addEventListener('click', function () {
-                // Get the current page's URL
-                const currentPageUrl = window.location.href;
-    
-                // Create the WhatsApp share URL
-                const whatsappShareUrl = `whatsapp://send?text=${encodeURIComponent(currentPageUrl)}`;
-    
-                // Open the WhatsApp share URL in a new window
-                window.open(whatsappShareUrl);
-            });
-    
-            document.getElementById('view-more-link').addEventListener('click', function (event) {
-                event.preventDefault(); // Prevent default link behavior
-    
-               
-            // Retrieve and display visit count from localStorage or set to 26
-    
-            let visitCount = parseInt(localStorage.getItem('visitCount')) || 26;
-    
-            document.getElementById('visitCount').textContent = visitCount + ' people have so far visited this page';
-    
-    
-    
-            // Increment visit count every 50 seconds
-    
-            setInterval(function () {
-    
-                visitCount += 7;
-    
-                localStorage.setItem('visitCount', visitCount);
-    
-                document.getElementById('visitCount').textContent = visitCount + ' people have so far visited this page';
-    
-            }, 50000); // 50 seconds
-    
-    
-    
-            // Update current year in the footer
-    
-            document.getElementById('currentYear').textContent = new Date().getFullYear();
-    
-        </script>
-    
-    
-    
-        </body>
-    
-    
-    
-    </html>
+        
+    </center>
+
+    <!-- End of Footer -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/locked files.zip b/locked files.zip
new file mode 100644
index 0000000..311ce73
Binary files /dev/null and b/locked files.zip differ
diff --git a/public/index.html b/public/index.html
index d31aabb..f7482e9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,43 +1,663 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="© Namungoona Parents' Junior School"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Install NPJS App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OSEB Online Store</title>
+    <script src="https://kit.fontawesome.com/1935d064dd.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+<!-- Include jQuery -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+<!-- Include Bootstrap JavaScript -->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+    
+    <style>
+        #store-products {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-gap: 2rem;
+}
+
+footer.footer {
+    background-color: #ffb6c1; /* Baby pink color */
+    padding: 10px 0;
+    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    font-size: 14px;
+}
+
+
+.footer p {
+    margin-top: 0.5px; /* Adjust the top margin */
+    margin-bottom: 2px; /* Adjust the bottom margin */
+}
+
+
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        header {
+            background-color: #fff;
+            padding: 20px 0;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .search-box {
+            margin-bottom: 20px;
+        }
+
+        .search-box input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        .filter-box select {
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+            background-color: #fff;
+            cursor: pointer;
+        }
+
+        /* .main-container {
+            padding: 20px;
+        } */
+
+        .store-product {
+            background-color: #fff;
+            border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+            overflow: hidden;
+        }
+
+        .product-details {
+    padding: 20px;
+    background-color: rgb(211, 211, 211); /* Add your desired background color here */
+}
+
+
+        .product-details h2 {
+            margin-top: 0;
+            margin-bottom: 10px;
+            font-size: 20px;
+        }
+
+        .product-details p {
+            margin: 0;
+            font-size: 16px;
+        }
+
+        .product-details a {
+            display: inline-block;
+            background-color: #ff5f6d;
+            color: #fff;
+            padding: 10px 20px;
+            border-radius: 5px;
+            text-decoration: none;
+            margin-top: 10px;
+            transition: background-color 0.3s ease;
+        }
+
+        .product-details a:hover {
+            background-color: #e64c59;
+        }
+
+        .no-result {
+            text-align: center;
+            font-size: 18px;
+            color: #888;
+        }   
+         /* Custom CSS for navbar color */
+         .navbar-custom {
+            background-color: #ff2f00;
+            /* Change this color to your desired color */
+        }
+
+        .navbar-custom .navbar-brand,
+        .navbar-custom .navbar-nav .nav-link {
+            color: #ffffff;
+            /* Change this color to your desired color */
+        }
+
+        .navbar-brand img {
+            max-height: 30px;
+            /* Adjust the max-height as needed */
+        }
+  /* Scroll to top button */
+  #scrollToTop {
+            display: none;
+            /* Initially hide the button */
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 99;
+            font-size: 18px;
+            border: none;
+            outline: none;
+            background-color: #ff2f00;
+            color: #ffffff;
+            cursor: pointer;
+            padding: 10px;
+            border-radius: 50%;
+        }
+
+        #scrollToTop:hover {
+            background-color: #ff5e3a;
+        }
+          /* Heart animation */
+          @keyframes heartbeat {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.2); }
+        100% { transform: scale(1); }
+    }
+
+    .heart {
+        display: inline-block;
+        animation: heartbeat 1s infinite;
+        color: red; /* Add color property for red color */
+
+    }
+
+    .card {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 10px;
+    width: 200px;
+    float: left;
+}
+
+.card h2 {
+    margin-top: 0;
+}
+
+        </style>
+</head>
+
+<body>
+    <!-- Navigation bar -->
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
+        <div class="container">
+            <a class="navbar-brand" href="#">
+                <img src="https://oseb.vercel.app/OSEB_CHARGES-1_page-0001-removebg-preview.png" alt="Logo">
+                <!-- Replace 'your-logo.png' with the path to your logo -->
+                <b>OSEB  APP</b>
+            </a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="#exams">Exams <span class="sr-only">(current)</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#schemes_of_work">Schemes of Work</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#textbooks">Textbooks</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#lesson_notes">Lesson Notes</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#holiday_packages">Holiday Packages</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#learners_workbooks"> Workbooks</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <p></p><br><br>
+
+    <!-- Scroll to top button -->
+    <button id="scrollToTop" onclick="scrollToTop()"><i class="fas fa-arrow-up"></i></button>
+
+    <!-- Navigation Bar -->
+    <header>
+        <div class="container">
+            <div class="search-box">
+                <form action="" onsubmit="return false">
+                    <input type="text" id="search" placeholder="🔎 Search all products here..." />
+                </form>
+            </div>
+            <div class="filter-box">
+              <select id="category-filter" onchange="filterCategory(event)">
+                  <option value="all">All Products</option>
+                  <option value="p1_lesson_notes">P.1 Lesson Notes</option>
+                  <option value="p1_Examination_Papers">P.1 Examination Papers</option>
+                  <option value="p2_lesson_notes">P.2 Lesson Notes</option>
+                  <option value="p2_Examination_Papers">P.2 Examination Papers</option>
+                  <option value="p3_lesson_notes">P.3 Lesson Notes</option>
+                  <option value="p3_Examination_Papers">P.3 Examination Papers</option>
+                  <option value="p3_Schemes_of_Work">P.3 Schemes of Work</option>
+                  <option value="p4_lesson_notes">P.4 Lesson Notes</option>
+                  <option value="p4_Examination_Papers">P.4 Examination Papers</option>
+                  <option value="p5_lesson_notes">P.5 Lesson Notes</option>
+                  <option value="p5_Examination_Papers">P.5 Examination Papers</option>
+                  <option value="p5_Schemes_of_Work">P.5 Schemes of Work</option>
+                  <option value="p6_lesson_notes">P.6 Lesson Notes</option>
+                  <option value="p6_Examination_Papers">P.6 Examination Papers</option>
+                  <option value="p6_Schemes_of_Work">P.6 Schemes of Work</option>
+                  <option value="p7_Examination_Papers">P.7 Examination Papers</option>
+                  <option value="top_Schemes_of_Work">Top Schemes of Work</option>
+                  <option value="All_Classes_Schemes_of_Work">All Classes Schemes of Work</option>
+              </select>
+            </div>
+            
+          
+          
+        </div>
+    </header>
+<br>
+ <!-- Main Content -->
+ <main>
+    <div id="app" class="container">
+        <!-- Cards will be dynamically generated here -->
+    </div>
+    <section id="store-products">
+        <!-- Generated Product Cards will be inserted here -->
+    </section>
+    <div class="container no-result">
+        <p>No more products to display! Try searching using a different name or contact us on <a href="tel:+256775787978"><br>0775787978 </a></p><br><br>
+    </div>
+</main>
+
+<!-- Bootstrap Warning Modal -->
+<div class="modal fade" id="passwordProtectedModal" tabindex="-1" role="dialog" aria-labelledby="passwordProtectedModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <center><h5 class="modal-title" id="passwordProtectedModalLabel">ALERT ⚠️</h5></center>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          The zipped folder you have downloaded contains files which are password protected. Please contact us for further assistance...
+        </div>
+        <div class="modal-footer">
+          <!-- Button to request for password -->
+          <a href="whatsapp://send?phone=+256775787978&text=Hello%20Tr.%20Dickson,%20I%20have%20downloaded%20some%20files%20from%20the%20OSEB%20App%20but%20they%20are%20locked.%20Kindly%20help%20me%20with%20the%20password." class="btn btn-primary">REQUEST FOR PASSWORD 🔐</a>
+          <button type="button" class="btn btn-danger" data-dismiss="modal">IGNORE</button>
+
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  
+  
+
+<script>
+const products = [
+  {
+    "category": "p1_lesson_notes",
+    "name": "p.1 lesson notes",
+    "price": "UGX. 60,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.1 lesson notes.zip"
+  },
+  {
+    "category": "p1_Examination_Papers",
+    "name": "p.1 Examination Papers",
+    "price": "UGX. 60,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.1 Past Papers.zip"
+  },
+  {
+    "category": "p2_lesson_notes",
+    "name": "p.2 lesson notes",
+    "price": "UGX. 5,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.2 lesson notes.zip"
+  },
+  {
+    "category": "p2_Examination_Papers",
+    "name": "p.2 Examination Papers",
+    "price": "UGX. 5,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.2 Past Papers.zip"
+  },
+  {
+    "category": "p3_lesson_notes",
+    "name": "p.3 lesson notes",
+    "price": "UGX. 45,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.3 lesson notes.zip"
+  },
+  {
+    "category": "p3_Examination_Papers",
+    "name": "p.3 Examination Papers",
+    "price": "UGX. 45,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.3 Past Papers.zip"
+  },
+  {
+    "category": "p3_Schemes_of_Work",
+    "name": "p.3 Schemes of Work",
+    "price": "UGX. 10,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.3 Schemes of Work.zip"
+  },
+  {
+    "category": "p4_lesson_notes",
+    "name": "p.4 lesson notes",
+    "price": "UGX. 10,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.4 lesson notes.zip"
+  },
+  {
+    "category": "p4_Examination_Papers",
+    "name": "p.4 Examination Papers",
+    "price": "UGX. 10,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.4 Past Papers.zip"
+  },
+  {
+    "category": "p5_lesson_notes",
+    "name": "p.5 lesson notes",
+    "price": "UGX. 15,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.5 lesson notes.zip"
+  },
+  {
+    "category": "p5_Examination_Papers",
+    "name": "p.5 Examination Papers",
+    "price": "UGX. 15,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.5 Past Papers.zip"
+  },
+  {
+    "category": "p5_Schemes_of_Work",
+    "name": "p.5 Schemes of Work",
+    "price": "UGX. 25,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.5 Schemes of Work.zip"
+  },
+  {
+    "category": "p6_lesson_notes",
+    "name": "p.6 lesson notes",
+    "price": "UGX. 30,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.6 lesson notes.zip"
+  },
+  {
+    "category": "p6_Examination_Papers",
+    "name": "p.6 Examination Papers",
+    "price": "UGX. 30,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.6 Past Papers.zip"
+  },
+  {
+    "category": "p6_Schemes_of_Work",
+    "name": "p.6 Schemes of Work",
+    "price": "UGX. 8,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.6 Schemes of Work.zip"
+  },
+  {
+    "category": "p7_Examination_Papers",
+    "name": "p.7 Examination Papers",
+    "price": "UGX. 20,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/p.7 Past Papers.zip"
+  },
+  {
+    "category": "top_Schemes_of_Work",
+    "name": "top Schemes of Work",
+    "price": "UGX. 25,000",
+    "isFree": true,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/top Schemes of Work.zip"
+  },
+  {
+    "category": "All_Classes_Schemes_of_Work",
+    "name": "All Classes Schemes of Work",
+    "price": "UGX. 12,000",
+    "isFree": false,
+    "pdflink": "https://fresh-teacher.github.io/password-generator/All Classes Schemes of Work.zip"
+  }
+];
+
+
+ // Function to render product cards
+function renderProductCards() {
+  const storeProductsContainer = document.getElementById('store-products');
+  const productCardTemplate = document.getElementById('product-card-template').innerHTML;
+
+  let productCardsHTML = '';
+  products.forEach(product => {
+    // Modify button text and link based on whether the item is free or not
+    let buttonText, buttonLink;
+    if (product.isFree) {
+      buttonText = "FREE DOWNLOAD";
+      buttonLink = product.link;
+    } else {
+      buttonText = "Download Now";
+      buttonLink = product.link;
+    }
+
+    // Capitalize item name
+    const capitalizedProductName = product.name.toUpperCase();
+
+    productCardsHTML += productCardTemplate
+      .replace('{{ category }}', product.category)
+      .replace('{{ name }}', capitalizedProductName)
+      .replace('{{ price }}', product.isFree ? "FREE" : product.price) // Replace price with "FREE" if item is free
+      .replace('{{ button_text }}', buttonText)
+      .replace('{{ button_link }}', buttonLink);
+  });
+
+  storeProductsContainer.innerHTML = productCardsHTML;
+}
+
+// Function to render cards from items
+function renderCards(items) {
+  const app = document.getElementById('app');
+  let html = '';
+  items.forEach(item => {
+    html += generateCard(item);
+  });
+  app.innerHTML = html;
+}
+
+// Render cards when the page loads
+window.onload = function () {
+  if (typeof products !== 'undefined') {
+    renderProductCards(); // Render product cards if products variable is defined
+  } else {
+    renderCards(items); // Render normal cards if products variable is not defined
+  }
+};
+
+
+        // Smooth scrolling for navigation links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+
+ // Filter by category function
+ function filterCategory(event) {
+            var category = document.getElementById("category-filter").value;
+            var products = document.getElementsByClassName("store-product");
+
+            if (category === "all") {
+                for (var i = 0; i < products.length; i++) {
+                    products[i].style.display = "block";
+                }
+            } else {
+                for (var i = 0; i < products.length; i++) {
+                    var product = products[i];
+                    if (product.classList.contains(category)) {
+                        product.style.display = "block";
+                    } else {
+                        product.style.display = "none";
+                    }
+                }
+            }
+        }
+
+        // Filter products by search input
+        const search = document.getElementById("search");
+        const productName = document.querySelectorAll(".product-details h2");
+        const noResult = document.querySelector(".no-result");
+
+        if (search) {
+            search.addEventListener("keyup", filterProducts);
+        }
+
+// Filter products by search input
+function filterProducts(e) {
+    const text = e.target.value.toLowerCase();
+    const productDetails = document.querySelectorAll(".product-details");
+
+    productDetails.forEach((product) => {
+        const productName = product.querySelector("h2").textContent.toLowerCase();
+
+        if (productName.includes(text)) {
+            product.parentElement.style.display = "block";
+        } else {
+            product.parentElement.style.display = "none";
+        }
+    });
+
+    // Show or hide the "no result" message based on the filtered products
+    const noResult = document.querySelector(".no-result");
+    const visibleProducts = document.querySelectorAll('.store-product[style="display: block;"]');
+
+    if (visibleProducts.length > 0) {
+        noResult.style.display = "none";
+    } else {
+        noResult.style.display = "block";
+    }
+}
+
+
+
+// Get the button
+var scrollToTopBtn = document.getElementById("scrollToTop");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function () { scrollFunction() };
+
+function scrollFunction() {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        scrollToTopBtn.style.display = "block";
+    } else {
+        scrollToTopBtn.style.display = "none";
+    }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+function scrollToTop() {
+    // Scroll to top smoothly
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+}
+
+ // When the DOM content is fully loaded, render the cards
+ document.addEventListener('DOMContentLoaded', function () {
+            // Define your items array with necessary data
+            const items = products; // Example: you can set items equal to products array
+
+            // Render cards when the page loads
+            renderCards(items);
+        });
+
+// When the DOM content is fully loaded, render the cards
+document.addEventListener('DOMContentLoaded', function () {
+      // Define your items array with necessary data
+      const items = products; // Assuming products array is defined elsewhere
+
+      // Render cards when the page loads
+      renderCards(items);
+    });
+
+    // Function to render cards from items
+    function renderCards(items) {
+      const app = document.getElementById('app');
+      let html = '';
+      items.forEach(item => {
+        html += generateCard(item);
+      });
+      app.innerHTML = html;
+    }
+
+// Define the generateCard function
+function generateCard(item) {
+  // Function to capitalize the first letter of each word
+  function capitalizeFirstLetter(str) {
+    return str.replace(/\b\w/g, function (char) {
+      return char.toUpperCase();
+    });
+  }
+
+  // Capitalize the name
+  const capitalizedProductName = capitalizeFirstLetter(item.name);
+
+  // Return the HTML template with the capitalized name
+  return `
+    <div class="store-product ${item.category}">
+        <div class="product-details">
+            <h2>${capitalizedProductName}</h2>
+            <p>${item.price}</p>
+            <a href="${item.pdflink}" onclick="showPasswordProtectedModal()" download>
+                <i class="fas fa-download"></i> <b>Download Now</b>
+            </a>
+        </div>
+    </div>`;
+}
+
+    
+
+    // Function to show password protected modal
+    function showPasswordProtectedModal() {
+      $('#passwordProtectedModal').modal('show');
+    }
+    </script>
+    <!-- <script src="script.js"></script> -->
+    <center><br><br><br><br>
+        <!-- Footer -->
+        <footer class="footer" id="contact">
+            <div class="container">
+                <p>&copy; 2024 OSEB</p>
+                <p>Coded with <span class="heart">&hearts;</span> by <a href="https://fresh-teacher.github.io"> Fresh Teacher</a></p>
+
+            </div>
+        </footer>
+        
+    </center>
+</body>
+
+</html>
diff --git a/public/script.js b/public/script.js
new file mode 100644
index 0000000..8fa1bd5
--- /dev/null
+++ b/public/script.js
@@ -0,0 +1,46 @@
+const btns = document.querySelectorAll(".btn");
+const storeProducts = document.querySelectorAll(".store-product");
+
+for (let i = 0; i < btns.length; i++) {
+    btns[i].addEventListener("click", function(e) {
+        const current = document.getElementsByClassName("active");
+        current[0].className = current[0].className.replace(" active", "");
+        this.className += " active";
+                                                                        
+        // Switch Tab content
+        const filter = e.target.dataset.filter;
+        // console.log(filter);
+        storeProducts.forEach((product) => {
+            if (filter === "all") {
+                product.style.display = "block";
+            } else if (product.classList.contains(filter)) {
+                product.style.display = "block";
+            } else {
+                product.style.display = "none";
+            }
+        });
+    });
+}
+
+// SEARCH FILTER
+const search = document.getElementById("search");
+const productName = document.querySelectorAll(".product-details h2");
+const noResult = document.querySelector(".no-result");
+
+search.addEventListener("keyup", filterProducts);
+
+function filterProducts(e) {
+    const text = e.target.value.toLowerCase();
+
+    productName.forEach((product) => {
+        const item = product.textContent;
+
+        if (item.toLowerCase().indexOf(text) != -1) {
+            product.parentElement.parentElement.style.display = "block";
+            noResult.style.display = "none";
+        } else {
+            product.parentElement.parentElement.style.display = "none";
+            noResult.style.display = "block";
+        }
+    });
+}
\ No newline at end of file
diff --git a/public/store.html b/public/store.html
new file mode 100644
index 0000000..d887573
--- /dev/null
+++ b/public/store.html
@@ -0,0 +1,491 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Outreach School Examinations Board</title>
+    <!-- Bootstrap CSS link -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!-- Custom CSS -->
+    <style>
+        /* Custom CSS for navbar color */
+        .navbar-custom {
+            background-color: #ff2f00;
+            /* Change this color to your desired color */
+        }
+
+        .navbar-custom .navbar-brand,
+        .navbar-custom .navbar-nav .nav-link {
+            color: #ffffff;
+            /* Change this color to your desired color */
+        }
+
+        .navbar-brand img {
+            max-height: 30px;
+            /* Adjust the max-height as needed */
+        }
+
+        /* Shaking animation */
+        @keyframes shake {
+            0% {
+                transform: translateX(0);
+            }
+
+            25% {
+                transform: translateX(-5px);
+            }
+
+            50% {
+                transform: translateX(5px);
+            }
+
+            75% {
+                transform: translateX(-5px);
+            }
+
+            100% {
+                transform: translateX(0);
+            }
+        }
+
+        .btn-shake {
+            animation: shake 0.9s infinite;
+        }
+
+
+
+        /* Black text in the jumbotron */
+        .jumbotron .lead {
+            color: transparent;
+            /* Make the text transparent */
+        }
+
+        /* Scroll to top button */
+        #scrollToTop {
+            display: none;
+            /* Initially hide the button */
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 99;
+            font-size: 18px;
+            border: none;
+            outline: none;
+            background-color: #ff2f00;
+            color: #ffffff;
+            cursor: pointer;
+            padding: 15px;
+            border-radius: 50%;
+        }
+
+        #scrollToTop:hover {
+            background-color: #ff5e3a;
+        }
+          /* Confetti CSS */
+          .confetti {
+            position: fixed;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 9999;
+        }
+            /* Shakes animation */
+    @keyframes shakes {
+        0% { transform: translateY(0); }
+        50% { transform: translateY(-5px); }
+        100% { transform: translateY(0); }
+    }
+
+    .btn-shakes {
+        animation: shakes 1s infinite;
+    }
+        /* Heart animation */
+        @keyframes heartbeat {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.2); }
+        100% { transform: scale(1); }
+    }
+
+    .heart {
+        display: inline-block;
+        animation: heartbeat 1s infinite;
+        color: red; /* Add color property for red color */
+
+    }
+    </style>
+</head>
+
+<body>
+      <!-- Confetti canvas -->
+      <canvas class="confetti" id="canvas"></canvas>
+
+    <!-- Navigation bar -->
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
+        <div class="container">
+            <a class="navbar-brand" href="#">
+                <img src="https://oseb.vercel.app/OSEB_CHARGES-1_page-0001-removebg-preview.png" alt="Logo">
+                <!-- Replace 'your-logo.png' with the path to your logo -->
+                OSEB
+            </a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="#exams">Exams <span class="sr-only">(current)</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#schemes_of_work">Schemes of Work</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#textbooks">Textbooks</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#lesson_notes">Lesson Notes</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#holiday_packages">Holiday Packages</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#learners_workbooks"> Workbooks</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <p></p><br><br>
+
+    <!-- Scroll to top button -->
+    <button id="scrollToTop" onclick="scrollToTop()"><i class="fas fa-arrow-up"></i></button>
+    <center>
+        <!-- Image for exams section -->
+        <img src="https://oseb.vercel.app/OSEB CHARGES-1_page-0001.jpg" alt="OSEB Logo" class="img-fluid w-100">
+    </center>
+    <header class="container mt-5 text-center">
+        <h1>Welcome to OSEB</h1>
+        <p>We are delighted to have you here! Explore our packages and empower your educational journey.</p>
+        <a href="OSEB CHARGES.pdf" class="btn btn-primary btn-shakes">Download Packages ↓</a>
+    </header>
+    
+    <section id="exams" class="container mt-5">
+        <h3>Exams</h3>
+        <p>Prepare for your academic journey with our comprehensive range of exams. Thousands of teachers have utilized
+            our exams and witnessed remarkable improvements in their pupils' performance. With a wide variety of
+            subjects and levels covered, our exams are designed to challenge and motivate learners to excel. <p></p>Avail the
+            soft copy of our exams at a nominal price of only Shs. 60,000.</p>
+        <a href="https://fresh-teacher.github.io/" class="btn btn-danger btn-shake">Purchase Now ➮ </a>
+    </section>
+
+    <section id="schemes_of_work" class="container mt-5">
+        <h3>Schemes of Work</h3>
+        <p>Explore our meticulously crafted schemes of work tailored to meet the diverse needs of educators. Our schemes
+            of work have been praised by educators worldwide for their clarity, effectiveness, and alignment with
+            curriculum standards. Join the thousands of satisfied teachers who have successfully implemented our schemes
+            of work and witnessed remarkable improvements in pupil engagement and achievement.
+        <p></p>Get the soft copies of our schemes of work for only Shs. 5,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="textbooks" class="container mt-5">
+        <h3>Textbooks</h3>
+        <p>Browse through our extensive collection of textbooks, carefully curated to support effective teaching and
+            learning. Our textbooks have received rave reviews from educators for their comprehensive coverage, clarity,
+            and engaging content. A lot of teachers have trusted our textbooks to deliver quality education and inspire
+            pupils to reach their full potential.
+        <p></p> Get the soft copies of our textbooks at a budget-friendly price.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="lesson_notes" class="container mt-5">
+        <h3>Lesson Notes</h3>
+        <p>Access a treasure trove of lesson notes designed to enrich your teaching and captivate your pupils' interest.
+            Our lesson notes have been tried and tested by educators worldwide, with outstanding results. Join the
+            countless teachers who have utilized our lesson notes to create dynamic and engaging lessons that foster
+            deep learning and inspire academic excellence.
+        <p></p> Purchase the soft copies of our lesson notes for only Shs. 5,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="holiday_packages" class="container mt-5">
+        <h3>Holiday Packages</h3>
+        <p>Join the ranks of educators who have transformed vacations into valuable learning experiences for their
+            pupils. Our holiday packages offer a perfect blend of fun and education, ensuring that pupils return
+            refreshed, inspired, and ready to tackle new challenges. <p></p>Benefit from our holiday packages at an affordable
+            rate of Shs. 5000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="weekly_homeworks" class="container mt-5">
+        <h3>Weekly Homeworks</h3>
+        <p>Elevate your pupils' learning with our professionally prepared weekly homework assignments. Experience the
+            positive impact of consistent and meaningful homework on pupil progress and academic achievement. Join the
+            multitude of educators who have witnessed remarkable improvements in pupil engagement, retention, and
+            academic performance with our weekly homeworks.
+        <p></p> Get the soft copies of our weekly homeworks for only Shs. 5,000 per class.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="topical_questions" class="container mt-5">
+        <h3>Topical Questions</h3>
+        <p>Enhance your pupils' understanding and mastery of key concepts with our comprehensive collection of topical
+            questions. Thousands of educators have utilized our topical questions to reinforce learning, stimulate
+            critical thinking, and prepare pupils for exams. Witness firsthand the transformative power of focused
+            practice and targeted revision with our top-quality topical questions.
+        <p></p> Purchase the soft copies of our topical questions for just Shs. 8,000 per subject.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="learners_workbooks" class="container mt-5">
+        <h3>Learner's Workbooks</h3>
+        <p>Empower your pupils to take ownership of their learning journey with our learner's workbooks. Our workbooks
+            are designed to foster independent learning, critical thinking, and problem-solving skills. Join the growing
+            community of educators who have seen their pupils thrive academically and develop a lifelong love for
+            learning through the use of our learner's workbooks.
+        <p></p>Purchase the soft copies of our learner's workbooks at a reasonable price of Shs. 8,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="lesson_plan_templates" class="container mt-5">
+        <h3>Lesson Plan Templates</h3>
+        <p>Simplify your lesson planning process with our professionally crafted lesson plan templates. Designed by
+            experienced educators, our templates streamline lesson preparation, ensuring that every lesson is
+            well-structured, engaging, and aligned with learning objectives. Join those teachers who have saved valuable
+            time and energy with our user-friendly lesson plan templates.
+        <p></p> Avail the soft copies of our lesson plan templates for only Shs. 2,500.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="ple_pamphlets" class="container mt-5">
+        <h3>PLE Pamphlets</h3>
+        <p>Guide your pupils through the Primary Leaving Examinations (PLE) with our informative pamphlets. Trusted by
+            educators for their clarity and relevance, our PLE pamphlets provide valuable insights, tips, and strategies
+            to help pupils excel in their exams. Join the teachers who have relied on our PLE pamphlets to empower their
+            pupils and achieve outstanding results.
+        <p></p> Purchase the soft copies of our PLE pamphlets at an affordable price of Shs. 10,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <section id="p7_topical_questions" class="container mt-5">
+        <h3>P.7 Topical Questions</h3>
+        <p>Prepare your Primary 7 pupils for success with our targeted P.7 topical questions. Our carefully set
+            questions cover key topics and concepts, allowing pupils to gain confidence and proficiency in their exam
+            preparations. Join the legions of educators who have witnessed the transformative impact of our P.7 topical
+            questions on pupil performance and success.
+        <p></p>Purchase the soft copies of our P.7 topical questions at a give-away fee of Shs. 8,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+    </section>
+
+    <!-- New Sections -->
+<section id="p7_special_sets" class="container mt-5">
+    <h3>P7 Special Sets Series</h3>
+    <p>Equip your Primary 7 pupils for excellence with our exclusive P7 Special Sets Series. Each set is strategically
+        curated to cover key topics and concepts essential for exam success. Witness remarkable improvements in pupil
+        performance and confidence with this invaluable resource, available now for only Shs. 15,000 per set.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="interview_exams" class="container mt-5">
+    <h3>Interview Exams</h3>
+    <p>Prepare for your teaching career with our comprehensive Interview Exams series. Each set includes a variety of
+        questions and scenarios commonly encountered in interviews, ensuring you're fully prepared to ace your job
+        interviews. Boost your confidence and land your dream teaching job now for only Shs. 8,000 per set.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="ple_spot_exams" class="container mt-5">
+    <h3>PLE Spot Exams</h3>
+    <p>Empower your pupils for success in the Primary Leaving Examinations (PLE) with our PLE Spot Exams. Each set
+        contains a selection of exam-style questions covering various subjects, providing invaluable practice and
+        preparation. Elevate your pupils' confidence and proficiency with this essential resource, available now for
+        only Shs. 12,000 per set.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="book_cover_hardcopies" class="container mt-5">
+    <h3>Book Cover Hardcopies</h3>
+    <p>Protect your valuable textbooks and exercise books with our durable Book Cover Hardcopies. Available in two sizes (A4 and A3),
+        these covers ensure your books stay in pristine condition throughout the academic year. Invest in the longevity
+        of your educational resources now for just Shs. 200 each or Shs. 100 each, depending on the size.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="teachers_interview_papers" class="container mt-5">
+    <h3>Teacher's Interview Papers</h3>
+    <p>Prepare for your teaching job interviews with confidence using our comprehensive Teacher's Interview Papers.
+        This essential resource includes a collection of interview questions, tips, and strategies to help you secure
+        your dream teaching position. Invest in your career success now for only Shs. 15,000.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+<section id="weekend_tests" class="container mt-5">
+    <h3>Weekend Tests</h3>
+    <p>Elevate your class' learning experience with our Weekend Tests series. Each test is designed to
+        reinforce key concepts and topics covered during the week, ensuring maximum pupil engagement and retention.
+        Empower your learners for success now for just Shs. 5,000 per class.</p>
+        <a href="store.html" class="btn btn-danger btn-shake">Purchase Now ➮</a>
+</section>
+
+
+    <!-- Bootstrap JS and jQuery -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <!-- Font Awesome -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
+    <!-- Custom JavaScript for scroll to top button -->
+    <script>
+               // Smooth scrolling for navigation links
+               document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+
+        // Trigger confetti on page load
+        window.addEventListener('load', function() {
+            startConfetti();
+        });
+
+        // Function to start confetti
+        function startConfetti() {
+            // Confetti initialization code
+            canvas = document.getElementById("canvas");
+            ctx = canvas.getContext("2d");
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            cx = ctx.canvas.width / 2;
+            cy = ctx.canvas.height / 2;
+
+            let confetti = [];
+            const confettiCount = 150;
+            const gravity = 1.5;
+            const terminalVelocity = 5;
+            const drag = 0.075;
+            const colors = [
+                { front: 'red', back: 'darkred' },
+                { front: 'green', back: 'darkgreen' },
+                { front: 'blue', back: 'darkblue' },
+                { front: 'yellow', back: 'darkyellow' },
+                { front: 'orange', back: 'darkorange' },
+                { front: 'pink', back: 'darkpink' },
+                { front: 'purple', back: 'darkpurple' },
+                { front: 'turquoise', back: 'darkturquoise' }
+            ];
+
+            // Initialize confetti
+            for (let i = 0; i < confettiCount; i++) {
+                confetti.push({
+                    color: colors[Math.floor(Math.random() * colors.length)],
+                    dimensions: { x: Math.random() * 10 + 10, y: Math.random() * 20 + 10 },
+                    position: { x: Math.random() * canvas.width, y: canvas.height - 1 },
+                    rotation: Math.random() * 2 * Math.PI,
+                    scale: { x: 1, y: 1 },
+                    velocity: { x: Math.random() * 50 - 25, y: Math.random() * -50 }
+                });
+            }
+
+            // Render confetti
+            function render() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+                confetti.forEach((confetto, index) => {
+                    let width = confetto.dimensions.x * confetto.scale.x;
+                    let height = confetto.dimensions.y * confetto.scale.y;
+
+                    // Move canvas to position and rotate
+                    ctx.translate(confetto.position.x, confetto.position.y);
+                    ctx.rotate(confetto.rotation);
+
+                    // Apply forces to velocity
+                    confetto.velocity.x -= confetto.velocity.x * drag;
+                    confetto.velocity.y = Math.min(confetto.velocity.y + gravity, terminalVelocity);
+                    confetto.velocity.x += Math.random() > 0.5 ? Math.random() : -Math.random();
+
+                    // Set position
+                    confetto.position.x += confetto.velocity.x;
+                    confetto.position.y += confetto.velocity.y;
+
+                    // Delete confetti when out of frame
+                    if (confetto.position.y >= canvas.height) confetti.splice(index, 1);
+
+                    // Loop confetto x position
+                    if (confetto.position.x > canvas.width) confetto.position.x = 0;
+                    if (confetto.position.x < 0) confetto.position.x = canvas.width;
+
+                    // Spin confetto by scaling y
+                    confetto.scale.y = Math.cos(confetto.position.y * 0.1);
+                    ctx.fillStyle = confetto.scale.y > 0 ? confetto.color.front : confetto.color.back;
+
+                    // Draw confetti
+                    ctx.fillRect(-width / 2, -height / 2, width, height);
+
+                    // Reset transform matrix
+                    ctx.setTransform(1, 0, 0, 1, 0, 0);
+                });
+
+                if (confetti.length > 0) {
+                    requestAnimationFrame(render);
+                } else {
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    canvas.style.zIndex = -1;
+                }
+            }
+
+            render();
+        }
+        // Get the button
+        var scrollToTopBtn = document.getElementById("scrollToTop");
+
+        // When the user scrolls down 20px from the top of the document, show the button
+        window.onscroll = function () { scrollFunction() };
+
+        function scrollFunction() {
+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                scrollToTopBtn.style.display = "block";
+            } else {
+                scrollToTopBtn.style.display = "none";
+            }
+        }
+
+        // When the user clicks on the button, scroll to the top of the document
+        function scrollToTop() {
+            // Scroll to top smoothly
+            window.scrollTo({
+                top: 0,
+                behavior: "smooth"
+            });
+        }
+    </script><br>
+     <div class="container">
+        <p><strong><h3>CONTACT US</h3> </strong>
+            <strong>EMAIL:</strong> <a href="mailto:dicktuge@gmail.com">dicktuge@gmail.com</a>
+            <br><strong>PHONE:</strong> <a href="tel:+256775787978"><br>0775787978</a>
+            <br> <a href="tel:+256742845900">0742845900</a>
+            <br><strong>LOCATION:</strong><p>6 Miles off Gayaza Road-Kampala</p>Wilsem Plaza Room Number 03 <p></p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.725161469977!2d32.577275971490636!3d0.3915380996046231!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177db0891f472cc1%3A0xfa65a91d8342630a!2sGayaza%20-Kampala%20Rd!5e0!3m2!1sen!2sug!4v1710436920884!5m2!1sen!2sug" width="250" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </p>
+    </div>
+    <center>
+        <!-- Footer -->
+        <footer class="footer" id="contact">
+            <div class="container">
+                <p>&copy; 2024 Outreach Schools Examinations Board</p>
+                <p>Coded with <span class="heart">&hearts;</span> by <a href="https://fresh-teacher.github.io"> Fresh Teacher</a></p>
+
+            </div>
+        </footer>
+        
+    </center>
+
+    <!-- End of Footer -->
+</body>
+
+</html>
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..83c33e0
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,161 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+
+::-webkit-scrollbar{
+    display: none;
+}
+
+:root {
+    --white: #fff;
+    --black: #1c2b2d;
+    --blue: #31326f;
+    --light-blue: #005490;
+    --color-primary: #9d0191;
+    --color-sec: #db6400;
+    --grey: #eee;
+    --dark-grey: #222831;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    /* font-size: 10px; */
+}
+
+body {
+    font-family: "Open Sans", sans-serif;
+}
+
+p {
+    font-size: 1.6rem;
+    line-height: 1.5;
+}
+
+img {
+    /* width: 100%; */
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Start Here */
+
+header {
+    background-color: var(--grey);
+    padding: 1rem;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    line-height: 2;
+    color: var(--color-primary);
+}
+
+form input {
+    width: 20rem;
+    padding: 0.7rem;
+    border: none;
+    border-radius: 5px;
+    outline: none;
+    font-size: 1rem;
+    border-bottom: 2px solid var(--color-sec);
+    margin-bottom: 1rem;
+}
+
+.btn {
+    font-size: 1rem;
+    text-decoration: none;
+    color: var(--white);
+    background-color: var(--color-sec);
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.active {
+    background-color: var(--color-primary);
+}
+
+#store-products {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-gap: 2rem;
+    padding: 2rem 0;
+}
+
+.store-product {
+    border: 1px solid var(--grey);
+    border-radius: 3px;
+    max-width: 250px;
+    animation: slide-up 0.5s ease 1;
+    transform: all 0.3s;
+}
+
+.product-details {
+    text-align: center;
+    padding-bottom: 1rem;
+    background-color: var(--grey);
+}
+
+.product-details h2 {
+    font-size: 1.2rem;
+    font-weight: 500;
+}
+
+.product-details p {
+    font-size: 1rem;
+    color: green;
+    padding-bottom: 1rem;
+    font-weight: 700;
+}
+
+.product-details p span {
+    text-decoration: line-through;
+    color: red;
+    font-weight: normal;
+}
+
+.product-details a {
+    font-size: 1rem;
+    text-decoration: none;
+    background-color: var(--color-sec);
+    color: var(--white);
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+}
+
+.product-details a:hover {
+    background-color: var(--color-primary);
+}
+
+.no-result {
+    display: none;
+    color: red;
+    padding-bottom: 2rem;
+}
+
+.show {
+    display: block;
+}
+
+@keyframes slide-up {
+    0% {
+        transform: translateY(2rem);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@media screen and (max-width: 600px) {
+    #store-products {
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        padding: 1rem;
+    }
+}
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8fa1bd5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,46 @@
+const btns = document.querySelectorAll(".btn");
+const storeProducts = document.querySelectorAll(".store-product");
+
+for (let i = 0; i < btns.length; i++) {
+    btns[i].addEventListener("click", function(e) {
+        const current = document.getElementsByClassName("active");
+        current[0].className = current[0].className.replace(" active", "");
+        this.className += " active";
+                                                                        
+        // Switch Tab content
+        const filter = e.target.dataset.filter;
+        // console.log(filter);
+        storeProducts.forEach((product) => {
+            if (filter === "all") {
+                product.style.display = "block";
+            } else if (product.classList.contains(filter)) {
+                product.style.display = "block";
+            } else {
+                product.style.display = "none";
+            }
+        });
+    });
+}
+
+// SEARCH FILTER
+const search = document.getElementById("search");
+const productName = document.querySelectorAll(".product-details h2");
+const noResult = document.querySelector(".no-result");
+
+search.addEventListener("keyup", filterProducts);
+
+function filterProducts(e) {
+    const text = e.target.value.toLowerCase();
+
+    productName.forEach((product) => {
+        const item = product.textContent;
+
+        if (item.toLowerCase().indexOf(text) != -1) {
+            product.parentElement.parentElement.style.display = "block";
+            noResult.style.display = "none";
+        } else {
+            product.parentElement.parentElement.style.display = "none";
+            noResult.style.display = "block";
+        }
+    });
+}
\ No newline at end of file
diff --git a/store.html b/store.html
new file mode 100644
index 0000000..d9e3353
--- /dev/null
+++ b/store.html
@@ -0,0 +1,685 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OSEB Online Store</title>
+    <script src="https://kit.fontawesome.com/1935d064dd.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+<!-- Include jQuery -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+<!-- Include Bootstrap JavaScript -->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+    
+    <style>
+        #store-products {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-gap: 2rem;
+}
+
+footer.footer {
+    background-color: #ffb6c1; /* Baby pink color */
+    padding: 10px 0;
+    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    font-size: 14px;
+}
+
+
+.footer p {
+    margin-top: 0.5px; /* Adjust the top margin */
+    margin-bottom: 2px; /* Adjust the bottom margin */
+}
+
+
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        header {
+            background-color: #fff;
+            padding: 20px 0;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .search-box {
+            margin-bottom: 20px;
+        }
+
+        .search-box input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        .filter-box select {
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+            background-color: #fff;
+            cursor: pointer;
+        }
+
+        /* .main-container {
+            padding: 20px;
+        } */
+
+        .store-product {
+            background-color: #fff;
+            border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+            overflow: hidden;
+        }
+
+        .product-details {
+    padding: 20px;
+    background-color: rgb(211, 211, 211); /* Add your desired background color here */
+}
+
+
+        .product-details h2 {
+            margin-top: 0;
+            margin-bottom: 10px;
+            font-size: 20px;
+        }
+
+        .product-details p {
+            margin: 0;
+            font-size: 16px;
+        }
+
+        .product-details a {
+            display: inline-block;
+            background-color: #ff5f6d;
+            color: #fff;
+            padding: 10px 20px;
+            border-radius: 5px;
+            text-decoration: none;
+            margin-top: 10px;
+            transition: background-color 0.3s ease;
+        }
+
+        .product-details a:hover {
+            background-color: #e64c59;
+        }
+
+        .no-result {
+            text-align: center;
+            font-size: 18px;
+            color: #888;
+        }   
+         /* Custom CSS for navbar color */
+         .navbar-custom {
+            background-color: #ff2f00;
+            /* Change this color to your desired color */
+        }
+
+        .navbar-custom .navbar-brand,
+        .navbar-custom .navbar-nav .nav-link {
+            color: #ffffff;
+            /* Change this color to your desired color */
+        }
+
+        .navbar-brand img {
+            max-height: 30px;
+            /* Adjust the max-height as needed */
+        }
+  /* Scroll to top button */
+  #scrollToTop {
+            display: none;
+            /* Initially hide the button */
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 99;
+            font-size: 18px;
+            border: none;
+            outline: none;
+            background-color: #ff2f00;
+            color: #ffffff;
+            cursor: pointer;
+            padding: 10px;
+            border-radius: 50%;
+        }
+
+        #scrollToTop:hover {
+            background-color: #ff5e3a;
+        }
+          /* Heart animation */
+          @keyframes heartbeat {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.2); }
+        100% { transform: scale(1); }
+    }
+
+    .heart {
+        display: inline-block;
+        animation: heartbeat 1s infinite;
+        color: red; /* Add color property for red color */
+
+    }
+
+    .card {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 10px;
+    width: 200px;
+    float: left;
+}
+
+.card h2 {
+    margin-top: 0;
+}
+
+        </style>
+</head>
+
+<body>
+    <!-- Navigation bar -->
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
+        <div class="container">
+            <a class="navbar-brand" href="#">
+                <img src="OSEB_CHARGES-1_page-0001-removebg-preview.png" alt="Logo">
+                <!-- Replace 'your-logo.png' with the path to your logo -->
+                <b>OSEB  APP</b>
+            </a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="#exams">Exams <span class="sr-only">(current)</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#schemes_of_work">Schemes of Work</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#textbooks">Textbooks</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#lesson_notes">Lesson Notes</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#holiday_packages">Holiday Packages</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#learners_workbooks"> Workbooks</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <p></p><br><br>
+
+    <!-- Scroll to top button -->
+    <button id="scrollToTop" onclick="scrollToTop()"><i class="fas fa-arrow-up"></i></button>
+
+    <!-- Navigation Bar -->
+    <header>
+        <div class="container">
+            <div class="search-box">
+                <form action="" onsubmit="return false">
+                    <input type="text" id="search" placeholder="🔎 Search all products here..." />
+                </form>
+            </div>
+            <div class="filter-box">
+                <div class="filter-box">
+                    <select id="category-filter" onchange="filterCategory(event)">
+                        <option value="all">All Products</option>
+                        <option value="exams">Exams</option>
+                        <option value="schemes_of_work">Schemes of Work</option>
+                        <option value="textbooks">Textbooks</option>
+                        <option value="lesson_notes">Lesson Notes</option>
+                        <option value="holiday_packages">Holiday Packages</option>
+                        <option value="weekly_homeworks">Weekly Homeworks</option>
+                        <option value="topical_questions">Topical Questions</option>
+                        <option value="learners_workbooks">Learner's Workbooks</option>
+                        <option value="lesson_plan_templates">Lesson Plan Templates</option>
+                        <option value="ple_pamphlets">PLE Pamphlets</option>
+                        <option value="p7_topical_questions">P.7 Topical Questions</option>
+                        <option value="p7_special_sets_series">P7 Special Sets Series</option>
+                        <option value="interview_exams">Interview Exams</option>
+                        <option value="ple_spot_exams">PLE Spot Exams</option>
+                        <option value="book_cover_hardcopies">Book Cover Hardcopies</option>
+                        <option value="teachers_interview_papers">Teacher's Interview Papers</option>
+                        <option value="weekend_tests">Weekend Tests</option>
+                    </select>
+            </div>
+        </div>
+    </header>
+<br>
+ <!-- Main Content -->
+ <main>
+    <div id="app" class="container">
+        <!-- Cards will be dynamically generated here -->
+    </div>
+    <section id="store-products">
+        <!-- Generated Product Cards will be inserted here -->
+    </section>
+    <div class="container no-result">
+        <p>No more products to display! Try searching using a different name or contact us on <a href="tel:+256775787978"><br>0775787978 </a></p><br><br>
+    </div>
+</main>
+
+<!-- Bootstrap Warning Modal -->
+<div class="modal fade" id="passwordProtectedModal" tabindex="-1" role="dialog" aria-labelledby="passwordProtectedModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <center><h5 class="modal-title" id="passwordProtectedModalLabel">ALERT ⚠️</h5></center>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          The file you have downloaded is password protected. Please contact us for further assistance...
+        </div>
+        <div class="modal-footer">
+          <!-- Button to request for password -->
+          <a href="whatsapp://send?phone=+256775787978&text=Hello,%20I%20hope%20you%20are%20doing%20well.%20I%20have%20downloaded%20a%20file%20from%20the%20OSEB%App%20and%20it%20appears%20to%20be%20password-protected.%20Could%20you%20kindly%20provide%20me%20with%20the%20password%20to%20access%20it?%20Thank%20you%20very%20much%20for%20your%20assistance.%20Best%20regards." class="btn btn-primary">REQUEST FOR PASSWORD 🔐</a>
+          <button type="button" class="btn btn-danger" data-dismiss="modal">IGNORE</button>
+
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  
+  
+
+<script>
+// JSON data for products
+const products = [
+{
+  "category": "exams",
+  "name": "P.1 Science Exam",
+  "price": "UGX. 60,000",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "schemes_of_work",
+  "name": "P7 Mathematics Schemes of Work",
+  "price": "UGX. 5,000",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "textbooks",
+  "name": "P3 English Textbook",
+  "price": "UGX. 45,000",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "lesson_notes",
+  "name": "P6 History Lesson Notes",
+  "price": "UGX. 10,000",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "holiday_packages",
+  "name": "Christmas Holiday Package",
+  "price": "UGX. 80,000",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "weekly_homeworks",
+  "name": "Week 1 Homeworks",
+  "price": "UGX. 15,000",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "topical_questions",
+  "name": "Chemistry Topical Questions",
+  "price": "UGX. 25,000",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "learners_workbooks",
+  "name": "Physics Learner's Workbook",
+  "price": "UGX. 30,000",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "lesson_plan_templates",
+  "name": "Geography Lesson Plan Templates",
+  "price": "UGX. 8,000",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "ple_pamphlets",
+  "name": "P6 PLE Preparation Pamphlets",
+  "price": "UGX. 20,000",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "p7_topical_questions",
+  "name": "P.7 English Topical Questions",
+  "price": "UGX. 25,000",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "p7_special_sets_series",
+  "name": "P7 Special Sets Series",
+  "price": "UGX. 15,000",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "interview_exams",
+  "name": "Teacher's Interview Exams",
+  "price": "UGX. 10,000",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "ple_spot_exams",
+  "name": "PLE Spot Exams",
+  "price": "UGX. 12,000",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "book_cover_hardcopies",
+  "name": "Book Cover Hardcopies",
+  "price": "UGX. 200 and 100",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "teachers_interview_papers",
+  "name": "Teacher's Interview Papers",
+  "price": "UGX. 15,000",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "weekend_tests",
+  "name": "Weekend Tests",
+  "price": "UGX. 5,000 per class",
+   "isFree": false,
+   "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "exams",
+  "name": "P.1 Science Exam",
+  "price": "UGX. 60,000",
+  "isFree": false,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "schemes_of_work",
+  "name": "P7 Mathematics Schemes of Work",
+  "price": "UGX. 5,000",
+  "isFree": false,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "textbooks",
+  "name": "P3 English Textbook",
+  "price": "UGX. 45,000",
+  "isFree": false,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "lesson_notes",
+  "name": "P6 History Lesson Notes",
+  "price": "UGX. 10,000",
+  "isFree": false,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "holiday_packages",
+  "name": "Christmas Holiday Package",
+  "price": "UGX. 500", // Free item
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+},
+{
+  "category": "weekly_homeworks",
+  "name": "Week 1 Homeworks",
+  "price": "UGX. 500", // Free item
+  "link": "notes.pdf",
+  "isFree": true,
+  "pdflink": "locked files.zip", // PDF file link
+
+}
+];
+  
+// Function to render product cards
+function renderProductCards() {
+  const storeProductsContainer = document.getElementById('store-products');
+  const productCardTemplate = document.getElementById('product-card-template').innerHTML;
+
+  let productCardsHTML = '';
+  products.forEach(product => {
+    // Modify button text and link based on whether the item is free or not
+    let buttonText, buttonLink;
+    if (product.isFree) {
+      buttonText = "FREE DOWNLOAD";
+      buttonLink = product.link;
+    } else {
+      buttonText = "Order Now!";
+      buttonLink = product.link;
+    }
+
+    // Capitalize item name
+    const name = product.name.toUpperCase();
+
+    productCardsHTML += productCardTemplate
+      .replace('{{ category }}', product.category)
+      .replace('{{ name }}', name)
+      .replace('{{ price }}', product.isFree ? "FREE" : product.price) // Replace price with "FREE" if item is free
+      .replace('{{ button_text }}', buttonText)
+      .replace('{{ button_link }}', buttonLink);
+  });
+
+  storeProductsContainer.innerHTML = productCardsHTML;
+}
+
+// Function to render cards from items
+function renderCards(items) {
+  const app = document.getElementById('app');
+  let html = '';
+  items.forEach(item => {
+    html += generateCard(item);
+  });
+  app.innerHTML = html;
+}
+
+// Render cards when the page loads
+window.onload = function () {
+  if (typeof products !== 'undefined') {
+    renderProductCards(); // Render product cards if products variable is defined
+  } else {
+    renderCards(items); // Render normal cards if products variable is not defined
+  }
+};
+
+
+        // Smooth scrolling for navigation links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+
+ // Filter by category function
+ function filterCategory(event) {
+            var category = document.getElementById("category-filter").value;
+            var products = document.getElementsByClassName("store-product");
+
+            if (category === "all") {
+                for (var i = 0; i < products.length; i++) {
+                    products[i].style.display = "block";
+                }
+            } else {
+                for (var i = 0; i < products.length; i++) {
+                    var product = products[i];
+                    if (product.classList.contains(category)) {
+                        product.style.display = "block";
+                    } else {
+                        product.style.display = "none";
+                    }
+                }
+            }
+        }
+
+        // Filter products by search input
+        const search = document.getElementById("search");
+        const productName = document.querySelectorAll(".product-details h2");
+        const noResult = document.querySelector(".no-result");
+
+        if (search) {
+            search.addEventListener("keyup", filterProducts);
+        }
+
+// Filter products by search input
+function filterProducts(e) {
+    const text = e.target.value.toLowerCase();
+    const productDetails = document.querySelectorAll(".product-details");
+
+    productDetails.forEach((product) => {
+        const productName = product.querySelector("h2").textContent.toLowerCase();
+
+        if (productName.includes(text)) {
+            product.parentElement.style.display = "block";
+        } else {
+            product.parentElement.style.display = "none";
+        }
+    });
+
+    // Show or hide the "no result" message based on the filtered products
+    const noResult = document.querySelector(".no-result");
+    const visibleProducts = document.querySelectorAll('.store-product[style="display: block;"]');
+
+    if (visibleProducts.length > 0) {
+        noResult.style.display = "none";
+    } else {
+        noResult.style.display = "block";
+    }
+}
+
+
+
+// Get the button
+var scrollToTopBtn = document.getElementById("scrollToTop");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function () { scrollFunction() };
+
+function scrollFunction() {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        scrollToTopBtn.style.display = "block";
+    } else {
+        scrollToTopBtn.style.display = "none";
+    }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+function scrollToTop() {
+    // Scroll to top smoothly
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+}
+
+ // When the DOM content is fully loaded, render the cards
+ document.addEventListener('DOMContentLoaded', function () {
+            // Define your items array with necessary data
+            const items = products; // Example: you can set items equal to products array
+
+            // Render cards when the page loads
+            renderCards(items);
+        });
+
+// When the DOM content is fully loaded, render the cards
+document.addEventListener('DOMContentLoaded', function () {
+      // Define your items array with necessary data
+      const items = products; // Assuming products array is defined elsewhere
+
+      // Render cards when the page loads
+      renderCards(items);
+    });
+
+    // Function to render cards from items
+    function renderCards(items) {
+      const app = document.getElementById('app');
+      let html = '';
+      items.forEach(item => {
+        html += generateCard(item);
+      });
+      app.innerHTML = html;
+    }
+
+    // Define the generateCard function
+    function generateCard(item) {
+      return `
+        <div class="store-product ${item.category}">
+            <div class="product-details">
+                <h2>${item.name}</h2>
+                <p>${item.price}</p>
+                <a href="${item.pdflink}" onclick="showPasswordProtectedModal()" download>
+                    <i class="fas fa-download"></i> <b>Order Now!</b>
+                </a>
+            </div>
+        </div>`;
+    }
+    
+
+    // Function to show password protected modal
+    function showPasswordProtectedModal() {
+      $('#passwordProtectedModal').modal('show');
+    }
+    </script>
+    <!-- <script src="script.js"></script> -->
+    <center><br><br><br><br>
+        <!-- Footer -->
+        <footer class="footer" id="contact">
+            <div class="container">
+                <p>&copy; 2024 OSEB</p>
+                <p>Coded with <span class="heart">&hearts;</span> by <a href="https://fresh-teacher.github.io"> Fresh Teacher</a></p>
+
+            </div>
+        </footer>
+        
+    </center>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..83c33e0
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,161 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+
+::-webkit-scrollbar{
+    display: none;
+}
+
+:root {
+    --white: #fff;
+    --black: #1c2b2d;
+    --blue: #31326f;
+    --light-blue: #005490;
+    --color-primary: #9d0191;
+    --color-sec: #db6400;
+    --grey: #eee;
+    --dark-grey: #222831;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    /* font-size: 10px; */
+}
+
+body {
+    font-family: "Open Sans", sans-serif;
+}
+
+p {
+    font-size: 1.6rem;
+    line-height: 1.5;
+}
+
+img {
+    /* width: 100%; */
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Start Here */
+
+header {
+    background-color: var(--grey);
+    padding: 1rem;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    line-height: 2;
+    color: var(--color-primary);
+}
+
+form input {
+    width: 20rem;
+    padding: 0.7rem;
+    border: none;
+    border-radius: 5px;
+    outline: none;
+    font-size: 1rem;
+    border-bottom: 2px solid var(--color-sec);
+    margin-bottom: 1rem;
+}
+
+.btn {
+    font-size: 1rem;
+    text-decoration: none;
+    color: var(--white);
+    background-color: var(--color-sec);
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.active {
+    background-color: var(--color-primary);
+}
+
+#store-products {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-gap: 2rem;
+    padding: 2rem 0;
+}
+
+.store-product {
+    border: 1px solid var(--grey);
+    border-radius: 3px;
+    max-width: 250px;
+    animation: slide-up 0.5s ease 1;
+    transform: all 0.3s;
+}
+
+.product-details {
+    text-align: center;
+    padding-bottom: 1rem;
+    background-color: var(--grey);
+}
+
+.product-details h2 {
+    font-size: 1.2rem;
+    font-weight: 500;
+}
+
+.product-details p {
+    font-size: 1rem;
+    color: green;
+    padding-bottom: 1rem;
+    font-weight: 700;
+}
+
+.product-details p span {
+    text-decoration: line-through;
+    color: red;
+    font-weight: normal;
+}
+
+.product-details a {
+    font-size: 1rem;
+    text-decoration: none;
+    background-color: var(--color-sec);
+    color: var(--white);
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+}
+
+.product-details a:hover {
+    background-color: var(--color-primary);
+}
+
+.no-result {
+    display: none;
+    color: red;
+    padding-bottom: 2rem;
+}
+
+.show {
+    display: block;
+}
+
+@keyframes slide-up {
+    0% {
+        transform: translateY(2rem);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@media screen and (max-width: 600px) {
+    #store-products {
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        padding: 1rem;
+    }
+}
+
