diff --git a/src/components/about-pages/network-tabs.astro b/src/components/about-pages/network-tabs.astro
new file mode 100644
index 00000000..f4f5c6c6
--- /dev/null
+++ b/src/components/about-pages/network-tabs.astro
@@ -0,0 +1,35 @@
+---
+import clsx from "clsx";
+const links = [
+  {
+    title: "Network Capacity",
+    link: "/about/network-capacity/",
+  },
+  {
+    title: "Akash Providers",
+    link: "/about/providers/",
+  },
+];
+
+const pathname = Astro.url.pathname;
+---
+
+<div class="my-10 flex items-center justify-center md:my-16">
+  <div class="flex gap-1 rounded-lg bg-[#F4F4F5] p-1 dark:bg-background2">
+    {
+      links.map((link) => (
+        <a
+          href={link.link}
+          class={clsx(
+            " rounded-[4px] px-3 py-1.5 text-sm font-medium",
+            pathname === link.link
+              ? "bg-background text-foreground shadow-sm"
+              : "text-para",
+          )}
+        >
+          {link.title}
+        </a>
+      ))
+    }
+  </div>
+</div>
diff --git a/src/components/community-pages/side-nav.astro b/src/components/community-pages/side-nav.astro
index ad558cf1..78e17387 100644
--- a/src/components/community-pages/side-nav.astro
+++ b/src/components/community-pages/side-nav.astro
@@ -1,19 +1,24 @@
 ---
+import clsx from "clsx";
 interface Props {
   nav: {
     label: string;
     link: string;
   }[];
   link?: string;
+  subNav?: boolean;
 }
 
-const { nav, link } = Astro.props;
+const { nav, link, subNav } = Astro.props;
 
 const pathname = new URL(Astro.request.url).pathname;
 ---
 
 <div
