diff --git a/apps/kitchensink/images/top-banner/bg-mint-desktop.png b/apps/kitchensink/images/top-banner/bg-mint-desktop.png
new file mode 100644
index 0000000000..e022e5ea56
Binary files /dev/null and b/apps/kitchensink/images/top-banner/bg-mint-desktop.png differ
diff --git a/apps/kitchensink/images/top-banner/bg-mint-mobile.png b/apps/kitchensink/images/top-banner/bg-mint-mobile.png
new file mode 100644
index 0000000000..cf8f8ddf11
Binary files /dev/null and b/apps/kitchensink/images/top-banner/bg-mint-mobile.png differ
diff --git a/apps/kitchensink/images/top-banner/bg-pink-desktop.png b/apps/kitchensink/images/top-banner/bg-pink-desktop.png
new file mode 100644
index 0000000000..1f06a9cfac
Binary files /dev/null and b/apps/kitchensink/images/top-banner/bg-pink-desktop.png differ
diff --git a/apps/kitchensink/images/top-banner/bg-pink-mobile.png b/apps/kitchensink/images/top-banner/bg-pink-mobile.png
new file mode 100644
index 0000000000..3ff346c9ad
Binary files /dev/null and b/apps/kitchensink/images/top-banner/bg-pink-mobile.png differ
diff --git a/apps/kitchensink/top-banner.html b/apps/kitchensink/top-banner.html
new file mode 100644
index 0000000000..826db00054
--- /dev/null
+++ b/apps/kitchensink/top-banner.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>@appwrite/kitchensink - user demo</title>
+  </head>
+
+  <body>
+    <main class="grid-with-side is-fixed-layout" id="main">
+
+      <div class="top-banner">
+        <div class="top-banner-content aw-u-color-text-primary">
+          <a class="u-flex u-gap-16 u-main-center u-cross-center u-flex-vertical-mobile" href="/blog/post/announcing-appwrite-pro">
+            <span class="body-text-1 u-bold">Appwrite Pro is now available!</span>
+            <div class="button is-secondary u-line-height-1 is-full-width-mobile aw-u-max-width-380">Upgrade</div>
+          </a>
+          <button class="top-banner-button" aria-label="close upgrade message">
+            <span class="icon-x" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      {{> topNav}} {{> sideNav}}
+      <section class="main-content">
+        <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 u-flex u-min-width-0">
+              <a class="button is-text is-only-icon" href="" aria-label="back to [PAGE NAME]">
+                <span class="icon-cheveron-left" aria-hidden="true"></span>
+              </a>
+              <span class="text u-trim-1">Users</span>
+            </h1>
+              <button class="tag">
+                <span class="icon-duplicate" aria-hidden="true"></span><span class="text">User ID</span>
+              </button>
+            </div>
+            <div class="top-cover-options">
+
+            </div>
+            <div class="tabs">
+              <button
+                class="tabs-button-scroll is-start"
+                aria-label="Show items in start side"
+              >
+                <span class="icon-cheveron-left" aria-hidden="true"></span>
+              </button>
+              <button
+                class="tabs-button-scroll is-end"
+                aria-label="Show items in end side"
+              >
+                <span class="icon-cheveron-right" aria-hidden="true"></span>
+              </button>
+              <ul class="tabs-list">
+                <li class="tabs-item">
+                  <a class="tabs-button is-selected" href="">
+                    <span class="text">Overview</span>
+                  </a>
+                </li>
+                <li class="tabs-item">
+                  <a class="tabs-button" href="">
+                    <span class="text">Sessions</span>
+                  </a>
+                </li>
+                <li class="tabs-item">
+                  <a class="tabs-button" href="">
+                    <span class="text">Activity</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="container u-margin-block-start-24">
+
+          <div class="common-section u-flex u-gap-12">
+            <div class="input-text-wrapper u-flex-basis-50-percent">
+              <input type="search" placeholder="Search" />
+              <div class="icon-search" aria-hidden="true"></div>
+            </div>
+            <button class="button u-margin-inline-start-auto" type="button">
+              <span class="icon-plus" aria-hidden="true"></span>
+              <span class="text">Create User</span>
+            </button>
+          </div>
+          <div class="common-section">
+            <table class="table is-vertical">
+              <thead class="table-thead">
+              <tr class="table-row">
+                <th width="30" class="table-thead-col">
+                  <span class="text"></span>
+                </th>
+                <th width="" class="table-thead-col">
+                  <span class="text">Name</span>
+                </th>
+                <th width="" class="table-thead-col">
+                  <span class="text">E-Mail</span>
+                </th>
+                <th width="" class="table-thead-col">
+                  <span class="text">Status</span>
+                </th>
+                <th width="" class="table-thead-col">
+                  <span class="text">Joined</span>
+                </th>
+              </tr>
+              </thead>
+              <tbody class="table-tbody">
+              <tr class="table-row">
+                <td width="" class="table-col is-only-desktop">
+                  <div class="image">
+                    <img
+                            class="avatar"
+                            width="30"
+                            height="30"
+                            src="https://unsplash.it/30"
+                            alt="test"
+                    />
+                  </div>
+                </td>
+                <td class="table-col" data-title="Name">
+                  <a role="button" tabindex="0" class="link" href="#">test</a>
+                </td>
+                <td class="table-col" data-title="E-Mail">
+                  <span class="text">test@test.test</span>
+                </td>
+                <td class="table-col" data-title="Status">
+                  <span class="text"><div class="pill">Unverified</div> </span>
+                </td>
+                <td class="table-col" data-title="Joined">
+                  <span class="text">April 14, 2022</span>
+                </td>
+              </tr>
+              <tr class="table-row">
+                <td width="" class="table-col is-only-desktop">
+                  <div class="image">
+                    <img
+                            class="avatar"
+                            width="30"
+                            height="30"
+                            src="https://unsplash.it/31"
+                            alt="errtretewr"
+                    />
+                  </div>
+                </td>
+                <!--<Cell>-->
+                <td class="table-col" data-title="Name">
+                  <a role="button" tabindex="0" class="link" href="#"
+                  >Robin Hood</a
+                  >
+                </td>
+                <td class="table-col" data-title="E-Mail">
+                  <span class="text">robin@notthingam.co</span>
+                </td>
+                <td class="table-col" data-title="Status">
+                  <span class="text"><div class="pill">Unverified</div> </span>
+                </td>
+                <td class="table-col" data-title="Joined">
+                  <span class="text">April 13, 2022</span>
+                </td>
+              </tr>
+              <tr class="table-row">
+                <td width="" class="table-col is-only-desktop">
+                  <div class="image">
+                    <img
+                            class="avatar"
+                            width="30"
+                            height="30"
+                            src="https://unsplash.it/32"
+                            alt="Mark"
+                    />
+                  </div>
+                </td>
+                <!--<Cell>-->
+                <td class="table-col" data-title="Name">
+                  <a
+                          role="button"
+                          tabindex="0"
+                          class="link"
+                          href="#/user/6253ea4d3138cff6eb41"
+                  >Mark</a
+                  >
+                </td>
+                <!--<CellLink>-->
+                <td class="table-col" data-title="E-Mail">
+                  <span class="text">mark@mark.mark</span>
+                </td>
+                <!--<CellText>-->
+                <td class="table-col" data-title="Status">
+                  <span class="text"
+                  ><div class="pill">Unverified</div>
+                    <!--<Pill>--></span
+                  >
+                </td>
+                <td class="table-col" data-title="Joined">
+                  <span class="text">April 11, 2022</span>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="common-section">
+            <div class="card is-border-dashed u-flex u-flex-vertical u-cross-center">
+              <button class="button is-secondary is-only-icon" aria-label="Add user">
+                <span class="icon-plus" aria-hidden="true"></span>
+              </button>
+              <p class="u-margin-block-start-20">Add Your First User To Get Started</p>
+              <button class="button is-secondary u-margin-block-start-32" aria-label="Add user">
+                <span class="text">Documentation</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <footer class="main-footer">
+          <div class="main-footer-start">
+            <ul class="inline-links is-no-padding-first-and-last u-x-small">
+              <li class="inline-links-item">
+                <a href=""><span class="text">version 1.1.1</span></a>
+              </li>
+              <li class="inline-links-item">
+                <a href=""><span class="text">Terms</span></a>
+              </li>
+              <li class="inline-links-item">
+                <a href=""><span class="text">Privacy</span></a>
+              </li>
+            </ul>
+          </div>
+          <div class="main-footer-end">
+            <ul class="inline-links is-no-padding-first-and-last u-x-small">
+              <li class="inline-links-item">
+                <span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
+              </li>
+              <li class="inline-links-item u-flex u-gap-8">
+                <a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
+                <a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
+              </li>
+            </ul>
+          </div>
+        </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 7e1ac09ec7..2bfd2f6157 100644
--- a/apps/kitchensink/vite.config.js
+++ b/apps/kitchensink/vite.config.js
@@ -25,6 +25,7 @@ const config = {
         coverFrame: new URL("./cover-frame.html", import.meta.url).pathname,
         coverFrame2: new URL("./cover-frame-2.html", import.meta.url).pathname,
         users: new URL("./users.html", import.meta.url).pathname,
+        topBanner: new URL("./top-banner.html", import.meta.url).pathname,
         user: new URL("./user.html", import.meta.url).pathname,
         functions: new URL("./functions.html", import.meta.url).pathname,
         userSecurity: new URL("./userSecurity.html", import.meta.url).pathname,
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index e911e31eaf..1c8b6e6dc5 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -20,10 +20,11 @@
 @forward "toggle-button";
 @forward "clickable-list";
 @forward "progress-bar";
-
 @forward "top-cover";
 @forward "code-panel";
 
+@forward "top-banner";
+
 /* main parts */
 @forward "main-header";
 @forward "breadcrumbs";
diff --git a/packages/ui/src/7-components/_top-banner.scss b/packages/ui/src/7-components/_top-banner.scss
new file mode 100644
index 0000000000..da58aa9f70
--- /dev/null
+++ b/packages/ui/src/7-components/_top-banner.scss
@@ -0,0 +1,29 @@
+@use '../abstract' as *;
+.top-banner {
+  --top-banner-mobile-bg-1-url: url("/images/top-banner/bg-pink-mobile.png");
+  --top-banner-mobile-bg-2-url: url("/images/top-banner/bg-mint-mobile.png");
+  --top-banner-desktop-bg-1-url: url("/images/top-banner/bg-pink-desktop.png");
+  --top-banner-desktop-bg-2-url: url("/images/top-banner/bg-mint-desktop.png");
+
+  position:relative; display:flex; justify-content:center;
+  padding-block:pxToRem(5); padding-inline:pxToRem(12);
+  background: var(--top-banner-desktop-bg-1-url) no-repeat left center,
+  var(--top-banner-desktop-bg-2-url) no-repeat right -330px;
+  //background: linear-gradient(94deg, rgba(253, 54, 110, 0.00) 0%, rgba(253, 54, 110, 0.50) 50.82%, rgba(253, 54, 110, 0.00) 100%);
+  &-content { line-height:pxToRem(50); transition:var(--transition); }
+  &-button { position:absolute; inset-block:0; inset-inline-end:pxToRem(12); }
+
+  [data-banner-hidden] & {
+    display: none;
+  }
+  @media #{$break1} {
+    inline-size:100%; padding:pxToRem(16);
+    background: var(--top-banner-mobile-bg-1-url) no-repeat left bottom,
+    var(--top-banner-mobile-bg-2-url) no-repeat right top;
+    &-content { display:flex; flex-direction:column; inline-size:100%; line-height:1.5; transition:var(--transition); }
+    &-button {
+      position:static; line-height:1; align-self:end; order:-1;
+      margin-block-start:-4px; margin-inline-end:-5px;  margin-block-end:pxToRem(8);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 396ee6df12..13200d5e2f 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -4,6 +4,7 @@
   --p-side-size: #{pxToRem(200)};
   > {
     :where(.alert)        { grid-area:alert;  }
+    :where(.top-banner)   { grid-area:alert;  }
     :where(.main-header)  { grid-area:header; }
     :where(.main-side)    { grid-area:side;   }
     :where(.main-content) { grid-area:main;   }

+ +	+ Name +	+ E-Mail +	+ Status +	+ Joined +
+ + + +	+ test +	+ test@test.test +	+ Unverified +	+ April 14, 2022 +
+ + + +	+ Robin Hood +	+ robin@notthingam.co +	+ Unverified +	+ April 13, 2022 +
+ + + +	+ Mark +	+ mark@mark.mark +	+ Unverified + +	+ April 11, 2022 +