diff --git a/about/about.css b/about/about.css
new file mode 100644
index 0000000..dcbb266
--- /dev/null
+++ b/about/about.css
@@ -0,0 +1,185 @@
+@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-weight: 400;
+    outline: none;
+    list-style-type: none;
+    font-family: 'Poppins', Verdana, Geneva, Tahoma, sans-serif, Georgia, 'Times New Roman', Times, serif;
+}
+
+:root {
+    --main-color:rgb(192, 223, 100);
+}
+
+.hero {
+    position: relative;
+    width: 100%;
+    min-height: 100dvh;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 90%;
+}
+
+
+.hero-video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5); /* Optional: darken the background image */
+}
+
+.hero-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    padding: 0 5%;
+    height: 100%;
+    gap: 25px;
+}
+.hero-content .left {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.hero-content .right {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 7%;
+}
+
+.hero-title {
+    text-align: left;
+    font-size: 7em;
+    width: 100%;
+    border-left:  7px solid var(--main-color);
+    padding-left: 20px;
+}
+
+.hero-subtitle {
+    font-size: 2em;
+    width: 100%;
+    max-width: 700px;
+    margin: 25px 0;
+    text-align: left;
+}
+
+.hero-btn {
+    display: inline-block;
+    font-size: 1.7em;
+    background-color: var(--main-color);
+    border: 2px solid var(--main-color);
+    border-radius: 0.3em;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+    width: max-content;
+    color: #064b10;;
+}
+
+.hero-btn:hover {
+    background-color: transparent;
+    color: var(--main-color);
+}
+.right h3 {
+    font-size: 3em;
+    margin-bottom: 15px;
+    color: var(--main-color);
+}
+.right .cards-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+}
+.right .card {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+}
+.right .card i {
+    font-size: 40px;
+    color: var(--main-color);
+    width: 40px;
+    height: 40px
+}
+.right .card h4 {
+    font-weight: 600;
+    font-size: 2em;
+}
+.right .card small {
+    color: rgb(232, 232, 232);
+    font-size: 1.5em;
+}
+@media all and (max-width: 1200px) {
+    .hero-content {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 20vh 5% 25px;
+    }
+    .hero-content .left {
+        padding: 0 15px;
+        width: 100%;
+        height: max-content;
+        justify-content: center;
+        align-items: center;
+    }
+    .hero-content .right {
+        padding: 0 15px;
+        width: 100%;
+        height: max-content;
+        justify-content: center;
+        align-items: center;
+    }
+    .hero-title {
+        text-align: center;
+        font-size: 3em;
+        width: 100%;
+        border: none;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.5em;
+        width: 100%;
+        max-width: 100%;
+        margin: 25px 0;
+        text-align: center;
+    }
+    .right .cards-wrapper {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .right .card {
+        width: 300px;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .service-content {
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/about/about.html b/about/about.html
new file mode 100644
index 0000000..8a3f2e1
--- /dev/null
+++ b/about/about.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- custom styles -->
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="about.css">
+    <link rel="stylesheet" href="../cursor/style.css">
+
+
+    <!-- font family -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+
+    <!-- icons -->
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/c732ec9339.js" crossorigin="anonymous"></script>
+
+    <title>About Us | AgriLearnNetwork</title>
+</head>
+
+<body>
+
+    <!-- header -->
+    <header class="header">
+        <img src="../icon.png" alt="logo" style="height: 50px; width: 50px; margin-right: 10px;" />
+
+        <a href="#" class="logo" style="margin-inline-end: auto">
+            <h3>AgriLearnNetwork</h3>
+        </a>
+
+        <a>
+            <div class="theme-toggle">
+                <i class="fas fa-sun"></i>
+                <i class="fas fa-moon"></i>
+            </div>
+        </a>
+
+        <i class="bx bx-menu" id="menu-icon"></i>
+
+        <nav class="navbar">
+            <a href="../index.html" class="content"><i class="fa-solid fa-house"></i> Home</a>
+            <a href="./about.html" class="active"><i class="fa-solid fa-circle-info"></i> About</a>
+            <a href="../blogpage.html" target="_self"><i class="fa-solid fa-blog"></i> Blogs</a>
+            <a href="../index.html#Resource Library"><i class="fa-solid fa-book"></i> Resource Library</a>
+            <a href="../faqpage.html" target="_self"><i class="fas fa-question-circle"></i>FAQs</a>
+            <a href="../index.html#contact" id="nav--contact"><i class="fa-solid fa-phone"></i> Contact</a>
+            <a href="../buy_products.html"><i class="fa fa-shopping-cart"></i>Buy Products</a>
+            <a href="../login.html"><button id="log-in-btn" class="login-btn">Login</button></a>
+        </nav>
+    </header>
+
+
+    <!-- about us content -->
+    <div class="hero">
+
+        <video class="hero-video" autoplay muted loop>
+            <source src="../Agriculturevideo.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+        <div class="hero-content">
+            <div class="left">
+                <h1 class="hero-title">About Us</h1>
+                <p class="hero-subtitle">In Agrilearn Network, we're dedicated to empowering farmers with the knowledge
+                    and tools they need to thrive in today's agricultural landscape. From expert guidance on
+                    cutting-edge farming techniques to comprehensive insights into seed varieties and efficient tool
+                    usage, we're here to support every step of your farming journey. Whether you're looking to enhance
+                    your harvest methods or optimize farm management practices, Agrilearn Network is your trusted
+                    partner for success in modern agriculture.</p>
+                <a href="#services" class="hero-btn">Learn More</a>
+            </div>
+            <div class="right">
+                <h3>What we do</h3>
+                <div class="cards-wrapper">
+                    <div class="card">
+                        <i class="fa fa-certificate" aria-hidden="true"></i>
+                        <div class="service-content">
+                            <h4>Agriculture Techniques Guidance</h4>
+                            <small>From soil management to irrigation strategies, farmers gain comprehensive knowledge
+                                to optimize their farming practices.</small>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <i class="fa fa-cogs" aria-hidden="true"></i>
+                        <div class="service-content">
+                            <h4>Tool Usage Recommendations</h4>
+                            <small>Agrilearn Network advises farmers on the optimal usage of agricultural tools and
+                                machinery.</small>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <i class="fa fa-leaf" aria-hidden="true"></i>
+                        <div class="service-content">
+                            <h4>Seed Variety Knowledge</h4>
+                            <small>Make farmers informed decisions about selecting the right seeds for their specific
+                                crops and environmental conditions.</small>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <i class="fa fa-recycle" aria-hidden="true"></i>
+                        <div class="service-content">
+                            <h4>Harvesting and Farm Management</h4>
+                            <small>Focusing on streamlined harvesting methods and effective farm management
+                                practices.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- footer -->
+    <footer class="footer">
+        <div class="footer-grid">
+            <div class="footer-title">
+                <h2>AgriLearnNetwork</h2>
+            </div>
+            <div class="footer-icons">
+                <p><b>Follow us on our socials:</b></p>
+                <div class="socialIcons">
+                    <a href="mailto:AgriLearnNetwork@gmail.com" class="email-link"
+                        data-tooltip="AgriLearnNetwork@gmail.com"><i class="fas fa-envelope"></i></a>
+                    <a href="https://www.instagram.com/your_username_here" target="_blank"><i
+                            class="fab fa-instagram"></i></a>
+                    <a href="https://twitter.com/your_username_here" target="_blank"><i
+                            class="fa-brands fa-x-twitter"></i></a>
+                    <a href="https://www.facebook.com/your_page_or_profile_here" target="_blank"><i
+                            class="fab fa-facebook"></i></a>
+                </div>
+            </div>
+        </div>
+        <div class="quick-links">
+            <h2>Quick Links</h2>
+            <ul>
+                <li>
+                    <a href="../index.html">
+                        <p>Home</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="./about.html">
+                        <p>About Us</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="../blogpage.html">
+                        <p>Blogs</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="../faqpage.html">
+                        <p>FAQ</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="../index.html#Resource Library">
+                        <p>Resource Library</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="../index.html#contact">
+                        <p>Contact Us</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="../buy_products.html">
+                        <p>Buy Products</p>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="footer-text footer-right">
+            <p style="font-weight: 600; font-size: 15px">
+                Copyright &copy;
+                <script>
+                    document.write(new Date().getFullYear());
+                </script>
+                by AgriLearnNetwork | All Rights Reserved.
+            </p>
+        </div>
+    </footer>
+    <div id="backtoTop">
+        <a href="./about.html"><i class="bx bx-up-arrow-alt" id="go-to-top" title="Go to top"></i></a>
+    </div>
+    <div class="cursor"></div>
+    <div class="cursor2"></div>
+
+
+    <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
+
+    <script>
+
+        // back to top control
+        window.addEventListener('scroll', function () {
+            var scrollPosition = window.scrollY;
+            var backToTopButton = document.getElementById('backtoTop');
+
+            if (scrollPosition > 300) { // Adjust this value as needed to show the button at the desired scroll position
+                backToTopButton.style.display = 'block';
+            } else {
+                backToTopButton.style.display = 'none';
+            }
+        });
+
+        // theme toggle control
+        document.addEventListener("DOMContentLoaded", function () {
+            const themeToggle = document.querySelector(".theme-toggle");
+            const body = document.body;
+            console.log(themeToggle)
+
+            // Load the saved theme from local storage and apply it
+            const savedTheme = localStorage.getItem("theme");
+            if (savedTheme && savedTheme === "dark") {
+                body.classList.add("dark-theme");
+            }
+
+            themeToggle.addEventListener("click", function () {
+                body.classList.toggle("dark-theme");
+
+                // Save the current theme in local storage
+                if (body.classList.contains("dark-theme")) {
+                    localStorage.setItem("theme", "dark");
+                } else {
+                    localStorage.setItem("theme", "light");
+                }
+            });
+        });
+
+        // navbar control
+        let menuIcon = document.querySelectorAll('#menu-icon');
+        let navbar = document.querySelectorAll('.navbar');
+        let navContact = document.querySelectorAll('#nav--contact');
+
+        const password = document.getElementById('password');
+
+        menuIcon.forEach(icon => {
+            icon.onclick = () => {
+                icon.classList.toggle('bx-x');
+                navbar.forEach(nav => nav.classList.toggle('active'));
+            }
+        });
+
+        // Navbar links control
+        document.querySelectorAll('.navbar a').forEach(link => {
+            link.addEventListener('click', () => {
+                // Remove 'active' class from navbar
+                document.querySelectorAll('.navbar').forEach(nav => {
+                    nav.classList.remove('active');
+                });
+                // Toggle the menu icon
+                document.querySelectorAll('#menu-icon').forEach(icon => {
+                    icon.classList.remove('bx-x'); // Remove the 'bx-x' class to close the hamburger menu
+                });
+            });
+        });
+
+        var cursor = document.querySelector(".cursor");
+        var cursor2 = document.querySelector(".cursor2");
+        document.addEventListener("mousemove", function (e) {
+            cursor.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
+        });
+
+    </script>
+    <script type="text/javascript">
+        (function (d, t) {
+            var v = d.createElement(t),
+                s = d.getElementsByTagName(t)[0];
+            v.onload = function () {
+                window.voiceflow.chat.load({
+                    verify: { projectID: "664632efd181ce0921d32ed5" },
+                    url: "https://general-runtime.voiceflow.com",
+                    versionID: "production",
+                });
+            };
+            v.src = "https://cdn.voiceflow.com/widget/bundle.mjs";
+            v.type = "text/javascript";
+            s.parentNode.insertBefore(v, s);
+        })(document, "script");
+    </script>
+
+    <script type="text/javascript">
+        window.addEventListener("scroll", function () {
+            var header = document.querySelector("header");
+            header.classList.toggle("sticky", window.scrollY > 10)
+        })
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/blogpage.html b/blogpage.html
index f4c8784..60ddcc8 100644
--- a/blogpage.html
+++ b/blogpage.html
@@ -43,7 +43,7 @@
         <a href="index.html#home" 
           ><i class="fa-solid fa-house"></i> Home</a
         >
-        <a href="index.html#about"><i class="fa-solid fa-circle-info"></i> About</a>
+        <a href="./about/about.html"><i class="fa-solid fa-circle-info"></i> About</a>
         <a href="blogpage.html" class="active">
           <i class="fa-solid fa-blog"></i> Blogs</a
         >
@@ -436,7 +436,7 @@ <h2>Quick Links</h2>
             <a href="index.html"><p>Home</p></a>
           </li>
           <li>
-            <a href="index.html#about"><p>About Us</p></a>
+            <a href="./about/about.html"><p>About Us</p></a>
           </li>
           <li>
             <a href="blogpage.html"><p>Blogs</p></a>
diff --git a/buy_products.html b/buy_products.html
index e432a1b..39f19bd 100644
--- a/buy_products.html
+++ b/buy_products.html
@@ -33,7 +33,7 @@
         <nav class="navbar active">
           <a href="index.html#home"
             ><i class="fa-solid fa-house"></i> Home</a>
-          <a href="index.html#about"><i class="fa-solid fa-circle-info"></i> About</a>
+          <a href="./about/about.html"><i class="fa-solid fa-circle-info"></i> About</a>
           <a href="blogpage.html" target="_self">
             <i class="fa-solid fa-blog"></i> Blogs</a
           >
@@ -313,7 +313,7 @@ <h2>Quick Links</h2>
             <a href="#home"><p>Home</p></a>
           </li>
           <li>
-            <a href="#about"><p>About Us</p></a>
+            <a href="./about/about.html"><p>About Us</p></a>
           </li>
           <li>
             <a href="blogpage.html"><p>Blogs</p></a>
diff --git a/faqpage.html b/faqpage.html
index 2f95a18..1359f92 100644
--- a/faqpage.html
+++ b/faqpage.html
@@ -33,7 +33,7 @@ <h3>AgriLearnNetwork</h3>
     <i class="bx bx-menu" id="menu-icon"></i>
     <nav class="navbar">
       <a href="index.html#home"><i class="fa-solid fa-house"></i> Home</a>
-      <a href="index.html#about"><i class="fa-solid fa-circle-info"></i> About</a>
+      <a href="./about/about.html"><i class="fa-solid fa-circle-info"></i> About</a>
       <a href="blogpage.html" target="_self"><i class="fa-solid fa-blog"></i> Blogs</a>
       <a href="index.html#Resource Library"><i class="fa-solid fa-book"></i> Resource Library</a>
       <a href="faqpage.html" class="active"><i class="fas fa-question-circle"></i>FAQs</a>
@@ -202,7 +202,7 @@ <h2>Quick Links</h2>
           </a>
         </li>
         <li>
-          <a href="index.html#about">
+          <a href="./about/about.html">
             <p>About Us</p>
           </a>
         </li>
diff --git a/index.html b/index.html
index 7865126..a852d44 100644
--- a/index.html
+++ b/index.html
@@ -72,7 +72,7 @@
         <a href="#home" class="active content"
           ><i class="fa-solid fa-house"></i> Home</a
         >
-        <a href="#about"><i class="fa-solid fa-circle-info"></i> About</a>
+        <a href="./about/about.html"><i class="fa-solid fa-circle-info"></i> About</a>
         <a href="blogpage.html" target="_self">
           <i class="fa-solid fa-blog"></i> Blogs</a
         >
@@ -130,38 +130,6 @@ <h3 class="home--welcome">
       </div>
     </section>
 
-    <section class="about" id="about">
-      <!-- <div class="about-img">
-      <img src="images/png-transparent-farmer-agriculture-wheat-straw-agriculture-fictional-character-cartoon-thumbnail-fotor-bg-remover-2023122619381.png" alt="MY-IMAGE" />
-
-    </div> -->
-      <div class="video-wrapper">
-        <div class="video-overlay"></div>
-        <video class="background-video" autoplay muted loop id="aboutVideo">
-          <source src="Agriculturevideo.mp4" type="video/mp4" />
-          Your browser does not support the video tag.
-        </video>
-      </div>
-      <div class="overlay">
-        <div class="about-content">
-          <h2 class="heading">About <span>AgriLearnNetwork</span></h2>
-          <p>
-            Agrilearn Network serves as an indispensable resource, offering
-            farmers a holistic platform enriched with essential insights
-            spanning the diverse landscape of agriculture. Delving into the core
-            of farming practices, our platform provides detailed guidance on
-            agriculture techniques, in-depth knowledge on seed varieties,
-            recommendations for optimal tool usage, streamlined harvesting
-            methods, best practices for sowing, and strategic farm management
-            approaches. By encompassing a wide spectrum of topics, Agrilearn
-            Network aims to empower farmers with the comprehensive understanding
-            needed to navigate the complexities of modern agriculture
-            successfully.
-          </p>
-        </div>
-      </div>
-    </section>
-
     <section class="resource" id="Resource Library">
       <h2 class="heading">Resource<span> Library</span></h2>
       <br />
@@ -483,7 +451,7 @@ <h2>Quick Links</h2>
             <a href="#home"><p>Home</p></a>
           </li>
           <li>
-            <a href="#about"><p>About Us</p></a>
+            <a href="./about/about.html"><p>About Us</p></a>
           </li>
           <li>
             <a href="blogpage.html"><p>Blogs</p></a>
diff --git a/login.html b/login.html
index 581a897..1a47fe8 100644
--- a/login.html
+++ b/login.html
@@ -40,7 +40,7 @@
         <a href="index.html#home" class="active"
           ><i class="fa-solid fa-house"></i> Home</a
         >
-        <a href="index.html#about"
+        <a href="./about/about.html"
           ><i class="fa-solid fa-circle-info"></i> About</a
         >
         <a href="blogpage.html" target="_self">
@@ -171,7 +171,7 @@ <h2>Quick Links</h2>
             <a href="index.html#home"><p>Home</p></a>
           </li>
           <li>
-            <a href="index.html#about"><p>About Us</p></a>
+            <a href="./about/about.html"><p>About Us</p></a>
           </li>
           <li>
             <a href="blogpage.html"><p>Blogs</p></a>