-  class="sidebar-scroll sticky top-[120px] hidden h-screen overflow-y-auto md:col-span-4 md:block lg:col-span-3"
+  class={clsx(
+    "sidebar-scroll sticky top-[120px] hidden h-screen overflow-y-auto md:col-span-4 md:block lg:col-span-3",
+    subNav ? "top-[176px]" : "top-[120px]",
+  )}
 >
   <div class="flex flex-col gap-y-3">
     {
diff --git a/src/components/ecosystem-pages/providers-page/dashboard.tsx b/src/components/ecosystem-pages/providers-page/dashboard.tsx
index 38255858..ba24e332 100644
--- a/src/components/ecosystem-pages/providers-page/dashboard.tsx
+++ b/src/components/ecosystem-pages/providers-page/dashboard.tsx
@@ -2,14 +2,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { IntlProvider } from "react-intl";
 
-import { Search } from "lucide-react";
 import ProvidersCard from "./card";
-import FilterMobile from "./filter-mobile";
-import Nav from "./nav";
 import SortDropDown from "./sort-dropdown";
-import Tag from "./tag";
 import { useProviderList } from "./useProviderList";
-import { ArrowUpCircle } from "lucide-react";
 const queryClient = new QueryClient();
 
 export default function Index({ pathName, initialProviders }: any) {
@@ -142,145 +137,15 @@ function Layout({ pathName, initialProviders }: any) {
 
   return (
     <>
-      {/* Header */}
-      <div className="container ">
-        <div className="mt-6 flex flex-col justify-between gap-x-6 pb-6 md:mt-8 md:pb-8 lg:mt-10 lg:flex-row lg:border-b lg:pb-10">
-          {" "}
-          <Nav pathName={pathName} />
-          <div className="my-5 border-b  lg:hidden"></div>
-          <div className="flex w-full flex-1 items-center justify-between gap-x-[32px]  lg:flex-row-reverse lg:justify-start lg:gap-x-[36px]">
-            <FilterMobile
-              onIsFilteringActiveClick={onIsFilteringActiveClick}
-              isFilteringActive={isFilteringActive}
-              onIsFilteringAuditedClick={onIsFilteringAuditedClick}
-              isFilteringAudited={isFilteringAudited}
-              className=" lg:hidden"
-            />
-
-            <div
-              className={`relative
-               transition-all duration-300 ease-in-out
-                ${!searchIconVisible ? "w-56 pl-3" : "w-28 pl-9"}
-              inline-flex items-center justify-center gap-x-1.5  rounded-md border  border-border bg-background2   pr-3 text-xs font-medium leading-none text-sortText shadow-sm  hover:bg-gray-50 dark:hover:bg-darkGray  md:text-sm`}
-            >
-              {searchIconVisible && (
-                <button
-                  className="absolute left-3"
-                  onClick={() => ref?.current?.focus()}
-                >
-                  <Search className="text-sm text-foreground" size={16} />
-                </button>
-              )}
-
-              <input
-                ref={ref}
-                type="text"
-                className=" h-full w-full rounded-lg bg-transparent py-2.5 outline-none  placeholder:font-normal placeholder:text-foreground"
-                placeholder="Search"
-                onFocus={() => setSearchIconVisible(false)}
-                onBlur={() => setSearchIconVisible(true)}
-                value={search}
-                onChange={onSearchChange}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* <div className="container">
-        <div className="mt-10 hidden gap-x-5 overflow-x-auto md:flex lg:hidden">
-          <Tag
-            onClick={() =>
-              onIsFilteringActiveClick(isFilteringActive ? false : true)
-            }
-            isActive={isFilteringActive}
-          >
-            Active
-          </Tag>
-          <Tag
-            onClick={() =>
-              onIsFilteringAuditedClick(isFilteringAudited ? false : true)
-            }
-            isActive={isFilteringAudited}
-          >
-            Audited
-          </Tag>
-        </div>
-      </div>
-
-      <div className="container mt-10 flex gap-x-5 overflow-x-auto md:hidden">
-        <Tag
-          onClick={() =>
-            onIsFilteringActiveClick(isFilteringActive ? false : true)
-          }
-          isActive={isFilteringActive}
-        >
-          Active
-        </Tag>
-        <Tag
-          onClick={() =>
-            onIsFilteringAuditedClick(isFilteringAudited ? false : true)
-          }
-          isActive={isFilteringAudited}
-        >
-          Audited
-        </Tag>
-      </div> */}
-
       {isLoadingProviders ? (
-        <div className="container mt-10">loading...</div>
+        <div className="">loading...</div>
       ) : (
-        <div className="container mt-10 flex justify-between lg:gap-x-[20px] xl:gap-x-[48px]">
-          <div className="hidden w-[200px] flex-shrink-0 pt-5 lg:block">
-            <p className="text-sm font-medium leading-[20px] text-cardGray">
-              Filter By
-            </p>
-
-            <div className="border-b pb-2"></div>
-
-            <div className="mt-4 flex flex-col gap-y-4">
-              <p
-                onClick={() => {
-                  onIsFilteringActiveClick(true);
-                  onIsFilteringAuditedClick(false);
-                }}
-                className={`inline-flex cursor-pointer text-base font-medium  hover:text-primary ${
-                  isFilteringActive ? "text-primary" : "text-para"
-                }`}
-              >
-                Active
-              </p>
-              <p
-                onClick={() => {
-                  onIsFilteringAuditedClick(true);
-                  onIsFilteringActiveClick(false);
-                }}
-                className={`inline-flex cursor-pointer text-base font-medium  hover:text-primary ${
-                  isFilteringAudited ? "text-primary" : "text-para"
-                }`}
-              >
-                Audited
-              </p>
-            </div>
-            <div className="">
-              <div className="my-8 border-b pb-2" />
-              <p className="text-sm font-medium text-para">
-                Start Earning and join our community today!
-              </p>
-
-              <a href="/providers">
-                <button className="mt-3 rounded-lg border border-[#D1D5DB] bg-background2 px-4 py-2 text-center font-medium ">
-                  Become a Provider
-                </button>
-              </a>
-            </div>
-          </div>
-
+        <div className="  flex justify-between lg:gap-x-[20px] xl:gap-x-[48px]">
           <div className="w-full">
-            <div className="flex items-center justify-between">
-              <h3 className="text-[20px] font-bold leading-[28px] md:text-2lg md:leading-[48px]">
-                Providers
-              </h3>
+            <div className="flex flex-col  items-center justify-between gap-6 md:flex-row">
+              <h2 id="overview" className="text-base font-semibold md:text-xl">
+                List of Providers
+              </h2>
 
               <div className="flex flex-shrink-0 items-center gap-x-3 md:gap-x-3 lg:gap-x-9">
                 <SortDropDown
@@ -291,9 +156,11 @@ function Layout({ pathName, initialProviders }: any) {
               </div>
             </div>
 
-            {currentPageProviders.length === 0 && <p>No providers found</p>}
+            {currentPageProviders.length === 0 && (
+              <p className="py-6  text-center">No providers found</p>
+            )}
 
-            <div className="mt-4   grid w-full grid-cols-1 gap-5  sm:grid-cols-2    md:grid-cols-2 md:gap-5   lg:grid-cols-2  lg:gap-5  xl:grid-cols-3 ">
+            <div className="mt-4   grid w-full grid-cols-1 gap-5  sm:grid-cols-2    md:grid-cols-2 md:gap-5   lg:grid-cols-3  lg:gap-5  ">
               {currentPageProviders.map((provider: any) => {
                 return (
                   <ProvidersCard key={provider.owner} provider={provider} />
@@ -335,59 +202,3 @@ function Layout({ pathName, initialProviders }: any) {
     </>
   );
 }
-
-const SearchIcon = () => {
-  return (
-    <>
-      <div className="hidden md:block" id="searchIcon">
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M15.498 15.5L18.998 19"
-            stroke="#272540"
-            strokeWidth="1.17434"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          ></path>
-          <path
-            d="M5 11C5 14.3137 7.68629 17 11 17C12.6597 17 14.1621 16.3261 15.2483 15.237C16.3308 14.1517 17 12.654 17 11C17 7.68629 14.3137 5 11 5C7.68629 5 5 7.68629 5 11Z"
-            stroke="#272540"
-            strokeWidth="1.17434"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          ></path>
-        </svg>
-      </div>
-
-      <div className="block md:hidden" id="searchIcon">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10.334 10.333L12.6673 12.6663"
-            stroke="#272540"
-            strokeWidth="1.17434"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          ></path>
-          <path
-            d="M3.33398 7.33301C3.33398 9.54215 5.12485 11.333 7.33398 11.333C8.44047 11.333 9.44202 10.8837 10.1662 10.1577C10.8878 9.43411 11.334 8.43566 11.334 7.33301C11.334 5.12387 9.54312 3.33301 7.33398 3.33301C5.12485 3.33301 3.33398 5.12387 3.33398 7.33301Z"
-            stroke="#272540"
-            strokeWidth="1.17434"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          ></path>
-        </svg>
-      </div>
-    </>
-  );
-};
diff --git a/src/components/ecosystem-pages/search-dialog.tsx b/src/components/ecosystem-pages/search-dialog.tsx
index 895ae5c5..4610bf47 100644
--- a/src/components/ecosystem-pages/search-dialog.tsx
+++ b/src/components/ecosystem-pages/search-dialog.tsx
@@ -1,7 +1,6 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useEffect, useState } from "react";
 
-import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import { Loader2, Search } from "lucide-react";
 
 import Fuse from "fuse.js"; // Import the Fuse.js library
@@ -100,7 +99,7 @@ export default function SearchDialog({ currentPath }: { currentPath: string }) {
       </button>
 
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+        <Dialog as="div" className="relative z-50" onClose={closeModal}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -145,7 +144,7 @@ export default function SearchDialog({ currentPath }: { currentPath: string }) {
                       <Loader2 className="mr-2 h-6 w-6 animate-spin text-primary" />
                     </div>
                   ) : error ? (
-                    <div className="bg-primary/10 mt-6 rounded-lg px-6 py-4">
+                    <div className="mt-6 rounded-lg bg-primary/10 px-6 py-4">
                       <h3 className="text-lg font-bold text-primary">
                         Something Bad Happened
                       </h3>
diff --git a/src/components/ecosystem-pages/top-header.astro b/src/components/ecosystem-pages/top-header.astro
index 9016abf6..28195169 100644
--- a/src/components/ecosystem-pages/top-header.astro
+++ b/src/components/ecosystem-pages/top-header.astro
@@ -9,15 +9,18 @@ console.log(pathName);
 const { tags } = Astro.props;
 ---
 
-<h1 class="text-2xl font-bold md:block md:text-2lg lg:text-3lg">
-  Explore the Akash Ecosystem
-</h1>
-
+<div class="flex items-center justify-between">
+  <h1 class="text-2xl font-bold md:block md:text-2lg lg:text-3lg">
+    Explore the Akash Ecosystem
+  </h1>
+  <div class="hidden md:block">
+    <SearchDialog client:load currentPath={astroUrl.pathname} />
+  </div>
+</div>
 <div
   class="mt-6 flex flex-col justify-between gap-x-6 pb-6 md:mt-8 md:pb-8 lg:mt-10 lg:flex-row lg:border-b lg:pb-10"
 >
-  <EcosystemNavbar pathName={pathName} /><div class="my-5 border-b lg:hidden">
-  </div>
+  <div class="my-5 border-b lg:hidden"></div>
 
   <div class="flex items-center justify-between">
     <Categories
@@ -26,6 +29,8 @@ const { tags } = Astro.props;
       className=" md:hidden"
       page={pathName?.[2]}
     />
-    <SearchDialog client:load currentPath={astroUrl.pathname} />
+    <div class="block md:hidden">
+      <SearchDialog client:load currentPath={astroUrl.pathname} />
+    </div>
   </div>
 </div>
diff --git a/src/components/header/hamburger-menu-discloser-component.tsx b/src/components/header/hamburger-menu-discloser-component.tsx
index 00a5414e..84bbd3fa 100644
--- a/src/components/header/hamburger-menu-discloser-component.tsx
+++ b/src/components/header/hamburger-menu-discloser-component.tsx
@@ -1,5 +1,4 @@
 import { Disclosure, Transition } from "@headlessui/react";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { ArrowUpRight } from "lucide-react";
 
 interface IFsubCategories {
@@ -30,7 +29,7 @@ const HamburgerMenuDiscloserComponent = ({ item }: IFProps) => {
           </Disclosure.Button>
 
           <Transition
-            show={true}
+            show={open}
             enter="transition duration-100 ease-out"
             enterFrom="transform scale-95 opacity-0"
             enterTo="transform scale-100 opacity-100"
diff --git a/src/components/header/hamburger-menu.tsx b/src/components/header/hamburger-menu.tsx
index 934dfafb..5685f6be 100644
--- a/src/components/header/hamburger-menu.tsx
+++ b/src/components/header/hamburger-menu.tsx
@@ -1,3 +1,4 @@
+import DarkModeToggle from "@/components/dark-mode-toggle";
 import { cn } from "@/lib/utils";
 import { Disclosure, Transition } from "@headlessui/react";
 import {
@@ -9,29 +10,35 @@ import {
   XMarkIcon,
 } from "./icons";
 import { useLockBody } from "./use-lock-body";
-import DarkModeToggle from "@/components/dark-mode-toggle";
-
-import HamburgerMenuDiscloserComponent from "./hamburger-menu-discloser-component";
-import { Fragment, useEffect } from "react";
-import { ArrowUpRight } from "lucide-react";
 
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion-arrow";
+import clsx from "clsx";
+import { ArrowRightCircle, ChevronDown } from "lucide-react";
+import { Fragment } from "react";
+import {
+  communityItems,
+  developmentItems,
+  ecosystemNavItems,
+  networkItems,
+} from "./popovers/links";
 const navigation = [
   {
     name: "Network",
-    href: "/",
-    subCategories: [
-      { name: "About Akash", href: "/about/general-information/" },
-      { name: "Akash Stats", href: "https://stats.akash.network/" },
-      { name: "AKT Token", href: "/token" },
-    ],
+
+    subCategories: networkItems,
   },
 
   {
     name: "Development",
-    href: "/development/welcome/",
+    subCategories: developmentItems,
   },
-  { name: "Ecosystem", href: "/ecosystem/showcase/latest/" },
-  { name: "Community", href: "/community/akash-insiders/" },
+  { name: "Ecosystem", subCategories: ecosystemNavItems },
+  { name: "Community", subCategories: communityItems },
   { name: "Blog", href: "/blog" },
   { name: "Docs", href: "/docs" },
   { name: "Pricing & Earnings", href: "/pricing/gpus" },
@@ -80,6 +87,24 @@ export default function HamburgerMenu({
 
 const Panel = ({ currentPath, open }: { currentPath: string; open: any }) => {
   useLockBody(open);
+  const currentOpen = navigation.find((item) => {
+    if (item.subCategories) {
+      if (
+        item.subCategories.find(
+          (subItem) =>
+            subItem.link?.split("/")[1] === currentPath?.split("/")[1],
+        )
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  });
+
+  console.log(currentOpen);
 
   return (
     <Disclosure.Panel className="h-full lg:hidden">
@@ -106,30 +131,99 @@ const Panel = ({ currentPath, open }: { currentPath: string; open: any }) => {
             </div>
           </div>
 
-          <div className="flex flex-col gap-y-8">
-            {navigation.map((item) => (
-              <div key={item.name}>
-                {item.subCategories ? (
-                  <HamburgerMenuDiscloserComponent item={item} />
-                ) : (
-                  <Disclosure.Button
-                    as="a"
-                    href={item.href}
-                    className={cn(
-                      item.href.startsWith(currentPath as string) &&
-                        currentPath !== "/"
-                        ? "text-base font-medium text-foreground"
-                        : "inline-flex items-center text-base font-medium hover:font-semibold hover:text-foreground",
-                    )}
-                    // aria-current={item.current ? "page" : undefined}
-                  >
-                    {item.name}
-                    {/* {item.icon} */}
-                  </Disclosure.Button>
-                )}
-              </div>
-            ))}
-          </div>
+          <Accordion
+            type="single"
+            collapsible
+            className="w-full "
+            defaultValue={currentOpen?.name}
+          >
+            <div className="flex flex-col gap-4">
+              {navigation.map((item, index) => (
+                <div key={item.name}>
+                  {item.subCategories ? (
+                    <AccordionItem
+                      key={index}
+                      value={item.name}
+                      className="border-b-0 "
+                    >
+                      <AccordionTrigger
+                        notClose
+                        className="text-base  font-medium text-foreground"
+                      >
+                        <div className="flex items-center gap-2 text-lg font-medium">
+                          {item.name}
+                          <ChevronDown className="text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200 " />
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent className2="!pb-0">
+                        <div className="my-2.5 flex flex-col gap-2.5">
+                          {item.subCategories.map(
+                            (
+                              subItem: (typeof item.subCategories)[0] & {
+                                external?: boolean;
+                              },
+                              i,
+                            ) => (
+                              <a
+                                key={i}
+                                href={subItem.link}
+                                target={
+                                  subItem.link.startsWith("http")
+                                    ? "_blank"
+                                    : "_self"
+                                }
+                                className={clsx(
+                                  subItem?.external
+                                    ? "flex w-full items-center justify-center rounded-full bg-[#F2F2F2] p-3 text-base dark:bg-background2"
+                                    : "flex cursor-pointer items-center gap-2 p-2 text-base text-para     ",
+                                )}
+                              >
+                                {!subItem?.external &&
+                                  (subItem.icon ? (
+                                    <subItem.icon size={24} strokeWidth={1.5} />
+                                  ) : (
+                                    subItem.customIcon
+                                  ))}
+                                <h1
+                                  className={clsx(
+                                    "flex-1 whitespace-nowrap  font-medium text-foreground",
+                                    subItem?.external && "text-center",
+                                  )}
+                                >
+                                  {subItem.title}
+                                  {subItem.external && (
+                                    <ArrowRightCircle
+                                      className="ml-1 inline-block -rotate-45 stroke-[1.5px]"
+                                      size={16}
+                                    />
+                                  )}
+                                </h1>
+                              </a>
+                            ),
+                          )}
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+                  ) : (
+                    <Disclosure.Button
+                      as="a"
+                      href={item.href}
+                      className={cn(
+                        item.href.startsWith(currentPath as string) &&
+                          currentPath !== "/"
+                          ? "text-base font-medium text-foreground"
+                          : "inline-flex items-center text-lg font-medium hover:font-semibold hover:text-foreground",
+                      )}
+                      // aria-current={item.current ? "page" : undefined}
+                    >
+                      {item.name}
+                      {/* {item.icon} */}
+                    </Disclosure.Button>
+                  )}{" "}
+                </div>
+              ))}
+            </div>
+          </Accordion>
         </div>
 
         <div className="flex flex-col gap-y-6">
diff --git a/src/components/header/header.astro b/src/components/header/header.astro
index 729fa633..5ff90be3 100644
--- a/src/components/header/header.astro
+++ b/src/components/header/header.astro
@@ -1,19 +1,17 @@
 ---
 // Import required assets
 
-import SunIcon from "@/assets/icons/sun.svg";
-
 // Import required components
-import Logo from "@/components/ui/logo.astro";
 import NavLink from "@/components/header/nav-link.astro";
-import { Badge } from "@/components/ui/badge";
-import { Image } from "astro:assets";
-import HamburgerMenu from "./hamburger-menu";
-import PopOverNavItem from "./popover-nav-item";
+import Logo from "@/components/ui/logo.astro";
+import { getCollection } from "astro:content";
+import clsx from "clsx";
 import DarkModeToggle from "../dark-mode-toggle.astro";
-import ButtonLink from "../ui/button-link.astro";
-import { GithubIcon, TwitterIcon, DiscordIcon } from "./icons";
-
+import HamburgerMenu from "./hamburger-menu";
+import { DiscordIcon, GithubIcon, TwitterIcon } from "./icons";
+import PopOverCommunity, { SubNavbar } from "./popovers/popover-nav-community";
+import PopOverNavItemNetwork from "./popovers/popover-nav-item";
+import PopOverNavItemEcosystem from "./popovers/popover-nav-item-ecosystem";
 // Get current pathname
 const pathname = `/${Astro.url.pathname.split("/")[1]}`;
 
@@ -23,33 +21,43 @@ interface Props {
 
 const { disableSticky } = Astro.props;
 
-const networkItems = [
-  {
-    title: "About Akash",
-    description: "Discover the story behind Akash and how it works",
-    link: "/about/general-information/",
-  },
-  {
-    title: "Akash Stats",
-    description:
-      "Get insights into the latest statistics about the Akash Network",
-    link: "https://stats.akash.network/",
-  },
-  {
-    title: "AKT Token",
-    description: "Understand the role of the $AKT token in the Akash ecosystem",
-    link: "/token",
-  },
-];
+const visibilty = {
+  network: ["/about", "/token"],
+  community: ["/community"],
+  development: ["/development"],
+  ecosystem: ["/ecosystem"],
+};
+
+const pathnames = Object.values(visibilty).flat();
+
+const posts = (await getCollection("Blog"))
+  .filter((post) => {
+    // Filter out posts with archive set to true.
+    return post.data.archive !== true;
+  })
+  .sort((a, b) => {
+    const dateA = new Date(a.data.pubDate);
+    const dateB = new Date(b.data.pubDate);
+
+    // Sort in descending order (latest date first)
+    return dateB.getTime() - dateA.getTime();
+  });
 ---
 
 <header
-  class={`
-${disableSticky ? "" : "sticky top-0 z-[30]"}
- bg-white dark:bg-[#242424]`}
+  class={clsx(
+    "bg-white dark:bg-[#242424]",
+    disableSticky
+      ? ""
+      : pathnames.includes(pathname)
+        ? ""
+        : "top-0 sticky z-[30]",
+  )}
 >
   <nav
-    class="container mx-auto flex h-[56px] items-center justify-between space-x-2 md:h-[84px]"
+    class={clsx(
+      "container  mx-auto flex h-[56px] items-center justify-between space-x-2 md:h-[84px]",
+    )}
     id="page-top"
   >
     <!-- Logo for desktops -->
@@ -61,17 +69,14 @@ ${disableSticky ? "" : "sticky top-0 z-[30]"}
       <div
         class="mt-1 hidden lg:flex lg:w-full lg:justify-center lg:gap-x-[20px] xl:gap-x-[24px]"
       >
-        <PopOverNavItem client:load subItems={networkItems} />
+        <PopOverNavItemNetwork client:load />
+        <PopOverCommunity client:load type="community" />
+        <PopOverCommunity client:load type="development" />
 
-        <NavLink href="/development/welcome/" currentPath={pathname}>
-          Development
-        </NavLink>
-        <NavLink href="/community/akash-insiders/" currentPath={pathname}>
+        <!-- <NavLink href="/community/akash-insiders/" currentPath={pathname}>
           Community
-        </NavLink>
-        <NavLink href="/ecosystem/showcase/latest" currentPath={pathname}>
-          Ecosystem
-        </NavLink>
+        </NavLink> -->
+        <PopOverNavItemEcosystem client:load posts={posts} />
 
         <NavLink href="/blog/" currentPath={pathname}>Blog</NavLink>
         <NavLink href="/docs/" currentPath={pathname}>Docs</NavLink>
@@ -184,3 +189,34 @@ ${disableSticky ? "" : "sticky top-0 z-[30]"}
     </div>
   </nav>
 </header>
+<div
+  class={clsx(
+    "bg-white dark:bg-[#242424]",
+    disableSticky
+      ? "hidden"
+      : pathnames.includes(pathname)
+        ? "top-0 sticky z-[30]"
+        : "hidden",
+  )}
+>
+  {
+    visibilty.network.includes(pathname) && (
+      <SubNavbar pathname={Astro.url.pathname} client:load type="network" />
+    )
+  }
+  {
+    visibilty.community.includes(pathname) && (
+      <SubNavbar pathname={Astro.url.pathname} client:load type="community" />
+    )
+  }
+  {
+    visibilty.development.includes(pathname) && (
+      <SubNavbar pathname={Astro.url.pathname} client:load type="development" />
+    )
+  }
+  {
+    visibilty.ecosystem.includes(pathname) && (
+      <SubNavbar pathname={Astro.url.pathname} client:load type="ecosystem" />
+    )
+  }
+</div>
diff --git a/src/components/header/popover-nav-item.tsx b/src/components/header/popover-nav-item.tsx
deleted file mode 100644
index 2b0b0b3c..00000000
--- a/src/components/header/popover-nav-item.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
-  Dialog,
-  Disclosure,
-  Menu,
-  Popover,
-  Transition,
-} from "@headlessui/react";
-import { Fragment, useState } from "react";
-
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { ArrowUpRight } from "lucide-react";
-
-const PopOverNavItem = ({ subItems }: any) => {
-  console.log(subItems);
-
-  return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button className="inline-flex cursor-pointer items-center justify-center text-sm font-medium leading-normal hover:text-primary xl:text-sm ">
-          Network
-          <ChevronDownIcon
-            className="text-gra -mr-1 ml-1 h-4 w-4"
-            aria-hidden="true"
-          />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute left-0 z-10 mt-4 w-[304px] origin-top-right divide-y rounded-xl border  bg-background2 focus:outline-none">
-          <div className="space-y-4 px-6 py-6">
-            {subItems.map((item: any, i: any) => {
-              return (
-                <Menu.Item key={i}>
-                  {({ active }) => (
-                    <a
-                      href={item.link}
-                      target={item.link.startsWith("http") ? "_blank" : "_self"}
-                      className={`block  cursor-pointer p-2 font-semibold   ${
-                        active ? "" : ""
-                      } `}
-                    >
-                      <p className="flex items-center text-sm font-bold text-foreground ">
-                        {item.title}
-                        {item.link.startsWith("http") ? (
-                          <ArrowUpRight
-                            className="ml-1 inline-block"
-                            size={16}
-                          />
-                        ) : (
-                          ""
-                        )}
-                      </p>
-                      <p className="mt-1 text-sm font-normal text-para">
-                        {item.description}
-                      </p>
-                    </a>
-                  )}
-                </Menu.Item>
-              );
-            })}
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  );
-};
-
-export default PopOverNavItem;
diff --git a/src/components/header/popovers/links.tsx b/src/components/header/popovers/links.tsx
new file mode 100644
index 00000000..8ab23cae
--- /dev/null
+++ b/src/components/header/popovers/links.tsx
@@ -0,0 +1,408 @@
+import {
+  BadgeCheck,
+  BadgeHelp,
+  CalendarHeart,
+  Codesandbox,
+  FileStack,
+  GraduationCap,
+  HeartHandshake,
+} from "lucide-react";
+
+export const communityItems = [
+  {
+    icon: CalendarHeart,
+    title: "Events",
+
+    link: "/community/events/upcoming/",
+  },
+  {
+    icon: BadgeCheck,
+    title: "Akash Insiders",
+
+    link: "/community/akash-insiders/",
+  },
+  {
+    customIcon: (
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.1488 9.97163V4.11153C14.1488 3.22151 13.4273 2.5 12.5373 2.5V2.5C11.6473 2.5 10.9258 3.22151 10.9258 4.11153V8.94611"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M16.346 13.341L18.5217 6.08862C18.7755 5.24265 18.2886 4.35248 17.4394 4.10984V4.10984C16.5943 3.8684 15.7142 4.3609 15.4779 5.20743L14.1484 9.97149"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M7.61935 9.74985L8.67489 12.0913C9.03961 12.9003 8.68159 13.852 7.87404 14.22C7.06183 14.5901 6.10347 14.2296 5.73663 13.4159L4.68109 11.0745C4.31637 10.2654 4.67439 9.31376 5.48193 8.94574C6.29415 8.57559 7.25251 8.93614 7.61935 9.74985Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M11.7192 12.7615V12.7615C11.9239 12.194 11.8998 11.5692 11.6518 11.0192L10.5787 8.63874C10.2181 7.83892 9.27613 7.48454 8.4778 7.84836V7.84836C7.66469 8.21892 7.31885 9.18832 7.71382 9.98986L7.84946 10.2651"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M13.8566 18.1767L14.3487 17.1927C14.3976 17.0947 14.3461 16.9763 14.241 16.9454L10.6903 15.9011C9.97853 15.6918 9.51797 15.0038 9.59563 14.266V14.266C9.68372 13.4292 10.4284 12.8188 11.2662 12.8968L16.0542 13.3422C16.0542 13.3422 19.8632 13.9282 18.5447 17.7372C17.2262 21.5463 16.7867 22.8648 13.8566 22.8648C11.9521 22.8648 9.16855 22.8648 9.16855 22.8648H8.87555C6.52912 22.8648 4.62697 20.9627 4.62697 18.6163V18.6163L4.48047 10.4121"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+        />
+      </svg>
+    ),
+    title: "Community Contributions",
+
+    link: "/community/community-contributions/",
+  },
+  {
+    customIcon: (
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9 3.5H4C3.44772 3.5 3 3.94772 3 4.5V9.5C3 10.0523 3.44772 10.5 4 10.5H9C9.55228 10.5 10 10.0523 10 9.5V4.5C10 3.94772 9.55228 3.5 9 3.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M20 3.5H15C14.4477 3.5 14 3.94772 14 4.5V9.5C14 10.0523 14.4477 10.5 15 10.5H20C20.5523 10.5 21 10.0523 21 9.5V4.5C21 3.94772 20.5523 3.5 20 3.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M20 14.5H15C14.4477 14.5 14 14.9477 14 15.5V20.5C14 21.0523 14.4477 21.5 15 21.5H20C20.5523 21.5 21 21.0523 21 20.5V15.5C21 14.9477 20.5523 14.5 20 14.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M9 14.5H4C3.44772 14.5 3 14.9477 3 15.5V20.5C3 21.0523 3.44772 21.5 4 21.5H9C9.55228 21.5 10 21.0523 10 20.5V15.5C10 14.9477 9.55228 14.5 9 14.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <circle
+          cx="12"
+          cy="12.5"
+          r="7"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+      </svg>
+    ),
+    title: "Akash Validators",
+
+    link: "/community/akash-validators/",
+  },
+  {
+    title: "Swag Shop",
+    description: "A selection of Akash Network apparel and accessories",
+
+    link: "https://shop.akash.network/",
+    external: true,
+  },
+];
+
+export const developmentItems = [
+  {
+    icon: HeartHandshake,
+    title: "Get Involved",
+
+    link: "/development/welcome/",
+  },
+  {
+    customIcon: (
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 19.9516L12 13.3428M12 13.3428L12 3.49999M12 13.3428L3 19.9516"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M20.4375 17.2097L21 19.9516L18.1875 20.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M9.75 5.69354L12 3.49999L14.25 5.69354"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M5.8125 20.5L3 19.9516L3.5625 17.2097"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    ),
+    title: "Product Strategy",
+
+    link: "/development/product-strategy/",
+  },
+  {
+    customIcon: (
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 15C15.3137 15 18 12.3137 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9C6 12.3137 8.68629 15 12 15Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M16 22C19.3137 22 22 19.3137 22 16C22 12.6863 19.3137 10 16 10C12.6863 10 10 12.6863 10 16C10 19.3137 12.6863 22 16 22Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M8 22C11.3137 22 14 19.3137 14 16C14 12.6863 11.3137 10 8 10C4.68629 10 2 12.6863 2 16C2 19.3137 4.68629 22 8 22Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    ),
+    title: "Current Groups",
+
+    link: "/development/current-groups/",
+  },
+  {
+    customIcon: (
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M19 21.5H5C3.89543 21.5 3 20.6046 3 19.5V5.5C3 4.39543 3.89543 3.5 5 3.5H19C20.1046 3.5 21 4.39543 21 5.5V19.5C21 20.6046 20.1046 21.5 19 21.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M3 15.5H9.4C9.73137 15.5 10.0053 15.7783 10.1504 16.0762C10.3564 16.4991 10.8442 17 12 17C13.1558 17 13.6436 16.4991 13.8496 16.0762C13.9947 15.7783 14.2686 15.5 14.6 15.5H21"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path d="M3 7.5H21" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M3 11.5H21" stroke="currentColor" strokeWidth="1.5" />
+      </svg>
+    ),
+    title: "Funding Programs",
+
+    link: "/development/funding-program/",
+  },
+  {
+    title: "Product & Engineering Roadmap",
+    description:
+      "View all current technical efforts happening on the Akash Network",
+
+    link: "https://github.com/orgs/akash-network/projects/5",
+    external: true,
+  },
+];
+
+export const networkItems = [
+  {
+    icon: BadgeHelp,
+    title: "About Akash",
+    description: "Discover how Akash works",
+    link: "/about/general-information/",
+  },
+  {
+    icon: Codesandbox,
+    title: "Providers",
+    description: "Your customers' data will be safe and secure",
+    link: "/about/providers/",
+  },
+  {
+    customIcon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M18.09 13.63C19.0353 13.2776 19.8765 12.6925 20.5358 11.9288C21.195 11.1651 21.6511 10.2476 21.8617 9.26093C22.0724 8.2743 22.0309 7.25048 21.741 6.28415C21.4512 5.31782 20.9223 4.44018 20.2034 3.73239C19.4845 3.0246 18.5987 2.50951 17.628 2.23477C16.6572 1.96003 15.6329 1.9345 14.6497 2.16054C13.6665 2.38658 12.7561 2.8569 12.0028 3.528C11.2495 4.1991 10.6776 5.04931 10.34 6M14 16C14 12.6863 11.3137 10 8 10C4.68629 10 2 12.6863 2 16C2 19.3137 4.68629 22 8 22C11.3137 22 14 19.3137 14 16Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    ),
+    title: "AKT Token",
+    description: "Understand the role of AKT token",
+    link: "/token/",
+  },
+];
+
+export const ecosystemNavItems = [
+  {
+    icon: GraduationCap,
+    title: "Showcase",
+
+    link: "/ecosystem/showcase/latest/",
+  },
+  {
+    customIcon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13 21H4C2.89543 21 2 20.1046 2 19V5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V13"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M22 17.2798C22 17.8812 21.7625 18.4588 21.3383 18.8861C20.3619 19.8701 19.415 20.8961 18.4021 21.8443C18.17 22.0585 17.8017 22.0507 17.5795 21.8268L14.6615 18.8861C13.7795 17.9972 13.7795 16.5623 14.6615 15.6734C15.5522 14.7758 17.0032 14.7758 17.8938 15.6734L17.9999 15.7803L18.1059 15.6734C18.533 15.2429 19.1146 15 19.7221 15C20.3297 15 20.9113 15.2428 21.3383 15.6734C21.7625 16.1007 22 16.6784 22 17.2798Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M2 7L22 7"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M5 5.01L5.01 4.99889"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M8 5.01L8.01 4.99889"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M11 5.01L11.01 4.99889"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    ),
+    title: "Tools",
+
+    link: "/ecosystem/akash-tools/latest/",
+  },
+
+  {
+    customIcon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16.0614 10.4037L14 17L10 17L7.93865 10.4037C7.35085 8.52273 7.72417 6.47307 8.93738 4.92015L11.5272 1.6052C11.7674 1.29772 12.2326 1.29772 12.4728 1.6052L15.0626 4.92015C16.2758 6.47307 16.6491 8.52273 16.0614 10.4037Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M10 20C10 22 12 23 12 23C12 23 14 22 14 20"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M8.5 12.5C5 15 7 19 7 19L10 17"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15.9316 12.5C19.4316 15 17.4316 19 17.4316 19L14.4316 17"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M12 11C10.8954 11 10 10.1046 10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9C14 10.1046 13.1046 11 12 11Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    ),
+    title: "Deployed on Akash",
+
+    link: "/ecosystem/deployed-on-akash/latest/",
+  },
+  {
+    icon: FileStack,
+    title: "Case Studies",
+
+    link: "/blog/case-studies/1",
+    external: true,
+  },
+];
diff --git a/src/components/header/popovers/popover-nav-community.tsx b/src/components/header/popovers/popover-nav-community.tsx
new file mode 100644
index 00000000..e1c8ef1c
--- /dev/null
+++ b/src/components/header/popovers/popover-nav-community.tsx
@@ -0,0 +1,184 @@
+import { Menu, Transition } from "@headlessui/react";
+import React, { Fragment, useEffect, useState } from "react";
+
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
+import { ArrowRightCircle } from "lucide-react";
+import {
+  communityItems,
+  developmentItems,
+  ecosystemNavItems,
+  networkItems,
+} from "./links";
+
+const PopOverSmall = ({ type }: { type: "community" | "development" }) => {
+  const items = type === "community" ? communityItems : developmentItems;
+  const external = items.find((item) => item.external);
+  const [open2, setOpen] = useState(false);
+
+  return (
+    <Menu
+      as="div"
+      className="relative inline-block text-left"
+      onMouseLeave={() => setOpen(false)}
+    >
+      <div>
+        <Menu.Button
+          onMouseEnter={() => {
+            setOpen(true);
+          }}
+          className="inline-flex cursor-pointer items-center justify-center text-sm font-medium capitalize leading-normal hover:text-primary xl:text-sm "
+        >
+          {type}
+          <ChevronDownIcon
+            className="text-gra -mr-1 ml-1 h-4 w-4"
+            aria-hidden="true"
+          />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        show={open2}
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute left-1/2 z-[35] w-[303px]   origin-top-right -translate-x-1/2     pt-4  focus:outline-none">
+          <div className="flex flex-col overflow-hidden  rounded-3xl border  bg-background2 shadow-lg">
+            <div className="  p-5 ">
+              {items
+                .filter((item) => !item.external)
+                .map((item, i: any) => {
+                  return (
+                    <Menu.Item key={i}>
+                      {({ active }) => (
+                        <a
+                          href={item.link}
+                          target={
+                            item.link.startsWith("http") ? "_blank" : "_self"
+                          }
+                          className={`dark:hover:bg- group flex  cursor-pointer items-center gap-6 rounded-lg px-4 py-3 transition-all hover:bg-gray-50 dark:hover:bg-black/10    ${
+                            active ? "" : ""
+                          } `}
+                        >
+                          <div className="text-[#9CA3AF] transition-all group-hover:text-primary dark:text-para">
+                            {item.icon ? (
+                              <item.icon size={24} strokeWidth={1.5} />
+                            ) : (
+                              item.customIcon
+                            )}
+                          </div>
+                          <div className="font-semibold">
+                            <p className="flex items-center text-sm font-bold text-foreground ">
+                              {item.title}
+                              {item.link.startsWith("http") ? (
+                                <ArrowRightCircle
+                                  className="ml-1 inline-block"
+                                  size={16}
+                                />
+                              ) : (
+                                ""
+                              )}
+                            </p>
+                          </div>
+                        </a>
+                      )}
+                    </Menu.Item>
+                  );
+                })}
+            </div>
+            <a
+              href={external?.link}
+              target="_blank"
+              className="border-t bg-gray-50 px-7 py-3 font-semibold transition-all hover:bg-gray-100 dark:bg-background hover:dark:bg-darkGray"
+            >
+              <p className="inline-flex items-center text-sm font-bold text-foreground ">
+                {external?.title}
+                <ArrowRightCircle
+                  className="ml-1 inline-block -rotate-45 stroke-[1.5px]"
+                  size={16}
+                />
+              </p>
+              <p className="mt-1 text-sm font-normal text-para">
+                {external?.description}
+              </p>
+            </a>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+export default PopOverSmall;
+
+export const SubNavbar = ({
+  pathname,
+  type,
+}: {
+  pathname: string;
+  type: "community" | "development" | "network" | "ecosystem";
+}) => {
+  const items =
+    type === "community"
+      ? communityItems
+      : type === "development"
+        ? developmentItems
+        : type === "ecosystem"
+          ? ecosystemNavItems
+          : networkItems.map((item) => ({ ...item, external: false }));
+
+  const external = items.find((item) => item?.external);
+  return (
+    <div className=" border-y">
+      <div className="container flex items-center gap-2 overflow-x-auto  md:justify-between">
+        <div className="flex">
+          {items
+            .filter((item) => !item?.external)
+            .map((item, i: any) => {
+              return (
+                <a
+                  key={i}
+                  href={item.link}
+                  target={item.link.startsWith("http") ? "_blank" : "_self"}
+                  className={clsx(
+                    "flex cursor-pointer items-center gap-2  border-b-2   p-4 text-para    ",
+                    pathname === item.link ||
+                      pathname?.split("/")[2] === item.link?.split("/")[2]
+                      ? " border-foreground "
+                      : "border-transparent",
+                  )}
+                >
+                  {item.icon ? (
+                    <item.icon size={24} strokeWidth={1.5} />
+                  ) : (
+                    item.customIcon
+                  )}
+                  <h1 className="flex-1 whitespace-nowrap text-sm font-medium text-foreground">
+                    {item.title}
+                  </h1>
+                </a>
+              );
+            })}
+        </div>
+        {external && (
+          <a
+            href={external.link}
+            target="_blank"
+            className=" flex items-center whitespace-nowrap rounded-full  border bg-background px-3 py-1.5 text-sm font-semibold  "
+          >
+            {external.title}
+            <ArrowRightCircle
+              className="ml-1 inline-block -rotate-45 stroke-[1.5px]"
+              size={16}
+            />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/header/popovers/popover-nav-item-ecosystem.tsx b/src/components/header/popovers/popover-nav-item-ecosystem.tsx
new file mode 100644
index 00000000..de7e9cf1
--- /dev/null
+++ b/src/components/header/popovers/popover-nav-item-ecosystem.tsx
@@ -0,0 +1,142 @@
+import { Menu, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import type { CollectionEntry } from "astro:content";
+import { ArrowRightCircle } from "lucide-react";
+import { ecosystemNavItems } from "./links";
+
+const PopOverNavItemEcosystem = ({
+  posts,
+}: {
+  posts: CollectionEntry<"Blog">[];
+}) => {
+  console.log(posts);
+  const [open2, setOpen] = useState(false);
+  return (
+    <Menu
+      onMouseLeave={() => setOpen(false)}
+      as="div"
+      className="relative inline-block text-left"
+    >
+      <div>
+        <Menu.Button
+          onMouseEnter={() => {
+            setOpen(true);
+          }}
+          className="inline-flex cursor-pointer items-center justify-center text-sm font-medium leading-normal hover:text-primary xl:text-sm "
+        >
+          Ecosystem
+          <ChevronDownIcon
+            className="text-gra -mr-1 ml-1 h-4 w-4"
+            aria-hidden="true"
+          />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        show={open2}
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute  left-1/2 z-[35] w-[593px]  origin-top-right translate-x-[-40%]  pt-4       focus:outline-none 2xl:-translate-x-1/2">
+          <div className="flex flex-col overflow-hidden rounded-3xl border bg-background2 shadow-lg">
+            <div className="flex gap-2.5 p-5 ">
+              <div className="flex w-full flex-1 flex-col">
+                {ecosystemNavItems
+                  .filter((item) => !item.external)
+                  .map((item, i: any) => {
+                    return (
+                      <Menu.Item key={i}>
+                        {({ active }) => (
+                          <a
+                            href={item.link}
+                            target={
+                              item.link.startsWith("http") ? "_blank" : "_self"
+                            }
+                            className={`group flex cursor-pointer items-center gap-6 rounded-lg px-4 py-3  transition-all hover:bg-gray-50 dark:hover:bg-black/10    ${
+                              active ? "" : ""
+                            } `}
+                          >
+                            <div className="text-[#9CA3AF] transition-all group-hover:text-primary dark:text-para ">
+                              {item.icon ? (
+                                <item.icon size={24} strokeWidth={1.5} />
+                              ) : (
+                                item.customIcon
+                              )}
+                            </div>
+                            <div className="font-semibold">
+                              <p className="flex items-center text-sm font-bold text-foreground ">
+                                {item.title}
+                                {item.link.startsWith("http") ? (
+                                  <ArrowRightCircle
+                                    className="ml-1 inline-block"
+                                    size={16}
+                                  />
+                                ) : (
+                                  ""
+                                )}
+                              </p>
+                            </div>
+                          </a>
+                        )}
+                      </Menu.Item>
+                    );
+                  })}
+              </div>
+
+              <div className="flex w-full flex-1 flex-col border-l pl-2.5">
+                <a
+                  href="/blog/case-studies/1"
+                  className="flex items-center gap-1.5 px-8 py-1.5 text-sm font-medium text-[#939393] transition-all hover:text-foreground dark:text-para"
+                >
+                  Case Studies{" "}
+                  <svg
+                    width="5"
+                    height="8"
+                    viewBox="0 0 5 8"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M0.181065 7.8262C0.0706915 7.71148 0.0103791 7.55763 0.0133823 7.39847C0.0163854 7.2393 0.0824583 7.08784 0.197081 6.97736L3.35061 4.00641L0.197081 1.03546C0.137546 0.981454 0.0894565 0.91605 0.0556622 0.843121C0.021868 0.770192 0.00305651 0.691221 0.000342236 0.610888C-0.00237204 0.530555 0.011066 0.450494 0.0398605 0.37545C0.0686551 0.300406 0.11222 0.231906 0.167974 0.174007C0.223728 0.116109 0.290537 0.0699911 0.364441 0.0383859C0.438345 0.00678061 0.517842 -0.00966837 0.59822 -0.00998595C0.678598 -0.0103035 0.758222 0.00551602 0.832374 0.0365347C0.906526 0.067554 0.973698 0.113142 1.02991 0.170598L4.63349 3.57398C4.69162 3.63 4.73785 3.69717 4.76943 3.77147C4.80101 3.84577 4.81729 3.92568 4.81729 4.00641C4.81729 4.08714 4.80101 4.16704 4.76943 4.24134C4.73785 4.31564 4.69162 4.38281 4.63349 4.43884L1.02991 7.84222C0.915188 7.95259 0.761339 8.01291 0.602172 8.0099C0.443004 8.0069 0.291541 7.94083 0.181065 7.8262Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </a>
+                {posts
+                  ?.filter(({ data }) => data.tags.includes("Case Studies"))
+                  ?.slice(0, 2)
+                  ?.map(({ data, slug }, i: any) => {
+                    return (
+                      <a
+                        key={i}
+                        href={`/blog/${slug}`}
+                        className="flex  cursor-pointer flex-col gap-0.5 rounded-lg px-8 py-1.5  text-sm transition-all hover:bg-gray-50 dark:hover:bg-black/10    "
+                      >
+                        <h1 className="line-clamp-1 font-medium ">
+                          {data.title}
+                        </h1>
+                        <p className="line-clamp-1 text-para">
+                          {data.description}
+                        </p>
+                      </a>
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+export default PopOverNavItemEcosystem;
diff --git a/src/components/header/popovers/popover-nav-item.tsx b/src/components/header/popovers/popover-nav-item.tsx
new file mode 100644
index 00000000..26d0d6f7
--- /dev/null
+++ b/src/components/header/popovers/popover-nav-item.tsx
@@ -0,0 +1,111 @@
+import { Menu, Transition } from "@headlessui/react";
+import React, { Fragment, useEffect, useState } from "react";
+
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { ArrowRightCircle } from "lucide-react";
+import { networkItems } from "./links";
+import { useLockBody } from "../use-lock-body";
+
+const PopOverNavItemNetwork = () => {
+  const [open2, setOpen] = useState(false);
+
+  return (
+    <Menu
+      onMouseLeave={() => setOpen(false)}
+      as="div"
+      className="relative inline-block text-left"
+    >
+      <div>
+        <Menu.Button
+          onMouseEnter={() => {
+            setOpen(true);
+          }}
+          className="inline-flex cursor-pointer items-center justify-center text-sm font-medium leading-normal hover:text-primary xl:text-sm "
+        >
+          Network
+          <ChevronDownIcon
+            className="text-gra -mr-1 ml-1 h-4 w-4"
+            aria-hidden="true"
+          />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        show={open2}
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute left-1/2 z-[35] w-[456px]  origin-top-right translate-x-[-40%]    pt-4  focus:outline-none 2xl:-translate-x-1/2">
+          <div className="flex flex-col overflow-hidden rounded-3xl  border bg-background2  shadow-lg">
+            <div className="p-5">
+              {networkItems.map((item, i: any) => {
+                return (
+                  <Menu.Item key={i}>
+                    {({ active }) => (
+                      <a
+                        href={item.link}
+                        target={
+                          item.link.startsWith("http") ? "_blank" : "_self"
+                        }
+                        className={`group flex cursor-pointer  items-center gap-6 px-4 py-5 transition-all hover:rounded-lg hover:bg-gray-50 dark:hover:bg-black/10   ${
+                          active ? "" : ""
+                        } `}
+                      >
+                        <div className="rounded-lg bg-background p-2.5 text-para transition-all group-hover:bg-background2 group-hover:text-primary">
+                          {item.icon ? (
+                            <item.icon size={24} />
+                          ) : (
+                            item.customIcon
+                          )}
+                        </div>
+                        <div className="font-semibold">
+                          <p className="flex items-center text-sm font-bold text-foreground ">
+                            {item.title}
+                            {item.link.startsWith("http") ? (
+                              <ArrowRightCircle
+                                className="ml-1 inline-block"
+                                size={16}
+                              />
+                            ) : (
+                              ""
+                            )}
+                          </p>
+                          <p className="mt-1 text-sm font-normal text-para">
+                            {item.description}
+                          </p>
+                        </div>
+                      </a>
+                    )}
+                  </Menu.Item>
+                );
+              })}
+            </div>
+            <a
+              href="https://stats.akash.network/"
+              target="_blank"
+              className="border-t bg-gray-50 px-8 py-4 font-semibold transition-all hover:bg-gray-100 dark:bg-background hover:dark:bg-darkGray"
+            >
+              <p className="flex items-center text-sm font-bold text-foreground ">
+                Akash Stats
+                <ArrowRightCircle
+                  className="ml-1 inline-block -rotate-45 stroke-[1.5px]"
+                  size={16}
+                />
+              </p>
+              <p className="mt-1 text-sm font-normal text-para">
+                Insights into the latest statistics about the Akash Network
+              </p>
+            </a>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+export default PopOverNavItemNetwork;
diff --git a/src/components/mdx-cards/community-hero.astro b/src/components/mdx-cards/community-hero.astro
index b3166f9d..8ee64f37 100644
--- a/src/components/mdx-cards/community-hero.astro
+++ b/src/components/mdx-cards/community-hero.astro
@@ -7,11 +7,9 @@ const { image, title, description, buttonLabel, buttonLink, darkImage } =
 ---
 
 <div
-  class="not-prose mt-10 flex flex-col-reverse items-start justify-between gap-x-10 md:-mt-16 lg:flex-row"
+  class="not-prose flex flex-col-reverse items-start justify-between gap-x-10 gap-y-6 lg:flex-row"
 >
-  <div
-    class="gap mt-10 flex w-full flex-1 flex-col gap-y-4 lg:mt-0 lg:gap-y-10"
-  >
+  <div class="gap flex w-full flex-1 flex-col gap-y-4 lg:gap-y-10">
     <h1 class="text-2lg font-bold leading-[40px] md:text-3lg md:leading-[48px]">
       {title}
     </h1>
diff --git a/src/components/providersandincentives/Map.tsx b/src/components/providersandincentives/Map.tsx
index ff559e34..8b98ace2 100644
--- a/src/components/providersandincentives/Map.tsx
+++ b/src/components/providersandincentives/Map.tsx
@@ -1,12 +1,10 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Chart } from "react-google-charts";
-import React from "react";
 import {
   ComposableMap,
   Geographies,
   Geography,
   Marker,
-  ZoomableGroup,
 } from "react-simple-maps";
 
 import {
@@ -79,7 +77,7 @@ const PieCharts = ({ initialData }: { initialData: any }) => {
   console.log(memoryData, "memoryData", gpuData, storageData);
 
   return (
-    <div className="mt-10 grid grid-cols-2 gap-4 md:mt-20 md:grid-cols-2 lg:grid-cols-4">
+    <div className="grid grid-cols-2 gap-4  md:grid-cols-2 lg:grid-cols-4">
       <CustomChart title={"CPU"} data={cpuData} ceil sub={"CPU"} />
       <CustomChart title={"GPU"} data={gpuData} ceil sub={"GPU"} />
       <CustomChart title={"Memory"} data={memoryData} sub={"TB"} />
diff --git a/src/components/sub-items-sidebar.astro b/src/components/sub-items-sidebar.astro
index 42efed7c..8a8b8e0c 100644
--- a/src/components/sub-items-sidebar.astro
+++ b/src/components/sub-items-sidebar.astro
@@ -1,11 +1,15 @@
 ---
+import clsx from "clsx";
 const pathname = new URL(Astro.request.url).pathname;
 
-const { nav, link } = Astro.props;
+const { nav, link, subNav } = Astro.props;
 ---
 
 <div
-  class="sidebar-scroll sticky top-[120px] hidden h-screen overflow-y-auto md:col-span-4 md:block lg:col-span-3"
+  class={clsx(
+    "sidebar-scroll sticky  hidden h-screen overflow-y-auto md:col-span-4 md:block lg:col-span-3",
+    subNav ? "top-[176px]" : "top-[120px]",
+  )}
 >
   <div class="flex flex-col gap-y-3">
     {
diff --git a/src/components/ui/accordion-arrow.tsx b/src/components/ui/accordion-arrow.tsx
index 4c737427..106320e1 100644
--- a/src/components/ui/accordion-arrow.tsx
+++ b/src/components/ui/accordion-arrow.tsx
@@ -2,6 +2,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
 
+import clsx from "clsx";
 import { cn } from "../../lib/utils";
 
 const Accordion = AccordionPrimitive.Root;
@@ -20,8 +21,10 @@ AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    notClose?: boolean;
+  }
+>(({ className, notClose, children, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
@@ -32,7 +35,9 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200 " />
+      {!notClose && (
+        <ChevronDown className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200 " />
+      )}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -40,8 +45,10 @@ AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
+    className2?: string;
+  }
+>(({ className, className2, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
@@ -50,7 +57,7 @@ const AccordionContent = React.forwardRef<
     )}
     {...props}
   >
-    <div className="pb-4 pt-0">{children}</div>
+    <div className={clsx("pb-4 pt-0", className2)}>{children}</div>
   </AccordionPrimitive.Content>
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
diff --git a/src/content/About_Page/providers/index.mdx b/src/content/About_Page/providers/index.mdx
index 7f11778f..e09c38f7 100644
--- a/src/content/About_Page/providers/index.mdx
+++ b/src/content/About_Page/providers/index.mdx
@@ -5,18 +5,6 @@ description: Explore the journey of becoming an Akash Network cloud provider, fr
 pubDate: "2020-01-19"
 
 
-# import Capacity from './assets/capacity.astro'
-
-# <Capacity />
-
-
-# #### 60 Active Providers
-
-# import Map from './assets/map.astro'
-
-# <Map />
-
-# <br/>
 ---
 
 
@@ -24,18 +12,18 @@ pubDate: "2020-01-19"
 
 Explore the journey of becoming an Akash Network cloud provider, from preparing your infrastructure to managing leases on the Supercloud platform. Follow these six stages to offer your Kubernetes clusters and join the Akash ecosystem.
 
-import Illustration from './assets/_illustration.astro'
+import Illustration from './assets/_illustration.astro';
 
 <Illustration />
 
 ---
 
 import Card from "../../../components/mdx-cards/card.astro";
-import GithubIcon from "./assets/github-icon.svg";
-import image1 from "./assets/card-illustration.svg";
-import image2 from "./assets/card-illustration2.svg";
 import image2Dark from "./assets/card-illustration-2-dark.svg";
 import image1Dark from "./assets/card-illustration-dark.svg";
+import image1 from "./assets/card-illustration.svg";
+import image2 from "./assets/card-illustration2.svg";
+import GithubIcon from "./assets/github-icon.svg";
 
 <Card
   card={{
diff --git a/src/content/Blog/akash-network-and-solve-care-bring-true-patient-data-ownership-to-the-healthcare-industry/index.md b/src/content/Blog/akash-network-and-solve-care-bring-true-patient-data-ownership-to-the-healthcare-industry/index.md
index 17ebd747..80df77f1 100644
--- a/src/content/Blog/akash-network-and-solve-care-bring-true-patient-data-ownership-to-the-healthcare-industry/index.md
+++ b/src/content/Blog/akash-network-and-solve-care-bring-true-patient-data-ownership-to-the-healthcare-industry/index.md
@@ -8,6 +8,7 @@ categories:
   - Updates
 tags:
   - Partners
+  - Case Studies
 contributors:
   - Zach Horn
 bannerImage: ./solve-care-akash.png
diff --git a/src/content/Blog/brev-dev-leverages-akash-networks-permissionless-gpu-infrastructure-to-seamlessly-scale/index.md b/src/content/Blog/brev-dev-leverages-akash-networks-permissionless-gpu-infrastructure-to-seamlessly-scale/index.md
index 14003647..5356cd48 100644
--- a/src/content/Blog/brev-dev-leverages-akash-networks-permissionless-gpu-infrastructure-to-seamlessly-scale/index.md
+++ b/src/content/Blog/brev-dev-leverages-akash-networks-permissionless-gpu-infrastructure-to-seamlessly-scale/index.md
@@ -8,10 +8,12 @@ categories:
   - Updates
 tags:
   - Updates
+  - Case Studies
 contributors:
   - Zach Horn
 bannerImage: ./brev-akash.png
 ---
+
 [Brev.dev](https://brev.dev/), a platform that enables easy setup of Jupyter notebooks for AI development, has announced its integration with Akash Network, the premier decentralized cloud marketplace. This integration will allow Brev to scale its platform with permissionless access to the most in-demand NVIDIA GPU models provided by the Akash Supercloud.
 
 Brev has established itself as the easiest way for AI developers to get up and running with GPUS in the cloud and describes itself as “the missing Google Colab pro tier.” Its user-friendly interface provisions all the necessary dependencies for working with the leading open-source AI models, including CUDA, Python, and Jupyter Lab, in an easy, 1-click deployment. Brev.dev empowers developers to iterate their fine-tuning and inference workflows rapidly on best-in-class AI models including Mistral-7B, Llama 2 & 3, and many more.
@@ -22,7 +24,7 @@ The integration between Brev.dev and Akash Network brings together the best of b
 
 **The key benefits of Brev’s integration with Akash include:**
 
-1. Permissionless Access to GPUs: With Akash, Brev can access a wide range of GPUs, giving developers even more options when creating new deployments. 
+1. Permissionless Access to GPUs: With Akash, Brev can access a wide range of GPUs, giving developers even more options when creating new deployments.
 
 2. Supercloud Scale: Akash is an open-source and permissionless compute marketplace, enabling Brev to scale its platform by tapping into Akash’s supply of in-demand NVIDIA GPUs.
 
@@ -31,4 +33,3 @@ The integration between Brev.dev and Akash Network brings together the best of b
 Developers gain access to a globally distributed network of computing resources and competitive pricing by deploying applications on Akash GPUs via Brev. This ensures high availability, scalability, and resilience for their applications. Moreover, Akash's decentralized nature will provide Brev with enhanced flexibility in offering deployment configurations to developers, as the network comprises a large number of independent providers distributed around the world, with different price points and resource types.
 
 This integration will significantly increase Akash’s utilization while providing Brev with the necessary compute to scale. In addition, this is an excellent proof point of the adoption of the decentralized cloud, which will ultimately simplify the workflow of developing AI applications and fine-tuning the leading open-source AI models while making this workflow widely available and accessible to developers of all skill levels. Visit [Brev.dev](https://brev.dev/) today to get started with your first deployment on Akash GPUs.
-
diff --git a/src/content/Blog/decentralized-ai-model-training-on-akash-with-flockio/index.md b/src/content/Blog/decentralized-ai-model-training-on-akash-with-flockio/index.md
index 250c7dfc..d596f208 100644
--- a/src/content/Blog/decentralized-ai-model-training-on-akash-with-flockio/index.md
+++ b/src/content/Blog/decentralized-ai-model-training-on-akash-with-flockio/index.md
@@ -14,6 +14,7 @@ categories:
 
 tags:
   - Insights
+  - Case Studies
 
 contributors:
   - Zach Horn
diff --git a/src/content/Blog/distributed-machine-learning-on-akash-network-with-ray/index.md b/src/content/Blog/distributed-machine-learning-on-akash-network-with-ray/index.md
index 94385958..da82d8c7 100644
--- a/src/content/Blog/distributed-machine-learning-on-akash-network-with-ray/index.md
+++ b/src/content/Blog/distributed-machine-learning-on-akash-network-with-ray/index.md
@@ -8,6 +8,7 @@ categories:
   - Insights
 tags:
   - Insights
+  - Case Studies
 contributors:
   - Anil Murty
 
diff --git a/src/content/Blog/foundation-ai-model-training-on-akash/index.md b/src/content/Blog/foundation-ai-model-training-on-akash/index.md
index c0dcb9d0..d22d571c 100644
--- a/src/content/Blog/foundation-ai-model-training-on-akash/index.md
+++ b/src/content/Blog/foundation-ai-model-training-on-akash/index.md
@@ -10,23 +10,28 @@ categories:
 tags:
   - Insights
   - Updates
+  - Case Studies
 contributors:
   - Anil Murty
 bannerImage: ./foundation-ai-model-akash-6.png
 ---
+
 [Anil Murty](https://twitter.com/_Anil_Murty_) & [Logan Cerkovnik](https://www.linkedin.com/in/logancerkovnik/)
 
 Towards the end of 2023, Overclock Labs (core team behind Akash Network) and ThumperAI (generative AI startup) decided to embark on a mission to train a foundation model on Akash GPUs. This post delves into the why and how of the training exercise and also talks about the outcomes and next steps.
 
-## Why Train a Foundation Model? 
-Generative AI Foundation model training is one of the most important and challenging jobs for cloud compute platforms due to the cost, hardware requirements and software complexity.  Most decentralized compute marketplaces today are unable to meet these requirements for AI startups and so we thought it would be a great way to set a high bar by attempting to do so on Akash Network.
+## Why Train a Foundation Model?
+
+Generative AI Foundation model training is one of the most important and challenging jobs for cloud compute platforms due to the cost, hardware requirements and software complexity. Most decentralized compute marketplaces today are unable to meet these requirements for AI startups and so we thought it would be a great way to set a high bar by attempting to do so on Akash Network.
 
 Besides the above common/overarching goal, the two teams (Overclock Labs and ThumperAI) had the following individual goals.
 
 ## ThumperAI’s Goals:
+
 ThumperAI is building [Lora Trainer](https://loratrainer.com/) - a service that makes it easy for AI developers to use LoRA techniques to fine-tune foundation models. So, offering their own foundation model would add credibility to their mission. And success with this would potentially lead to them following up by running the LoraTrainer service on Akash as well (which currently runs on a centralized cloud provider).
 
 ## Akash Network and Overclock Labs’ Goals:
+
 - Demonstrating that AI model training can be conducted on Akash Network's decentralized cloud platform, thereby attracting AI and ML developers (web3 and web2) to Akash Network.
 - Positioning GPU providers for success (by generating demand).
 - Rounding out AI use cases, by adding model training (Inference and fine tuning had already been demonstrated).
@@ -35,53 +40,60 @@ ThumperAI is building [Lora Trainer](https://loratrainer.com/) - a service that
 - Demonstrating how to deploy and run Ray Clusters on Akash Network.
 
 ## Decisions & Tradeoffs
+
 As with any significant project, we had to make a number of decisions and tradeoffs before we embarked on the mission. Here’s a quick rundown of the key ones.
 
 ![Thumper Model Training](./model-training-flow.png)
 
 ## Model Category Choice
 
-There are obviously several categories of models that we could choose from (the category list from HuggingFace on the right here provides a good reference). 
+There are obviously several categories of models that we could choose from (the category list from HuggingFace on the right here provides a good reference).
 
 This was our thought process in arriving at a category:
 
 1. Arguably the two categories of models that have garnered most mainstream media attention are Large Language Models (or LLMs) and Image Generation Models. This is hugely attributable to the success of companies like OpenAI, StabilityAI and Midjourney to name a few.
-2. Image generation models tend to be cheaper to train that large-language models because they are relatively  often much smaller in terms of number of parameters, oftentime use convolutional layers instead of transformers throughout the model, and tend to train faster than llms. 
+2. Image generation models tend to be cheaper to train that large-language models because they are relatively often much smaller in terms of number of parameters, oftentime use convolutional layers instead of transformers throughout the model, and tend to train faster than llms.
 3. There have been [several articles published](https://www.theverge.com/2023/1/17/23558516/ai-art-copyright-stable-diffusion-getty-images-lawsuit) about copyright infringement lawsuits made against image generation models that were trained on proprietary datasets like Getty Images. Having an AI model that did not have these limitations would be a great thing
 
-On the 3rd point specifically, we thought it would be a good experiment to try to train an image generation model using a copyright free image data set like [creative commons](https://creativecommons.org/public-domain/cc0/) and so that is what we decided to pursue. 
+On the 3rd point specifically, we thought it would be a good experiment to try to train an image generation model using a copyright free image data set like [creative commons](https://creativecommons.org/public-domain/cc0/) and so that is what we decided to pursue.
 
 ![HuggingFace Models](./huggingface-model-overview.png)
 
 ## Base Model Choice
+
 Once we decided on working with an Image generation model, the next decision was which specific model to work with. The 3 most popular ImageGen models at the time (arguably even now) were [Stable Diffusion](https://stability.ai/stable-image), Midjourney and DALL-E. Stable Diffusion was an easy choice because it is [open source](https://github.com/Stability-AI/stablediffusion) while the others aren’t, so initially that was what we had decided to go with and that was what was written in the [proposal](https://github.com/orgs/akash-network/discussions/300) submitted to the Akash community for discussion. We chose to use Stable Diffusion 1.5 in order to meet budget constraints outlined in the proposal.
 
-As we got closer to starting the actual training exercise, MosiacML [published a paper](https://ar5iv.labs.arxiv.org/html/2310.16825) indicating that they were also looking at training Stable Diffusion with a creative commons data set, but were planning to use Stable Diffusion 2.0. Luckily we were able to find a new model called [Pixart-Alpha](https://pixart-alpha.github.io/) that had performance benchmarks very comparable to SDXL (the state of the art Stable Diffusion Model at the time).  We ultimately ended up going with a slightly different Pixart-Alpha-inspired architecture proposed by [Alexandru Papiu](https://github.com/apapiu/transformer_latent_diffusion) after we had some training issues with the Pixart-Alpha Architecture.
+As we got closer to starting the actual training exercise, MosiacML [published a paper](https://ar5iv.labs.arxiv.org/html/2310.16825) indicating that they were also looking at training Stable Diffusion with a creative commons data set, but were planning to use Stable Diffusion 2.0. Luckily we were able to find a new model called [Pixart-Alpha](https://pixart-alpha.github.io/) that had performance benchmarks very comparable to SDXL (the state of the art Stable Diffusion Model at the time). We ultimately ended up going with a slightly different Pixart-Alpha-inspired architecture proposed by [Alexandru Papiu](https://github.com/apapiu/transformer_latent_diffusion) after we had some training issues with the Pixart-Alpha Architecture.
 
 ![Huang et al. 2023](./pixart-alpha-paper.png)
 
 ## Dataset Choice
-We created a Creative Commons licensed dataset by filtering [YFCC100M](https://registry.opendata.aws/multimedia-commons/) and [LAION-5B](https://laion.ai/blog/laion-5b/) for images with CC0 or CC-SA licenses.  
+
+We created a Creative Commons licensed dataset by filtering [YFCC100M](https://registry.opendata.aws/multimedia-commons/) and [LAION-5B](https://laion.ai/blog/laion-5b/) for images with CC0 or CC-SA licenses.
 
 Those datasets can be found at their huggingface pages here:
+
 - [https://huggingface.co/datasets/laion/laion5B-index](https://huggingface.co/datasets/laion/laion5B-index)
 - [https://huggingface.co/datasets/dalle-mini/YFCC100M_OpenAI_subset](https://huggingface.co/datasets/dalle-mini/YFCC100M_OpenAI_subset)
 
-For fine tuning we used a curated collection of 2M AI Generated images that were published under  MS-PL license that were taken from [https://huggingface.co/datasets/zzliang/GRIT](https://huggingface.co/datasets/zzliang/GRIT) 
+For fine tuning we used a curated collection of 2M AI Generated images that were published under MS-PL license that were taken from [https://huggingface.co/datasets/zzliang/GRIT](https://huggingface.co/datasets/zzliang/GRIT)
 
-To create our initial dataset, we used two of the largest dataset with Creative Commons License data included in them and filtered for images that had either CC0 or CC-SA creative commons licenses. These dataset were chosen for their size and inclusion of license metadata. We believe some of the challenges we have encountered with the model training is very likely due to the lower quality and diversity of this dataset.  During the fine tuning portion of the model training we shifted to AI generated images licensed under the MS-PL license.  It would appear that this dataset was insufficient to improve the models performance. For training purposes we always used cached text and vae embedding layers to improve the training efficiency.  Captions were generated using the LLAVA 1.5 model.  
+To create our initial dataset, we used two of the largest dataset with Creative Commons License data included in them and filtered for images that had either CC0 or CC-SA creative commons licenses. These dataset were chosen for their size and inclusion of license metadata. We believe some of the challenges we have encountered with the model training is very likely due to the lower quality and diversity of this dataset. During the fine tuning portion of the model training we shifted to AI generated images licensed under the MS-PL license. It would appear that this dataset was insufficient to improve the models performance. For training purposes we always used cached text and vae embedding layers to improve the training efficiency. Captions were generated using the LLAVA 1.5 model.
 
 ## Hardware Choice
+
 For the actual training cluster, we used the following GPU cluster set up and managed by the [Europlots](https://console.akash.network/providers/akash18ga02jzaq8cw52anyhzkwta5wygufgu6zsz6xc) provider on Akash:
+
 - 32x A100 80GB (PCIe interconnect) GPUs
 - 1024 vCPUs
 - 4096GB of Memory,
-- 32TB NVMe Storage 
+- 32TB NVMe Storage
 - 1920GB SSD
 
-We also used 16 RTX8000 GPUs from the [FoundryStaking](https://console.akash.network/providers/akash17gqmzu0lnh2uclx9flm755arylrhgqy7udj3el?network) provider for the fine-tuning portion of training. 
+We also used 16 RTX8000 GPUs from the [FoundryStaking](https://console.akash.network/providers/akash17gqmzu0lnh2uclx9flm755arylrhgqy7udj3el?network) provider for the fine-tuning portion of training.
 
 ## Software Stack
+
 We used Ray Clusters to run distributed training across the 48 GPUs across two providers. If you are curious about Ray and how to use it to run distributed ML workloads across Akash GPUs, check out our [detailed blog post](https://akash.network/blog/distributed-machine-learning-on-akash-network-with-ray/) on the topic.
 
 The architecture of the system we utilized for it can be described with the following blocks:
@@ -89,18 +101,20 @@ The architecture of the system we utilized for it can be described with the foll
 ![Training Architecture](./model-training-architecture.png)
 
 ## Training
+
 The end-to-end training pipeline can be summarized with the following block diagram:
 
 ![Training Pipeline](./model-training-overview-2.png)
 
 ## Outcomes
+
 Here are some images generated from the model:
 
 ![Thumper Output](./thumper-6.png)
 
-The model’s performance on image generation is heavily influenced by the training dataset’s bias towards paintings at the expense of photos.  This is likely due to photos being released under creative commons licenses less frequently than other image content.  
+The model’s performance on image generation is heavily influenced by the training dataset’s bias towards paintings at the expense of photos. This is likely due to photos being released under creative commons licenses less frequently than other image content.
 
-While the image output from this first model is far from perfect, that has more to do with the data sets than the cloud and ability to run workloads on Akash. With that in mind, we feel pretty good about  achieving the objectives we set out to achieve but here’s a quick rundown of the goals we had hoped to achieve and how we think we did on them:
+While the image output from this first model is far from perfect, that has more to do with the data sets than the cloud and ability to run workloads on Akash. With that in mind, we feel pretty good about achieving the objectives we set out to achieve but here’s a quick rundown of the goals we had hoped to achieve and how we think we did on them:
 
 ## Goals
 
@@ -113,35 +127,37 @@ While the image output from this first model is far from perfect, that has more
 
 ## Outcomes
 
-1. While the model output isn’t as great as we had hoped it would be we showed that it is feasible to train foundation models on akash and identified areas to improve for the future including: 
-    - Making it easier to increase shm for workloads, 
-    - Improving  benchmarking, and 
-    - Using streaming dataloaders during training  
+1. While the model output isn’t as great as we had hoped it would be we showed that it is feasible to train foundation models on akash and identified areas to improve for the future including:
+   - Making it easier to increase shm for workloads,
+   - Improving benchmarking, and
+   - Using streaming dataloaders during training
 2. We were able to work with two providers (Europlots and Foundystaking) and reliably use them for training - and that has enabled us to reference the work towards attracting several other teams building GenAI applications to utilize Akash compute.
 3. Prior to this work, no one had trained a foundational model on Akash before. The foundation model training stack has different requirements from inference and fine-tuning. Knowledge learned from this will help inform future foundation model training on akash. The core team has already identified 2-3 other teams that will be training foundation models in the days and weeks to come.
 4. The source code for conducting the model training is open-source: [https://github.com/thumper-ai/at1](https://github.com/thumper-ai/at1)
 5. The training and inference code is available here: [https://huggingface.co/thumperai/akash-thumper-v1](https://huggingface.co/thumperai/akash-thumper-v1). We have released the model weights on HuggingFace as well: [https://huggingface.co/thumperai/akash-thumper-v1](https://huggingface.co/thumperai/akash-thumper-v1).
 6. We have added SDLs for Ray Cluster’s to the Awesome-Akash repo: [https://github.com/akash-network/awesome-akash/tree/master/ray](https://github.com/akash-network/awesome-akash/tree/master/ray).
 
-
 ## Learnings
-- Ray Jobs - Due to the inability to remount persistent volumes in Akash we had to keep the same ray cluster up for an extended period of time and could not rebuild the container for additional retraining or tweaks to the codebase.  We also used the Ray dependency management to maintain several virtual environments for the different stages of training.  
-- Caching Latent Images - The most efficient way of training text to image models today is to train off of presaved latent images.  
-- Streaming Dataloaders - We went with ray datasets with a webdataset format.  We found that the webdataset format was the best format for supporting saved numpy or torch tensors in a steam 
-- Logging -  Used Ray Dashboard, Tensorboard logs,  and Weights and Biases for logging training information. Weights and Biases is nice because its logs GPU temperature and additional hardware metrics that are not present in the ray dashboard. It’ll be great to have some of these metrics be natively available in Akash provider dashboards.
+
+- Ray Jobs - Due to the inability to remount persistent volumes in Akash we had to keep the same ray cluster up for an extended period of time and could not rebuild the container for additional retraining or tweaks to the codebase. We also used the Ray dependency management to maintain several virtual environments for the different stages of training.
+- Caching Latent Images - The most efficient way of training text to image models today is to train off of presaved latent images.
+- Streaming Dataloaders - We went with ray datasets with a webdataset format. We found that the webdataset format was the best format for supporting saved numpy or torch tensors in a steam
+- Logging - Used Ray Dashboard, Tensorboard logs, and Weights and Biases for logging training information. Weights and Biases is nice because its logs GPU temperature and additional hardware metrics that are not present in the ray dashboard. It’ll be great to have some of these metrics be natively available in Akash provider dashboards.
 - Storage - We used both Backblaze and akash minio deployments for s3-compatible object storage. The challenge with akash hosted minio deployments is that oftentimes the gpu providers lack sufficient additional disk space to function as long term storage provider for models logs and weights. The core team has since been working to add several providers with larger disk storage to the network.
 
 ### Additional Considerations for using Ray on Akash:
-- **Getting Bids for a large GPU cluster:** Make sure the cluster generates bids in a small configuration with minimal gpu, cpu, and storage requirements. Make sure the gpu tag is right. Some providers will have different tags for a gpu model eg nvidia-a100 vs a100. After the small configuration generates bids you can increase resources gradually in the deployment until it reaches your requirements. The provider dashboard and script will sometimes overestimate the resources available due to resource fragmentation. Contact the Akash provider if they can help you tweak the resource profile if you are having trouble. 
-- **S3 compatible object storage:** You should consider which s3 compatible object storage service you may want to use.  Syncing FSDP checkpoints during ray train jobs requires an s3 compatible storage service or a network file drive. You can use a self-hosted minio deployment or a 3rd party storage provider such as backblaze.
 
-- **Enabling SHM:** Ray Cluster’s plasma object store is most performant when running in-memory and is often set to consume 20-30% of RAM.  Docker containers and k8s pods default shm resources to ~2Mb which is too low for pytorch dataloaders and ray clusters during ML training jobs. For k8s platforms, an empty directory volume mount is needed to increase shm. Please coordinate with your provider on Discord before deploying so they can enable the increased shm setting. (link to provider guide to enabling SHM). Once shm is enabled you should see a larger object store in the ray cluster dashboard. If the deployment gets restarted you will need to have the provider
-repeat the process. The core team has prioritized supporting setting SHM as part of their roadmap here: [https://github.com/orgs/akash-network/projects/5/views/1?pane=issue&itemId=50909379](https://github.com/orgs/akash-network/projects/5/views/1?pane=issue&itemId=50909379) 
+- **Getting Bids for a large GPU cluster:** Make sure the cluster generates bids in a small configuration with minimal gpu, cpu, and storage requirements. Make sure the gpu tag is right. Some providers will have different tags for a gpu model eg nvidia-a100 vs a100. After the small configuration generates bids you can increase resources gradually in the deployment until it reaches your requirements. The provider dashboard and script will sometimes overestimate the resources available due to resource fragmentation. Contact the Akash provider if they can help you tweak the resource profile if you are having trouble.
+- **S3 compatible object storage:** You should consider which s3 compatible object storage service you may want to use. Syncing FSDP checkpoints during ray train jobs requires an s3 compatible storage service or a network file drive. You can use a self-hosted minio deployment or a 3rd party storage provider such as backblaze.
 
-We had some initial training issues with the model being patchy with the Pixart-Alpha architecture and shifted early on to the latent transformer architecture proposed by Alexandru Papiu.  This makes some changes to Pixart to add a Convolutional layer to help the model learn  spatial patterns easier.  We also have experimented with perceptual loss [https://arxiv.org/abs/2401.00110](https://arxiv.org/abs/2401.00110) although we did not see a significant improvement with that either. 
+- **Enabling SHM:** Ray Cluster’s plasma object store is most performant when running in-memory and is often set to consume 20-30% of RAM. Docker containers and k8s pods default shm resources to ~2Mb which is too low for pytorch dataloaders and ray clusters during ML training jobs. For k8s platforms, an empty directory volume mount is needed to increase shm. Please coordinate with your provider on Discord before deploying so they can enable the increased shm setting. (link to provider guide to enabling SHM). Once shm is enabled you should see a larger object store in the ray cluster dashboard. If the deployment gets restarted you will need to have the provider
+  repeat the process. The core team has prioritized supporting setting SHM as part of their roadmap here: [https://github.com/orgs/akash-network/projects/5/views/1?pane=issue&itemId=50909379](https://github.com/orgs/akash-network/projects/5/views/1?pane=issue&itemId=50909379)
+
+We had some initial training issues with the model being patchy with the Pixart-Alpha architecture and shifted early on to the latent transformer architecture proposed by Alexandru Papiu. This makes some changes to Pixart to add a Convolutional layer to help the model learn spatial patterns easier. We also have experimented with perceptual loss [https://arxiv.org/abs/2401.00110](https://arxiv.org/abs/2401.00110) although we did not see a significant improvement with that either.
 
 ## What’s next
+
 There are two potential next projects that the two teams will consider leveraging Akash Network for, based on the learnings from this AT-1 training exercise:
 
-- While the The AT-1 model training exercise was a great first step it is clear that the current performance is not good enough to be competitive with text-to-image models today. Further, while the goal was noble, there doesn’t appear to be a viable path to improving the model on purely creative commons datasets at this point in time.  Thumper has decided to pivot away from creative commons models and will consider training and releasing a model merge or further fine tuned version of AT-1 at a future date that would include non-creative commons data/models.  
+- While the The AT-1 model training exercise was a great first step it is clear that the current performance is not good enough to be competitive with text-to-image models today. Further, while the goal was noble, there doesn’t appear to be a viable path to improving the model on purely creative commons datasets at this point in time. Thumper has decided to pivot away from creative commons models and will consider training and releasing a model merge or further fine tuned version of AT-1 at a future date that would include non-creative commons data/models.
 - The Thumper team will look into migrating [https://loratrainer.com/](https://loratrainer.com/) to run on Akash Network as they look to scale that service, so as to take advantage of the lower costs (relative to their current centralized provider) and variety of GPUs available on the network. One of the features needed before they can do this is the ability to [request a max SHM size](https://github.com/akash-network/support/issues/179) through the Akash SDL. That feature is about to be made available on the network through an upgrade.
diff --git a/src/content/Blog/passage-leverages-akash-to-launch-the-first-virtual-world-on-permissionless-gpus/index.md b/src/content/Blog/passage-leverages-akash-to-launch-the-first-virtual-world-on-permissionless-gpus/index.md
index 1bff653e..d359beec 100644
--- a/src/content/Blog/passage-leverages-akash-to-launch-the-first-virtual-world-on-permissionless-gpus/index.md
+++ b/src/content/Blog/passage-leverages-akash-to-launch-the-first-virtual-world-on-permissionless-gpus/index.md
@@ -8,26 +8,32 @@ categories:
   - Updates
 tags:
   - Updates
+  - Case Studies
 contributors:
   - Zach Horn
 bannerImage: ./passage-on-akash.png
 ---
-The demand for decentralized compute is growing fast as total global cloud spending is projected to surpass [$1 trillion](https://www.forbes.com/sites/bernardmarr/2023/10/09/the-10-biggest-cloud-computing-trends-in-2024-everyone-must-be-ready-for-now/) this year and as developers continue to grapple with cloud lock-in. As Passage scales its platform, which allows creators to build virtual worlds, it will utilize Akash compute to achieve three key objectives: Greatly reducing the costs of hosting Passage Worlds, unlocking the ability to scale with permissionless compute, and preserving sovereignty and privacy for creators. 
+
+The demand for decentralized compute is growing fast as total global cloud spending is projected to surpass [$1 trillion](https://www.forbes.com/sites/bernardmarr/2023/10/09/the-10-biggest-cloud-computing-trends-in-2024-everyone-must-be-ready-for-now/) this year and as developers continue to grapple with cloud lock-in. As Passage scales its platform, which allows creators to build virtual worlds, it will utilize Akash compute to achieve three key objectives: Greatly reducing the costs of hosting Passage Worlds, unlocking the ability to scale with permissionless compute, and preserving sovereignty and privacy for creators.
 
 In a world with many options for cloud resources, both centralized and decentralized, Akash makes achieving each of these objectives uniquely possible with the only fully open-source Supercloud.
 
 ## Scaling with the Supercloud
-The decision to leverage Akash Network to scale Passage completed the final piece of a long-term strategy. In building their platform, Passage aimed to balance quality, accessibility, and cost. Initially, the platform prioritized the first two – quality and accessibility. By choosing to focus on quality (using Unreal Engine 5) and accessibility (ensuring the platform works in any browser without downloads), Passage chose to utilize higher-cost AWS compute as the platform was under development. 
+
+The decision to leverage Akash Network to scale Passage completed the final piece of a long-term strategy. In building their platform, Passage aimed to balance quality, accessibility, and cost. Initially, the platform prioritized the first two – quality and accessibility. By choosing to focus on quality (using Unreal Engine 5) and accessibility (ensuring the platform works in any browser without downloads), Passage chose to utilize higher-cost AWS compute as the platform was under development.
 
 Starting today, Passage is tapping into Akash’s scalability to manage these costs, with a reduction in hosting costs by 50%, and further savings up to 70% with additional optimizations.
 
 The results from the first Passage Worlds hosted on Akash have resulted in compute savings up to 70% cheaper than AWS or Google Cloud with comparable hardware (high-density P100s and RTX 3090s).
 
 ## Open-sourcing the Passage community
+
 Drawing inspiration from Akash’s open community, which features a set of working groups that develop and grow the network, [Passage has launched an open-source initiative](https://www.passage.io/post/open-source) that will give the community access to become involved in every aspect of building Passage’s platform.
 
 From the [Passage roadmap](https://www.passage.io/post/open-source):
+
 > Our proposed roadmap follows, but priorities and plans will ultimately be determined by the Steering Committee.
+>
 > - Core infrastructure improvements on the indexer
 > - Improved sorting and searching
 > - Community initiatives (Astro Pucks, Golden Pucks)
@@ -38,13 +44,15 @@ From the [Passage roadmap](https://www.passage.io/post/open-source):
 To join the open community and start contributing, head to [passage.io](https://passage.io) to learn more.
 
 ## Launching an AKT/PASG Pool on Osmosis
+
 As a part of the official launch of Passage World utilizing Akash compute, Passage and Overclock Labs are launching a new AKT/PASG pool on Osmosis, backed by $200,000 in liquidity from both teams, and liquidity providers will be able to receive custom roles in the Passage Discord.
 
 The AKT/PASG pool is [live on Osmosis now](https://app.osmosis.zone/pool/1498).
 
 ## Learn more about Passage
+
 Passage is building an exciting new platform to power an entirely new way for creators to interact with their communities. By tapping into permissionless Akash compute, Passage will be able to scale its mission to the next level and greatly reduce costs.
 
 To hear more about how decentralized compute, the metaverse, and permissionless compute for AI — don’t miss Greg Osuri, Founder of Akash, and Lex Avellino, Founder of Passage, live at [ATOMDenver](https://cosmoverse.org/atomxyz) (during ETHDenver).
 
-For more information and to follow the latest updates — follow [Passage](https://twitter.com/passageio) and [Akash](https://twitter.com/akashnet_) on X.
\ No newline at end of file
+For more information and to follow the latest updates — follow [Passage](https://twitter.com/passageio) and [Akash](https://twitter.com/akashnet_) on X.
diff --git a/src/content/Blog/prime-intellect-integrates-permissionless-akash-gpus/index.md b/src/content/Blog/prime-intellect-integrates-permissionless-akash-gpus/index.md
index 4f95406d..bc02091a 100644
--- a/src/content/Blog/prime-intellect-integrates-permissionless-akash-gpus/index.md
+++ b/src/content/Blog/prime-intellect-integrates-permissionless-akash-gpus/index.md
@@ -14,28 +14,33 @@ categories:
 
 tags:
   - Updates
-  
+  - Case Studies
+
 contributors:
   - Zach Horn
 
 bannerImage: ./prime-akash-header.png
 ---
+
 Today, high-performance GPUs from the Akash Supecloud, including NVIDIA H100, A100, and more, have been added to the [Prime Intellect](https://www.primeintellect.ai/) platform. This creates an entirely new way to access GPUs from the Akash Supercloud and allows Akash’s unique permissionless and peer-to-peer marketplace to reach a new cohort of AI developers in need of high-performance GPUs.
 
 [Prime Intellect](https://www.primeintellect.ai/) is on a mission to democratize AI development. By gathering a wide range of the best compute providers on the same platform, it’s now easier than ever for AI developers to find the compute necessary to train, fine-tune, and run inference on AI models. This greatly improves the user experience of accessing compute, and especially permissionless compute from the Akash Supercloud.
 
 ## A New Way to Access GPUs
+
 ![Akash H100 GPUs on Prime Intellect](./prime-intellect-1.png)
-The Prime Intellect platform makes it easy to configure a GPU cluster through a familiar user interface. Users can select their desired chip specifications and easily pay with platform credits (which can be purchased with a credit card directly through the Prime Intellect platform). 
+The Prime Intellect platform makes it easy to configure a GPU cluster through a familiar user interface. Users can select their desired chip specifications and easily pay with platform credits (which can be purchased with a credit card directly through the Prime Intellect platform).
 
 The intuitive interface streamlines the process of setting up and managing GPU resources, enabling users to focus on their AI projects without the need to focus on infrastructure management. With just a few clicks, users can allocate the necessary GPU power and start running their AI workloads efficiently.
 
 ## The Expanding Supercloud
+
 By integrating with best-in-class platforms, including [Brev.dev](https://akash.network/blog/brev-dev-leverages-akash-networks-permissionless-gpu-infrastructure-to-seamlessly-scale/), [FLock.io](https://akash.network/blog/decentralized-ai-model-training-on-akash-with-flockio/), [Morpheus](https://mor.org/), and others, the Akash Supercloud can reach users wherever they prefer to deploy. These integrations allow developers and businesses to access Akash's powerful GPU resources directly from their preferred platforms, eliminating the need to switch between multiple interfaces. Whether users choose Brev.dev for AI deployments, FLock.io for AI model training, or Morpheus for AI development, they can seamlessly tap into Akash's GPU infrastructure.
 
 By integrating widely across many platforms, Akash can reach new cohorts of users and expand the network's reach significantly. This strategic approach enhances user convenience and drives the adoption of the Akash Supercloud across a wide range of developer communities, researchers, and startups. As more platforms integrate with Akash, the Supercloud becomes an increasingly accessible and versatile solution for accelerating AI development.
 
 ## Get Started with an Akash GPU Cluster on Prime Intellect
-To start with an Akash GPU deployment via Prime Intellect, head to [primeintellect.ai](http://primeintellect.ai) and look for the Akash logo on the GPU provider selection page of the GPU cluster setup process. 
 
-To connect with Akash, follow the network on [X (Twitter)](https://x.com/akashnet_) and [sign up to hear about the latest announcements and updates](https://akt.fyi/3kpRwVM).
\ No newline at end of file
+To start with an Akash GPU deployment via Prime Intellect, head to [primeintellect.ai](http://primeintellect.ai) and look for the Akash logo on the GPU provider selection page of the GPU cluster setup process.
+
+To connect with Akash, follow the network on [X (Twitter)](https://x.com/akashnet_) and [sign up to hear about the latest announcements and updates](https://akt.fyi/3kpRwVM).
diff --git a/src/content/Blog/running-vllm-on-akash/index.md b/src/content/Blog/running-vllm-on-akash/index.md
index 1bf0b248..f4349c17 100644
--- a/src/content/Blog/running-vllm-on-akash/index.md
+++ b/src/content/Blog/running-vllm-on-akash/index.md
@@ -19,6 +19,7 @@ tags:
   - Insights
   - Updates
   - News
+  - Case Studies
 
 contributors:
   - Logan Cerkovnik
diff --git a/src/pages/about/[...slug].astro b/src/pages/about/[...slug].astro
index a5a89287..eac0842f 100644
--- a/src/pages/about/[...slug].astro
+++ b/src/pages/about/[...slug].astro
@@ -1,17 +1,12 @@
 ---
-import { type CollectionEntry, getCollection } from "astro:content";
 import { nav } from "@/components/about-pages/nav-config.ts";
-import TableOfContents from "@/components/development-pages/table-of-contents.tsx";
+import { type CollectionEntry, getCollection } from "astro:content";
 
-import generateToc from "@/lib/generateToc";
 import NextPrevNav from "@/components/about-pages/next-prev-nav.astro";
 
+import TopMargin from "@/components/ui/top-margin.astro";
 import Layout from "@/layouts/layout.astro";
-import MobileNav from "@/components/about-pages/mobile-nav";
-import MobileTableOfContents from "@/components/about-pages/mobile-table-of-contents";
 import { proseClasses } from "@/lib/prose-classes";
-import TopMargin from "@/components/ui/top-margin.astro";
-import SubItemsSidebar from "@/components/sub-items-sidebar.astro";
 
 export async function getStaticPaths() {
   const pages = await getCollection("About_Page");
@@ -71,64 +66,26 @@ const fileType = page.id.split("/")[1].split(".")[1];
   image="/meta-images/about.png"
 >
   <TopMargin>
-    <div class="grid grid-cols-12 gap-x-5">
-      <SubItemsSidebar
-        nav={nav}
-        link={`https://github.com/akash-network/website-revamp/tree/main/src/content/About_Page/${
-          page.slug ?? ""
-        }/index.${fileType ?? ""}`}
-      />
-
-      <div
-        class={`col-span-12 mx-auto w-full md:pl-10  md:col-span-8 lg:col-span-9 `}
-      >
-        <div class="flex items-center gap-x-3 md:hidden">
-          <MobileNav
-            pageName={Astro.url.pathname
-              .split("/")[2]
-              .split("-")
-              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-              .join(" ")}
-            currentPath={pathname}
-            client:load
-            nav={nav}
-            link={`https://github.com/akash-network/website-revamp/tree/main/src/content/About_Page/${
-              page.slug ?? ""
-            }/index.${fileType ?? ""}`}
-          />
-
-          <MobileTableOfContents
-            pageName={Astro.url.pathname
-              .split("/")[2]
-              .split("-")
-              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-              .join(" ")}
-            client:load
-            toc={generateToc(headings, "Overview")}
-            labels={{
-              onThisPage: "onThisPage",
-            }}
-          />
+    <div
+      class={`col-span-12 mx-auto w-full md:pl-10  md:col-span-8 lg:col-span-9 `}
+    >
+      <div class="space-y-10">
+        <div class="mt-10 md:mt-0">
+          <h1
+            id="overview"
+            class="text-2xl font-bold leading-[32px] md:text-2lg md:leading-[40px] lg:text-3lg lg:leading-[48px]"
+          >
+            {page.data.title}
+          </h1>
         </div>
 
-        <div class="space-y-10">
-          <div class="mt-10 md:mt-0">
-            <h1
-              id="overview"
-              class="text-2xl font-bold leading-[32px] md:text-2lg md:leading-[40px] lg:text-3lg lg:leading-[48px]"
-            >
-              {page.data.title}
-            </h1>
-          </div>
-
-          <article class={proseClasses}>
-            <Content />
-          </article>
-        </div>
+        <article class={proseClasses}>
+          <Content />
+        </article>
+      </div>
 
-        <div class="md:hidden">
-          <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
-        </div>
+      <div class="md:hidden">
+        <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
       </div>
     </div>
   </TopMargin>
diff --git a/src/pages/about/network-capacity.astro b/src/pages/about/network-capacity.astro
new file mode 100644
index 00000000..d258f19b
--- /dev/null
+++ b/src/pages/about/network-capacity.astro
@@ -0,0 +1,43 @@
+---
+import {
+  getDashboardData,
+  getProviderDetail,
+} from "@/components/about-pages/network-activity/useDashboardData";
+import NetworkTabs from "@/components/about-pages/network-tabs.astro";
+import Map from "@/components/providersandincentives/Map";
+import TopMargin from "@/components/ui/top-margin.astro";
+import Layout from "@/layouts/layout.astro";
+
+let initialData = await getProviderDetail();
+let initialData2 = await getDashboardData();
+---
+
+<Layout
+  title="About Akash Network - Empowering a Decentralized Cloud Revolution"
+  description="Learn about Akash Network's mission, values, and the vision for revolutionizing cloud computing through decentralization. Explore our journey and commitment to a more open and inclusive cloud infrastructure"
+  image="/meta-images/about.png"
+>
+  <TopMargin>
+    <div class="flex flex-col items-center gap-6">
+      <h1
+        class="text-2xl font-bold leading-[32px] md:text-2lg md:leading-[40px] lg:text-3lg lg:leading-[48px]"
+      >
+        Akash Network Providers
+      </h1>
+      <p class="max-w-[50rem] text-center text-para">
+        Explore the global network of compute providers and real-time capacity,
+        fueling decentralized deployments across the Akash Network.
+      </p>
+    </div>
+
+    <NetworkTabs />
+
+    <div class="flex flex-col gap-10">
+      <h2 id="overview" class="text-base font-semibold md:text-xl">
+        Network Capacity
+      </h2>
+
+      <Map client:load initialData={initialData} initialData2={initialData2} />
+    </div>
+  </TopMargin>
+</Layout>
diff --git a/src/pages/about/providers.astro b/src/pages/about/providers.astro
index f1af871f..6eb9b326 100644
--- a/src/pages/about/providers.astro
+++ b/src/pages/about/providers.astro
@@ -1,81 +1,15 @@
 ---
-import {
-  type CollectionEntry,
-  getCollection,
-  getEntryBySlug,
-} from "astro:content";
-import { nav } from "@/components/about-pages/nav-config.ts";
-import TableOfContents from "@/components/development-pages/table-of-contents.tsx";
-
-import generateToc from "@/lib/generateToc";
-import NextPrevNav from "@/components/about-pages/next-prev-nav.astro";
-
-import Layout from "@/layouts/layout.astro";
-import MobileNav from "@/components/about-pages/mobile-nav";
-import MobileTableOfContents from "@/components/about-pages/mobile-table-of-contents";
-import { proseClasses } from "@/lib/prose-classes";
+import NetworkTabs from "@/components/about-pages/network-tabs.astro";
+import { getProviderList } from "@/components/ecosystem-pages/providers-page/useProviderList";
 import TopMargin from "@/components/ui/top-margin.astro";
-import SubItemsSidebar from "@/components/sub-items-sidebar.astro";
-import Map from "@/components/providersandincentives/Map";
-import {
-  getProviderDetail,
-  getDashboardData,
-} from "@/components/about-pages/network-activity/useDashboardData";
-
-// export async function getStaticPaths() {
-//   const pages = await getCollection("About_Page");
-
-//   return pages.map((page) => ({
-//     params: { slug: page.slug },
-//     props: page,
-//   }));
-// }
-
-type Props = CollectionEntry<"Development_Page">;
-
-const page = await getEntryBySlug("About_Page", "providers");
-
-const { Content, headings } = await page.render();
-
-const pageIndex = nav.findIndex(
-  (item: any) => item.link === `/about/${page.slug}/`,
-);
-
-if (pageIndex !== -1) {
-  const pageIndexSubItems = headings
-    .filter((heading) => heading.depth <= 3)
-    .map((heading) => ({
-      label: heading.text,
-      link: `#${heading.slug}`,
-      enabled: true,
-    }));
-
-  // Update the nav array with the sub-items
-  nav[pageIndex].subItems = pageIndexSubItems;
-}
-
-function findPrevAndNextPages(nav: any, pathname: any) {
-  // Find the index of the current page in the nav array
-  const currentIndex = nav.findIndex((item: any) => item.link === pathname);
-
-  // Calculate the index of the previous and next pages
-  const prevIndex = currentIndex - 1;
-  const nextIndex = currentIndex + 1;
-
-  // Determine the previous and next pages
-  const prevPage = prevIndex >= 0 ? nav[prevIndex] : null;
-  const nextPage = nextIndex < nav.length ? nav[nextIndex] : null;
-
-  return { prevPage, nextPage };
-}
+import Layout from "@/layouts/layout.astro";
 
-const pathname = new URL(Astro.request.url).pathname;
+import Dashboard from "@/components/ecosystem-pages/providers-page/dashboard.tsx";
+const astroUrl = Astro.url;
 
-const fileType = page.id.split("/")[1].split(".")[1];
+const pathName = astroUrl.pathname.split("/");
 
-let initialData = await getProviderDetail();
-let initialData2 = await getDashboardData();
-console.log(initialData2);
+let initialData = await getProviderList();
 ---
 
 <Layout
@@ -84,65 +18,20 @@ console.log(initialData2);
   image="/meta-images/about.png"
 >
   <TopMargin>
-    <div class="grid grid-cols-12 gap-x-5">
-      <SubItemsSidebar
-        nav={nav}
-        link={`https://github.com/akash-network/website-revamp/tree/main/src/content/About_Page/${
-          page.slug ?? ""
-        }/index.${fileType ?? ""}`}
-      />
-
-      <div
-        class={`col-span-12 mx-auto w-full md:pl-10  md:col-span-8 lg:col-span-9 `}
+    <div class="flex flex-col items-center gap-6">
+      <h1
+        class="text-2xl font-bold leading-[32px] md:text-2lg md:leading-[40px] lg:text-3lg lg:leading-[48px]"
       >
-        <div class="flex items-center gap-x-3 md:hidden">
-          <MobileNav
-            pageName={Astro.url.pathname
-              .split("/")[2]
-              .split("-")
-              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-              .join(" ")}
-            currentPath={pathname}
-            client:load
-            nav={nav}
-            link={`https://github.com/akash-network/website-revamp/tree/main/src/content/About_Page/${
-              page.slug ?? ""
-            }/index.${fileType ?? ""}`}
-          />
-
-          <MobileTableOfContents
-            client:load
-            toc={generateToc(headings, "Overview")}
-            labels={{
-              onThisPage: "onThisPage",
-            }}
-          />
-        </div>
-
-        <div class="space-y-10">
-          <div class="mt-10 md:mt-0">
-            <h1
-              id="overview"
-              class="text-2xl font-bold leading-[32px] md:text-2lg md:leading-[40px] lg:text-3lg lg:leading-[48px]"
-            >
-              {page.data.title}
-            </h1>
-          </div>
+        Akash Network Providers
+      </h1>
+      <p class="max-w-[50rem] text-center text-para">
+        Explore the global network of compute providers and real-time capacity,
+        fueling decentralized deployments across the Akash Network.
+      </p>
+    </div>
 
-          <Map
-            client:load
-            initialData={initialData}
-            initialData2={initialData2}
-          />
-          <article class={proseClasses}>
-            <Content />
-          </article>
-        </div>
+    <NetworkTabs />
 
-        <div class="md:hidden">
-          <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
-        </div>
-      </div>
-    </div>
+    <Dashboard client:load pathName={pathName} initialProviders={initialData} />
   </TopMargin>
 </Layout>
diff --git a/src/pages/community/[...slug].astro b/src/pages/community/[...slug].astro
index 1e4126ec..6738d213 100644
--- a/src/pages/community/[...slug].astro
+++ b/src/pages/community/[...slug].astro
@@ -3,13 +3,10 @@ import { nav } from "@/components/community-pages/nav-config.ts";
 import { type CollectionEntry, getCollection } from "astro:content";
 
 import NextPrevNav from "@/components/community-pages/next-prev-nav.astro";
-import generateToc from "@/lib/generateToc";
 
 import Layout from "@/layouts/layout.astro";
 
-import MobileNav from "@/components/community-pages/mobile-nav";
-import MobileTableOfContents from "@/components/community-pages/mobile-table-of-contents";
-import SideNav from "@/components/community-pages/side-nav.astro";
+import TopMargin from "@/components/ui/top-margin.astro";
 import { proseClasses } from "@/lib/prose-classes";
 
 export async function getStaticPaths() {
@@ -78,65 +75,37 @@ const link = `https://github.com/akash-network/website-revamp/tree/main/src/cont
   description="Connect with like-minded individuals in the Akash Network community. Engage in discussions, share experiences, and contribute to the growth of decentralized cloud computing."
   image="/meta-images/community.png"
 >
-  <div class="container mt-10 md:mt-[60px] lg:mt-20">
-    <div class="grid grid-cols-12 gap-x-5">
-      <SideNav nav={nav} link={link} />
-
-      <div
-        class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
-      >
-        <div class="mt-6 flex items-center justify-start gap-x-3 md:hidden">
-          <MobileNav
-            currentPath={Astro.url.pathname}
-            nav={nav}
-            pageName={pageName}
-            client:load
-            link={link}
-          />
-
-          {
-            !page.data.disableTableOfContents && (
-              <div class="flex items-center justify-start gap-x-3 md:hidden">
-                <MobileTableOfContents
-                  client:load
-                  toc={generateToc(headings, "Overview")}
-                  labels={{
-                    onThisPage: "onThisPage",
-                  }}
-                />
-              </div>
-            )
-          }
-        </div>
-
-        <div class="space-y-10">
-          {
-            !page.data.disableTitle && (
-              <div class="mt-10 md:mt-0">
-                <h1
-                  id="overview"
-                  class="  text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
-                >
-                  {page.data.title}
-                </h1>
-                {page.data.description && (
-                  <p class="mt-3 border-b pb-8 text-base leading-[24px] text-para">
-                    {page.data.description}
-                  </p>
-                )}
-              </div>
-            )
-          }
-
-          <article class={proseClasses}>
-            <Content />
-          </article>
-        </div>
-
-        <div class="md:hidden">
-          <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
-        </div>
+  <TopMargin>
+    <div
+      class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
+    >
+      <div class="mt-10 space-y-10 md:mt-0">
+        {
+          !page.data.disableTitle && (
+            <div class="mt-10 md:mt-0">
+              <h1
+                id="overview"
+                class="  text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
+              >
+                {page.data.title}
+              </h1>
+              {page.data.description && (
+                <p class="mt-3 border-b pb-8 text-base leading-[24px] text-para">
+                  {page.data.description}
+                </p>
+              )}
+            </div>
+          )
+        }
+
+        <article class={proseClasses}>
+          <Content />
+        </article>
+      </div>
+
+      <div class="md:hidden">
+        <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
       </div>
     </div>
-  </div>
+  </TopMargin>
 </Layout>
diff --git a/src/pages/community/community-contributions/[...page].astro b/src/pages/community/community-contributions/[...page].astro
index b868b5e3..e97d6f59 100644
--- a/src/pages/community/community-contributions/[...page].astro
+++ b/src/pages/community/community-contributions/[...page].astro
@@ -1,20 +1,15 @@
 ---
-import Layout from "@/layouts/layout.astro";
-import type { PaginateFunction } from "astro";
-import { getCollection, type CollectionEntry } from "astro:content";
-import Pagination from "@/components/pagination.astro";
-import { Image } from "astro:assets";
 import NextPrevNav from "@/components/about-pages/next-prev-nav.astro";
+import Card from "@/components/community-pages/card.astro";
 import { nav } from "@/components/community-pages/nav-config.ts";
-import FormattedDate from "@/components/formatted-date.astro";
-import { proseClasses } from "@/lib/prose-classes";
 import SearchDialog from "@/components/community-pages/search-dialog";
-import SortDropDown from "@/components/community-pages/sort-dropdown";
-import TagsSortDropDown from "@/components/community-pages/tags-sort-dropdown";
-import MobileNav from "@/components/community-pages/mobile-nav";
+import Pagination from "@/components/pagination.astro";
 import Tag from "@/components/ui/tag2.astro";
-import SideNav from "@/components/community-pages/side-nav.astro";
-import Card from "@/components/community-pages/card.astro";
+import TopMargin from "@/components/ui/top-margin.astro";
+import Layout from "@/layouts/layout.astro";
+import { proseClasses } from "@/lib/prose-classes";
+import type { PaginateFunction } from "astro";
+import { getCollection, type CollectionEntry } from "astro:content";
 type Project = CollectionEntry<"Community_Contributions_Page">;
 
 export async function getStaticPaths({
@@ -93,89 +88,75 @@ const link =
 ---
 
 <Layout title="Community Contributions" image="/meta-images/community.png">
-  <div class="container mt-10 md:mt-[60px] lg:mt-20">
-    <div class="grid grid-cols-12 gap-x-5">
-      <SideNav nav={nav} link={link} />
-
-      <div
-        class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
-      >
-        <div class="flex items-center justify-between gap-x-3 md:hidden">
-          <MobileNav
-            currentPath={Astro.url.pathname}
-            nav={nav}
-            pageName={pageName}
-            client:load
-            link={link}
-          />
+  <TopMargin class="container mt-10 md:mt-[60px] lg:mt-20">
+    <div
+      class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
+    >
+      <div>
+        <div class="mt-10 md:mt-0">
+          <h1
+            id="overview"
+            class="text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
+          >
+            {pageFrontMatter.title}
+          </h1>
         </div>
 
-        <div>
-          <div class="mt-10 md:mt-0">
-            <h1
-              id="overview"
-              class="text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
-            >
-              {pageFrontMatter.title}
-            </h1>
-          </div>
-
-          <div class="md:-mt-10">
-            <article class={proseClasses}>
-              <PageContent />
-            </article>
-          </div>
-
-          <div class="mt-[72px] flex items-center justify-between">
-            <h3 class="text-xl font-bold md:text-2lg lg:text-3lg">
-              Community Contributions
-            </h3>
-          </div>
-          <div
-            class="not-prose mt-6 flex flex-col justify-between gap-x-6 gap-y-4 md:mt-8 md:gap-y-5 lg:flex-row lg:border-b lg:pb-[20px]"
-          >
-            <div
-              class="flex items-center gap-x-4 border-b pb-4 md:pb-5 lg:border-0 lg:pb-0"
-            >
-              <Tag active={true} href={`/community/community-contributions/`}>
-                All
-              </Tag>
-
-              {
-                tags.map((tag: string) => (
-                  <Tag
-                    href={`/community/community-contributions/${tag.toLowerCase()}/latest/1`}
-                  >
-                    {tag.charAt(0).toUpperCase() + tag.slice(1)}
-                  </Tag>
-                ))
-              }
-            </div>
-
-            <div class="flex items-center justify-end lg:justify-between">
-              <SearchDialog client:load currentPath={astroUrl.pathname} />
-            </div>
-          </div>
+        <div class="md:-mt-10">
+          <article class={proseClasses}>
+            <PageContent />
+          </article>
         </div>
 
-        <div>
+        <div class="mt-[72px] flex items-center justify-between">
+          <h3 class="text-xl font-bold md:text-2lg lg:text-3lg">
+            Community Contributions
+          </h3>
+        </div>
+        <div
+          class="not-prose mt-6 flex flex-col justify-between gap-x-6 gap-y-4 md:mt-8 md:gap-y-5 lg:flex-row lg:border-b lg:pb-[20px]"
+        >
           <div
-            class="mt-[42px] grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-6 lg:grid-cols-3"
+            class="flex items-center gap-x-4 border-b pb-4 md:pb-5 lg:border-0 lg:pb-0"
           >
+            <Tag active={true} href={`/community/community-contributions/`}>
+              All
+            </Tag>
+
             {
-              page.data.map((contribution: Project, i: number) => {
-                return <Card contribution={contribution} />;
-              })
+              tags.map((tag: string) => (
+                <Tag
+                  href={`/community/community-contributions/${tag.toLowerCase()}/latest/1`}
+                >
+                  {tag.charAt(0).toUpperCase() + tag.slice(1)}
+                </Tag>
+              ))
             }
           </div>
 
-          <Pagination page={page} />
+          <div class="flex items-center justify-end lg:justify-between">
+            <SearchDialog client:load currentPath={astroUrl.pathname} />
+          </div>
         </div>
+      </div>
 
-        <div class="md:hidden">
-          <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
+      <div>
+        <div
+          class="mt-[42px] grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-6 lg:grid-cols-3"
+        >
+          {
+            page.data.map((contribution: Project, i: number) => {
+              return <Card contribution={contribution} />;
+            })
+          }
         </div>
+
+        <Pagination page={page} />
+      </div>
+
+      <div class="md:hidden">
+        <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
       </div>
     </div>
-  </div>
+  </TopMargin>
 </Layout>
diff --git a/src/pages/community/community-contributions/[tag]/latest/[page].astro b/src/pages/community/community-contributions/[tag]/latest/[page].astro
index f2dd57ac..40e1a276 100644
--- a/src/pages/community/community-contributions/[tag]/latest/[page].astro
+++ b/src/pages/community/community-contributions/[tag]/latest/[page].astro
@@ -1,20 +1,14 @@
 ---
-import Layout from "@/layouts/layout.astro";
-import type { PaginateFunction } from "astro";
-import { getCollection, type CollectionEntry } from "astro:content";
-import Pagination from "@/components/pagination.astro";
-import { Image } from "astro:assets";
 import NextPrevNav from "@/components/about-pages/next-prev-nav.astro";
+import Card from "@/components/community-pages/card.astro";
 import { nav } from "@/components/community-pages/nav-config.ts";
-import FormattedDate from "@/components/formatted-date.astro";
-import { proseClasses } from "@/lib/prose-classes";
 import SearchDialog from "@/components/community-pages/search-dialog";
-import SortDropDown from "@/components/community-pages/sort-dropdown";
-import TagsSortDropDown from "@/components/community-pages/tags-sort-dropdown";
+import Pagination from "@/components/pagination.astro";
 import Tag from "@/components/ui/tag2.astro";
-import SideNav from "@/components/community-pages/side-nav.astro";
-import Card from "@/components/community-pages/card.astro";
-import MobileNav from "@/components/community-pages/mobile-nav";
+import Layout from "@/layouts/layout.astro";
+import { proseClasses } from "@/lib/prose-classes";
+import type { PaginateFunction } from "astro";
+import { getCollection, type CollectionEntry } from "astro:content";
 
 type Project = CollectionEntry<"Community_Contributions_Page">;
 
@@ -110,94 +104,78 @@ console.log(pageFrontMatter);
 
 <Layout title="Community Contributions" image="/meta-images/community.png">
   <div class="container mt-10 md:mt-[60px] lg:mt-20">
-    <div class="grid grid-cols-12 gap-x-5">
-      <SideNav nav={nav} link={link} />
-      <div
-        class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
-      >
-        <div class="flex items-center justify-between gap-x-3 md:hidden">
-          <MobileNav
-            currentPath={Astro.url.pathname}
-            nav={nav}
-            pageName={pageName}
-            client:load
-            link={link}
-          />
-        </div>
-        <div class="flex items-center justify-between gap-x-3 md:hidden">
-          <p class="text-xs leading-[18px] text-primary"></p>
-        </div>
-
-        <div>
-          <div class="mt-10 md:mt-0">
-            <h1
-              id="overview"
-              class="text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
-            >
-              {pageFrontMatter.title}
-            </h1>
-          </div>
-
-          <div class="md:-mt-10">
-            <article class={proseClasses}>
-              <PageContent />
-            </article>
-          </div>
-          <div class="mt-[72px] flex items-center justify-between">
-            <h3 class="text-xl font-bold md:text-2lg lg:text-3lg">
-              Community Contributions
-            </h3>
-          </div>
-          <div
-            class="not-prose mt-6 flex flex-col justify-between gap-x-6 gap-y-4 md:mt-8 md:gap-y-5 lg:flex-row lg:border-b lg:pb-[20px]"
+    <div
+      class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
+    >
+      <div>
+        <div class="mt-10 md:mt-0">
+          <h1
+            id="overview"
+            class="text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
           >
-            <div
-              class="flex items-center gap-x-4 border-b pb-4 md:pb-5 lg:border-0 lg:pb-0"
-            >
-              <Tag href={`/community/community-contributions/`}>All</Tag>
-
-              {
-                tags.map((tag: string) => (
-                  <Tag
-                    active={
-                      astroUrl.pathname
-                        .split("/")[3]
-                        .split("%20")
-                        .join(" ")
-                        .toLowerCase() === tag.toLowerCase()
-                    }
-                    href={`/community/community-contributions/${tag.toLowerCase()}/latest/1`}
-                  >
-                    {tag.charAt(0).toUpperCase() + tag.slice(1)}
-                  </Tag>
-                ))
-              }
-            </div>
-
-            <div class="flex items-center justify-end lg:justify-between">
-              <SearchDialog client:load currentPath={astroUrl.pathname} />
-            </div>
-          </div>
+            {pageFrontMatter.title}
+          </h1>
         </div>
 
-        <div>
+        <div class="md:-mt-10">
+          <article class={proseClasses}>
+            <PageContent />
+          </article>
+        </div>
+        <div class="mt-[72px] flex items-center justify-between">
+          <h3 class="text-xl font-bold md:text-2lg lg:text-3lg">
+            Community Contributions
+          </h3>
+        </div>
+        <div
+          class="not-prose mt-6 flex flex-col justify-between gap-x-6 gap-y-4 md:mt-8 md:gap-y-5 lg:flex-row lg:border-b lg:pb-[20px]"
+        >
           <div
-            class="mt-[42px] grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-6 lg:grid-cols-3"
+            class="flex items-center gap-x-4 border-b pb-4 md:pb-5 lg:border-0 lg:pb-0"
           >
+            <Tag href={`/community/community-contributions/`}>All</Tag>
+
             {
-              page.data.map((contribution: Project, i: number) => {
-                return <Card contribution={contribution} />;
-              })
+              tags.map((tag: string) => (
+                <Tag
+                  active={
+                    astroUrl.pathname
+                      .split("/")[3]
+                      .split("%20")
+                      .join(" ")
+                      .toLowerCase() === tag.toLowerCase()
+                  }
+                  href={`/community/community-contributions/${tag.toLowerCase()}/latest/1`}
+                >
+                  {tag.charAt(0).toUpperCase() + tag.slice(1)}
+                </Tag>
+              ))
             }
           </div>
 
-          <Pagination page={page} />
+          <div class="flex items-center justify-end lg:justify-between">
+            <SearchDialog client:load currentPath={astroUrl.pathname} />
+          </div>
         </div>
-        <div class="md:hidden">
-          <NextPrevNav
-            nav={findPrevAndNextPages(nav, "/community/community-akash-edu/")}
-          />
+      </div>
+
+      <div>
+        <div
+          class="mt-[42px] grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-6 lg:grid-cols-3"
+        >
+          {
+            page.data.map((contribution: Project, i: number) => {
+              return <Card contribution={contribution} />;
+            })
+          }
         </div>
+
+        <Pagination page={page} />
+      </div>
+      <div class="md:hidden">
+        <NextPrevNav
+          nav={findPrevAndNextPages(nav, "/community/community-akash-edu/")}
+        />
       </div>
     </div>
   </div>
diff --git a/src/pages/community/events/index.astro b/src/pages/community/events/index.astro
index 17b07641..67204f9d 100644
--- a/src/pages/community/events/index.astro
+++ b/src/pages/community/events/index.astro
@@ -1,7 +1,5 @@
 ---
-import MobileNav from "@/components/community-pages/mobile-nav";
 import { nav } from "@/components/community-pages/nav-config.ts";
-import SideNav from "@/components/community-pages/side-nav.astro";
 import Tag from "@/components/ui/tag2.astro";
 import Layout from "@/layouts/layout.astro";
 import {
@@ -101,68 +99,54 @@ console.log(sortedMonthwiseArray);
   description={data?.description}
 >
   <TopMargin>
-    <div class="grid grid-cols-12 gap-x-5">
-      <SideNav nav={nav} link={link} />
-
-      <div
-        class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
-      >
-        <div class="flex items-center justify-between gap-x-3 md:hidden">
-          <MobileNav
-            currentPath={Astro.url.pathname}
-            nav={nav}
-            pageName={pageName}
-            client:load
-            link={link}
-          />
+    <div
+      class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
+    >
+      <div>
+        <div class="mt-10 md:mt-0">
+          <h1
+            id="overview"
+            class="text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
+          >
+            {data?.title}
+          </h1>
+          <p class="mt-3 text-base leading-[24px] text-para">
+            {data?.description}
+          </p>
+
+          <div class="my-8 border-b"></div>
         </div>
 
-        <div>
-          <div class="mt-10 md:mt-0">
-            <h1
-              id="overview"
-              class="text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
-            >
-              {data?.title}
-            </h1>
-            <p class="mt-3 text-base leading-[24px] text-para">
-              {data?.description}
-            </p>
-
-            <div class="my-8 border-b"></div>
-          </div>
-
-          <div class="flex items-center gap-x-4">
-            <Tag
-              active={astroUrl.pathname === "/community/events/"}
-              href={`/community/events/`}
-            >
-              All
-            </Tag>
-
-            <Tag href={`/community/events/upcoming`}>Upcoming</Tag>
-          </div>
+        <div class="flex items-center gap-x-4">
+          <Tag
+            active={astroUrl.pathname === "/community/events/"}
+            href={`/community/events/`}
+          >
+            All
+          </Tag>
+
+          <Tag href={`/community/events/upcoming`}>Upcoming</Tag>
         </div>
+      </div>
 
-        <div>
-          {
-            sortedMonthwiseArray?.map((item: any) => (
-              <div class="">
-                <h2 class="mt-10 text-lg font-bold  md:text-2lg ">
-                  {item.month}
-                </h2>
-                <div class=" mt-8 grid grid-cols-1 gap-y-8 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3">
-                  {item.events.map((card: any) => (
-                    <EventCard card={card} />
-                  ))}
-                </div>
+      <div>
+        {
+          sortedMonthwiseArray?.map((item: any) => (
+            <div class="">
+              <h2 class="mt-10 text-lg font-bold  md:text-2lg ">
+                {item.month}
+              </h2>
+              <div class=" mt-8 grid grid-cols-1 gap-y-8 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3">
+                {item.events.map((card: any) => (
+                  <EventCard card={card} />
+                ))}
               </div>
-            ))
-          }
-        </div>
-        <div class="md:hidden">
-          <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
-        </div>
+            </div>
+          ))
+        }
+      </div>
+      <div class="md:hidden">
+        <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
       </div>
     </div>
   </TopMargin>
diff --git a/src/pages/community/events/upcoming.astro b/src/pages/community/events/upcoming.astro
index a6899cad..4f1e1519 100644
--- a/src/pages/community/events/upcoming.astro
+++ b/src/pages/community/events/upcoming.astro
@@ -1,7 +1,5 @@
 ---
-import MobileNav from "@/components/community-pages/mobile-nav";
 import { nav } from "@/components/community-pages/nav-config.ts";
-import SideNav from "@/components/community-pages/side-nav.astro";
 import Tag from "@/components/ui/tag2.astro";
 import Layout from "@/layouts/layout.astro";
 import { getCollection, type CollectionEntry } from "astro:content";
@@ -17,9 +15,7 @@ const flatedTag = cards.map((card) => card.data.tags).flat();
 const pathname = new URL(Astro.request.url).pathname;
 
 const allCards = cards.map((card) => card.data);
-console.log(allCards);
 
-const tags: string[] = [...new Set(flatedTag)];
 const astroUrl = Astro.url;
 const pageName = pathname
   .split("/")[2]
@@ -27,8 +23,6 @@ const pageName = pathname
   .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))
   .join(" ");
 
-console.log(allCards);
-
 const monthwise = allCards.reduce((acc: any, curr: any) => {
   if (curr.tbd) {
     if (!acc["TBD"]) {
@@ -110,63 +104,49 @@ const link =
   image="/meta-images/community.png"
 >
   <TopMargin>
-    <div class="grid grid-cols-12 gap-x-5">
-      <SideNav nav={nav} link={link} />
-
-      <div
-        class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
-      >
-        <div class="flex items-center justify-between gap-x-3 md:hidden">
-          <MobileNav
-            currentPath={Astro.url.pathname}
-            nav={nav}
-            pageName={pageName}
-            client:load
-            link={link}
-          />
+    <div
+      class={`col-span-12 mx-auto w-full md:pl-10   md:px-5 md:col-span-8 lg:col-span-9 `}
+    >
+      <div>
+        <div class="mt-10 md:mt-0">
+          <h1
+            id="overview"
+            class="text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
+          >
+            Akash Events
+          </h1>
+          <p class="mt-3 text-base leading-[24px] text-para">
+            Here is the list of upcoming events
+          </p>
+
+          <div class="my-8 border-b"></div>
         </div>
 
-        <div>
-          <div class="mt-10 md:mt-0">
-            <h1
-              id="overview"
-              class="text-2xl font-bold leading-[40px] md:text-2lg md:leading-[48px] lg:text-3lg"
-            >
-              Akash Events
-            </h1>
-            <p class="mt-3 text-base leading-[24px] text-para">
-              Here is the list of upcoming events
-            </p>
-
-            <div class="my-8 border-b"></div>
-          </div>
-
-          <div class="flex items-center gap-x-4">
-            <Tag href={`/community/events/`}>All</Tag>
-
-            <Tag active href={`/community/events/upcoming`}>Upcoming</Tag>
-          </div>
+        <div class="flex items-center gap-x-4">
+          <Tag href={`/community/events/`}>All</Tag>
+
+          <Tag active href={`/community/events/upcoming`}>Upcoming</Tag>
         </div>
+      </div>
 
-        <div>
-          {
-            filteredMonthwiseArray2?.map((item: any) => (
-              <div class="">
-                <h2 class="mt-10 text-lg font-bold  md:text-2lg ">
-                  {item.month}
-                </h2>
-                <div class=" mt-8 grid grid-cols-1 gap-y-8 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3">
-                  {item.events.map((card: any) => (
-                    <EventCard card={card} />
-                  ))}
-                </div>
+      <div>
+        {
+          filteredMonthwiseArray2?.map((item: any) => (
+            <div class="">
+              <h2 class="mt-10 text-lg font-bold  md:text-2lg ">
+                {item.month}
+              </h2>
+              <div class=" mt-8 grid grid-cols-1 gap-y-8 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3">
+                {item.events.map((card: any) => (
+                  <EventCard card={card} />
+                ))}
               </div>
-            ))
-          }
-        </div>
-        <div class="md:hidden">
-          <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
-        </div>
+            </div>
+          ))
+        }
+      </div>
+      <div class="md:hidden">
+        <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
       </div>
     </div>
   </TopMargin>
diff --git a/src/pages/development/[...slug].astro b/src/pages/development/[...slug].astro
index ed3d96c9..631631fc 100644
--- a/src/pages/development/[...slug].astro
+++ b/src/pages/development/[...slug].astro
@@ -1,16 +1,10 @@
 ---
-import { type CollectionEntry, getCollection } from "astro:content";
 import { nav } from "@/components/development-pages/nav-config";
-import { SideNav } from "../../components/development-pages/side-nav.tsx";
-import TableOfContents from "@/components/development-pages/table-of-contents.tsx";
-import MobileTableOfContents from "@/components/development-pages/mobile-table-of-contents.tsx";
-import generateToc from "@/lib/generateToc";
 import NextPrevNav from "@/components/development-pages/next-prev-nav.astro";
-import MobileNav from "@/components/development-pages/mobile-nav.tsx";
+import TopMargin from "@/components/ui/top-margin.astro";
 import Layout from "@/layouts/layout.astro";
 import { proseClasses } from "@/lib/prose-classes";
-import TopMargin from "@/components/ui/top-margin.astro";
-import SubItemsSidebar from "@/components/sub-items-sidebar.astro";
+import { type CollectionEntry, getCollection } from "astro:content";
 
 export async function getStaticPaths() {
   const pages = await getCollection("Development_Page");
@@ -71,55 +65,26 @@ const fileType = page.id.split("/")[1].split(".")[1];
   image="/meta-images/development.png"
 >
   <TopMargin>
-    <div class="grid grid-cols-12 gap-x-5">
-      <SubItemsSidebar
-        nav={nav}
-        link={`https://github.com/akash-network/website-revamp/blob/main/src/content/Development_Page/${page.slug}/index.${fileType}`}
-      />
-
-      <div
-        class={`col-span-12 mx-auto w-full md:pl-10 md:col-span-8 lg:col-span-9`}
-      >
-        <div class="mt-6 flex items-center justify-start gap-x-3 md:hidden">
-          <MobileNav
-            pageName={Astro.url.pathname
-              .split("/")[2]
-              .split("-")
-              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-              .join(" ")}
-            currentPath={Astro.url.pathname}
-            nav={nav}
-            client:load
-            link={`https://github.com/akash-network/website-revamp/blob/main/src/content/Development_Page/${page.slug}/index.${fileType}`}
-          />
-
-          <MobileTableOfContents
-            client:load
-            toc={generateToc(headings, "Overview")}
-            labels={{
-              onThisPage: "onThisPage",
-            }}
-          />
+    <div
+      class={`col-span-12 mx-auto w-full md:pl-10 md:col-span-8 lg:col-span-9`}
+    >
+      <div class="space-y-10">
+        <div class="mt-10 md:mt-0">
+          <h1
+            id="overview"
+            class="text-2xl font-bold leading-[48px] md:text-2lg md:leading-[62.4px] lg:text-3lg"
+          >
+            {page.data.title}
+          </h1>
         </div>
 
-        <div class="space-y-10">
-          <div class="mt-10 md:mt-0">
-            <h1
-              id="overview"
-              class="text-2xl font-bold leading-[48px] md:text-2lg md:leading-[62.4px] lg:text-3lg"
-            >
-              {page.data.title}
-            </h1>
-          </div>
-
-          <article class={proseClasses}>
-            <Content />
-          </article>
-        </div>
+        <article class={proseClasses}>
+          <Content />
+        </article>
+      </div>
 
-        <div class="md:hidden">
-          <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
-        </div>
+      <div class="md:hidden">
+        <NextPrevNav nav={findPrevAndNextPages(nav, pathname)} />
       </div>
     </div>
   </TopMargin>
diff --git a/src/pages/ecosystem/akash-tools/latest/[...page].astro b/src/pages/ecosystem/akash-tools/latest/[...page].astro
index 8ce9d476..27e079e6 100644
--- a/src/pages/ecosystem/akash-tools/latest/[...page].astro
+++ b/src/pages/ecosystem/akash-tools/latest/[...page].astro
@@ -1,21 +1,15 @@
 ---
-import Layout from "@/layouts/layout.astro";
 import ProjectCard from "@/components/ecosystem-pages/project-card.astro";
-import { SortActions } from "../../../../components/ecosystem-pages/sort-actions";
-import Pagination from "@/components/pagination.astro";
-import Tag from "@/components/ui/tag.astro";
-import { Image } from "astro:assets";
-import ChevronRight from "@/assets/chevron-right.svg";
-import { getCollection, type CollectionEntry } from "astro:content";
-import type { PaginateFunction } from "astro";
-import EcosystemNavbar from "@/components/ecosystem-pages/ecosystem-navbar.astro";
-import SearchDialog from "@/components/ecosystem-pages/search-dialog";
 import SortDropDown from "@/components/ecosystem-pages/sort-dropdown";
 import TagsSortDropDown from "@/components/ecosystem-pages/tags-sort-dropdown";
+import Pagination from "@/components/pagination.astro";
+import Layout from "@/layouts/layout.astro";
+import type { PaginateFunction } from "astro";
+import { getCollection, type CollectionEntry } from "astro:content";
 
-import TopMargin from "@/components/ui/top-margin.astro";
-import TopHeader from "@/components/ecosystem-pages/top-header.astro";
 import Categories from "@/components/ecosystem-pages/categories.astro";
+import TopHeader from "@/components/ecosystem-pages/top-header.astro";
+import TopMargin from "@/components/ui/top-margin.astro";
 type Project = CollectionEntry<"Ecosystem_Page">;
 
 // Define a function to generate static paths
diff --git a/src/pages/ecosystem/providers/index.astro b/src/pages/ecosystem/providers/index.astro
deleted file mode 100644
index 695f85a3..00000000
--- a/src/pages/ecosystem/providers/index.astro
+++ /dev/null
@@ -1,28 +0,0 @@
----
-import EcosystemNavbar from "@/components/ecosystem-pages/ecosystem-navbar.astro";
-import Layout from "@/layouts/layout.astro";
-
-import Dashboard from "@/components/ecosystem-pages/providers-page/dashboard.tsx";
-import { SortActions } from "@/components/ecosystem-pages/sort-actions";
-import { getProviderList } from "@/components/ecosystem-pages/providers-page/useProviderList";
-import TopMargin from "@/components/ui/top-margin.astro";
-
-const astroUrl = Astro.url;
-
-const pathName = astroUrl.pathname.split("/");
-
-let initialData = await getProviderList();
----
-
-<Layout
-  title="Providers | Explore the Akash Ecosystem"
-  image="/meta-images/ecosystem.png"
->
-  <TopMargin>
-    <h1 class="text-2xl font-bold md:block md:text-2lg lg:text-3lg">
-      Explore the Akash Ecosystem
-    </h1>
-  </TopMargin>
-
-  <Dashboard client:load pathName={pathName} initialProviders={initialData} />
-</Layout>
diff --git a/src/pages/providers.astro b/src/pages/providers.astro
index 5444e042..5069d25b 100644
--- a/src/pages/providers.astro
+++ b/src/pages/providers.astro
@@ -1,12 +1,10 @@
 ---
-import Layout from "@/layouts/layout.astro";
-import Card from "../components/providers-page/card.tsx";
-import PraetorsCard from "../components/providers-page/praetors-card.astro";
-import { getEntryBySlug } from "astro:content";
 import ResourcesCard from "@/components/providers-page/resources-card.astro";
 import TopPagination from "@/components/providers-page/top-pagination.astro";
+import Layout from "@/layouts/layout.astro";
 import { Image } from "astro:assets";
-import ButtonLink from "@/components/ui/button-link.astro";
+import { getEntryBySlug } from "astro:content";
+import PraetorsCard from "../components/providers-page/praetors-card.astro";
 
 const providersPage = await getEntryBySlug("Providers_Homepage", "index");
 const {
@@ -87,7 +85,7 @@ console.log(resourcesSection);
             <a
               target="_blank"
               href={heroSection.button.link}
-              class="inline-flex cursor-pointer items-center justify-center rounded-lg bg-primary px-4 py-1 text-xs font-medium leading-none text-white hover:bg-primary/90 md:px-6 md:py-[6px] md:text-base"
+              class="hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center rounded-lg bg-primary px-4 py-1 text-xs font-medium leading-none text-white md:px-6 md:py-[6px] md:text-base"
             >
               <svg
                 width="34"
diff --git a/src/pages/token.astro b/src/pages/token.astro
index 2a39a3d3..bc43ed3c 100644
--- a/src/pages/token.astro
+++ b/src/pages/token.astro
@@ -56,7 +56,7 @@ const nav = [
 >
   <TopMargin>
     <div class="grid-cols-12 gap-x-10 md:grid">
-      <div class="sticky top-[120px] hidden h-screen md:col-span-3 md:block">
+      <div class="sticky top-[176px] hidden h-screen md:col-span-3 md:block">
         <p class="text-sm font-bold leading-[20px]">ON THIS PAGE</p>
 
         <div class="border-b py-2"></div>