diff --git a/packages/ui/src/components/footer/Footer.module.css b/packages/ui/src/components/footer/Footer.module.css
index e728867d4..d7bc8c864 100644
--- a/packages/ui/src/components/footer/Footer.module.css
+++ b/packages/ui/src/components/footer/Footer.module.css
@@ -1,12 +1,8 @@
 .block {
   display: flex;
   background-color: var(--white);
-  border-bottom: var(--border);
   border-top: var(--border);
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  z-index: 100;
+  border-bottom: none;
 }
 
 .footer-container {
@@ -14,8 +10,9 @@
   flex-direction: row;
   width: 100%;
   justify-content: space-between;
-  padding: 1.2rem 0;
+  padding: 1.5rem 0;
   align-items: center;
+  gap: 1.25rem;
 }
 
 .footer-logo {
@@ -24,7 +21,7 @@
   gap: 0.5rem;
   align-items: center;
   color: var(--black);
-  font-size: 1.85rem;
+  font-size: 1.75rem;
   cursor: pointer;
   border: none;
   background-color: var(--white);
@@ -35,11 +32,11 @@
   display: flex;
   color: var(--description);
   font-weight: 600;
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   flex-direction: row;
-  gap: 1.25rem;
+  gap: 1.5rem;
   align-items: center;
-  padding: 0 30px;
+  padding: 0 1.25rem;
 }
 
 .footer-item {
@@ -55,7 +52,7 @@
 .footer-copyright,
 .footer-powered {
   color: var(--description);
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   text-decoration: none;
   font-weight: bold;
   text-align: center;
@@ -73,9 +70,10 @@
 @media only screen and (max-width: 1024px) {
   .footer-container {
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
-    padding: 20px 0;
+    padding: 1.4rem 0;
+    gap: 0.85rem;
   }
 
   .footer-logo {
@@ -96,9 +94,11 @@
 
   .footer-items {
     display: flex;
-    flex-direction: column;
-    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.9rem 1.1rem;
     align-items: center;
-    margin: 15px 0;
+    margin: 0.35rem 0;
+    padding: 0;
   }
 }
diff --git a/packages/ui/src/components/header/Header.module.css b/packages/ui/src/components/header/Header.module.css
index a1cfe32b2..48876ff21 100644
--- a/packages/ui/src/components/header/Header.module.css
+++ b/packages/ui/src/components/header/Header.module.css
@@ -13,18 +13,20 @@
   width: 100%;
   display: flex;
   justify-content: space-between;
-  padding: 1.2rem 0;
+  align-items: center;
+  min-height: 5.25rem;
+  padding: 0.9rem 0;
 }
 .mobile-header {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0;
+  gap: 0.35rem;
 }
 .brand {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 0.55rem;
   align-items: center;
   cursor: pointer;
   border: none;
@@ -38,7 +40,8 @@
 
 .brand-name {
   font-size: 2rem;
-  font-weight: bold;
+  font-weight: 700;
+  letter-spacing: -0.02em;
   color: var(--black);
 }
 
@@ -49,7 +52,7 @@
 }
 
 .ml {
-  margin-left: 1rem;
+  margin-left: 0.4rem;
 }
 
 .nav {
@@ -91,8 +94,12 @@
     gap: 1rem;
   }
 
+  .nav {
+    font-size: 1.05rem;
+  }
+
   .ml {
-    margin-left: 12px;
+    margin-left: 0.25rem;
   }
 }
 
@@ -125,7 +132,7 @@
 
   .brand-name {
     font-size: 1.6rem;
-    font-weight: bold;
+    font-weight: 700;
   }
 
   .hamburger-img {
diff --git a/packages/ui/src/page/documentation/CodeBlock.jsx b/packages/ui/src/page/documentation/CodeBlock.jsx
index 5eababe5e..a24d08faf 100644
--- a/packages/ui/src/page/documentation/CodeBlock.jsx
+++ b/packages/ui/src/page/documentation/CodeBlock.jsx
@@ -18,44 +18,75 @@ const CodeBlock = ({
     });
   };
 
-  const logos = {
-    javascript: CODEBLOCK.jsLogo,
-    python: CODEBLOCK.pythonLogo,
-    java: CODEBLOCK.javaLogo,
+  const languageLabelMap = {
+    curl: "cURL",
+    javascript: "JavaScript",
+    python: "Python",
+    java: "Java",
   };
 
+  const selectedCode = codeExamples[selectedLanguage] || "";
+  const codeLines = selectedCode.split("\n");
+
   return (
     <div className={styles["code-block-wrapper"]}>
       <div className={styles["code-block-header"]}>
-        <div className={styles["language-selector"]}>
-          {Object.keys(codeExamples).map((lang) => (
-            <button
-              key={`${id}-${lang}`}
-              onClick={() => setSelectedLanguage(lang)}
-              className={`${styles["language-button"]} ${
-                selectedLanguage === lang
-                  ? styles["language-button-active"]
-                  : ""
-              }`}
-            >
-              <img src={logos[lang]} alt={`${lang} logo`} />
-            </button>
-          ))}
+        <div className={styles["code-window-dots"]}>
+          <span></span>
+          <span></span>
+          <span></span>
         </div>
-      </div>
-      <pre className={styles["code-block"]}>
-        <div className={styles["copy-inside"]}>
-          <code>{codeExamples[selectedLanguage]}</code>
+
+        <div className={styles["code-header-actions"]}>
+          <div className={styles["language-selector"]}>
+            {Object.keys(codeExamples).map((lang) => (
+              <button
+                type="button"
+                key={`${id}-${lang}`}
+                aria-label={`${lang} logo`}
+                onClick={() => setSelectedLanguage(lang)}
+                className={`${styles["language-button"]} ${
+                  selectedLanguage === lang
+                    ? styles["language-button-active"]
+                    : ""
+                }`}
+              >
+                <span className={styles["language-label"]}>
+                  {languageLabelMap[lang] || lang}
+                </span>
+              </button>
+            ))}
+          </div>
+
           <button
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
+            type="button"
+            className={styles["copy-button"]}
+            onClick={() => copyToClipboard(selectedCode)}
           >
             <img
               src={copyMessage ? CODEBLOCK.tick : CODEBLOCK.copycodeicon}
               alt="tick-copy-code"
               style={copyMessage ? {} : { cursor: "pointer" }}
             />
+            <span className={styles["copy-label"]}>
+              {copyMessage || "Copy"}
+            </span>
           </button>
         </div>
+      </div>
+
+      <pre className={styles["code-block"]}>
+        <code>
+          {codeLines.map((line, index) => (
+            <span
+              key={`${id}-${selectedLanguage}-${index}`}
+              className={styles["code-line"]}
+            >
+              <span className={styles["line-number"]}>{index + 1}</span>
+              <span className={styles["line-content"]}>{line || " "}</span>
+            </span>
+          ))}
+        </code>
       </pre>
     </div>
   );
diff --git a/packages/ui/src/page/documentation/Documentation.jsx b/packages/ui/src/page/documentation/Documentation.jsx
index 02ab43e5d..844ae34a5 100644
--- a/packages/ui/src/page/documentation/Documentation.jsx
+++ b/packages/ui/src/page/documentation/Documentation.jsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
 import Table from "../../components/common/table/Table.jsx";
 import { DOCUMENTATION } from "../../utils/Constants";
 import styles from "./Documentation.module.css";
@@ -7,58 +6,129 @@ import CodeBlock from "./CodeBlock.jsx";
 import ContactForm from "../../components/contact/ContactForm.jsx";
 import { getBaseApiUrl } from "../../utils/Helpers.js";
 
+const RESPONSE_EXAMPLES = {
+  "Logo Retrieval": `{
+  "status": "success",
+  "data": {
+    "brand_name": "Google",
+    "domain": "google.com",
+    "logo_url": "https://assets.openlogo.dev/logos/google.svg",
+    "colors": ["#4285F4", "#EA4335", "#FBBC05", "#34A853"],
+    "icon_url": "https://assets.openlogo.dev/icons/google.png"
+  }
+}`,
+  "Search Logos": `{
+  "status": "success",
+  "data": [
+    {
+      "brand_name": "Google",
+      "domain": "google.com",
+      "logo_url": "https://assets.openlogo.dev/logos/google.svg"
+    },
+    {
+      "brand_name": "GoDaddy",
+      "domain": "godaddy.com",
+      "logo_url": "https://assets.openlogo.dev/logos/godaddy.svg"
+    }
+  ]
+}`,
+};
+
 const Documentation = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const currentDomain = window.location.origin;
+  const currentDomain =
+    typeof window !== "undefined" ? window.location.origin : "";
   const baseAPI = getBaseApiUrl(currentDomain);
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
+  const [selectedLanguages, setSelectedLanguages] = useState({});
+
+  const getSelectedLanguage = (featureHeading) =>
+    selectedLanguages[featureHeading] || "javascript";
+
+  const handleLanguageChange = (featureHeading, language) => {
+    setSelectedLanguages((prev) => ({
+      ...prev,
+      [featureHeading]: language,
+    }));
+  };
+
   return (
-    <section
-      className="container"
-      style={{ marginTop: "1rem", marginBottom: "3rem" }}
-    >
-      <div className={styles.card}>
-        <h3 className={styles["card-heading"]}>
-          {DOCUMENTATION.introduction.heading}
-        </h3>
-        <p className={styles.text}>{DOCUMENTATION.introduction.text}</p>
-        <p className={styles["base-info"]}>{baseAPI}</p>
-      </div>
-      {DOCUMENTATION["apiDocs"].map((feature) => {
-        return (
-          <div key={feature.heading}>
-            <div className={styles.card}>
-              <h3 className={styles["card-heading"]}>{feature.heading}</h3>
-              <p className={styles.text}>{feature.text}</p>
-              <p className={styles["base-info"]}>{feature.endPoint}</p>
-            </div>
-            <div className={styles["table-wrapper"]}>
-              <Table
-                headers={DOCUMENTATION.tableDataHeaders}
-                rows={feature.tableDataContent}
-                emptyMessage="No data available"
-              />
-            </div>
-            <CodeBlock
-              id="logo-example"
-              codeExamples={feature.codeExample}
-              selectedLanguage={selectedLanguage}
-              setSelectedLanguage={setSelectedLanguage}
-            />
+    <section className={`container ${styles.documentationShell}`}>
+      <div className={styles.docsLayout}>
+        <main className={styles.contentColumn}>
+          <section className={styles.introPanel}>
+            <h1 className={styles.heroHeading}>
+              {DOCUMENTATION.introduction.heading}
+            </h1>
+            <p className={styles.text}>{DOCUMENTATION.introduction.text}</p>
+            <p className={styles.baseInfo}>{baseAPI}</p>
+            <p className={styles.noticeBanner}>
+              <strong>New:</strong> We&apos;ve recently updated our search
+              algorithms to support semantic search. Find logos by industry or
+              color palette.
+            </p>
+          </section>
+
+          {DOCUMENTATION.apiDocs.map((feature) => {
+            return (
+              <article key={feature.heading} className={styles.apiCard}>
+                <div className={styles.apiTitleWrap}>
+                  <span className={styles.methodBadge}>GET</span>
+                  <h2 className={styles.cardHeading}>{feature.heading}</h2>
+                </div>
+                <p className={styles.text}>{feature.text}</p>
+                <p className={styles.endpointText}>{feature.endPoint}</p>
+
+                <CodeBlock
+                  id={feature.heading}
+                  codeExamples={feature.codeExample}
+                  selectedLanguage={getSelectedLanguage(feature.heading)}
+                  setSelectedLanguage={(language) =>
+                    handleLanguageChange(feature.heading, language)
+                  }
+                />
+
+                <h3 className={styles.subHeading}>Parameters</h3>
+                <div className={styles.tableWrapper}>
+                  <Table
+                    headers={DOCUMENTATION.tableDataHeaders}
+                    rows={feature.tableDataContent}
+                    emptyMessage="No data available"
+                    isGuest={false}
+                  />
+                </div>
+
+                <h3 className={styles.subHeading}>Response</h3>
+                <div className={styles.responseShell}>
+                  <p className={styles.responseMeta}>JSON RESPONSE</p>
+                  <pre className={styles.responseBlock}>
+                    <code>
+                      {RESPONSE_EXAMPLES[feature.heading] ||
+                        RESPONSE_EXAMPLES["Logo Retrieval"]}
+                    </code>
+                  </pre>
+                </div>
+              </article>
+            );
+          })}
+
+          <div className={styles.supportCard}>
+            <p className={styles.text}>
+              {DOCUMENTATION.customerSupportText[0]}
+              <button
+                type="button"
+                className={styles.linkButton}
+                onClick={openModal}
+              >
+                contact us
+              </button>
+              {DOCUMENTATION.customerSupportText[1]}
+            </p>
           </div>
-        );
-      })}
-      <div className={styles.card} style={{ marginTop: "2rem" }}>
-        <p className={styles.text}>
-          {DOCUMENTATION.customerSupportText[0]}
-          <Link className={styles.link} onClick={openModal}>
-            contact us
-          </Link>
-          {DOCUMENTATION.customerSupportText[1]}
-        </p>
+        </main>
       </div>
+
       {isModalOpen && <ContactForm closeModal={closeModal} />}
     </section>
   );
diff --git a/packages/ui/src/page/documentation/Documentation.module.css b/packages/ui/src/page/documentation/Documentation.module.css
index 8bcb098ac..92321b626 100644
--- a/packages/ui/src/page/documentation/Documentation.module.css
+++ b/packages/ui/src/page/documentation/Documentation.module.css
@@ -1,147 +1,424 @@
-code {
-  font-size: 1.2rem;
-  color: var(--description);
-  width: 100%;
-  padding: 1rem;
-  line-height: 1.8rem;
-  font-family: monospace;
-  overflow-x: auto;
+.documentationShell {
+  margin-top: 1.35rem;
+  margin-bottom: 4rem;
+  padding-top: 0.95rem;
+  padding-bottom: 2.2rem;
+  background: transparent;
+  color: var(--black);
+  font-family: Inter, system-ui, sans-serif;
 }
 
-.link {
-  text-decoration: none;
-  color: var(--primary-hover);
+.docsLayout {
+  background: transparent;
 }
 
-.link:hover {
-  text-decoration: underline;
-  text-underline-offset: 6px;
+.contentColumn {
+  max-width: 860px;
+  margin: 0 auto;
+  padding-left: 2.1rem;
+  display: grid;
+  gap: 2.8rem;
 }
 
-.card-heading {
-  margin-top: 2rem;
-  font-size: 2.2rem;
-  font-weight: 600;
+.introPanel,
+.apiCard,
+.supportCard {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.heroHeading {
+  margin: 0;
   color: var(--black);
-  margin-bottom: 0.75rem;
+  font-size: clamp(1.95rem, 3.2vw, 2.8rem);
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  font-weight: 800;
 }
 
 .text {
-  font-size: 1.2rem;
-  line-height: 1.8rem;
+  margin-top: 0.95rem;
   color: var(--description);
-  margin-top: 0.3rem;
-  font-weight: 500;
+  font-size: 0.95rem;
+  line-height: 1.66;
 }
 
-.base-info {
-  border-radius: 8px;
-  padding: 0.5rem 1rem 0.5rem;
-  background-color: var(--table-background);
+.baseInfo {
   margin-top: 1rem;
-  font-size: 1.2rem;
   color: var(--description);
-  font-family: monospace;
-  word-break: break-all;
+  font-size: 0.88rem;
+  line-height: 1.55;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.noticeBanner {
+  margin-top: 1.15rem;
+  border-left: 4px solid var(--primary);
+  background: var(--primary-focus);
+  border-radius: 0.25rem;
+  padding: 0.85rem 1rem;
+  color: var(--description);
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+
+.apiCard {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.apiTitleWrap {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.methodBadge {
+  border-radius: 999px;
+  padding: 0.18rem 0.56rem;
+  background: #dcfce7;
+  color: #15803d;
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.cardHeading {
+  margin: 0;
+  color: var(--black);
+  font-size: clamp(1.65rem, 2.6vw, 2.3rem);
+  line-height: 1.12;
+  font-weight: 780;
+  letter-spacing: -0.02em;
+}
+
+.endpointText {
+  margin-top: 0.5rem;
+  color: var(--description);
+  font-size: 0.86rem;
+  line-height: 1.5;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.subHeading {
+  margin-top: 1.6rem;
+  margin-bottom: 0.1rem;
+  color: var(--black);
+  font-size: clamp(1.28rem, 2vw, 1.9rem);
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  font-weight: 740;
+}
+
+.tableWrapper {
+  margin-top: 0.88rem;
+  border-radius: 0.85rem;
+  overflow-x: auto;
+  border: 1px solid var(--border-color);
+  background: var(--white);
+}
+
+.tableWrapper :global(table) {
+  width: 100%;
+  border: none;
+  border-spacing: 0;
+  background: var(--white);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.tableWrapper :global(th),
+.tableWrapper :global(td) {
+  text-align: left;
+  vertical-align: middle;
+}
+
+.tableWrapper :global(th) {
+  padding: 0.9rem 1rem;
+  font-size: 0.82rem;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--description);
+  background: var(--table-background);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tableWrapper :global(td) {
+  padding: 0.88rem 1rem;
+  font-size: 0.84rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--description);
+  border-top: 1px solid var(--border-color);
+}
+
+.tableWrapper :global(tbody td:first-child) {
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.tableWrapper :global(tbody td:last-child) {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--description);
+  text-transform: uppercase;
+}
+
+.responseShell {
+  margin-top: 0.9rem;
+  border-radius: 0.82rem;
+  border: 1px solid #0f172a;
+  background: linear-gradient(180deg, #111827, #020617);
+  overflow: hidden;
+}
+
+.responseMeta {
+  margin: 0;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
+  padding: 0.74rem 0.92rem;
+  color: #94a3b8;
+  font-size: 0.68rem;
+  line-height: 1;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.responseBlock {
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.responseBlock code {
+  display: block;
+  color: #e2e8f0;
+  font-size: 0.8rem;
+  line-height: 1.58;
+  white-space: pre;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.supportCard {
+  padding-top: 0.35rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.linkButton {
+  border: none;
+  background: transparent;
+  margin: 0 0.2rem;
+  padding: 0;
+  color: var(--primary-hover);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
 .code-block-wrapper {
+  margin-top: 1rem;
+  border-radius: 0.85rem;
+  border: 1px solid #0f172a;
   overflow: hidden;
-  border-radius: 0.5rem;
-  background-color: var(--table-background);
+  background: linear-gradient(180deg, #111827, #020617);
 }
 
 .code-block-header {
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  gap: 0.8rem;
+  padding: 0.66rem 0.8rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
+}
+
+.code-window-dots {
+  display: flex;
   align-items: center;
-  padding: 1rem;
+  gap: 0.34rem;
 }
 
-.code-language {
-  font-size: 0.875rem;
-  color: var(--white);
+.code-window-dots > span {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
 }
 
-.language-selector {
+.code-window-dots > span:nth-child(1) {
+  background: #ef4444;
+}
+
+.code-window-dots > span:nth-child(2) {
+  background: #f59e0b;
+}
+
+.code-window-dots > span:nth-child(3) {
+  background: #22c55e;
+}
+
+.code-header-actions {
   display: flex;
-  gap: 12px;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.language-selector img {
-  width: 32px;
-  height: 32px;
+.language-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.22rem;
 }
 
 .language-button {
-  padding: 7px 12px;
-  border-radius: 0.25rem;
+  border-radius: 0.36rem;
+  border: 1px solid transparent;
   background: transparent;
-  color: var(--description);
-  border: none;
+  color: #9aa7ba;
   cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.875rem;
+  padding: 0.2rem 0.5rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.language-label {
+  font-size: 0.66rem;
+  line-height: 1;
 }
 
 .language-button:hover {
-  color: var(--white);
-  background: rgba(229 231 235);
+  color: #e2e8f0;
 }
 
 .language-button-active {
-  background: rgba(229 231 235);
-  color: var(--white);
+  border-color: rgba(148, 163, 184, 0.42);
+  color: #f8fafc;
+  background: rgba(51, 65, 85, 0.5);
 }
 
 .copy-button {
-  background-color: rgb(249 250 251);
+  border: 1px solid transparent;
+  border-radius: 0.36rem;
+  background: transparent;
+  color: #cbd5e1;
+  cursor: pointer;
+  padding: 0.2rem 0.42rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.24rem;
+}
+
+.copy-button:hover {
+  border-color: rgba(148, 163, 184, 0.36);
+  color: #f8fafc;
+  background: rgba(51, 65, 85, 0.44);
+}
+
+.copy-button img {
+  width: 12px;
+  height: 12px;
+}
+
+.copy-label {
+  font-size: 0.66rem;
+  line-height: 1;
 }
 
 .code-block {
-  margin: 16px;
-  margin-top: 0;
+  margin: 0;
+  padding: 0.86rem 0.9rem 0.96rem;
   overflow-x: auto;
-  font-family: monospace;
-  font-size: 1.2rem;
-  border-radius: 12px;
-  border: var(--border);
 }
 
-.table-wrapper {
-  margin: 1.5rem 0;
-  overflow-x: auto;
-  border-radius: 0.5rem;
+.code-block code {
+  display: block;
 }
 
-.code-box {
-  padding: 12px;
-  border: var(--border);
-  color: var(--black);
+.code-line {
+  display: grid;
+  grid-template-columns: 1.4rem minmax(0, 1fr);
+  gap: 0.8rem;
+  min-width: max-content;
 }
 
-.copy-inside {
-  display: flex;
-  justify-content: space-between;
+.line-number {
+  color: #64748b;
+  font-size: 0.74rem;
+  line-height: 1.65;
+  text-align: right;
+  user-select: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
-.copy-inside > button {
-  background-color: var(--table-background);
-  width: fit-content;
-  height: fit-content;
-  border: none;
-  padding: 0;
-  margin-top: 0.5rem;
-  margin-right: 1rem;
+.line-content {
+  color: #e2e8f0;
+  font-size: 0.8rem;
+  line-height: 1.65;
+  white-space: pre;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
-.copy-inside > button > img {
-  width: 24px;
-  height: 24px;
+@media (max-width: 1024px) {
+  .contentColumn {
+    max-width: 100%;
+    padding-left: 1.35rem;
+  }
+
+  .heroHeading {
+    font-size: clamp(1.78rem, 7.2vw, 2.3rem);
+  }
+
+  .cardHeading {
+    font-size: clamp(1.45rem, 5.7vw, 1.95rem);
+  }
+
+  .subHeading {
+    font-size: clamp(1.22rem, 5vw, 1.58rem);
+  }
+
+  .tableWrapper :global(.custom-table) {
+    min-width: 680px;
+  }
 }
 
-@media (max-width: 564px) {
+@media (max-width: 768px) {
+  .documentationShell {
+    margin-top: 1rem;
+  }
+
+  .contentColumn {
+    padding-left: 0;
+    border-left: none;
+    gap: 2.45rem;
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+
+  .noticeBanner {
+    font-size: 0.9rem;
+  }
+
+  .code-block-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .code-header-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
   .language-selector {
     flex-wrap: wrap;
   }
+
+  .tableWrapper :global(.custom-table) {
+    min-width: 620px;
+  }
 }
diff --git a/packages/ui/src/page/home/Home.jsx b/packages/ui/src/page/home/Home.jsx
index 4bbadff3a..1c0656988 100644
--- a/packages/ui/src/page/home/Home.jsx
+++ b/packages/ui/src/page/home/Home.jsx
@@ -1,39 +1,214 @@
 import { useContext } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
-import About from "../../components/about/About";
-import Demo from "../../components/demo/Demo";
-import Features from "../../components/features/Features";
-import HeroSection from "../../components/hero/HeroSection";
-import FAQs from "../../components/faqs/FAQs";
-import Pricing from "../../components/pricing/Pricing";
-import GetInTouch from "../../components/contact/GetInTouch";
+import Button from "../../components/common/button/Button";
 import { AuthContext, UserContext } from "../../contexts/Contexts";
+import {
+  ABOUT,
+  BUTTON_TEXT,
+  FEATURES,
+  FAQ,
+  PRICING,
+} from "../../utils/Constants";
+import styles from "./Home.module.css";
 
 const Home = ({ openAuthModal }) => {
   const navigate = useNavigate();
   const { userData } = useContext(UserContext);
   const { isAuthenticated } = useContext(AuthContext);
 
-  const onHeroSectionButtonClick = () =>
+  const onPrimaryButtonClick = () =>
     isAuthenticated ? navigate("/dashboard") : openAuthModal();
 
+  const heroCode = `// use fetch to send GET request\nfetch("/api/logo?key={domain}&API_KEY={YOUR_API_KEY}", {\n  method: "GET",\n  headers: {\n    "Content-Type": "application/json",\n  },\n})`;
+
+  const heroResponse = `RESPONSE\n{\n  "logo_url": "https://cdn.openlogo.fyi/logos/google.png",\n  "domain": "google.com"\n}`;
+
+  const capabilityItems = [
+    "Standardized logo formats",
+    "Transparent backgrounds",
+    "High-resolution assets",
+  ];
+
   return (
-    <div className="container">
-      <HeroSection
-        onPrimaryButtonClick={onHeroSectionButtonClick}
-        isAuthenticated={isAuthenticated}
-      />
-      <Demo openAuthModal={openAuthModal} />
-      <Features />
-      <Pricing
-        openAuthModal={openAuthModal}
-        activePlan={userData?.subscription?.type}
-      />
-      <About />
-      <FAQs />
-      <GetInTouch />
-    </div>
+    <main className={`container ${styles.page}`}>
+      <section className={styles.heroSection}>
+        <div className={styles.heroCopy}>
+          <p className={styles.kicker}>OpenLogo API</p>
+          <h1>Perfect company logos for your next project.</h1>
+          <p className={styles.heroSummary}>
+            Access hundreds of high-quality company logos instantly through our
+            simple API. Built for developers, trusted by designers. Stop
+            searching Google Images.
+          </p>
+          <div className={styles.heroActions}>
+            <Button
+              type="button"
+              variant="primary"
+              onClick={onPrimaryButtonClick}
+              className={styles.heroPrimaryButton}
+            >
+              {isAuthenticated
+                ? BUTTON_TEXT.gotoDashboard
+                : BUTTON_TEXT.getStarted}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => navigate("/docs")}
+              className={styles.heroSecondaryButton}
+            >
+              View {BUTTON_TEXT.documentation}
+            </Button>
+          </div>
+        </div>
+
+        <div className={styles.codeSurface}>
+          <p className={styles.surfaceLabel}>Sample Request</p>
+          <pre className={styles.requestBlock}>
+            <code>{heroCode}</code>
+          </pre>
+          <p className={styles.surfaceLabel}>Response</p>
+          <pre className={styles.responseBlock}>
+            <code>{heroResponse}</code>
+          </pre>
+        </div>
+      </section>
+
+      <section className={styles.trySection}>
+        <div className={styles.tryCopy}>
+          <p className={styles.kicker}>Try it yourself</p>
+          <h2>Instant logo retrieval.</h2>
+          <p>
+            Search for any company domain to find the best available brand
+            assets. Get high-quality transparent logos ready for your products.
+          </p>
+          <div className={styles.searchMock}>
+            <span className={styles.searchIcon} aria-hidden="true">
+              ⌕
+            </span>
+            <span>google.com</span>
+            <span className={styles.searchMeta}>PNG / SVG</span>
+          </div>
+        </div>
+
+        <div className={styles.capabilityGrid}>
+          {capabilityItems.map((item) => (
+            <article key={item} className={styles.capabilityCard}>
+              <span className={styles.capabilityDot} aria-hidden="true" />
+              <p>{item}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section
+        id="features"
+        data-testid="features"
+        className={styles.featuresSection}
+      >
+        <p className={styles.kicker}>Why OpenLogo</p>
+        <h2>{FEATURES.heading}</h2>
+        <p className={styles.sectionSummary}>{FEATURES.summary}</p>
+        <div className={styles.featureCards}>
+          {FEATURES.items.map((item) => (
+            <article key={item.title} className={styles.featureCard}>
+              <img src={item.icon} alt={item.title} />
+              <h3>{item.title}</h3>
+              <p>{item.content}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section
+        id="pricing"
+        data-testid="pricing"
+        className={styles.pricingSection}
+      >
+        <p className={styles.kicker}>Pricing</p>
+        <h2>{PRICING.heading}</h2>
+        <p className={styles.sectionSummary}>{PRICING.summary}</p>
+        <div className={styles.planGrid}>
+          {PRICING.plans.map((plan) => (
+            <article key={plan.name} className={styles.planCard}>
+              <h3>{plan.name}</h3>
+              <p className={styles.planTagline}>{plan.tagline}</p>
+              <p className={styles.planPrice}>₹{plan.pricing}/mo</p>
+              <ul>
+                {plan.keypoints.map((point) => (
+                  <li key={point}>{point}</li>
+                ))}
+              </ul>
+              <Button
+                type="button"
+                variant={
+                  userData?.subscription?.type === plan.name
+                    ? "secondary"
+                    : "primary"
+                }
+                onClick={onPrimaryButtonClick}
+                className={styles.planButton}
+              >
+                {userData?.subscription?.type === plan.name
+                  ? BUTTON_TEXT.active
+                  : BUTTON_TEXT.getStarted}
+              </Button>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section id="about" data-testid="about" className={styles.trustSection}>
+        <p className={styles.kicker}>Trusted by teams</p>
+        <h2>{ABOUT.TITLE}</h2>
+        <p className={styles.sectionSummary}>{ABOUT.DESCRIPTION}</p>
+        <div className={styles.logoRail}>
+          {ABOUT.INTEGRATIONS.slice(0, 12).map((brand) => (
+            <div key={brand.id} className={styles.logoItem}>
+              <img src={brand.src} alt={brand.alt} loading="lazy" />
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.faqSection}>
+        <p className={styles.kicker}>FAQs</p>
+        <h2>{FAQ.TITLE}</h2>
+        <div className={styles.faqGrid}>
+          {FAQ.QAS.slice(0, 4).map((qa) => (
+            <article key={qa.question} className={styles.faqCard}>
+              <h3>{qa.question}</h3>
+              <p>{qa.answer}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.ctaSection}>
+        <h2>Need something specific?</h2>
+        <p>
+          If you cannot find a logo, open a request and our team will add it to
+          the catalog.
+        </p>
+        <div className={styles.heroActions}>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={onPrimaryButtonClick}
+          >
+            {isAuthenticated ? BUTTON_TEXT.requestLogo : BUTTON_TEXT.getStarted}
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => navigate("/docs")}
+          >
+            {BUTTON_TEXT.documentation}
+          </Button>
+        </div>
+      </section>
+    </main>
   );
 };
 
diff --git a/packages/ui/src/page/home/Home.module.css b/packages/ui/src/page/home/Home.module.css
new file mode 100644
index 000000000..960925c25
--- /dev/null
+++ b/packages/ui/src/page/home/Home.module.css
@@ -0,0 +1,394 @@
+.page {
+  margin-top: 1.6rem;
+  margin-bottom: 3rem;
+  display: grid;
+  gap: 2rem;
+}
+
+.heroSection,
+.trySection,
+.featuresSection,
+.pricingSection,
+.trustSection,
+.faqSection,
+.ctaSection {
+  border: 1px solid var(--border-color);
+  border-radius: 1.2rem;
+  background: var(--white);
+  box-shadow: var(--shadow);
+}
+
+.heroSection {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.15rem;
+  padding: 1.3rem;
+  background: radial-gradient(
+      circle at 84% 18%,
+      rgba(37, 99, 235, 0.18),
+      transparent 45%
+    ),
+    radial-gradient(circle at 8% 84%, rgba(14, 165, 233, 0.13), transparent 35%),
+    linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--table-background) 54%, transparent),
+      transparent 38%
+    ),
+    var(--white);
+}
+
+.kicker {
+  width: fit-content;
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+  padding: 0.26rem 0.74rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.07em;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--description);
+  background: color-mix(in srgb, var(--table-background) 64%, transparent);
+}
+
+.heroCopy h1,
+.tryCopy h2,
+.featuresSection h2,
+.pricingSection h2,
+.trustSection h2,
+.faqSection h2,
+.ctaSection h2 {
+  font-family: Lato, Poppins, sans-serif;
+  color: var(--black);
+  letter-spacing: -0.015em;
+}
+
+.heroCopy h1 {
+  margin-top: 0.88rem;
+  font-size: clamp(2rem, 4.2vw, 3.45rem);
+  line-height: 1.05;
+  max-width: 16ch;
+}
+
+.heroSummary {
+  margin-top: 0.9rem;
+  color: var(--description);
+  font-size: 1.02rem;
+  line-height: 1.68;
+  max-width: 62ch;
+}
+
+.heroActions {
+  margin-top: 1.1rem;
+  display: flex;
+  gap: 0.7rem;
+  flex-wrap: wrap;
+}
+
+.heroPrimaryButton,
+.heroSecondaryButton {
+  min-width: 185px;
+}
+
+.codeSurface {
+  border: 1px solid
+    color-mix(in srgb, var(--border-color) 75%, rgba(59, 130, 246, 0.45));
+  border-radius: 1rem;
+  background: linear-gradient(185deg, #0b1326, #111a31 45%, #161f36);
+  padding: 0.8rem;
+  box-shadow:
+    0 20px 34px rgba(15, 23, 42, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.surfaceLabel {
+  color: #93c5fd;
+  font-size: 0.76rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  margin: 0.25rem 0 0.4rem;
+}
+
+.requestBlock,
+.responseBlock {
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  border-radius: 0.76rem;
+  background: rgba(8, 14, 28, 0.56);
+  padding: 0.78rem;
+  overflow-x: auto;
+}
+
+.responseBlock {
+  margin-top: 0.2rem;
+}
+
+.requestBlock code,
+.responseBlock code {
+  color: #e2e8f0;
+  font-size: 0.86rem;
+  line-height: 1.58;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  white-space: pre;
+}
+
+.trySection,
+.featuresSection,
+.pricingSection,
+.trustSection,
+.faqSection,
+.ctaSection {
+  padding: 1.25rem;
+}
+
+.trySection {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+.tryCopy p {
+  margin-top: 0.75rem;
+  color: var(--description);
+  line-height: 1.66;
+}
+
+.searchMock {
+  margin-top: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.72rem;
+  background: var(--table-background);
+  padding: 0.72rem 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: var(--black);
+}
+
+.searchIcon {
+  color: var(--description);
+}
+
+.searchMeta {
+  margin-left: auto;
+  color: var(--description);
+  font-size: 0.85rem;
+}
+
+.capabilityGrid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.capabilityCard {
+  border: 1px solid var(--border-color);
+  border-radius: 0.78rem;
+  padding: 0.85rem;
+  background: color-mix(in srgb, var(--table-background) 44%, transparent);
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.capabilityCard p {
+  color: var(--description);
+}
+
+.capabilityDot {
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 999px;
+  background: #0284c7;
+  box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.18);
+}
+
+.sectionSummary {
+  margin-top: 0.72rem;
+  color: var(--description);
+  line-height: 1.68;
+}
+
+.featureCards,
+.planGrid,
+.faqGrid {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.88rem;
+}
+
+.featureCard,
+.planCard,
+.faqCard {
+  border: 1px solid var(--border-color);
+  border-radius: 0.9rem;
+  padding: 1rem;
+  background: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--table-background) 52%, transparent),
+    var(--white)
+  );
+}
+
+.featureCard {
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease;
+}
+
+.featureCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.13);
+}
+
+.featureCard img {
+  width: 1.9rem;
+  height: 1.9rem;
+}
+
+.featureCard h3,
+.planCard h3,
+.faqCard h3 {
+  margin-top: 0.72rem;
+  font-size: 1.1rem;
+  color: var(--black);
+}
+
+.featureCard p,
+.planCard p,
+.faqCard p {
+  margin-top: 0.52rem;
+  color: var(--description);
+  line-height: 1.62;
+}
+
+.planPrice {
+  font-size: 1.9rem;
+  color: var(--black);
+  font-weight: 700;
+  margin-top: 0.68rem;
+}
+
+.planTagline {
+  margin-top: 0.35rem;
+}
+
+.planCard ul {
+  margin-top: 0.78rem;
+  display: grid;
+  gap: 0.45rem;
+  padding-left: 1rem;
+}
+
+.planCard li {
+  list-style: disc;
+  color: var(--description);
+  line-height: 1.46;
+}
+
+.planButton {
+  margin-top: 0.95rem;
+  width: 100%;
+}
+
+.logoRail {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.55rem;
+}
+
+.logoItem {
+  border: 1px solid var(--border-color);
+  border-radius: 0.7rem;
+  padding: 0.64rem;
+  background: var(--white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 64px;
+}
+
+.logoItem img {
+  max-height: 30px;
+  width: auto;
+  object-fit: contain;
+  filter: saturate(0.85);
+}
+
+.ctaSection {
+  text-align: center;
+  background: radial-gradient(
+      circle at top center,
+      rgba(14, 165, 233, 0.18),
+      transparent 54%
+    ),
+    radial-gradient(
+      circle at 30% 100%,
+      rgba(59, 130, 246, 0.13),
+      transparent 45%
+    ),
+    var(--white);
+}
+
+.ctaSection p {
+  margin-top: 0.75rem;
+  color: var(--description);
+  line-height: 1.66;
+}
+
+.ctaSection .heroActions {
+  justify-content: center;
+}
+
+@media (min-width: 760px) {
+  .heroSection,
+  .trySection,
+  .featuresSection,
+  .pricingSection,
+  .trustSection,
+  .faqSection,
+  .ctaSection {
+    padding: 1.52rem;
+  }
+
+  .logoRail {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .featureCards,
+  .planGrid,
+  .faqGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .heroSection {
+    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
+    gap: 1.35rem;
+    align-items: start;
+    padding: 1.75rem;
+  }
+
+  .trySection {
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+    align-items: center;
+  }
+
+  .featureCards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  .heroPrimaryButton,
+  .heroSecondaryButton {
+    width: 100%;
+  }
+
+  .heroActions {
+    width: 100%;
+  }
+}
diff --git a/packages/ui/src/utils/Constants.js b/packages/ui/src/utils/Constants.js
index 044397897..f43012dbf 100644
--- a/packages/ui/src/utils/Constants.js
+++ b/packages/ui/src/utils/Constants.js
@@ -527,99 +527,112 @@ export const LOGOUPLOAD = {
 };
 
 const CODE_EXAMPLE_SEARCH = {
-  javascript: `// use fetch to send GET request
-fetch("/api/logo/search?key={prefix}&API_KEY={YOUR_API_KEY}", {
-  method: "GET",
-  headers: {
-    "Content-Type": "application/json",
-  },
-})`,
+  curl: `curl --request GET \\
+  --url 'https://api.openlogo.dev/v1/search/logo?q=goo' \\
+  --header 'Authorization: Bearer YOUR_API_KEY'`,
 
-  python: `# import package
-import requests
-# send GET request
-response = requests.get("api/logo/search",
-  params={
-    "key": "{prefix}",
-    "API_KEY": '{YOUR_API_KEY}'
-  },
-  headers={
-    "Content-Type": "application/json"
+  javascript: `const response = await fetch(
+  "https://api.openlogo.dev/v1/search/logo?q=goo",
+  {
+    method: "GET",
+    headers: {
+      Authorization: "Bearer YOUR_API_KEY",
+    },
   }
-)`,
+);
+
+const data = await response.json();`,
 
-  java: `// create http client instance
-HttpClient client = HttpClient.newHttpClient();
-// build http request
-HttpRequest request = HttpRequest.newBuilder()
-  .uri(URI.create("/api/logo/search?key={prefix}&API_KEY={YOUR_API_KEY}"))
-  .header("Content-Type", "application/json")
-  .GET()
-  .build();
-// send GET request
-HttpResponse<String> response = client.send(request,
-  HttpResponse.BodyHandlers.ofString());`,
+  python: `import requests
+
+response = requests.get(
+  "https://api.openlogo.dev/v1/search/logo",
+  params={"q": "goo"},
+  headers={"Authorization": "Bearer YOUR_API_KEY"},
+)
+
+data = response.json()`,
 };
 
 const CODE_EXAMPLE = {
-  javascript: `// use fetch to send GET request
-fetch("/api/logo?key={domain}&API_KEY={YOUR_API_KEY}", {
-  method: "GET",
-  headers: {
-    "Content-Type": "application/json",
-  },
-})`,
+  curl: `curl --request GET \\
+  --url 'https://api.openlogo.dev/v1/logo/google.com' \\
+  --header 'Authorization: Bearer YOUR_API_KEY'`,
 
-  python: `# import package
-import requests
-# send GET request
-response = requests.get("api/logo",
-  params={
-    "domain": "{domain}",
-    "API_KEY": "{YOUR_API_KEY}"
-  },
-  headers={
-    "Content-Type": "application/json"
+  javascript: `const response = await fetch(
+  "https://api.openlogo.dev/v1/logo/google.com",
+  {
+    method: "GET",
+    headers: {
+      Authorization: "Bearer YOUR_API_KEY",
+    },
   }
-)`,
+);
+
+const data = await response.json();`,
+
+  python: `import requests
 
-  java: `// create http client instance
-HttpClient client = HttpClient.newHttpClient();
-// build http request
-HttpRequest request = HttpRequest.newBuilder()
-  .uri(URI.create("/api/logo?key={domain}&API_KEY={YOUR_API_KEY}"))
-  .header("Content-Type", "application/json")
-  .GET()
-  .build();
-// send GET request
-HttpResponse<String> response = client.send(request,
-  HttpResponse.BodyHandlers.ofString());`,
+response = requests.get(
+  "https://api.openlogo.dev/v1/logo/google.com",
+  headers={"Authorization": "Bearer YOUR_API_KEY"},
+)
+
+data = response.json()`,
 };
 
 export const DOCUMENTATION = {
   introduction: {
     heading: "Introduction",
-    text: "The documentation provides a comprehensive guide to our logo retrieval API, detailing endpoints for fetching company logos by domain name and searching logos by domain prefixes. We offer features like exact search, bulk logo retrieval, high-resolution logos, request logo with easy integration. Whether you need a logo for branding or marketing, we're here to help. Contact us anytime!",
+    text: "Welcome to the Openlogo API documentation. Openlogo is a high-performance, real-time logo retrieval service designed to help you integrate brand assets directly into your applications.",
   },
   tableDataHeaders: ["Parameter", "Type", "Description", "Required"],
   apiDocs: [
     {
       heading: "Logo Retrieval",
-      text: "Integrate this API for precise logo searches using a company's domain name. This free API allows up to 500 calls per month and returns logos in PNG format. Support for additional formats will be available in the future.",
-      endPoint: "Endpoint: /logo?key=google&API_KEY=YOUR_API_KEY",
+      text: "Fetch the official logo for any company using their domain name. Our system automatically detects the best quality asset, including high-resolution SVGs and PNGs.",
+      endPoint: "Endpoint: /v1/logo/{domain}",
       tableDataContent: [
-        ["key", "string", "The domain name of the company.", "Yes"],
-        ["API_KEY", "string", "Generated API Key from the dashboard.", "Yes"],
+        [
+          "domain",
+          "string",
+          "The domain name of the company (e.g., apple.com).",
+          "Yes",
+        ],
+        [
+          "size",
+          "integer",
+          "Target width in pixels. Aspect ratio is preserved.",
+          "No",
+        ],
+        ["format", "string", "Preferred image format (png, svg, webp).", "No"],
       ],
       codeExample: CODE_EXAMPLE,
     },
     {
-      heading: "Search (Now Available)",
-      text: "The Logo Search API allows users to retrieve a list of logo URLs that begin with specified characters, making it useful for identifying logos based on a domain name's prefix. This service is currently free but will be subject to charges in the future. The API has a monthly usage limit of 5000 requests.",
-      endPoint: "Endpoint: /logo/search?key=go&API_KEY=YOUR_API_KEY",
+      heading: "Search Logos",
+      text: "Find logos by brand keyword, industry, or color palette with semantic search. This endpoint returns ranked logo matches with brand metadata for faster discovery workflows.",
+      endPoint: "Endpoint: /v1/search/logo?q={query}",
       tableDataContent: [
-        ["key", "string", "Prefix of the domain name to filter logos.", "Yes"],
-        ["API_KEY", "string", "Generated API Key from the dashboard.", "Yes"],
+        ["q", "string", "Search query (brand name or domain fragment).", "Yes"],
+        [
+          "industry",
+          "string",
+          "Optional industry filter for semantic ranking.",
+          "No",
+        ],
+        [
+          "color",
+          "string",
+          "Optional hex color filter for palette matching.",
+          "No",
+        ],
+        [
+          "limit",
+          "integer",
+          "Maximum number of search results to return.",
+          "No",
+        ],
       ],
       codeExample: CODE_EXAMPLE_SEARCH,
     },
@@ -857,12 +870,46 @@ export const RELEASE_PAGE = {
     ],
   },
 
-  versions: ["0.7.0 version", "0.6.0 version", "Previous version"],
-  latestVersion: "0.7.0 version",
+  versions: [
+    "0.8.0 version",
+    "0.7.0 version",
+    "0.6.0 version",
+    "Previous version",
+  ],
+  latestVersion: "0.8.0 version",
   changelog: {
     title: "Changelog",
     description: "Changelog with often recorded's versions",
     versionsData: [
+      {
+        versionName: "0.8.0 version",
+        releaseDate: "Apr 2026",
+        imgSrc: version07,
+        releaseNotes: [
+          {
+            releaseNote:
+              "Documentation experience has been redesigned with a cleaner visual system, improved endpoint readability, and a stronger quickstart flow (#953).",
+            contributors: [
+              {
+                contributorName: "openlogo-community",
+                contributorGithubLink:
+                  "https://github.com/TeamShiksha/openlogo",
+              },
+            ],
+          },
+          {
+            releaseNote:
+              "Code examples are now easier to scan with clearer language selection and copy actions across endpoints.",
+            contributors: [
+              {
+                contributorName: "openlogo-community",
+                contributorGithubLink:
+                  "https://github.com/TeamShiksha/openlogo",
+              },
+            ],
+          },
+        ],
+      },
       {
         versionName: "0.7.0 version",
         releaseDate: "Mar 2026",