diff --git a/.changeset/proud-ducks-suffer.md b/.changeset/proud-ducks-suffer.md
new file mode 100644
index 0000000000..859b4e4286
--- /dev/null
+++ b/.changeset/proud-ducks-suffer.md
@@ -0,0 +1,6 @@
+---
+"@appwrite.io/pink-icons": minor
+"@appwrite.io/pink": minor
+---
+
+Startup Program section
diff --git a/apps/kitchensink/startups-program.html b/apps/kitchensink/startups-program.html
new file mode 100644
index 0000000000..b13fd2ccc9
--- /dev/null
+++ b/apps/kitchensink/startups-program.html
@@ -0,0 +1,352 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@appwrite/kitchensink - bucket settings demo</title>
+  </head>
+
+  <body>
+    <main class="grid-with-side" id="main">
+      {{> topNav}} {{> sideNav}}
+
+      <section class="main-content s-dFvp3V-Iy6FY">
+        <div class="top-cover">
+          <div class="container">
+            <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
+              <h1 class="heading-level-4 s-dFvp3V-Iy6FY">
+                <span class="text s-dFvp3V-Iy6FY">Storage</span>
+              </h1>
+            </div>
+            <div class="tabs s-dFvp3V-Iy6FY">
+              <ul class="tabs-list scroll-shadow-horizontal s-dFvp3V-Iy6FY">
+                <li class="tabs-item s-dFvp3V-Iy6FY">
+                  <a class="tabs-button s-dFvp3V-Iy6FY is-selected" href="#"
+                    ><span class="text s-dFvp3V-Iy6FY">Buckets</span></a
+                  >
+                </li>
+                <li class="tabs-item s-dFvp3V-Iy6FY">
+                  <a class="tabs-button s-dFvp3V-Iy6FY" href="#"
+                    ><span class="text s-dFvp3V-Iy6FY">Usage</span></a
+                  >
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <!--<Cover>-->
+        <div class="container u-margin-block-start-24">
+          <div class="u-flex u-gap-12 common-section u-main-space-between">
+            <h2 class="heading-level-5">Buckets</h2>
+            <button class="button" type="button">
+              <span class="icon-plus" aria-hidden="true"></span>
+              <span class="text">Add bucket</span></button
+            ><!--<Button>-->
+          </div>
+          <div
+            class="grid-box common-section"
+            style="--grid-gap: 1rem; --grid-item-size: 22rem"
+          >
+            <a class="card" href="#"
+              ><div class="grid-item-1">
+                <div class="eyebrow-heading-3">XX Files</div>
+                <h2 class="heading-level-6">Images</h2>
+                <div class="status"></div>
+                <div class="options">
+                  <span class="tooltip"
+                    ><button type="button" class="tag">
+                      <i class="icon-duplicate"></i>Bucket ID</button
+                    ><!--<Pill>-->
+                    <span class="tooltip-popup is-bottom" role="tooltip"
+                      >Click to copy</span
+                    ></span
+                  ><!--<Copy>-->
+                </div>
+                <ul class="icons u-flex u-gap-8">
+                  <li>
+                    <button class="tooltip" aria-label="encryption">
+                      <span class="icon-lock-closed" aria-hidden="true"></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Encryption enabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                  <li>
+                    <button class="tooltip" aria-label="antivirus">
+                      <span class="icon-shield-check" aria-hidden="true"></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Antivirus enabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                </ul>
+              </div></a
+            ><!--<Bucket>--><a class="card" href="#"
+              ><div class="grid-item-1">
+                <div class="eyebrow-heading-3">XX Files</div>
+                <h2 class="heading-level-6">Empty Bucket</h2>
+                <div class="status">
+                  <div class="tag">Disabled</div>
+                  <!--<Pill>-->
+                </div>
+                <div class="options">
+                  <span class="tooltip"
+                    ><button type="button" class="tag">
+                      <i class="icon-duplicate"></i>Bucket ID</button
+                    ><!--<Pill>-->
+                    <span class="tooltip-popup is-bottom" role="tooltip"
+                      >Click to copy</span
+                    ></span
+                  ><!--<Copy>-->
+                </div>
+                <ul class="icons u-flex u-gap-8">
+                  <li>
+                    <button class="tooltip" aria-label="encryption">
+                      <span
+                        class="icon-lock-closed u-opacity-20"
+                        aria-hidden="true"
+                      ></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Encryption disabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                  <li>
+                    <button class="tooltip" aria-label="antivirus">
+                      <span
+                        class="icon-shield-check u-opacity-20"
+                        aria-hidden="true"
+                      ></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Antivirus disabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                </ul>
+              </div></a
+            ><!--<Bucket>--><a class="card" href="#"
+              ><div class="grid-item-1">
+                <div class="eyebrow-heading-3">XX Files</div>
+                <h2 class="heading-level-6">test</h2>
+                <div class="status"></div>
+                <div class="options">
+                  <span class="tooltip"
+                    ><button type="button" class="tag">
+                      <i class="icon-duplicate"></i>Bucket ID</button
+                    ><!--<Pill>-->
+                    <span class="tooltip-popup is-bottom" role="tooltip"
+                      >Click to copy</span
+                    ></span
+                  ><!--<Copy>-->
+                </div>
+                <ul class="icons u-flex u-gap-8">
+                  <li>
+                    <button class="tooltip" aria-label="encryption">
+                      <span class="icon-lock-closed" aria-hidden="true"></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Encryption enabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                  <li>
+                    <button class="tooltip" aria-label="antivirus">
+                      <span
+                        class="icon-shield-check u-opacity-20"
+                        aria-hidden="true"
+                      ></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Antivirus disabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                </ul>
+              </div></a
+            ><!--<Bucket>--><a class="card" href="#"
+              ><div class="grid-item-1">
+                <div class="eyebrow-heading-3">XX Files</div>
+                <h2 class="heading-level-6">zrdz</h2>
+                <div class="status">
+                  <div class="tag">Disabled</div>
+                  <!--<Pill>-->
+                </div>
+                <div class="options">
+                  <span class="tooltip"
+                    ><button type="button" class="tag">
+                      <i class="icon-duplicate"></i>Bucket ID</button
+                    ><!--<Pill>-->
+                    <span class="tooltip-popup is-bottom" role="tooltip"
+                      >Click to copy</span
+                    ></span
+                  ><!--<Copy>-->
+                </div>
+                <ul class="icons u-flex u-gap-8">
+                  <li>
+                    <button class="tooltip" aria-label="encryption">
+                      <span class="icon-lock-closed" aria-hidden="true"></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Encryption enabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                  <li>
+                    <button class="tooltip" aria-label="antivirus">
+                      <span class="icon-shield-check" aria-hidden="true"></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Antivirus enabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                </ul>
+              </div></a
+            ><!--<Bucket>--><a class="card" href="#"
+              ><div class="grid-item-1">
+                <div class="eyebrow-heading-3">XX Files</div>
+                <h2 class="heading-level-6">asdasd</h2>
+                <div class="status"></div>
+                <div class="options">
+                  <span class="tooltip"
+                    ><button type="button" class="tag">
+                      <i class="icon-duplicate"></i>Bucket ID</button
+                    ><!--<Pill>-->
+                    <span class="tooltip-popup is-bottom" role="tooltip"
+                      >Click to copy</span
+                    ></span
+                  ><!--<Copy>-->
+                </div>
+                <ul class="icons u-flex u-gap-8">
+                  <li>
+                    <button class="tooltip" aria-label="encryption">
+                      <span
+                        class="icon-lock-closed u-opacity-20"
+                        aria-hidden="true"
+                      ></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Encryption disabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                  <li>
+                    <button class="tooltip" aria-label="antivirus">
+                      <span class="icon-shield-check" aria-hidden="true"></span>
+                      <span class="tooltip-popup" role="tooltip"
+                        ><span>Antivirus enabled</span></span
+                      ></button
+                    ><!--<Tooltip>-->
+                  </li>
+                </ul>
+              </div></a
+            ><!--<Bucket>-->
+            <article class="card is-border-dashed u-grid u-cross-center">
+              <div class="u-flex u-flex-vertical u-cross-center">
+                  <div class="common-section">
+                    <button
+                      class="button is-only-icon is-secondary"
+                      type="button"
+                    >
+                      <i class="icon-plus"></i></button
+                    ><!--<Button>-->
+                  </div>
+                  <div class="common-section"><p>Add a new bucket</p></div>
+                </div>
+            </article>
+          </div>
+          <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: 5</p>
+            <nav class="pagination">
+              <button class="button is-text is-disabled" aria-label="prev page">
+                <span class="icon-cheveron-left" aria-hidden="true"></span>
+                <span class="text">Prev</span>
+              </button>
+              <ol class="pagination-list is-only-desktop">
+                <li class="pagination-item">
+                  <button class="button is-disabled" aria-label="page">
+                    <span class="text">1</span>
+                  </button>
+                </li>
+              </ol>
+              <button class="button is-text is-disabled" aria-label="next page">
+                <span class="text">Next</span>
+                <span class="icon-cheveron-right" aria-hidden="true"></span>
+              </button>
+            </nav>
+            <!--<Pagination>-->
+          </div>
+          <section class="common-section">
+            <h2 class="heading-level-5">Startups program</h2>
+            <div class="grid-2-1 common-section">
+              <div class="card">
+                <div class="u-flex u-flex-vertical-mobile u-gap-24">
+                  <article class="u-flex-vertical u-gap-24">
+                    <div class="u-flex u-gap-12">
+                      <img class="avatar" src="https://unsplash.it/40" alt="" />
+                      <div>
+                        <header>
+                          <h3 class="body-text-1 u-bold">Tessa Mero</h3>
+                          <h4 class="body-text-2 u-bold">Your program manager</h4>
+                        </header>
+                        <p class="body-text-2">Contact Tessa with any questions you might have about Appwrite.</p>
+                      </div>
+                    </div>
+                    <button class="button is-secondary is-full-width">
+                        <span>Schedule a call</span>
+                        <span class="icon-external-link" aria-hidden="true"></span>
+                    </button>
+                  </article>
+                  <div style="flex-basis:1px; background-color:hsl(var(--color-border));"></div>
+                  <article class="u-flex-vertical u-gap-24">
+                    <div class="u-flex u-gap-12">
+                      <img class="avatar" src="https://unsplash.it/40" alt="" />
+                      <div>
+                        <header>
+                          <h3 class="body-text-1 u-bold">Tessa Mero</h3>
+                          <h4 class="body-text-2 u-bold">Your program manager</h4>
+                        </header>
+                        <p class="body-text-2">Contact Tessa with any questions you might have about Appwrite.</p>
+                      </div>
+                    </div>
+                    <button class="button is-secondary is-full-width">
+                      <span>Schedule a call</span>
+                      <span class="icon-external-link" aria-hidden="true"></span>
+                    </button>
+                  </article>
+                </div>
+              </div>
+              <div class="card">
+                <div class="u-flex-vertical u-gap-12">
+                  <h3 class="body-text-1 u-bold">Upcoming events</h3>
+                  <div class="u-flex-vertical u-gap-16">
+                    <div class="u-flex u-gap-16 u-main-space-between">
+                      <div>
+                        <h4 class="body-text-2 u-bold">Office hours</h4>
+                        <time class="u-block">Friday, 03 May at 14:00</time>
+                      </div>
+                      <button class="button is-text u-padding-inline-end-0">
+                        <span>Add to calendar</span>
+                      </button>
+                    </div>
+                    <div class="u-sep-block-start"></div>
+                    <div class="u-flex u-gap-16 u-main-space-between">
+                      <div>
+                        <h4 class="body-text-2 u-bold">Fireside chat</h4>
+                        <time class="u-block">Friday, 17 May at 14:00</time>
+                      </div>
+                      <button class="button is-text u-padding-inline-end-0">
+                        <span>Add to calendar</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+        <!--<Container>-->
+        <form class="form"><!--<Modal>--></form>
+        <!--<Form>--><!--<_create>--><!--<Index>--><!--<__layout>-->
+        <!--<UploadBox>--><!--<__layout>-->
+        <footer class="main-footer"></footer>
+      </section>
+    </main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js
index 85be73da24..126946f597 100644
--- a/apps/kitchensink/vite.config.js
+++ b/apps/kitchensink/vite.config.js
@@ -48,6 +48,7 @@ const config = {
         wizardWithModalEmpty: new URL("./wizard-with-modal-empty.html", import.meta.url).pathname,
         fullScreenModal: new URL("./full-screen-modal.html", import.meta.url).pathname,
         createOrgModal: new URL("./create-org-modal.html", import.meta.url).pathname,
+        startupsProgram: new URL("./startups-program.html", import.meta.url).pathname,
       },
     },
   },
