diff --git a/package-lock.json b/package-lock.json
index 83dc37d98..4573298ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,8 @@
             "name": "@appwrite/console",
             "version": "0.0.1",
             "dependencies": {
-                "@aw-labs/icons": "^0.0.0-16",
-                "@aw-labs/ui": "^0.0.0-16",
+                "@aw-labs/icons": "^0.0.0-17",
+                "@aw-labs/ui": "^0.0.0-17",
                 "echarts": "^5.3.3"
             },
             "devDependencies": {
@@ -58,14 +58,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-16",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-16.tgz",
-            "integrity": "sha512-JkUXgScGmlCuSQbNEJInKaGbIZbLnAFKT7oPLyOfC82DUzbtc9X3CAIHSywfPFH9Oaf+QGs6QYBwEPw4YFugKA=="
+            "version": "0.0.0-17",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-17.tgz",
+            "integrity": "sha512-/2QX/NWOT7gnQNXv85kgKZDthQTcDZ+WtofLC5ZEar23f1t38Oz2KxUgEVP1/xLiBsSflb8y6IoGT6n04Uh4tA=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-16",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-16.tgz",
-            "integrity": "sha512-B/I31IIhWlgWVZz8zSelXTkJCOuq75g1fXTdiVUC0e16tgxEBuNs9/W2i9IsYXTqZhw2hlNdRwkpWeqie56Ahw==",
+            "version": "0.0.0-17",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-17.tgz",
+            "integrity": "sha512-WCiZ7S5KWZk1ZaF+Z+alTEJn21xM22B5yl+Y4dMYBPu70N0IALZ8RyRQxaQqlpLkIN5LDy4m01X71W3A1miqIw==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7807,14 +7807,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-16",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-16.tgz",
-            "integrity": "sha512-JkUXgScGmlCuSQbNEJInKaGbIZbLnAFKT7oPLyOfC82DUzbtc9X3CAIHSywfPFH9Oaf+QGs6QYBwEPw4YFugKA=="
+            "version": "0.0.0-17",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-17.tgz",
+            "integrity": "sha512-/2QX/NWOT7gnQNXv85kgKZDthQTcDZ+WtofLC5ZEar23f1t38Oz2KxUgEVP1/xLiBsSflb8y6IoGT6n04Uh4tA=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-16",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-16.tgz",
-            "integrity": "sha512-B/I31IIhWlgWVZz8zSelXTkJCOuq75g1fXTdiVUC0e16tgxEBuNs9/W2i9IsYXTqZhw2hlNdRwkpWeqie56Ahw==",
+            "version": "0.0.0-17",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-17.tgz",
+            "integrity": "sha512-WCiZ7S5KWZk1ZaF+Z+alTEJn21xM22B5yl+Y4dMYBPu70N0IALZ8RyRQxaQqlpLkIN5LDy4m01X71W3A1miqIw==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 369916c3e..b8d1c90c8 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/icons": "^0.0.0-16",
-        "@aw-labs/ui": "^0.0.0-16",
+        "@aw-labs/icons": "^0.0.0-17",
+        "@aw-labs/ui": "^0.0.0-17",
         "echarts": "^5.3.3"
     },
     "devDependencies": {
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 6f94faf40..7ecbb4260 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -11,8 +11,10 @@
     export let autofocus = false;
     export let meter = true;
     export let autocomplete = true;
+    export let showPasswordButton = false;
 
     let element: HTMLInputElement;
+    let showInPlainText = false;
 
     onMount(() => {
         if (element && autofocus) {
@@ -26,16 +28,31 @@
 <FormItem>
     <label class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
-        <input
-            {id}
-            {placeholder}
-            {disabled}
-            {required}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="password"
-            class="input-text"
-            bind:value
-            bind:this={element} />
+        {#if showInPlainText}
+            <input
+                type="text"
+                {id}
+                name={id}
+                {placeholder}
+                {required}
+                {disabled}
+                autocomplete={autocomplete ? 'on' : 'off'}
+                class="input-text"
+                bind:value
+                bind:this={element} />
+        {:else}
+            <input
+                {id}
+                {placeholder}
+                {disabled}
+                {required}
+                autocomplete={autocomplete ? 'on' : 'off'}
+                type="password"
+                class="input-text"
+                bind:value
+                bind:this={element} />
+        {/if}
+
         {#if meter}
             <meter
                 value={strength > 100 ? 100 : strength}
@@ -47,5 +64,13 @@
                 class:is-strong={strength > 66 && strength <= 100}
                 aria-label="Password strength weak" />
         {/if}
+        {#if showPasswordButton}
+            <button
+                on:click={() => (showInPlainText = !showInPlainText)}
+                class="show-password-button"
+                aria-label="show password">
+                <span class="icon-eye" aria-hidden="true" />
+            </button>
+        {/if}
     </div>
 </FormItem>
diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte
index 737bf6b54..5aa7d827f 100644
--- a/src/lib/elements/table/table.svelte
+++ b/src/lib/elements/table/table.svelte
@@ -1,3 +1,3 @@
-<table class="table is-vertical common-section">
+<table class="table is-vertical u-margin-block-start-32 ">
     <slot />
 </table>
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index b1c43c28f..f09a95b8f 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -1,3 +1,3 @@
-<div class="container">
+<div class="container u-margin-block-start-24">
     <slot />
 </div>
diff --git a/src/routes/console/[project]/database/collection/[collection]/index.svelte b/src/routes/console/[project]/database/collection/[collection]/index.svelte
index 75ad974b3..6a175a1b8 100644
--- a/src/routes/console/[project]/database/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/index.svelte
@@ -36,7 +36,7 @@
         <div aria-busy="true" />
     {:then response}
         <div class="u-flex u-gap-12 common-section u-main-space-between">
-            <div class="input-text-wrapper u-stretch" style="max-width: 500px">
+            <div class="input-text-wrapper u-stretch">
                 <input
                     type="search"
                     placeholder="Search by ID"
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
index f52f65390..75854c9ea 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
@@ -46,7 +46,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <div class="input-text-wrapper u-stretch" style="max-width: 500px">
+        <div class="input-text-wrapper u-stretch">
             <input
                 type="search"
                 placeholder="Search by Filename"
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index fd9f23d90..5325a9e6d 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -69,7 +69,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <div class="input-text-wrapper u-stretch" style="max-width: 500px">
+        <div class="input-text-wrapper u-stretch">
             <input
                 type="search"
                 placeholder="Search Name, Email, or ID"
@@ -129,7 +129,9 @@
                 {/each}
             </TableBody>
         </Table>
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {$usersList.response.total}</p>
             <Pagination {limit} bind:offset sum={$usersList.response.total} />
         </div>
@@ -145,7 +147,9 @@
                 </div>
             </div>
         </Empty>
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {$usersList.response.total}</p>
             <Pagination {limit} bind:offset sum={$usersList.response.total} />
         </div>
diff --git a/src/routes/console/[project]/users/security.svelte b/src/routes/console/[project]/users/security.svelte
index 029dfd003..e220206d8 100644
--- a/src/routes/console/[project]/users/security.svelte
+++ b/src/routes/console/[project]/users/security.svelte
@@ -128,15 +128,13 @@
         </p>
         <svelte:fragment slot="right">
             <form class="form u-grid u-gap-16">
-                <ul class="form-list">
-                    <li class="form-item is-multiple">
-                        <InputNumber id="length" label="Length" value={1} />
-                        <InputSelect
-                            id="period"
-                            {options}
-                            label="Time Period"
-                            value={options[0].value} />
-                    </li>
+                <ul class="form-list is-multiple">
+                    <InputNumber id="length" label="Length" value={1} />
+                    <InputSelect
+                        id="period"
+                        {options}
+                        label="Time Period"
+                        value={options[0].value} />
                 </ul>
             </form>
         </svelte:fragment>
diff --git a/src/routes/console/[project]/users/teams.svelte b/src/routes/console/[project]/users/teams.svelte
index 1eb55376d..ed4c9600f 100644
--- a/src/routes/console/[project]/users/teams.svelte
+++ b/src/routes/console/[project]/users/teams.svelte
@@ -48,7 +48,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <div class="input-text-wrapper u-stretch" style="max-width: 500px">
+        <div class="input-text-wrapper u-stretch">
             <input
                 type="search"
                 placeholder="Search by Name"
@@ -87,7 +87,9 @@
                 {/each}
             </TableBody>
         </Table>
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {$teamsList.response.total}</p>
             <Pagination {limit} bind:offset sum={$teamsList.response.total} />
         </div>
@@ -103,7 +105,9 @@
                 <Button secondary on:click={() => (search = '')}>Clear Search</Button>
             </div>
         </Empty>
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {$teamsList.response.total}</p>
             <Pagination {limit} bind:offset sum={$teamsList.response.total} />
         </div>
diff --git a/src/routes/console/[project]/users/teams/[team]/activity.svelte b/src/routes/console/[project]/users/teams/[team]/activity.svelte
index ca1e024d9..5badf1ec1 100644
--- a/src/routes/console/[project]/users/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/activity.svelte
@@ -83,7 +83,9 @@
                 </div>
             </Empty>
         {/if}
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {response.total}</p>
             <Pagination {limit} bind:offset sum={response.total} />
         </div>
diff --git a/src/routes/console/[project]/users/teams/[team]/members.svelte b/src/routes/console/[project]/users/teams/[team]/members.svelte
index 9487faec0..438c5d28d 100644
--- a/src/routes/console/[project]/users/teams/[team]/members.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/members.svelte
@@ -45,7 +45,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <div class="input-text-wrapper u-stretch" style="max-width: 500px">
+        <div class="input-text-wrapper u-stretch">
             <input
                 type="search"
                 placeholder="Search by ID"
@@ -100,7 +100,9 @@
                 {/each}
             </TableBody>
         </Table>
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {$memberships.response.total}</p>
             <Pagination {limit} bind:offset sum={$memberships.response.total} />
         </div>
@@ -116,7 +118,9 @@
                 </div>
             </div>
         </Empty>
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {$memberships.response.total}</p>
             <Pagination {limit} bind:offset sum={$memberships.response.total} />
         </div>
diff --git a/src/routes/console/[project]/users/user/[user]/activity.svelte b/src/routes/console/[project]/users/user/[user]/activity.svelte
index e7ab5ab20..df75127bc 100644
--- a/src/routes/console/[project]/users/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/users/user/[user]/activity.svelte
@@ -86,7 +86,9 @@
                 </div>
             </Empty>
         {/if}
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {response.total}</p>
             <Pagination {limit} bind:offset sum={response.total} />
         </div>
diff --git a/src/routes/console/[project]/users/user/[user]/memberships.svelte b/src/routes/console/[project]/users/user/[user]/memberships.svelte
index fa0d1f5d7..2ac05b342 100644
--- a/src/routes/console/[project]/users/user/[user]/memberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/memberships.svelte
@@ -96,7 +96,9 @@
                 </div>
             </Empty>
         {/if}
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {response.total}</p>
             <Pagination {limit} bind:offset sum={response.total} />
         </div>
diff --git a/src/routes/console/[project]/users/user/[user]/sessions.svelte b/src/routes/console/[project]/users/user/[user]/sessions.svelte
index e9d7f8ff5..d3eef4146 100644
--- a/src/routes/console/[project]/users/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/sessions.svelte
@@ -99,7 +99,9 @@
                 </div>
             </Empty>
         {/if}
-        <div class="u-flex common-section u-main-space-between">
+        <div
+            class="u-flex u-margin-block-start-32
+ u-main-space-between">
             <p class="text">Total results: {response.total}</p>
             <Pagination {limit} bind:offset sum={response.total} />
         </div>