diff --git a/apps/kitchensink/create-org-modal-2.html b/apps/kitchensink/create-org-modal-2.html
new file mode 100644
index 0000000000..83b405d28e
--- /dev/null
+++ b/apps/kitchensink/create-org-modal-2.html
@@ -0,0 +1,385 @@
+<!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 u-hide" 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: 2rem; --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>
+        </div>
+        <!--<Container>-->
+        <form class="form"><!--<Modal>--></form>
+        <!--<Form>--><!--<_create>--><!--<Index>--><!--<__layout>-->
+        <!--<UploadBox>--><!--<__layout>-->
+        <footer class="main-footer"></footer>
+      </section>
+    </main>
+
+
+
+    <dialog class="wizard-secondary">
+      <div class="wizard-secondary-container">
+        <header class="wizard-secondary-header">
+          <div class="u-flex u-main-space-between u-cross-baseline u-gap-32">
+            <h1 class="heading-level-5">Create organization</h1>
+            <button class="button is-text is-only-icon u-margin-block-start-8" aria-label="close modal">
+              <span class="icon-x u-font-size-20" aria-hidden="true"></span>
+            </button>
+          </div>
+        </header>
+        <div class="wizard-secondary-content">
+          <div class="wizard-secondary-content-1">
+            <ul class="form-list">
+              <li>
+                <label for="name">Name</label>
+                <input id="name" type="text" placeholder="Organization name">
+              </li>
+              <li>
+                <div class="label">Select plan</div>
+                <p>For more details on our plans, visit our pricing page.</p>
+                <ul class="u-flex u-gap-16 u-flex-vertical-mobile u-margin-block-start-8">
+                  <li class="u-stretch">
+                    <label class="card is-allow-focus u-flex u-gap-8 u-height-100-percent">
+                      <input type="radio" class="is-small" name="package">
+                      <div class="u-flex-vertical u-gap-4">
+                        <h6 class="body-text-2 u-bold u-line-height-1">Starter</h6>
+                        <p>For personal hobby projects of small scale and students</p>
+                        <div class="u-margin-block-start-4">$0</div>
+                      </div>
+                    </label>
+                  </li>
+                  <li class="u-stretch">
+                    <label class="card is-allow-focus u-flex u-gap-8 u-height-100-percent">
+                      <input type="radio" class="is-small" name="package">
+                      <div class="u-flex-vertical u-gap-4">
+                        <h6 class="body-text-2 u-bold u-line-height-1">Pro</h6>
+                        <p>For pro developers and production projects that need the ability to scale</p>
+                        <div class="u-margin-block-start-4">$15 per member/month + usage</div>
+                      </div>
+                    </label>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+          <div class="wizard-secondary-content-sep"></div>
+          <div class="wizard-secondary-content-2">
+            <div class="wizard-secondary-content-sticky">
+                <div class="card" style="--card-padding:1.5rem">
+                  <div class="u-flex-vertical u-gap-24">
+                    <ul class="secondary-tabs is-stretch">
+                      <li class="secondary-tabs-item">
+                        <button class="secondary-tabs-button" disabled><span class="text">Starter</span></button>
+                      </li>
+                      <li class="secondary-tabs-item">
+                        <button class="secondary-tabs-button"><span class="text">Pro</span></button>
+                      </li>
+                    </ul>
+                    <div class="u-flex-vertical u-gap-8">
+                      <h5 class="body-text-2 u-bold">Starter plan</h5>
+                      <ul class="list u-gap-4 u-color-text-offline u-small">
+                        <li class="list-item u-gap-4">
+                          <span class="icon-arrow-down u-color-text-danger u-small u-margin-block-start-4" aria-hidden="true"></span>
+                          <span class="text">Limited to 1 Database, 3 Buckets, 5 Functions per project</span>
+                        </li>
+                        <li class="list-item u-gap-4">
+                          <span class="icon-arrow-down u-color-text-danger u-small u-margin-block-start-4" aria-hidden="true"></span>
+                          <span class="text">Limited to 1 organization member</span>
+                        </li>
+                        <li class="list-item u-gap-4">
+                          <span class="icon-arrow-down u-color-text-danger u-small u-margin-block-start-4" aria-hidden="true"></span>
+                          <span class="text">10GB bandwidth</span>
+                        </li>
+                        <li class="list-item u-gap-4">
+                          <span class="icon-arrow-down u-color-text-danger u-small u-margin-block-start-4" aria-hidden="true"></span>
+                          <span class="text">2GB bandwidth</span>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+
+                </div>
+            </div>
+          </div>
+        </div>
+        <div class="wizard-secondary-options">
+          <div class="wizard-secondary-options-start">
+<!--            <button class="button is-secondary is-full-width-mobile">Button</button>-->
+          </div>
+          <div class="wizard-secondary-options-end">
+            <button class="button is-secondary is-full-width-mobile">Cancel</button>
+            <button class="button is-full-width-mobile">Create organization</button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+
+
+    <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..009f533d03 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,
+        createOrgModal2: new URL("./create-org-modal-2.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"
       },