diff --git a/package-lock.json b/package-lock.json
index 70ba6fca0d..7354bf551d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,8 +29,8 @@
       "license": "ISC",
       "devDependencies": {
         "@appwrite.io/fonts": "*",
-        "@appwrite.io/pink": "0.20.0",
-        "@appwrite.io/pink-icons": "0.20.0",
+        "@appwrite.io/pink": "0.23.0",
+        "@appwrite.io/pink-icons": "0.23.0",
         "vite-plugin-handlebars": "^1.6.0"
       }
     },
@@ -55,8 +55,8 @@
       },
       "devDependencies": {
         "@appwrite.io/fonts": "*",
-        "@appwrite.io/pink": "0.20.0",
-        "@appwrite.io/pink-icons": "0.20.0",
+        "@appwrite.io/pink": "0.23.0",
+        "@appwrite.io/pink-icons": "0.23.0",
         "@types/prismjs": "^1.26.0",
         "glob": "^8.0.3",
         "sass": "^1.57.1"
@@ -16561,7 +16561,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.20.0",
+      "version": "0.23.0",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^3.0.0",
@@ -16570,10 +16570,10 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.20.0",
+      "version": "0.23.0",
       "license": "ISC",
       "dependencies": {
-        "@appwrite.io/pink-icons": "0.20.0",
+        "@appwrite.io/pink-icons": "0.23.0",
         "normalize.css": "^8.0.1",
         "the-new-css-reset": "^1.11.2"
       },
diff --git a/packages/ui/src/8-grids/_grid-2-1.scss b/packages/ui/src/8-grids/_grid-2-1.scss
new file mode 100644
index 0000000000..52402c3a61
--- /dev/null
+++ b/packages/ui/src/8-grids/_grid-2-1.scss
@@ -0,0 +1,15 @@
+@use '../abstract' as *;
+
+.grid-2-1 {
+  --p-gap: #{pxToRem(16)};
+  --p-gap-mobile: var(--p-gap);
+  display: grid;
+  gap: var(--p-gap);
+
+  @media #{$break1} {
+    gap: var(--p-gap-mobile);
+  }
+  @media #{$break2open} {
+    grid-template-columns: 2fr 1fr;
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/8-grids/_index.scss b/packages/ui/src/8-grids/_index.scss
index aaaa182002..2a1ccee38e 100644
--- a/packages/ui/src/8-grids/_index.scss
+++ b/packages/ui/src/8-grids/_index.scss
@@ -4,6 +4,7 @@
 @forward "grid-code";
 @forward "grid-1-1";
 @forward "grid-1-2";
+@forward "grid-2-1";
 @forward "grid-300px-1fr";
 @forward "grid-dashboard-1s-2m-6l";
 
