diff --git a/public/crowdin_brand_guidlines_4q_2024.pdf b/public/crowdin_brand_guidlines_4q_2024.pdf
new file mode 100644
index 00000000..70da3331
Binary files /dev/null and b/public/crowdin_brand_guidlines_4q_2024.pdf differ
diff --git a/src/assets/images/brand-book.png b/src/assets/images/brand-book.png
new file mode 100644
index 00000000..8a5f832e
Binary files /dev/null and b/src/assets/images/brand-book.png differ
diff --git a/src/content/docs/docs/using-logo.mdx b/src/content/docs/docs/using-logo.mdx
index 051d17a6..e6cedba5 100644
--- a/src/content/docs/docs/using-logo.mdx
+++ b/src/content/docs/docs/using-logo.mdx
@@ -15,7 +15,9 @@ import { Image } from 'astro:assets';
 import { Icon } from 'astro-icon/components';
 import Modal from '~/components/Modal.astro';
 import crowdinIconLogo from '~/assets/images/crowdin.svg';
+import { LinkButton } from '@astrojs/starlight/components';
 import badgesImage from '~/assets/images/badges.png';
+import brandBook from '~/assets/images/brand-book.png';
 
 <script>{`
     document.addEventListener('DOMContentLoaded', () => {
@@ -309,7 +311,7 @@ Examples of the incorrect use of the logo, not maintaining proportions, using th
 
 Use the badge when you want to show our partnership or let others know that you use Crowdin to localize your own project.
 
-<div class="logo-preview gray badges mb-4 logos-4">
+<div class="logo-preview gray badges mb-8 logos-4">
     <div class="badge-item !mt-0">
         <img class="no-shadow mb-2" src="/assets/badges/localization-at-dark-rounded@1x.svg" alt="Dark badge" />
     </div>
@@ -324,11 +326,25 @@ Use the badge when you want to show our partnership or let others know that you
     </div>
 </div>
 
-<div>
+<div class={'!mb-20'}>
     <p><small class="text-muted">DOWNLOAD</small></p>
     <a href="/assets/badges/localization-at-crowdin–badges.zip">.zip (all badges)</a>
 </div>
 
+<div class={'border p-8 !mt-8 grid grid-cols-8 mb-8 rounded-lg'}>
+  <div class={'relative col-span-3 md:col-span-2'}>
+    <Image class="no-shadow mb-8 absolute -translate-y-2/4 top-2/4" src={brandBook} alt="Crowdin Brand Book" />
+  </div>
+  <div class={'col-span-5 md:col-span-6'}>
+    <div className="flex flex-col">
+      <h3>Brand Guidelines</h3>
+      <p>Explore our guidelines for properly using and applying our brand's visual elements.</p>
+      <LinkButton class={'self-start'} href="/crowdin_brand_guidlines_4q_2024.pdf" variant="primary" iconPlacement="start" icon="document" target="_blank">Download Brandbook</LinkButton>
+    </div>
+  </div>
+</div>
+
+
 <Modal id="dialog" open="Open modal">
     <span slot="header" class="font-bold">Crowdin icon</span>
     <main slot="main">