From 4c5d7fd76759360cf8afd9ecfd327a0f4b66db65 Mon Sep 17 00:00:00 2001
From: gautamgambhir97 <140384949+gautamgambhir97@users.noreply.github.com>
Date: Tue, 12 Nov 2024 16:37:34 +0530
Subject: [PATCH] feat(misc): update guides main page design (#1037)

---
 .github/spelling/known_words_corpus.txt |   6 +-
 components/components.module.css        | 177 ++++++++++
 components/guide-mdx.tsx                | 300 +++++++++++------
 pages/concepts.mdx                      | 319 +++++++-----------
 pages/examples.mdx                      | 358 ++++++++++----------
 pages/guides.mdx                        |  42 ++-
 pages/references.mdx                    | 422 +++++++++---------------
 src/icons/main-page-icons.tsx           | 263 +++++++++++++++
 src/icons/shared-icons.tsx              |  13 +-
 styles/globals.css                      |  26 +-
 10 files changed, 1182 insertions(+), 744 deletions(-)
 create mode 100644 components/components.module.css
 create mode 100644 src/icons/main-page-icons.tsx

diff --git a/.github/spelling/known_words_corpus.txt b/.github/spelling/known_words_corpus.txt
index 8500b646d..38f45e7ad 100644
--- a/.github/spelling/known_words_corpus.txt
+++ b/.github/spelling/known_words_corpus.txt
@@ -716,4 +716,8 @@ jupyter
 streamlit
 bot
 screenshots
-aws
\ No newline at end of file
+aws
+guidesmdx
+agentsicon
+ledgericon
+asiicon
\ No newline at end of file
diff --git a/components/components.module.css b/components/components.module.css
new file mode 100644
index 000000000..f349774e3
--- /dev/null
+++ b/components/components.module.css
@@ -0,0 +1,177 @@
+.sectionDetails {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 24px 8px 16px;
+  align-items: center;
+  gap: 2px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid #dce2ea;
+  backdrop-filter: blur(35px);
+  cursor: pointer;
+  width: 100%;
+  color: #000d3d;
+  font-family: Lexend;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  letter-spacing: -0.16px;
+}
+
+:is(html[class~="dark"] .sectionDetails) {
+  border-radius: var(--8, 8px);
+  background: #2c2e38;
+  backdrop-filter: blur(35px);
+  color: #e9e9ea;
+  border: none;
+}
+
+:is(html[class~="dark"] .sectionDetails:hover) {
+  background: rgba(95, 56, 251, 0.2);
+  backdrop-filter: blur(35px);
+  color: #bfaffd;
+}
+
+.sectionDetails:hover {
+  background: #efebff;
+  backdrop-filter: blur(35px);
+  color: #5f38fb;
+  border: 1px solid #ffff;
+}
+
+.iconContainer {
+  display: flex;
+  width: 54px;
+  height: 54px;
+  padding: 11px 11.123px 11px 11.124px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: #f3f5f8;
+}
+
+.heading {
+  color: var(--Cold-Grey-Grey500-Coolgrey, #8a9fb8);
+  font-family: Lexend;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+  text-transform: uppercase;
+}
+
+:is(html[class~="dark"] .heading) {
+  color: #a6a7ab;
+}
+
+.dropDownGuide {
+  display: flex;
+  width: 280px;
+  height: 44px;
+  padding: 12px;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid #d0d9e3;
+  cursor: pointer;
+}
+
+:is(html[class~="dark"] .dropDownGuide) {
+  border-radius: 8px;
+  border: 1px solid var(--Dark-Mode-White-20, #4d4f57);
+  background-color: transparent;
+}
+
+.dropdownActive {
+  color: #0b1742;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  opacity: 0.6;
+}
+:is(html[class~="dark"] .dropdownActive) {
+  color: #d2d3d5;
+}
+
+.inputBoxGuide {
+  display: flex;
+  padding: var(--12, 12px) var(--112, 112px) var(--12, 12px) var(--12, 12px);
+  align-items: center;
+  gap: var(--6, 6px);
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid var(--Cold-Grey-Grey250, #d0d9e3);
+  color: #0b1742;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+:is(html[class~="dark"] .inputBoxGuide) {
+  background-color: #2c2e38;
+  border: none;
+  color: #fff;
+}
+
+.inputGuide:focus-visible {
+  --tw-ring-shadow: none;
+  box-shadow: none;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: none;
+  --tw-ring-offset-width: 0;
+  --tw-ring-offset-color: transparent;
+}
+
+.inputGuide {
+  outline: none;
+  border: none;
+  width: 100%;
+  background: transparent;
+}
+
+.tab {
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  gap: 6px;
+  align-self: stretch;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.active {
+  background: #efebff;
+  backdrop-filter: blur(35px);
+  color: #5f38fb;
+}
+
+.tab:hover {
+  background: #efebff;
+  backdrop-filter: blur(35px);
+  color: #5f38fb;
+  border: 1px solid #ffff;
+}
+
+.label {
+  display: flex;
+  height: 24px;
+  padding: 2px 8px;
+  align-items: center;
+  gap: 4px;
+  border-radius: 4px;
+  background: #e8ecf1;
+  color: var(--Secondary-500, #556578);
+  text-align: center;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
diff --git a/components/guide-mdx.tsx b/components/guide-mdx.tsx
index ddabd04d2..95ec73dd7 100644
--- a/components/guide-mdx.tsx
+++ b/components/guide-mdx.tsx
@@ -1,8 +1,8 @@
-import React, { ChangeEvent, useState } from "react";
-import { GuideBox } from "./feature-guide-tabs";
-import { Grid3 } from "./mdx";
-import styles from "./footer.module.css";
-import { SearchIcon } from "src/icons/shared-icons";
+import React, { ReactNode, useState, ChangeEvent } from "react";
+import { SearchIcon, DropDownArrow } from "src/icons/shared-icons";
+import styles from "./components.module.css";
+import { motion } from "framer-motion";
+import Link from "next/link";
 
 interface Guide {
   title: string;
@@ -15,42 +15,182 @@ interface GuideCategory {
   description?: string;
   subSection?: boolean;
   data: Guide[];
+  icon?: () => React.JSX.Element;
 }
 
 interface GuidesData {
   content: GuideCategory[];
 }
 
-const GuideMdx = ({ content }: GuidesData) => {
-  const [value, setValue] = useState<string>("");
-  const [inputVal, setInputVal] = useState<string>("");
-  const [evt, setEvt] = useState<string>("");
+const pathLabels = new Map<RegExp, string>([
+  [/\/.*?(quickstart|getting-started).*?\//i, "Beginner"],
+  [/\/.*?intermediate.*?\//i, "Intermediate"],
+  [/\/.*?advanced.*?\//i, "Advanced"],
+]);
 
-  const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setEvt(event.target.name);
-    setValue(event.target.value);
+const getPathLabel = (path: string): string => {
+  for (const [regex, label] of pathLabels) {
+    if (regex.test(path)) {
+      return label;
+    }
+  }
+  return "";
+};
+
+const SectionHeading = ({
+  heading,
+  icon,
+}: {
+  heading: string;
+  icon?: () => React.JSX.Element;
+}) => (
+  <div className="nx-flex nx-flex-col nx-gap-6">
+    {icon && icon()}
+    <span className={styles.heading}>{heading}</span>
+  </div>
+);
+
+const SectionDetails = ({
+  children,
+  path,
+}: {
+  children: ReactNode;
+  path: string;
+}) => {
+  const label = getPathLabel(path);
+  return (
+    <div className={styles.sectionDetails}>
+      {children}
+      {label && <div className={`${styles.label}`}>{label}</div>}
+    </div>
+  );
+};
+
+const GridBox = ({ children }: { children: ReactNode }) => (
+  <div className="nx-grid nx-grid-cols-1 md:nx-grid-cols-2 nx-my-12 nx-items-start nx-gap-12">
+    {children}
+  </div>
+);
+
+const FilterDropdown = ({
+  content,
+  value,
+  onSelectChange,
+  isOpen,
+  toggleDropdown,
+  activeType,
+}: {
+  content: GuideCategory[];
+  value: string;
+  onSelectChange: (selectedType: string) => void;
+  isOpen: boolean;
+  toggleDropdown: () => void;
+  activeType: string;
+}) => (
+  <div>
+    <div onClick={toggleDropdown} className={styles.dropDownGuide}>
+      <span className={styles.dropdownActive}>{value}</span>
+      <DropDownArrow isActive={isOpen} />
+    </div>
+    {isOpen && (
+      <motion.div
+        initial={{ height: 0, opacity: 0 }}
+        animate={{ height: "auto", opacity: 1 }}
+        transition={{ duration: 0.1 }}
+        className="nx-z-50 nx-mt-2 nx-absolute dropDownGuide"
+        style={{ overflow: "hidden" }}
+      >
+        <div className="nx-flex-col nx-text-white nx-p-2 nx-w-full !nx-items-start nx-justify-between nx-cursor-pointer">
+          <div
+            className={`nx-text-lg nx-cursor-pointer ${styles.tab}`}
+            onClick={() => onSelectChange("All Types")}
+          >
+            All Types
+          </div>
+          {content
+            .map((item) => item.type)
+            .map((type) => (
+              <div
+                key={type}
+                className={`nx-text-lg ${styles.tab} ${
+                  activeType === type && styles.active
+                } nx-cursor-pointer`}
+                onClick={() => onSelectChange(type)}
+              >
+                {type}
+              </div>
+            ))}
+        </div>
+      </motion.div>
+    )}
+  </div>
+);
+
+const SearchInput = ({
+  inputVal,
+  onInputChange,
+}: {
+  inputVal: string;
+  onInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}) => (
+  <div className={styles.inputBoxGuide}>
+    <SearchIcon />
+    <input
+      value={inputVal}
+      onChange={onInputChange}
+      className={styles.inputGuide}
+      name="input"
+      placeholder="Search...."
+    />
+  </div>
+);
+
+const GuidesMdx = ({ content }: GuidesData) => {
+  const [filterState, setFilterState] = useState({
+    value: "All Types",
+    inputVal: "",
+    evt: "",
+    activeType: "All Types",
+    openDropdown: false,
+  });
+
+  const toggleDropdown = () =>
+    setFilterState((prev) => ({ ...prev, openDropdown: !prev.openDropdown }));
+
+  const onSelectChange = (selectedType: string) => {
+    setFilterState((prev) => ({
+      ...prev,
+      value: selectedType,
+      activeType: selectedType,
+      openDropdown: false,
+      evt: "select",
+    }));
   };
 
   const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setEvt(event.target.name);
-    setInputVal(event.target.value);
-    if (event.target.value === "") {
-      setEvt("select");
-      setValue(value);
-    }
+    const { value } = event.target;
+    setFilterState((prev) => ({
+      ...prev,
+      inputVal: value,
+      evt: value === "" ? "select" : "input",
+    }));
   };
 
   const filteredContent = content
     .map((con) => ({
       ...con,
       data: con.data.filter((item) => {
-        if (value !== "" && evt === "select") {
-          return con.type === value;
+        if (filterState.evt === "select" && filterState.value !== "All Types") {
+          return con.type === filterState.value;
         }
-        if (inputVal !== "" && evt === "input") {
+        if (filterState.evt === "input" && filterState.inputVal !== "") {
           return (
-            item.title.toLowerCase().includes(inputVal.toLowerCase()) ||
-            item.description.toLowerCase().includes(inputVal.toLowerCase())
+            item.title
+              .toLowerCase()
+              .includes(filterState.inputVal.toLowerCase()) ||
+            item.description
+              .toLowerCase()
+              .includes(filterState.inputVal.toLowerCase())
           );
         }
         return true;
@@ -59,80 +199,48 @@ const GuideMdx = ({ content }: GuidesData) => {
     .filter((con) => con.data.length > 0);
 
   return (
-    <div className="nx-flex nx-flex-col nx-w-full nx-mt-6">
-      <div className="md:nx-flex nx-block nx-gap-5">
-        <select
-          name="select"
-          onChange={onSelectChange}
-          className="nx-rounded-[10px] nx-outline-none nx-cursor-pointer nx-border nx-border-solid nx-bg-transparent nx-py-2 nx-px-4 dark:full-border-dark dark:nx-text-white-90"
-        >
-          <option value="">All Types</option>
-          {content
-            .map((item) => item.type)
-            .map((type) => (
-              <option key={type} value={type}>
-                {type}
-              </option>
-            ))}
-        </select>
-        <div className={styles.inputBox}>
-          <input
-            name="input"
-            value={inputVal}
-            onChange={onInputChange}
-            className={styles.inputInner}
-            placeholder="Search...."
-          />
-          <SearchIcon />
-        </div>
+    <>
+      <div className="md:nx-flex-row nx-flex-col nx-flex nx-mt-6 nx-gap-3">
+        <FilterDropdown
+          content={content}
+          value={filterState.value}
+          onSelectChange={onSelectChange}
+          isOpen={filterState.openDropdown}
+          toggleDropdown={toggleDropdown}
+          activeType={filterState.activeType}
+        />
+        <SearchInput
+          inputVal={filterState.inputVal}
+          onInputChange={onInputChange}
+        />
       </div>
-      {filteredContent.map((con, index) => (
-        <div key={index}>
-          <h2
-            className={`nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-pb-1 ${
-              con.subSection ? `nx-text-2xl` : `nx-text-3xl nx-border-b`
-            } nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400`}
-          >
-            {con.type}
-            <span
-              className="nx-absolute -nx-mt-20"
-              id={con.type.toLowerCase()}
-            ></span>
-            <a
-              href={`#${con.type.toLowerCase()}`}
-              className="subheading-anchor"
-              aria-label="Permalink for this section"
-            ></a>
-          </h2>
-          <div className="nx-text-fetch-content">{con.description}</div>
-          <Grid3>
-            {con.data
-              .filter((item) => {
-                if (inputVal !== "") {
-                  return (
-                    item.title.toLowerCase().includes(inputVal.toLowerCase()) ||
-                    item.description
-                      .toLowerCase()
-                      .includes(inputVal.toLowerCase())
-                  );
-                }
-                return true;
-              })
-              .map((guide, index) => (
-                <GuideBox
-                  key={index}
-                  content={{
-                    title: guide.title,
-                    description: guide.description,
-                    path: guide.path,
-                  }}
-                />
-              ))}
-          </Grid3>
-        </div>
-      ))}
-    </div>
+      <div>
+        <GridBox>
+          {filteredContent.map((items, index) => (
+            <div
+              key={index}
+              className="nx-flex nx-flex-col nx-items-start nx-gap-4"
+            >
+              <SectionHeading icon={items.icon} heading={items.type} />
+              <div className="nx-flex nx-flex-col nx-w-full nx-items-start nx-gap-4">
+                {items.data.map((item, itemIndex) => (
+                  <Link
+                    key={itemIndex}
+                    className="nx-text-blue-500 nx-w-full"
+                    href={item.path}
+                  >
+                    <SectionDetails path={item.path}>
+                      {item.title}
+                    </SectionDetails>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          ))}
+        </GridBox>
+      </div>
+    </>
   );
 };
 
-export default GuideMdx;
+export default GuidesMdx;
diff --git a/pages/concepts.mdx b/pages/concepts.mdx
index 60e597548..e611762d0 100644
--- a/pages/concepts.mdx
+++ b/pages/concepts.mdx
@@ -5,197 +5,128 @@
   start developing on the uAgents Framework and Agentverse services.
 </div>
 
-import { Grid2 } from "../components/mdx";
-import { GuideBox } from "../components/feature-guide-tabs";
-
-## Introduction to Fetch.ai
-
-<div className="nx-text-fetch-content">
-  Get to know Fetch.ai, the technology, tools and the goals we are delivering.
-</div>
-
-<Grid2>
-    <GuideBox
-        content={{
-            title: "Introducing Fetch.ai: pioneering an AI powered decentralized digital economy",
-            description: "Get to know Fetch.ai, the technology, tools and the goals we are delivering.",
-            path: "/concepts/introducing-fetchai"
-        }}
-    />
-
-</Grid2>
-
-## Agentverse
-
-<div className="nx-text-fetch-content">
-  Explore the resources and dive into the Agentverse and its functionalities.
-</div>
-
-<Grid2>
-    <GuideBox
-        content={{
-            title: "Agentverse: Introduction",
-            description: "Introducing the Agentverse platform.",
-            path: "/concepts/agent-services/agentverse-intro"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Agentverse: Explorer",
-            description: "Use the Agentverse Explorer to start interacting with other agents.",
-            path: "/concepts/agent-services/agent-explorer"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-    <GuideBox
-        content={{
-            title: "Agentverse: My Agents",
-            description: "Get started and to deploy agents to the cloud to start connecting and automating.",
-            path: "/concepts/agent-services/agent-hosting"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Agentverse: Mailroom / IoT Gateway",
-            description: "Set up Agentverse mailboxes for your locally-run agents and to run them independently of your constant presence to run the server.",
-            path: "/concepts/agent-services/agent-mail"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-    <GuideBox
-        content={{
-            title: "Agentverse: Agent Functions",
-            description: "The Agentverse makes it possible to register your agents and related Functions to be discoverable by the AI Engine and DeltaV.",
-            path: "/concepts/agent-services/services"
-        }}
-    />
-
-
-</Grid2>
-
-## AI Engine
-
-<div className="nx-text-fetch-content">
-  Discover how the AI Engine facilitates interactions by discovering user
-  preferences, transforming raw data into actionable insights through
-  collaboration with agent-based services.
-</div>
-
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "AI Engine: Introduction",
-            description: "Introducing the AI Engine and its role in DeltaV functionalities.",
-            path: "/concepts/ai-engine/ai-engine-intro"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Powering connections and smart operations in DeltaV",
-            description: "Explore the integration of AI Engine within DeltaV, enabling connections between users and agent Functions.",
-            path: "/concepts/ai-engine/powering-connections-and-smart-operations-in-deltav"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "DeltaV",
-            description: "Introducing DeltaV.",
-            path: "/concepts/deltav/intro"
-        }}
-    />
-
-</Grid2>
-
-## Fetch network
-
-<div className="nx-text-fetch-content">
-  Discover the tools and products constituting and adopted within the Fetch network.
-</div>
-
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Introducing the Fetch Network",
-            description: "An introduction to the different components constituting the Fetch Network.",
-            path: "/concepts/fetch-network/intro-fetch-network"
-        }}
-    />
-
-</Grid2>
-
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Native and ERC-20 FET tokens",
-            description: "Discover the difference between native and ERC-20 FET tokens.",
-            path: "/concepts/fetch-network/native-and-erc20-fet-tokens"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "The Almanac contract",
-            description: "Explore the role of the Almanac contract within the Fetch ecosystem.",
-            path: "/concepts/fetch-network/almanac"
-        }}
-    />
-
-</Grid2>
-
-### Ledger
-
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Ledger: Introduction",
-            description: "Get yourself started with Fetch Ledger.",
-            path: "/concepts/fetch-network/ledger/intro"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Validators overview",
-            description: "Explore the role of validators within the Fetch ecosystem.",
-            path: "/concepts/fetch-network/ledger/validators"
-        }}
-    />
-
-</Grid2>
-
-
-### Indexer
-
-<div className="nx-text-fetch-content">
-Explore how to index and query blockchain data efficiently using the SubQuery indexer for the Fetch ledger.
-
-</div>
-
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Indexer: An Introduction",
-            description: "Introducing the ledger-subquery is a SubQuery-based indexer for the Fetch ledger.",
-            path: "/concepts/fetch-network/indexer"
-        }}
-    />
-
-</Grid2>
-
-<div className="nx-mb-8"></div>
+import GuidesMdx from "../components/guide-mdx"
+import { AgentsIcon, AgentverseIcon ,FetchNetwork, LedgerIcon} from "src/icons/main-page-icons";
+
+
+<GuidesMdx content={[
+  {
+    type: "Introduction",
+    icon: AgentsIcon,
+    description: "Get to know Fetch.ai, the technology, tools and the goals we are delivering.",
+    data: [
+      {
+        title: "Introducing Fetch.ai: pioneering an AI powered decentralized digital economy",
+        description: "Get to know Fetch.ai, the technology, tools and the goals we are delivering.",
+        path: "/concepts/introducing-fetchai",
+      },
+    ],
+  },
+  {
+    type: "Agentverse",
+    icon: AgentverseIcon,
+    description: "Explore the resources and dive into the Agentverse and its functionalities.",
+    data: [
+      {
+        title: "Agentverse: Introduction",
+        description: "Introducing the Agentverse platform.",
+        path: "/concepts/agent-services/agentverse-intro",
+      },
+      {
+        title: "Agentverse: Explorer",
+        description: "Use the Agentverse Explorer to start interacting with other agents.",
+        path: "/concepts/agent-services/agent-explorer",
+      },
+      {
+        title: "Agentverse: My Agents",
+        description: "Get started and deploy agents to the cloud to start connecting and automating.",
+        path: "/concepts/agent-services/agent-hosting",
+      },
+      {
+        title: "Agentverse: Mailroom / IoT Gateway",
+        description: "Set up Agentverse mailboxes for your locally-run agents and run them independently of your constant presence to run the server.",
+        path: "/concepts/agent-services/agent-mail",
+      },
+      {
+        title: "Agentverse: Agent Functions",
+        description: "The Agentverse makes it possible to register your agents and related Functions to be discoverable by the AI Engine and DeltaV.",
+        path: "/concepts/agent-services/services",
+      },
+    ],
+  },
+  {
+    type: "AI Engine",
+    icon: AgentsIcon,
+    description: "Discover how the AI Engine facilitates interactions by discovering user preferences, transforming raw data into actionable insights through collaboration with agent-based services.",
+    data: [
+      {
+        title: "AI Engine: Introduction",
+        description: "Introducing the AI Engine and its role in DeltaV functionalities.",
+        path: "/concepts/ai-engine/ai-engine-intro",
+      },
+      {
+        title: "Powering connections and smart operations in DeltaV",
+        description: "Explore the integration of AI Engine within DeltaV, enabling connections between users and agent Functions.",
+        path: "/concepts/ai-engine/powering-connections-and-smart-operations-in-deltav",
+      },
+      {
+        title: "DeltaV",
+        description: "Introducing DeltaV.",
+        path: "/concepts/deltav/intro",
+      },
+    ],
+  },
+  {
+    type: "Fetch Network",
+    icon: FetchNetwork,
+    description: "Discover the tools and products constituting and adopted within the Fetch network.",
+    data: [
+      {
+        title: "Introducing the Fetch Network",
+        description: "An introduction to the different components constituting the Fetch Network.",
+        path: "/concepts/fetch-network/intro-fetch-network",
+      },
+      {
+        title: "Native and ERC-20 FET tokens",
+        description: "Discover the difference between native and ERC-20 FET tokens.",
+        path: "/concepts/fetch-network/native-and-erc20-fet-tokens",
+      },
+      {
+        title: "The Almanac contract",
+        description: "Explore the role of the Almanac contract within the Fetch ecosystem.",
+        path: "/concepts/fetch-network/almanac",
+      },
+    ],
+  },
+  {
+    type: "Ledger",
+    icon: LedgerIcon,
+    description: "Get yourself started with Fetch Ledger and understand the role of validators.",
+    data: [
+      {
+        title: "Ledger: Introduction",
+        description: "Get yourself started with Fetch Ledger.",
+        path: "/concepts/fetch-network/ledger/intro",
+      },
+      {
+        title: "Validators overview",
+        description: "Explore the role of validators within the Fetch ecosystem.",
+        path: "/concepts/fetch-network/ledger/validators",
+      },
+    ],
+  },
+  {
+    type: "Indexer",
+    icon: AgentsIcon,
+    description: "Explore how to index and query blockchain data using the SubQuery indexer for the Fetch ledger.",
+    data: [
+      {
+        title: "Indexer: An Introduction",
+        description: "Introducing the ledger-subquery, a SubQuery-based indexer for the Fetch ledger.",
+        path: "/concepts/fetch-network/indexer",
+      },
+    ],
+  }
+]} />
+
+<div className="nx-mb-8"></div>
\ No newline at end of file
diff --git a/pages/examples.mdx b/pages/examples.mdx
index 73b2ecd0a..59be51c6a 100644
--- a/pages/examples.mdx
+++ b/pages/examples.mdx
@@ -4,179 +4,191 @@
   Quick examples of complete Agents to get started quickly.
 </div>
 
-import  ExamplesMdx  from "../components/examples-mdx";
+import GuidesMdx from "../components/guide-mdx"
+import { AgentsIcon, LedgerIcon, AgentverseIcon} from "src/icons/main-page-icons";
 
-<ExamplesMdx 
- content={[
-{
-    type:"Agents",
-    title: "Create your first Agent",
-    description: "An example showing how to create Agents using the uAgents Python library.",
-    path: "/examples/getting-started/first-agent"
-},
-{
-    type:"Agents",
-    title: "Interval task with Agents",
-    description: "An example to show what an interval task is using Agents.",
-    path: "/examples/intermediate/agents-interval-task"
-},
-{
+<GuidesMdx content={[
+  {
     type: "Agents",
-    title: "Local Network Interaction",
-    description: "An example showing how to set up a local network interaction.",
-    path: "/examples/intermediate/local-communication",
-},
-{
-    type:"Agents",
-    title: "Multiple agents communication",
-    description: "An example shows to create two different Agents and make them communicate using the uAgents Python library.",
-    path: "/examples/intermediate/multiple-agents",
-},
-{
-    type:"Agents",
-    title: "Simple communication between two agents",
-    description: "An example for communication between two Agents.",
-    path: "/examples/intermediate/simple-agent-communication",
-},
-{
-    type:"Agents",
-    title: "Agents Storage",
-    description: "An example showing how to use Agents storage functions using the uAgents Python library.",
-    path: "/examples/intermediate/storage",
-},
-{
-    type:"Agents",
-    title: "Table booking service with Agents",
-    description: "An example showing how to set up a table booking service using Agents.",
-    path: "/examples/intermediate/table-booking-demo",
-},
-{
-    type:"Agents",
-    title: "Cleaning service with Agents",
-    description: "An example showing how to set up a cleaning service using Agents.",
-    path: "/examples/intermediate/agents-cleaning-demo",
-},
-{
-    type:"Agents",
-    title: "Sending tokens with Agents",
-    description: "An example to show how to use Agents to make them send tokens.",
-    path: "/examples/intermediate/send-tokens-agents",
-},
-{
-    type:"Agents",
-    title: "Message verification with Agents",
-    description: "An example to show how to verify messages using Agents.",
-    path: "/examples/intermediate/verify-messages",
-
-},
-{
-    type: "Agents",
-    title: "Wallet Messaging between two agents",
-    description: "An example showing how to set up Agents communication via the Fetch Wallet.",
-    path: "/examples/intermediate/wallet-messaging",
-},
-{
-    type: "Agents",
-    title: "Asynchronous Loops",
-    description: "An example showing how to set up asynchronous loops with Agents.",
-    path: "/examples/advanced/async-loops",
-},
-{
-    type: "Agentverse",
-    title: "Agents communication with Mailbox",
-    description: "An example for Agents communication using the Agentverse Mailbox feature.",
-    path: "/examples/intermediate/mailbox-agents",
-},
-{
+    icon: AgentsIcon,
+    description: "Examples showing how to create and manage Agents using the uAgents Python library.",
+    data: [
+      {
+        title: "Create your first Agent",
+        description: "An example showing how to create Agents using the uAgents Python library.",
+        path: "/examples/getting-started/first-agent"
+      },
+      {
+        title: "Interval task with Agents",
+        description: "An example to show what an interval task is using Agents.",
+        path: "/examples/intermediate/agents-interval-task"
+      },
+      {
+        title: "Local Network Interaction",
+        description: "An example showing how to set up a local network interaction.",
+        path: "/examples/intermediate/local-communication"
+      },
+      {
+        title: "Multiple agents communication",
+        description: "An example showing how to create two different Agents and make them communicate using the uAgents Python library.",
+        path: "/examples/intermediate/multiple-agents"
+      },
+      {
+        title: "Simple communication between two agents",
+        description: "An example for communication between two Agents.",
+        path: "/examples/intermediate/simple-agent-communication"
+      },
+      {
+        title: "Agents Storage",
+        description: "An example showing how to use Agents storage functions using the uAgents Python library.",
+        path: "/examples/intermediate/storage"
+      },
+      {
+        title: "Table booking service with Agents",
+        description: "An example showing how to set up a table booking service using Agents.",
+        path: "/examples/intermediate/table-booking-demo"
+      },
+      {
+        title: "Cleaning service with Agents",
+        description: "An example showing how to set up a cleaning service using Agents.",
+        path: "/examples/intermediate/agents-cleaning-demo"
+      },
+      {
+        title: "Sending tokens with Agents",
+        description: "An example to show how to use Agents to make them send tokens.",
+        path: "/examples/intermediate/send-tokens-agents"
+      },
+      {
+        title: "Message verification with Agents",
+        description: "An example to show how to verify messages using Agents.",
+        path: "/examples/intermediate/verify-messages"
+      },
+      {
+        title: "Wallet Messaging between two agents",
+        description: "An example showing how to set up Agents communication via the Fetch Wallet.",
+        path: "/examples/intermediate/wallet-messaging"
+      },
+      {
+        title: "Asynchronous Loops",
+        description: "An example showing how to set up asynchronous loops with Agents.",
+        path: "/examples/advanced/async-loops"
+      }
+    ]
+  },
+  {
     type: "Agentverse",
-    title: "Agents broadcast",
-    description: "An example showing how to use a custom protocol to make Agents communicate.",
-    path: "/examples/intermediate/broadcast",
-},
-{
-    type: "Agentverse",
-    title: "Agents Name Service",
-    description: "An example showing how to set up Agents Name Services.",
-    path: "/examples/intermediate/name-service",
-},
-{
-    type: "Agents", 
-    title: "Query an agent using a proxy API",
-    description: "An example showing how to query an agent using a proxy API.",
-    path: "/examples/intermediate/on-query-proxy",
-},
-{
-    type: 'DeltaV',
-    title: "Agentverse Functions: register a coin toss function on DeltaV",
-    description: "An example for a coin toss agent function available on DeltaV.",
-    path: "/examples/intermediate/coin-toss",
-},
-{
-    type: 'DeltaV',
-    title: "Agentverse Functions: register a dice roll function on DeltaV",
-    description: "An example for a dice roll agent function available on DeltaV.",
-    path: "/examples/intermediate/dice-roll",
-},
-{
-    type: "DeltaV", 
-    title: "Agentverse Functions: register a local agent as a function",
-    description: "An example for a local AI Agent registered as a function available on DeltaV.",
-    path: "/examples/local-agent-registration",
-},
-{
-    type: "Agentverse",
-    title: "Hugging face API agent as a function",
-    description: "An example for an integration of the Hugging Face API with an Agentverse Agent.",
-    path: "/examples/intermediate/hugging-face-agent",
-},
-{
-    type: 'DeltaV', 
-    title: "Using News API to build network of Primary and Secondary function in Agentverse",
-    description: "An example for a news reading agent showing operations with Primary and Secondary functions.",
-    path: "/examples/intermediate/news-reading-system",
-},
-{
-    type: 'DeltaV',
-    title: "Locally Hosted Agent with LangChain Integration",
-    description: "An example for a locally hosted agent that utilizes LangChain's Etherscan integration.",
-    path: "/examples/intermediate/local-agent-langchain",
-},
-   {
-    type: 'Agentverse API',
-    title: "Agent and Service Creation using APIs",
-    description: "An example on how to create agents with Agentverse APIs.",
-    path: "/examples/intermediate/agent-and-function-api",
-},
-        {
-    type: 'Agentverse API',
-    title: "Adding Secrets to Agent using Agentverse APIs",
-    description: "An example on how to add secrets to Agents with Agentverse APIs.",
-    path: "/examples/intermediate/agent-secret-api",
-},
-        {
-    type: 'AI-Engine API',
-    title: "AI-Engine Chat API guide",
-    description: "An example on how to use AI Engine chat APIs.",
-    path: "/examples/advanced/chat_api_example",
-},
-        {
-    type: 'Dialogue',
-    title: "Open Dialogue Chit-Chat",
-    description: "An example on how to dialogues with all transitions visible to user.",
-    path: "/examples/advanced/open-dialogue-chitchat",
-},
-        {
-    type: 'Dialogue',
-    title: "Predefined Dialogue Chit-Chat",
-    description: "An example in which dialogue flow is predefined, minimizing the need for manual intervention",
-    path: "/examples/advanced/predefined-dialogue-chitchat",
-},
-{
-    type: 'Dialogue',
-    title: "DeltaV Dialogue Chit-Chat",
-    description: "An example on how to use dialogues in deltaV compatible agents",
-    path: "/examples/advanced/deltaV-dialogues",
-},
-]}
-/>
-<div className="nx-mb-8"></div>
+    icon: AgentverseIcon,
+    description: "Examples of agent communication and interactions using the Agentverse features.",
+    data: [
+      {
+        title: "Agents communication with Mailbox",
+        description: "An example for Agents communication using the Agentverse Mailbox feature.",
+        path: "/examples/intermediate/mailbox-agents"
+      },
+      {
+        title: "Agents broadcast",
+        description: "An example showing how to use a custom protocol to make Agents communicate.",
+        path: "/examples/intermediate/broadcast"
+      },
+      {
+        title: "Agents Name Service",
+        description: "An example showing how to set up Agents Name Services.",
+        path: "/examples/intermediate/name-service"
+      },
+      {
+        title: "Query an agent using a proxy API",
+        description: "An example showing how to query an agent using a proxy API.",
+        path: "/examples/intermediate/on-query-proxy"
+      }
+    ]
+  },
+  {
+    type: "DeltaV",
+    icon: AgentsIcon,
+    description: "Examples of DeltaV functions and interactions within the Agentverse framework.",
+    data: [
+      {
+        title: "Agentverse Functions: register a coin toss function on DeltaV",
+        description: "An example for a coin toss agent function available on DeltaV.",
+        path: "/examples/intermediate/coin-toss"
+      },
+      {
+        title: "Agentverse Functions: register a dice roll function on DeltaV",
+        description: "An example for a dice roll agent function available on DeltaV.",
+        path: "/examples/intermediate/dice-roll"
+      },
+      {
+        title: "Agentverse Functions: register a local agent as a function",
+        description: "An example for a local AI Agent registered as a function available on DeltaV.",
+        path: "/examples/local-agent-registration"
+      },
+      {
+        title: "Hugging face API agent as a function",
+        description: "An example for an integration of the Hugging Face API with an Agentverse Agent.",
+        path: "/examples/intermediate/hugging-face-agent"
+      },
+      {
+        title: "Using News API to build network of Primary and Secondary function in Agentverse",
+        description: "An example for a news reading agent showing operations with Primary and Secondary functions.",
+        path: "/examples/intermediate/news-reading-system"
+      },
+      {
+        title: "Locally Hosted Agent with LangChain Integration",
+        description: "An example for a locally hosted agent that utilizes LangChain's Etherscan integration.",
+        path: "/examples/intermediate/local-agent-langchain"
+      }
+    ]
+  },
+  {
+    type: "Agentverse API",
+    icon: AgentsIcon,
+    description: "Examples for interacting with Agentverse API for agent and service creation.",
+    data: [
+      {
+        title: "Agent and Service Creation using APIs",
+        description: "An example on how to create agents with Agentverse APIs.",
+        path: "/examples/intermediate/agent-and-function-api"
+      },
+      {
+        title: "Adding Secrets to Agent using Agentverse APIs",
+        description: "An example on how to add secrets to Agents with Agentverse APIs.",
+        path: "/examples/intermediate/agent-secret-api"
+      }
+    ]
+  },
+  {
+    type: "AI-Engine API",
+    icon: AgentsIcon,
+    description: "Examples for using AI Engine APIs for various functionalities.",
+    data: [
+      {
+        title: "AI-Engine Chat API guide",
+        description: "An example on how to use AI Engine chat APIs.",
+        path: "/examples/advanced/chat_api_example"
+      }
+    ]
+  },
+  {
+    type: "Dialogue",
+    icon: AgentsIcon,
+    description: "Examples for dialogues and conversation management within the DeltaV framework.",
+    data: [
+      {
+        title: "Open Dialogue Chit-Chat",
+        description: "An example on how to dialogues with all transitions visible to user.",
+        path: "/examples/advanced/open-dialogue-chitchat"
+      },
+      {
+        title: "Predefined Dialogue Chit-Chat",
+        description: "An example in which dialogue flow is predefined, minimizing the need for manual intervention.",
+        path: "/examples/advanced/predefined-dialogue-chitchat"
+      },
+      {
+        title: "DeltaV Dialogue Chit-Chat",
+        description: "An example on how to use dialogues in DeltaV compatible agents.",
+        path: "/examples/advanced/deltaV-dialogues"
+      }
+    ]
+  }
+]} />
+
diff --git a/pages/guides.mdx b/pages/guides.mdx
index e611fe745..fc22fd686 100644
--- a/pages/guides.mdx
+++ b/pages/guides.mdx
@@ -3,11 +3,14 @@
 <div className="nx-text-fetch-content">
   The place where you can find all tutorials and guides needed to familiarise with the concepts and code in a practical way to develop your ideas autonomously.
 </div>
-import GuideMdx from "../components/guide-mdx"
 
-<GuideMdx  content={ [
+import GuidesMdx from "../components/guide-mdx"
+import { AgentsIcon, AgentverseIcon, CliIcon,FetchNetwork, AsiIcon, LedgerIcon } from "src/icons/main-page-icons";
+
+<GuidesMdx content={ [
   {
     type: "Agents",
+    icon: AgentsIcon,
     description:
 
       "A list of guides showing the process to get started and develop use cases using agents technology.",
@@ -15,67 +18,68 @@ import GuideMdx from "../components/guide-mdx"
       {
         title: "Installing the uAgents Framework",
         description: "A guide for installing the uAgents Framework.",
-        path: "/guides/agents/installing-uagent",
+        path: "/guides/agents/getting-started/installing-uagent",
       },
       {
         title: "Creating your first agent",
 
         description: "Build your first agent in a matter of few steps.",
-        path: "/guides/agents/create-a-uagent",
+        path: "/guides/agents/getting-started/create-a-uagent",
       },
       {
         title: "Creating an interval task",
         description: "A guide to understand how agents perform interval tasks.",
-        path: "/guides/agents/interval-task",
+        path: "/guides/agents/intermediate/handlers#creating-an-interval-task-with-on_interval-handler",
       },
       {
         title: "Agent address",
         description:
           "A guide to understand how to retrieve an agent's addresses.",
-        path: "/guides/agents/getting-uagent-address",
+        path: "/guides/agents/getting-started/getting-uagent-address",
       },
       {
         title: "Using agents storage function",
         description:
           "A guide to understand how to call and use agent's storage functions.",
-        path: "/guides/agents/storage-function",
+        path: "/guides/agents/intermediate/storage-function",
       },
       {
         title: "Registering in the Almanac contract",
         description:
 
           "A guide showing how to correctly register within the Almanac contract.",
-        path: "/guides/agents/register-in-almanac",
+        path: "/guides/agents/advanced/register-in-almanac",
       },
       {
         title: "Communicating with other agents",
         description:
           "A guide showing different communication methods between agents.",
-        path: "/guides/agents/communicating-with-other-agents",
+        path: "/guides/agents/intermediate/communicating-with-other-agents",
       },
       {
         title: "How to use agents to send tokens",
         description:
           "A guide showing how to use agents to send tokens with one another.",
-        path: "/guides/agents/send-tokens",
+        path: "/guides/agents/intermediate/send-tokens",
       },
       {
         title: "Agents: broadcast",
         description:
 
           "A guide showing how to use Agents to broadcast messages using protocols.",
-        path: "/guides/agents/broadcast",
+        path: "/guides/agents/intermediate/broadcast",
       },
       {
         title: "Dialogues",
         description:
           "Understand the concept of dialogues and how it applies to Agents.",
-        path: "/guides/agents/dialogues",
+        path: "/guides/agents/advanced/dialogues",
       }
     ],
   },
   {
     type: "Agentverse",
+    icon: AgentverseIcon,
     description:
       "A list of guides representing the various features offered within the Agentverse platform.",
     data: [
@@ -109,6 +113,7 @@ import GuideMdx from "../components/guide-mdx"
   },
   {
     type: "Agentverse Command Line interface",
+    icon: CliIcon,
     data: [
       {
         title: "AVCTL",
@@ -119,6 +124,7 @@ import GuideMdx from "../components/guide-mdx"
   },
   {
     type: "Fetch network",
+    icon: FetchNetwork,
     description: "A list of guides related to operations and tools executable on the Fetch Network.",
     data: [
       {
@@ -150,6 +156,7 @@ import GuideMdx from "../components/guide-mdx"
   },
     {
     type: "ASI Alliance Wallet",
+    icon: AsiIcon,
     subSection: true,
     data: [
       {
@@ -176,6 +183,7 @@ import GuideMdx from "../components/guide-mdx"
   },
   {
     type: "Ledger",
+    icon: LedgerIcon,
     subSection: true,
     description: "A list of guides related to operations executable on the Fetch Ledger.",
     data: [
@@ -218,6 +226,7 @@ import GuideMdx from "../components/guide-mdx"
   },
   {
     type: "CLI - Command Line Interface",
+    icon: CliIcon,
     subSection: true,
     data: [
       {
@@ -254,6 +263,7 @@ import GuideMdx from "../components/guide-mdx"
   },
   {
     type: "Cosmpy",
+    icon: AsiIcon,
     subSection: true,
     data: [
       {
@@ -290,6 +300,7 @@ import GuideMdx from "../components/guide-mdx"
   },
   {
     type: "Cosmpy: use cases",
+    icon: AsiIcon,
     subSection: true,
     data: [
       {
@@ -326,6 +337,7 @@ import GuideMdx from "../components/guide-mdx"
   },
   {
     type: "Jenesis",
+    icon: AsiIcon,
     data: [
       {
         title: "Jenesis: Installation",
@@ -371,6 +383,7 @@ import GuideMdx from "../components/guide-mdx"
   },
   {
     type: "Courses",
+    icon: AgentsIcon,
     data: [
       {
         title: "Agents 101",
@@ -384,5 +397,6 @@ import GuideMdx from "../components/guide-mdx"
       }
     ]
   }
-]}
-/>
+]} />
+
+<div className="nx-mb-8"></div>
\ No newline at end of file
diff --git a/pages/references.mdx b/pages/references.mdx
index 79c4dd685..a8b61e90b 100644
--- a/pages/references.mdx
+++ b/pages/references.mdx
@@ -4,268 +4,166 @@
   The place to get yourself around the more technical side of things used as a reference in all other sections of the documentation.
 </div>
 
-import { Grid2, Grid3 } from "../components/mdx";
+import GuidesMdx from "../components/guide-mdx"
 import { GuideBox } from "../components/feature-guide-tabs";
-
-## Contracts
-
-<div className="nx-text-fetch-content">
-  An overview of the contracts used during development.
-</div>
-
-<Grid2>
-    <GuideBox
-        content={{
-            title: "Almanac",
-            description: "The Almanac is a smart contract developed and deployed on the Fetch.ai blockchain which provides users with a direct way to query a particular agent's information.",
-            path: "/references/contracts/uagents-almanac/almanac-overview"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Endpoints",
-            description: "Endpoints are essential for remote communication between agents.",
-            path: "/references/contracts/uagents-almanac/endpoints"
-        }}
-    />
-
-</Grid2>
-
-## Agents: uAgents Framework
-
-<div className="nx-text-fetch-content">
-  An overview of the constituting elements of the uAgents Framework needed to carry out effectively tasks and communications between agents.
-</div>
-
-<Grid2>
-    <GuideBox
-        content={{
-            title: "Agents protocols",
-            description: "Protocols are used to facilitate communication and interaction between agents in the uAgents Framework.",
-            path: "/references/uagents/uagents-protocols/agent-protocols"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Exchange protocol",
-            description: "The Exchange protocol defines a standardized method for communication between agents within the uAgents ecosystem.",
-            path: "/references/uagents/uagents-protocols/exchange-protocol"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-    <GuideBox
-        content={{
-            title: "Storage",
-            description: "Agents storage is an important concept to understand how agents work.",
-            path: "/references/uagents/uagents-protocols/storage"
-        }}
-    />
-
-</Grid2>
-
-## Fetch Network
-
-### Ledger
-
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Versions",
-            description: "Explore the Ledger versions released over time.",
-            path: "/references/ledger/versions"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Active networks",
-            description: "Explore the list of active networks and their specifications.",
-            path: "/references/ledger/active-networks"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Mainnet archives",
-            description: "Explore the list of Mainnet network versions",
-            path: "/references/ledger/mainnet-archive"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Validator security",
-            description: "Discover the concept of security involving validators and their objectives.",
-            path: "/references/ledger/security"
-        }}
-    />
-
-</Grid2>
-
-### CosmPy API
-
-<div className="nx-text-fetch-content">
-  Get started with all the technical information related to the CosmPy library.
-</div>
-
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Client",
-            description: "General LedgerClient features.",
-            path: "/references/cosmpy/client"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Contract",
-            description: "Cosmwasm contract features to store, instantiate and execute messages.",
-            path: "/references/cosmpy/contract"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Exceptions",
-            description: "The `cosmpy.aerial.exceptions` module provides specialized exception classes for handling blockchain-related errors, including queries, broadcasts, and gas fees.",
-            path: "/references/cosmpy/exceptions"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Ledger faucet API Interface",
-            description: "The `cosmpy.aerial.faucet` module provides an interface to the Ledger faucet API, allowing users to interact with the faucet for a specific network configuration.",
-            path: "/references/cosmpy/ledger-faucet-api-interface"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Network configurations",
-            description: "The `cosmpy.aerial.config` module provides network configurations and handles errors related to network configurations.",
-            path: "/references/cosmpy/network-configurations"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Parse the coins",
-            description: "The `cosmpy.aerial.coins` module provides a method for parsing coins within a blockchain ecosystem.",
-            path: "/references/cosmpy/parse-the-coins"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Parsing the URL",
-            description: "The `cosmpy.aerial.urls` module provides classes and methods for parsing URLs within a blockchain ecosystem.",
-            path: "/references/cosmpy/parsing-the-url"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Transaction",
-            description: "The `cosmpy.aerial.tx` module provides classes and methods for handling transactions within a blockchain ecosystem.",
-            path: "/references/cosmpy/transaction"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Transaction gas strategy",
-            description: "The `cosmpy.aerial.gas` module provides gas strategies for handling transactions within a blockchain ecosystem.",
-            path: "/references/cosmpy/transaction-gas-strategy"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Transaction helpers",
-            description: "The `cosmpy.aerial.tx_helpers` module provides a set of utilities and objects to assist in transaction-related operations within a blockchain ecosystem.",
-            path: "/references/cosmpy/transaction-helpers"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Wallet generation",
-            description: "The `cosmpy.aerial.wallet` module provides functionalities for generating and managing wallets within a blockchain ecosystem.",
-            path: "/references/cosmpy/wallet-generation"
-        }}
-    />
-
-</Grid2>
-
-### Indexer
-
-<div className="nx-text-fetch-content">
-Explore how to index and query blockchain data efficiently using the SubQuery indexer for the Fetch ledger.
-</div>
-
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Endpoints / Playground UIs",
-            description: "The graphql API endpoints serve a playground UI to browsers for convenience.",
-            path: "/references/indexer/endpoints"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Querying",
-            description: "Understand how the GraphQL API works in conjunction with Postgraphile and its plugins for resolving different GraphQL requests.",
-            path: "/references/indexer/querying"
-        }}
-    />
-
-</Grid2>
-<Grid2>
-
-    <GuideBox
-        content={{
-            title: "Versioning",
-            description: "Discover how to retrieve the versions of both the GraphQL API and the Indexer.",
-            path: "/references/indexer/versioning"
-        }}
-    />
-
-    <GuideBox
-        content={{
-            title: "Entities",
-            description: "Entities are fundamental units of information that represent distinct objects or concepts, each with its own set of attributes.",
-            path: "/references/indexer/entities"
-        }}
-    />
-
-</Grid2>
+import { AgentsIcon, LedgerIcon , AsiIcon} from "src/icons/main-page-icons"
+
+<GuidesMdx content={[
+  {
+    type: "Contracts",
+    icon: AsiIcon,
+    description: "An overview of the contracts used during development.",
+    data: [
+      {
+        title: "Almanac",
+        description: "The Almanac is a smart contract developed and deployed on the Fetch.ai blockchain which provides users with a direct way to query a particular agent's information.",
+        path: "/references/contracts/uagents-almanac/almanac-overview",
+      },
+      {
+        title: "Endpoints",
+        description: "Endpoints are essential for remote communication between agents.",
+        path: "/references/contracts/uagents-almanac/endpoints",
+      }
+    ]
+  },
+  {
+    type: "Agents: uAgents Framework",
+    icon: AgentsIcon,
+    description: "An overview of the constituting elements of the uAgents Framework needed to carry out effectively tasks and communications between agents.",
+    data: [
+      {
+        title: "Agents protocols",
+        description: "Protocols are used to facilitate communication and interaction between agents in the uAgents Framework.",
+        path: "/references/uagents/uagents-protocols/agent-protocols",
+      },
+      {
+        title: "Exchange protocol",
+        description: "The Exchange protocol defines a standardized method for communication between agents within the uAgents ecosystem.",
+        path: "/references/uagents/uagents-protocols/exchange-protocol",
+      },
+      {
+        title: "Storage",
+        description: "Agents storage is an important concept to understand how agents work.",
+        path: "/references/uagents/uagents-protocols/storage",
+      }
+    ]
+  },
+  {
+    type: "Ledger",
+    icon: LedgerIcon,
+    description: "An overview of the Fetch Network elements.",
+    data: [
+      {
+        title: "Ledger Versions",
+        description: "Explore the Ledger versions released over time.",
+        path: "/references/ledger/versions",
+      },
+      {
+        title: "Active networks",
+        description: "Explore the list of active networks and their specifications.",
+        path: "/references/ledger/active-networks",
+      },
+      {
+        title: "Mainnet archives",
+        description: "Explore the list of Mainnet network versions",
+        path: "/references/ledger/mainnet-archive",
+      },
+      {
+        title: "Validator security",
+        description: "Discover the concept of security involving validators and their objectives.",
+        path: "/references/ledger/security",
+      }
+    ]
+  },
+  {
+    type: "CosmPy API",
+    icon: AsiIcon, 
+    description: "Get started with all the technical information related to the CosmPy library.",
+    data: [
+      {
+        title: "Client",
+        description: "General LedgerClient features.",
+        path: "/references/cosmpy/client",
+      },
+      {
+        title: "Contract",
+        description: "Cosmwasm contract features to store, instantiate and execute messages.",
+        path: "/references/cosmpy/contract",
+      },
+      {
+        title: "Exceptions",
+        description: "The `cosmpy.aerial.exceptions` module provides specialized exception classes for handling blockchain-related errors, including queries, broadcasts, and gas fees.",
+        path: "/references/cosmpy/exceptions",
+      },
+      {
+        title: "Ledger faucet API Interface",
+        description: "The `cosmpy.aerial.faucet` module provides an interface to the Ledger faucet API, allowing users to interact with the faucet for a specific network configuration.",
+        path: "/references/cosmpy/ledger-faucet-api-interface",
+      },
+      {
+        title: "Network configurations",
+        description: "The `cosmpy.aerial.config` module provides network configurations and handles errors related to network configurations.",
+        path: "/references/cosmpy/network-configurations",
+      },
+      {
+        title: "Parse the coins",
+        description: "The `cosmpy.aerial.coins` module provides a method for parsing coins within a blockchain ecosystem.",
+        path: "/references/cosmpy/parse-the-coins",
+      },
+      {
+        title: "Parsing the URL",
+        description: "The `cosmpy.aerial.urls` module provides classes and methods for parsing URLs within a blockchain ecosystem.",
+        path: "/references/cosmpy/parsing-the-url",
+      },
+      {
+        title: "Transaction",
+        description: "The `cosmpy.aerial.tx` module provides classes and methods for handling transactions within a blockchain ecosystem.",
+        path: "/references/cosmpy/transaction",
+      },
+      {
+        title: "Transaction gas strategy",
+        description: "The `cosmpy.aerial.gas` module provides gas strategies for handling transactions within a blockchain ecosystem.",
+        path: "/references/cosmpy/transaction-gas-strategy",
+      },
+      {
+        title: "Transaction helpers",
+        description: "The `cosmpy.aerial.tx_helpers` module provides a set of utilities and objects to assist in transaction-related operations within a blockchain ecosystem.",
+        path: "/references/cosmpy/transaction-helpers",
+      },
+      {
+        title: "Wallet generation",
+        description: "The `cosmpy.aerial.wallet` module provides functionalities for generating and managing wallets within a blockchain ecosystem.",
+        path: "/references/cosmpy/wallet-generation",
+      }
+    ]
+  },
+  {
+    type: "Indexer",
+    icon: AgentsIcon,
+    description: "Explore how to index and query blockchain data efficiently using the SubQuery indexer for the Fetch ledger.",
+    data: [
+      {
+        title: "Endpoints / Playground UIs",
+        description: "The graphql API endpoints serve a playground UI to browsers for convenience.",
+        path: "/references/indexer/endpoints",
+      },
+      {
+        title: "Querying",
+        description: "Understand how the GraphQL API works in conjunction with Postgraphile and its plugins for resolving different GraphQL requests.",
+        path: "/references/indexer/querying",
+      },
+      {
+        title: "Versioning",
+        description: "Discover how to retrieve the versions of both the GraphQL API and the Indexer.",
+        path: "/references/indexer/versioning",
+      },
+      {
+        title: "Entities",
+        description: "Entities are fundamental units of information that represent distinct objects or concepts, each with its own set of attributes.",
+        path: "/references/indexer/entities",
+      }
+    ]
+  }
+]} />
 
 <div className="nx-mb-8"></div>
diff --git a/src/icons/main-page-icons.tsx b/src/icons/main-page-icons.tsx
new file mode 100644
index 000000000..f2f7e2d9b
--- /dev/null
+++ b/src/icons/main-page-icons.tsx
@@ -0,0 +1,263 @@
+import React from "react";
+
+export const AgentsIcon = () => {
+  return (
+    <svg
+      width="54"
+      height="54"
+      viewBox="0 0 54 54"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="54" height="54" rx="8" fill="#F3F5F8" />
+      <path
+        d="M13.2855 15.1326C14.1648 15.1326 14.8777 14.4197 14.8777 13.5404C14.8777 12.6611 14.1648 11.9482 13.2855 11.9482C12.4062 11.9482 11.6934 12.6611 11.6934 13.5404C11.6934 14.4197 12.4062 15.1326 13.2855 15.1326Z"
+        stroke="#8A9FB8"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M13.2855 20.2976C14.1648 20.2976 14.8777 19.5848 14.8777 18.7054C14.8777 17.8261 14.1648 17.1133 13.2855 17.1133C12.4062 17.1133 11.6934 17.8261 11.6934 18.7054C11.6934 19.5848 12.4062 20.2976 13.2855 20.2976Z"
+        stroke="#8A9FB8"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M13.2855 25.4529C14.1648 25.4529 14.8777 24.74 14.8777 23.8607C14.8777 22.9814 14.1648 22.2686 13.2855 22.2686C12.4062 22.2686 11.6934 22.9814 11.6934 23.8607C11.6934 24.74 12.4062 25.4529 13.2855 25.4529Z"
+        stroke="#8A9FB8"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M42.5712 29.7773V39.9492C42.5712 41.3929 41.3997 42.5643 39.9561 42.5643H29.5703"
+        stroke="#8A9FB8"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M40.798 11.3047H21.9973C21.0177 11.3047 20.2236 12.0988 20.2236 13.0783V23.9265C20.2236 24.9061 21.0177 25.7002 21.9973 25.7002H40.798C41.7776 25.7002 42.5717 24.9061 42.5717 23.9265V13.0783C42.5717 12.0988 41.7776 11.3047 40.798 11.3047Z"
+        fill="#BFAFFD"
+        stroke="#5F38FB"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M24.2165 30.0732H13.2033C12.2238 30.0732 11.4297 30.8673 11.4297 31.8469V40.9131C11.4297 41.8927 12.2238 42.6868 13.2033 42.6868H24.2165C25.196 42.6868 25.9901 41.8927 25.9901 40.9131V31.8469C25.9901 30.8673 25.196 30.0732 24.2165 30.0732Z"
+        stroke="#8A9FB8"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+};
+
+export const AgentverseIcon = () => {
+  return (
+    <svg
+      width="54"
+      height="54"
+      viewBox="0 0 54 54"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="54" height="54" rx="8" fill="#F3F5F8" />
+      <path
+        d="M30.3331 29.916H23.6299V36.6193H30.3331V29.916Z"
+        fill="#BFAFFD"
+        stroke="#5F38FB"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M36.2823 23.9746H30.3408V29.9161H36.2823V23.9746Z"
+        fill="#BFAFFD"
+        stroke="#5F38FB"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M23.63 23.9746H17.6885V29.9161H23.63V23.9746Z"
+        fill="#BFAFFD"
+        stroke="#5F38FB"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M26.9819 18.8603C28.4724 18.8603 29.6806 17.6521 29.6806 16.1616C29.6806 14.6711 28.4724 13.4629 26.9819 13.4629C25.4915 13.4629 24.2832 14.6711 24.2832 16.1616C24.2832 17.6521 25.4915 18.8603 26.9819 18.8603Z"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M13.6987 40.5371C15.1892 40.5371 16.3974 39.3288 16.3974 37.8384C16.3974 36.3479 15.1892 35.1396 13.6987 35.1396C12.2083 35.1396 11 36.3479 11 37.8384C11 39.3288 12.2083 40.5371 13.6987 40.5371Z"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M40.3012 40.5078C41.7917 40.5078 43 39.2995 43 37.8091C43 36.3186 41.7917 35.1104 40.3012 35.1104C38.8108 35.1104 37.6025 36.3186 37.6025 37.8091C37.6025 39.2995 38.8108 40.5078 40.3012 40.5078Z"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+};
+
+export const CliIcon = () => {
+  return (
+    <svg
+      width="54"
+      height="54"
+      viewBox="0 0 54 54"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="54" height="54" rx="8" fill="#F3F5F8" />
+      <path
+        d="M16.9623 24.6914H12.9725C11.8934 24.6914 11.0186 25.5662 11.0186 26.6454V36.6971C11.0186 37.7762 11.8934 38.6511 12.9725 38.6511H16.9623C18.0415 38.6511 18.9163 37.7762 18.9163 36.6971V26.6454C18.9163 25.5662 18.0415 24.6914 16.9623 24.6914Z"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M29.0043 20.3838H25.0145C23.9354 20.3838 23.0605 21.2586 23.0605 22.3378V36.6973C23.0605 37.7765 23.9354 38.6513 25.0145 38.6513H29.0043C30.0835 38.6513 30.9583 37.7765 30.9583 36.6973V22.3378C30.9583 21.2586 30.0835 20.3838 29.0043 20.3838Z"
+        fill="#BFAFFD"
+        stroke="#5F38FB"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M41.0463 11.0498H37.0565C35.9774 11.0498 35.1025 11.9246 35.1025 13.0038V36.697C35.1025 37.7762 35.9774 38.651 37.0565 38.651H41.0463C42.1255 38.651 43.0003 37.7762 43.0003 36.697V13.0038C43.0003 11.9246 42.1255 11.0498 41.0463 11.0498Z"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M42.9636 42.9502H11"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+};
+
+export const FetchNetwork = () => {
+  return (
+    <svg
+      width="54"
+      height="54"
+      viewBox="0 0 54 54"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="54" height="54" rx="8" fill="#F3F5F8" />
+      <path
+        d="M27 43C35.8366 43 43 35.8366 43 27C43 18.1634 35.8366 11 27 11C18.1634 11 11 18.1634 11 27C11 35.8366 18.1634 43 27 43Z"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M30.9139 34.6334C36.8476 34.6334 41.6578 29.8232 41.6578 23.8895C41.6578 17.9557 36.8476 13.1455 30.9139 13.1455C24.9802 13.1455 20.1699 17.9557 20.1699 23.8895C20.1699 29.8232 24.9802 34.6334 30.9139 34.6334Z"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M35.0285 25.1156C37.8687 25.1156 40.1712 22.8131 40.1712 19.9728C40.1712 17.1326 37.8687 14.8301 35.0285 14.8301C32.1882 14.8301 29.8857 17.1326 29.8857 19.9728C29.8857 22.8131 32.1882 25.1156 35.0285 25.1156Z"
+        fill="#BFAFFD"
+        stroke="#5F38FB"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+};
+
+export const AsiIcon = () => {
+  return (
+    <svg
+      width="54"
+      height="54"
+      viewBox="0 0 54 54"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="54" height="54" rx="8" fill="#F3F5F8" />
+      <path
+        d="M31.3028 34.8143L29.9387 41.4851C29.7332 42.4661 28.7709 43.1108 27.7899 42.9052L12.4583 39.7754C11.4773 39.5698 10.8327 38.6075 11.0382 37.6265L12.7386 29.3021C12.9442 28.3211 13.9065 27.6764 14.8875 27.882L18.7834 28.6761"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M37.3288 25.9208L37.2073 31.8348C37.17 33.4698 35.8153 34.7591 34.1896 34.7217L21.9785 34.4508C20.3436 34.4134 19.0542 33.0587 19.0916 31.4331L19.2131 25.9395C19.2504 24.3045 20.6051 23.0152 22.2308 23.0526L24.744 23.1179"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M32.492 15.7251L28.8518 16.6176C26.0235 17.2576 24.2495 20.0693 24.8894 22.8976L24.8915 22.9067C25.5315 25.7351 28.3432 27.5091 31.1715 26.8691L37.2131 25.5021C39.6669 24.9468 41.3272 22.7569 41.3059 20.3396"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M37.7589 21.5383C40.6536 21.5383 43.0002 19.1917 43.0002 16.297C43.0002 13.4023 40.6536 11.0557 37.7589 11.0557C34.8642 11.0557 32.5176 13.4023 32.5176 16.297C32.5176 19.1917 34.8642 21.5383 37.7589 21.5383Z"
+        fill="#BFAFFD"
+        stroke="#5F38FB"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const LedgerIcon = () => {
+  return (
+    <svg
+      width="54"
+      height="54"
+      viewBox="0 0 54 54"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="54" height="54" rx="8" fill="#F3F5F8" />
+      <path
+        d="M32.3406 20.252V36.115C32.3406 36.8332 31.7567 37.4104 31.0452 37.4104H27.4878C26.7696 37.4104 26.1924 36.8265 26.1924 36.115L26.1924 26.9021"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M31.5955 17.5223C30.441 16.2806 28.4945 16.2067 27.2461 17.3612L15.7349 28.0535C15.2113 28.5435 15.1778 29.3624 15.6678 29.8859L18.0908 32.4902C18.5808 33.0137 19.3997 33.0473 19.9232 32.5573L31.4344 21.865C32.6761 20.7105 32.7499 18.764 31.5955 17.5156V17.5223Z"
+        fill="#BFAFFD"
+        stroke="#5F38FB"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.7393 34.1157V42.2842H19.3926"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M42.2598 19.8853L42.2598 11.7168L34.6064 11.7168"
+        stroke="#A1B2C6"
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/icons/shared-icons.tsx b/src/icons/shared-icons.tsx
index b295d29e0..4431af8fc 100644
--- a/src/icons/shared-icons.tsx
+++ b/src/icons/shared-icons.tsx
@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import { ThemeMode } from "theme/fetch-ai-docs/helpers";
 import systemDiagram from "../svgs/system-diagram.svg";
 import darkSystemDiagram from "../svgs/dark-system-diagram.svg";
+import { motion } from "framer-motion";
 
 export const Message = () => {
   return (
@@ -350,20 +351,26 @@ export const Tick = () => {
   );
 };
 
-export const DropDownArrow = () => {
+interface DropDownArrowProps {
+  isActive?: boolean;
+}
+
+export const DropDownArrow: React.FC<DropDownArrowProps> = ({ isActive }) => {
   return (
-    <svg
+    <motion.svg
       width="12"
       height="7"
       viewBox="0 0 12 7"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      animate={{ rotate: isActive ? 180 : 0 }}
+      transition={{ duration: 0.3 }}
     >
       <path
         d="M5.60156 5.89844L1.10156 1.39844C0.867188 1.1875 0.867188 0.835938 1.10156 0.601562C1.3125 0.390625 1.66406 0.390625 1.89844 0.601562L6 4.72656L10.1016 0.625C10.3125 0.390625 10.6641 0.390625 10.8984 0.625C11.1094 0.835938 11.1094 1.1875 10.8984 1.39844L6.375 5.89844C6.16406 6.13281 5.8125 6.13281 5.60156 5.89844Z"
         fill="#87929C"
       />
-    </svg>
+    </motion.svg>
   );
 };
 
diff --git a/styles/globals.css b/styles/globals.css
index 1f3ba9b76..53934a29a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2633,7 +2633,8 @@ span:target + .subheading-anchor:after {
   display: flex;
   width: 100%;
   max-width: 58.5rem;
-  padding: 32px 32px 0px 32px;
+  padding: 64px 32px 0px 32px;
+  margin-inline: auto;
 }
 
 .nextra-scrollbar:hover::-webkit-scrollbar-thumb {
@@ -5001,6 +5002,29 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 {
   box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1);
 }
 
+.dropDownGuide {
+  display: flex;
+  width: 400px;
+  padding: 4px;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 8px;
+  border: 1px solid #fff;
+  background: #fff;
+  box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1);
+}
+
+:is(html[class~="dark"] .dropDownGuide) {
+  background: #363841;
+  border: none;
+}
+
+@media (max-width: 698px) {
+  .dropDownGuide {
+    width: 280px;
+  }
+}
+
 :is(html[class~="dark"] .dropDown) {
   background: #363841;
   border: none;