diff --git a/package-lock.json b/package-lock.json
index f39b8da..9600063 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5997,15 +5997,9 @@
       "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
     },
     "node_modules/rollup": {
-
-      "version": "3.25.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.2.tgz",
-      "integrity": "sha512-VLnkxZMDr3jpxgtmS8pQZ0UvhslmF4ADq/9w4erkctbgjCqLW9oa89fJuXEs4ZmgyoF7Dm8rMDKSS5b5u2hHUg==",
-
       "version": "3.25.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.1.tgz",
       "integrity": "sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==",
-
       "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
diff --git a/src/components/hero.astro b/src/components/hero.astro
index d16177b..07fcdb4 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -6,8 +6,8 @@ import { Icon } from "astro-icon";
 ---
 
 <main
-  class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-12 md:pb-24">
-  <div class="py-6 md:order-1 hidden md:block">
+  class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-12 md:pb-24 my-20">
+  <div class="py-6 md:order-1 hidden md:block ">
     <Picture className="animate__animated animate__zoomIn  animation-duration: 3s; animate__slow"
       src={heroImage}
       alt="Astronaut in the air"
diff --git a/src/components/navbar/navbar.astro b/src/components/navbar/navbar.astro
index 27efb87..200c4f3 100644
--- a/src/components/navbar/navbar.astro
+++ b/src/components/navbar/navbar.astro
@@ -3,10 +3,9 @@ import Container from "@components/container.astro";
 import Link from "@components/ui/link.astro";
 import Dropdown from "./dropdown.astro";
 import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
-import { Icon } from 'astro-icon'
+import { Icon } from "astro-icon";
 
 const menuitems = [
-  
   // {
   //   title: "Pricing",
   //   path: "/pricing",
@@ -27,10 +26,22 @@ const menuitems = [
     title: "Quick Links",
     // path: "#",
     children: [
-      { title: "Twitter❤️", path: "https://twitter.com/astrodevil_", target: "_blank"},
-      { title: "Instagram👀", path: "https://www.instagram.com/codes.astro/", target: "_blank" },
+      {
+        title: "Twitter❤️",
+        path: "https://twitter.com/astrodevil_",
+        target: "_blank",
+      },
+      {
+        title: "Instagram👀",
+        path: "https://www.instagram.com/codes.astro/",
+        target: "_blank",
+      },
       // { title: "Gumroad Store📔", path: "https://astrodevil.gumroad.com/"},
-      { title: "Sponser on Ko-Fi☕", path: "https://ko-fi.com/astrodevil", target: "_blank" },
+      {
+        title: "Sponser on Ko-Fi☕",
+        path: "https://ko-fi.com/astrodevil",
+        target: "_blank",
+      },
     ],
   },
 
@@ -39,19 +50,57 @@ const menuitems = [
   //   path: "/contact",
   // },
 ];
+---
+
+<style>
 
 
----
 
+  #navbar {
+    position: fixed;
+  transition: all ease 0.5s;
+  background-color: rgba(193, 212, 219, 0.5);
+  margin-left:-18px;
+  padding:18px;
+  border-radius:10px;
+  transform: translateY(0);
+  top: 0;
+  width: 100%;
+ box-shadow:0px 1.3px 0px lightgrey;
+}
+  </style>
+  
+  <script>
+  var prevScrollpos = window.pageYOffset;
+  var navbar = document.getElementById("navbar");
+  var navbarHeight = navbar.offsetHeight;
+  var scrollThreshold = 200;
+
+  
+  window.onscroll = function() {
+    var currentScrollPos = window.pageYOffset;
+  
+    if (window.scrollY > 200) {
+      if (window.scrollY > prevScrollpos) {
+        navbar.style.top = '-100px';
+      }        
+      }else{
+        navbar.style.top='0px'
+      }
+      };
+  </script>
 
-<Container class = "sticky top-3 sm:top-5 sm:px-5 mx-[10px] sm:mx-auto rounded-[5px] py-[1px] bg-slate-300 bg-opacity-50 backdrop-blur-[6px] z-10 sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-lg sm:rounded-br-lg  ">
 
-  <header class="flex flex-col lg:flex-row justify-between items-center my-4">
+<Container
+  class="sticky top-0  rounded-[5px] py-[1px] bg-opacity-50 backdrop-blur-[6px] z-10 sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-lg sm:rounded-br-lg">
+  <header class="flex flex-col lg:flex-row justify-between items-center my-4" id="navbar">
     <Astronav>
       <div class="flex w-full lg:w-auto items-center justify-between">
         <a href="/" class="text-lg"
-          ><span class="font-bold text-[20px] tracking-[0.2px] text-slate-800">Resource</span><span
-            class="text-slate-500 tracking-[0.2px] text-[20px]">Gallery</span
+          ><span class="font-bold text-[20px] tracking-[0.2px] text-slate-800"
+            >Resource</span
+          ><span class="text-slate-500 tracking-[0.2px] text-[20px]"
+            >Gallery</span
           >
         </a>
         <div class="block lg:hidden">
@@ -86,16 +135,22 @@ const menuitems = [
         </ul>
         <div class="lg:hidden flex items-center mt-3 gap-4">
           <!-- <Link href="#" style="muted" block size="md">Log in</Link> -->
-          <Link href="https://github.com/Astrodevil/resource-gallery/" size="md" block>Contribute to ReGala</Link>
+          <Link
+            href="https://github.com/Astrodevil/resource-gallery/"
+            size="md"
+            block>
+            Contribute to ReGala
+          </Link>
         </div>
       </MenuItems>
     </Astronav>
     <div>
       <div class="hidden lg:flex items-center gap-4">
-        
         <!-- <a href="#">Log in</a> -->
-        <Link href="https://github.com/Astrodevil/resource-gallery/" size="md">Contribute to ReGala</Link>
+        <Link href="https://github.com/Astrodevil/resource-gallery/" size="md">
+          Contribute to ReGala
+        </Link>
       </div>
     </div>
   </header>
-</div>
+</Container>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 66aef7f..f040593 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -42,7 +42,7 @@ const team = [
 ---
 
 <Layout title="About">
-  <Container>
+  <Container class="my-20">
     <Sectionhead>
       <Fragment slot="title"><span class="text-gradient">About</span></Fragment>
       <Fragment slot="desc">Our team consists of each contributor improving the <strong>Resource Gallery</strong>.</Fragment>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index fc247d1..7e1e3c8 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -18,7 +18,7 @@ console.log(posts[0].frontmatter.image);
 ---
 
 <Layout title="Blog">
-  <Container>
+  <Container class="my-20">
     <Sectionhead>
       <Fragment slot="title"><span class="text-gradient">Our Blog</span></Fragment>
       <Fragment slot="desc">Our contributors write about topics and discussions around the tech world.</Fragment>
diff --git a/src/pages/resource.astro b/src/pages/resource.astro
index 9e39d90..99ff2aa 100644
--- a/src/pages/resource.astro
+++ b/src/pages/resource.astro
@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
 ---
 
 <Layout title="Resources | Resource Gallery">
-  <main>
+  <main class="my-20">
     <h1>Welcome to <span class="text-gradient">Resource Gallery</span></h1>
     <p class="instructions">
       To contribute, open the directory <code