diff --git a/package-lock.json b/package-lock.json
index aed02b9a1..c8b0da162 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-13",
-                "@aw-labs/ui": "^0.0.0-13"
+                "@aw-labs/icons": "^0.0.0-14",
+                "@aw-labs/ui": "^0.0.0-14"
             },
             "devDependencies": {
                 "@playwright/test": "^1.22.2",
@@ -57,14 +57,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-13",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-13.tgz",
-            "integrity": "sha512-ZzCoaxfhcaE3j57xzpFsw+QQ79wpDSRN+vi9VGZJRBKpVTE1j3T860SrYsh6viNGXmq2molf79ICb4/hyK4t7Q=="
+            "version": "0.0.0-14",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-14.tgz",
+            "integrity": "sha512-cvh/SXMdxc07w3ygA/fGiIN8d0+7L4k5nhf5cn9tjgN2x1qFco4oaqxqRc6h4AB/ScPnlusDuKqcXfSQYnGiEA=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-13",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-13.tgz",
-            "integrity": "sha512-r00vTDAB72L1nCKgJWyqJIpA67eO9LEyezz5hBDwls02TOMmkungJaJidlmLDJHhzLpRpqNik8Ey1udp7Wve0Q==",
+            "version": "0.0.0-14",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-14.tgz",
+            "integrity": "sha512-IZhFmuFdM0Dkmse8q5lRPClhrlLIKhin231yV4weeujlIyd35B4cCR+J3TpsFZ6zs+2Sn2fV9PNDEBjiGwKanQ==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7779,14 +7779,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-13",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-13.tgz",
-            "integrity": "sha512-ZzCoaxfhcaE3j57xzpFsw+QQ79wpDSRN+vi9VGZJRBKpVTE1j3T860SrYsh6viNGXmq2molf79ICb4/hyK4t7Q=="
+            "version": "0.0.0-14",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-14.tgz",
+            "integrity": "sha512-cvh/SXMdxc07w3ygA/fGiIN8d0+7L4k5nhf5cn9tjgN2x1qFco4oaqxqRc6h4AB/ScPnlusDuKqcXfSQYnGiEA=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-13",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-13.tgz",
-            "integrity": "sha512-r00vTDAB72L1nCKgJWyqJIpA67eO9LEyezz5hBDwls02TOMmkungJaJidlmLDJHhzLpRpqNik8Ey1udp7Wve0Q==",
+            "version": "0.0.0-14",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-14.tgz",
+            "integrity": "sha512-IZhFmuFdM0Dkmse8q5lRPClhrlLIKhin231yV4weeujlIyd35B4cCR+J3TpsFZ6zs+2Sn2fV9PNDEBjiGwKanQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 814a92dac..b8835959b 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/ui": "^0.0.0-13",
-        "@aw-labs/icons": "^0.0.0-13"
+        "@aw-labs/ui": "^0.0.0-14",
+        "@aw-labs/icons": "^0.0.0-14"
     },
     "devDependencies": {
         "@playwright/test": "^1.22.2",
diff --git a/src/lib/components/box.svelte b/src/lib/components/box.svelte
new file mode 100644
index 000000000..c16d116ea
--- /dev/null
+++ b/src/lib/components/box.svelte
@@ -0,0 +1,9 @@
+<div class="box">
+    <div class="u-flex u-gap-16">
+        <slot name="image" />
+        <div class="u-cross-child-center u-line-height-1-5">
+            <slot name="title" />
+            <slot />
+        </div>
+    </div>
+</div>
diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
new file mode 100644
index 000000000..886edfd2b
--- /dev/null
+++ b/src/lib/components/cardGrid.svelte
@@ -0,0 +1,17 @@
+<script>
+    import { Card } from './';
+</script>
+
+<Card>
+    <div class="common-section grid-1-2">
+        <div class="grid-1-2-col-1">
+            <slot />
+        </div>
+        <div class="grid-1-2-col-2">
+            <slot name="right" />
+        </div>
+    </div>
+    <div class="common-section card-separator u-flex u-main-end">
+        <slot name="actions" />
+    </div>
+</Card>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 2407a4d88..b1ecf9f35 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,6 +1,7 @@
 export { default as Modal } from './modal.svelte';
 export { default as Pagination } from './pagination.svelte';
 export { default as Card } from './card.svelte';
+export { default as CardGrid } from './cardGrid.svelte';
 export { default as Tile } from './tile.svelte';
 export { default as Tiles } from './tiles.svelte';
 export { default as Back } from './back.svelte';
@@ -20,3 +21,4 @@ export { default as Avatar } from './avatar.svelte';
 export { default as SwitchBox } from './switchBox.svelte';
 export { default as SwitchBoxes } from './switchBoxes.svelte';
 export { default as Alert } from './alert.svelte';
+export { default as Box } from './box.svelte';
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index eda6d80cc..c5bfe4a3d 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -55,7 +55,7 @@
                 <slot />
             </div>
             <div class="modal-footer">
-                <div class="u-flex u-main-space-end u-gap-12">
+                <div class="u-flex u-main-end u-gap-12">
                     <slot name="footer" />
                 </div>
             </div>
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index 593ffca9c..0cba42edd 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -38,8 +38,8 @@
                 bind:value={name} />
         </FormList>
         <svelte:fragment slot="footer">
-            <Button submit>Create</Button>
             <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+            <Button submit>Create</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/[project]/users/security.svelte b/src/routes/console/[project]/users/security.svelte
index 5238b0f72..029dfd003 100644
--- a/src/routes/console/[project]/users/security.svelte
+++ b/src/routes/console/[project]/users/security.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Pill } from '$lib/elements/';
     import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -11,7 +11,6 @@
     let isLimited = $project.authLimit === 0 ? 'unlimited' : 'limited';
     let newLimit = $project.authLimit === 0 ? 100 : $project.authLimit;
     let btnActive = false;
-    let first = true;
 
     let options = [
         { label: 'years', value: 'years' },
@@ -21,8 +20,10 @@
 
     $: {
         if (isLimited) {
-            if (first) {
-                first = false;
+            if (isLimited === 'unlimited' && $project.authLimit === 0) {
+                btnActive = false;
+            } else if (isLimited === 'limited' && $project.authLimit === newLimit) {
+                btnActive = false;
             } else {
                 btnActive = true;
             }
@@ -52,7 +53,7 @@
     }
     async function updateSessionLength() {
         try {
-            //Some SDK call
+            //TODO: implement correct SDK call
 
             addNotification({
                 type: 'success',
@@ -68,18 +69,14 @@
 </script>
 
 <Container>
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
-            <div class="u-flex u-main-space-between u-gap-12 common-section">
-                <div>
-                    <h2 class="heading-level-6">Users Limit</h2>
-                    <p>
-                        This limits new users from signing up for your project, regardless of
-                        authentication method. You can still create users from your Appwrite
-                        console.
-                    </p>
-                </div>
-            </div>
+    <CardGrid>
+        <h2 class="heading-level-6">Users Limit</h2>
+        <p>
+            This limits new users from signing up for your project, regardless of authentication
+            method. You can still create users from your Appwrite console.
+        </p>
+
+        <svelte:fragment slot="right">
             <ul class="u-flex u-gap-12">
                 <li>
                     <div class="input-text-wrapper">
@@ -112,38 +109,44 @@
                         bind:value={newLimit} />
                 </li>
             </ul>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
             <Button
                 disabled={!btnActive}
                 on:click={() => {
                     updateLimit();
                 }}>Update</Button>
-        </div>
-    </Card>
+        </svelte:fragment>
+    </CardGrid>
 
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
-            <div class="u-flex u-main-space-between u-gap-12 common-section">
-                <div>
-                    <h2 class="heading-level-6">Session Length</h2>
-                    <p>
-                        If you reduce the limit, users who are currently logged in will be logged
-                        out of the application.
-                    </p>
-                </div>
-            </div>
-            <ul class="u-flex u-gap-12">
-                <InputNumber id="length" label="Length" value={1} />
-                <InputSelect id="period" {options} label="Time Period" value={options[0].value} />
-            </ul>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
+    <CardGrid>
+        <h2 class="heading-level-6">Session Length</h2>
+        <p>
+            If you reduce the limit, users who are currently logged in will be logged out of the
+            application.
+        </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>
+            </form>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
             <Button
                 disabled={true}
                 on:click={() => {
                     updateSessionLength();
                 }}>Update</Button>
-        </div>
-    </Card>
+        </svelte:fragment>
+    </CardGrid>
 </Container>
diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/users/teams/[team]/index.svelte
index e938b1e9c..8a9183563 100644
--- a/src/routes/console/[project]/users/teams/[team]/index.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Card, Avatar } from '$lib/components';
+    import { Card, Avatar, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, Helper } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -45,25 +45,29 @@
 {#if $team.response}
     <Container>
         <Card>
-            <div class="u-flex u-main-space-between u-gap-12 common-section">
-                <div class="user-profile-button">
-                    <Avatar
-                        size={40}
-                        name={$team.response.name}
-                        src={getAvatar($team.response.name)} />
-                    <span class="user-profile-info">
-                        <h6 class="heading-level-7">{$team.response.name}</h6>
-                        <span class="title">{$team.response.total} Members</span>
-                    </span>
+            <div class="common-section grid-1-2">
+                <div class="grid-1-2-col-1">
+                    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
+                        <Avatar
+                            size={64}
+                            name={$team.response.name}
+                            src={getAvatar($team.response.name)} />
+                        <div>
+                            <h6 class="heading-level-7">{$team.response.name}</h6>
+                            <p>{$team.response.total} Members</p>
+                        </div>
+                    </div>
                 </div>
-                <div>
+                <div class="grid-1-2-col-2">
                     <p>Created on {toLocaleDate($team.response.dateCreated)}</p>
                 </div>
             </div>
         </Card>
-        <Card>
-            <div class="u-flex u-main-space-between u-gap-12 common-section">
-                <h6 class="heading-level-7">Update Name</h6>
+
+        <CardGrid>
+            <h6 class="heading-level-7">Update Name</h6>
+
+            <svelte:fragment slot="right">
                 <ul>
                     <InputText
                         id="name"
@@ -75,42 +79,45 @@
                         <Helper type={errorType}>{errorMessage}</Helper>
                     {/if}
                 </ul>
-            </div>
-            <div class="u-flex u-main-space-end common-section">
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
                 <Button
                     disabled={!teamName}
                     on:click={() => {
                         updateName();
                     }}>Update</Button>
-            </div>
-        </Card>
+            </svelte:fragment>
+        </CardGrid>
 
-        <Card>
-            <div class="u-flex u-main-space-between u-gap-12 common-section">
-                <div>
-                    <h6 class="heading-level-7">Danger Zone</h6>
-                    <p>
-                        The team will be permanently deleted, including all data associated with
-                        this team. This action is irreversible.
-                    </p>
-                </div>
-                <div>
-                    <div class="user-profile-button">
+        <CardGrid>
+            <div>
+                <h6 class="heading-level-7">Danger Zone</h6>
+            </div>
+
+            <p>
+                The team will be permanently deleted, including all data associated with this team.
+                This action is irreversible.
+            </p>
+            <svelte:fragment slot="right">
+                <Box>
+                    <svelte:fragment slot="image">
                         <Avatar
                             size={64}
                             name={$team.response.name}
                             src={getAvatar($team.response.name)} />
-                        <span class="user-profile-info">
-                            <h6 class="heading-level-7">{$team.response.name}</h6>
-                            <span class="title">{$team.response.total} Members</span>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div class="u-flex u-main-space-end common-section">
+                    </svelte:fragment>
+                    <svelte:fragment slot="title">
+                        <h6 class="u-bold">{$team.response.name}</h6>
+                        <span>{$team.response.total} Members</span>
+                    </svelte:fragment>
+                </Box>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
                 <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-            </div>
-        </Card>
+            </svelte:fragment>
+        </CardGrid>
     </Container>
     <DeleteTeam team={$team.response} bind:showDelete />
 {/if}
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index bb61dedae..095df403c 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { toLocaleDate } from '$lib/helpers/date';
-    import { Avatar, Card } from '$lib/components';
+    import { Avatar, CardGrid, Box } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button, InputText, InputEmail, InputPassword, Helper } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -168,14 +168,12 @@
     }
 </script>
 
-<Container>
-    <Card>
-        <div class="u-flex  u-gap-12 common-section">
-            <div class="user-profile-button">
+{#if $user.response}
+    <Container>
+        <CardGrid>
+            <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
                 <Avatar size={64} name={$user.response.name} src={getAvatar($user.response.name)} />
-                <span class="user-profile-info">
-                    <h6 class="heading-level-7">{$user.response.name}</h6>
-                </span>
+                <h6 class="heading-level-7">{$user.response.name}</h6>
                 {#if !$user.response.status}
                     <Pill danger>Blocked</Pill>
                 {:else}
@@ -183,177 +181,188 @@
                         >{$user.response.emailVerification ? 'Verified' : 'Unverified'}</Pill>
                 {/if}
             </div>
-            <div>
-                <span class="title">{$user.response.email}</span>
-                <p>Joined: {toLocaleDate($user.response.registration)}</p>
-            </div>
-        </div>
-        <div class="u-flex u-main-space-end u-gap-12 common-section">
-            <Button
-                text={$user.response.status}
-                secondary={!$user.response.status}
-                on:click={() => updateStatus()}
-                >{$user.response.status ? 'Block Account' : 'Unblock Accout'}</Button>
-            {#if $user.response.status}
-                <Button secondary on:click={() => updateVerification()}
-                    >{$user.response.emailVerification ? 'Unverify' : 'Verify'} Account</Button>
-            {/if}
-        </div>
-    </Card>
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
+            <svelte:fragment slot="right">
+                <div>
+                    <span class="title">{$user.response.email}</span>
+                    <p>Joined: {toLocaleDate($user.response.registration)}</p>
+                </div>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    text={$user.response.status}
+                    secondary={!$user.response.status}
+                    on:click={() => updateStatus()}
+                    >{$user.response.status ? 'Block Account' : 'Unblock Accout'}</Button>
+                {#if $user.response.status}
+                    <Button secondary on:click={() => updateVerification()}
+                        >{$user.response.emailVerification ? 'Unverify' : 'Verify'} Account</Button>
+                {/if}
+            </svelte:fragment>
+        </CardGrid>
+        <CardGrid>
             <h6 class="heading-level-7">Update Name</h6>
-            <ul>
-                <InputText
-                    id="name"
-                    label="Name"
-                    placeholder={$user.response.name}
-                    autocomplete={false}
-                    bind:value={userName} />
-                {#if showError === 'name'}
-                    <Helper type={errorType}>{errorMessage}</Helper>
-                {/if}
-            </ul>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
-            <Button
-                disabled={!userName}
-                on:click={() => {
-                    updateName();
-                }}>Update</Button>
-        </div>
-    </Card>
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
+
+            <svelte:fragment slot="right">
+                <ul>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder={$user.response.name}
+                        autocomplete={false}
+                        bind:value={userName} />
+                    {#if showError === 'name'}
+                        <Helper type={errorType}>{errorMessage}</Helper>
+                    {/if}
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={!userName}
+                    on:click={() => {
+                        updateName();
+                    }}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+        <CardGrid>
             <h6 class="heading-level-7">Update Email</h6>
-            <ul>
-                <InputEmail
-                    id="email"
-                    label="Email"
-                    placeholder={$user.response.email}
-                    autocomplete={false}
-                    bind:value={userEmail} />
-                {#if showError === 'email'}
-                    <Helper type={errorType}>{errorMessage}</Helper>
-                {/if}
-            </ul>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
-            <Button
-                disabled={!userEmail}
-                on:click={() => {
-                    updateEmail();
-                }}>Update</Button>
-        </div>
-    </Card>
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
+            <svelte:fragment slot="right">
+                <ul>
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder={$user.response.email}
+                        autocomplete={false}
+                        bind:value={userEmail} />
+                    {#if showError === 'email'}
+                        <Helper type={errorType}>{errorMessage}</Helper>
+                    {/if}
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={!userEmail}
+                    on:click={() => {
+                        updateEmail();
+                    }}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+        <CardGrid>
             <div>
                 <h6 class="heading-level-7">Update Password</h6>
-                <p>
-                    Enter a new password. A password must contain <b> at least 8 characters.</b>
-                </p>
             </div>
 
-            <ul>
-                <InputPassword
-                    id="newPassword"
-                    label="New Password"
-                    placeholder="Enter new password"
-                    autocomplete={false}
-                    meter={false}
-                    bind:value={newPassword} />
-                {#if showError === 'password'}
-                    <Helper type={errorType}>{errorMessage}</Helper>
-                {/if}
-            </ul>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
-            <Button
-                disabled={!newPassword}
-                on:click={() => {
-                    updatePassword();
-                }}>Update</Button>
-        </div>
-    </Card>
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
-            <div>
-                <h6 class="heading-level-7">User Preferences</h6>
-                <p>
-                    You can update your user preferences by storing information on the user's
-                    objects so they can easily be shared across devices and sessions.
-                </p>
-            </div>
-            <div>
-                {#if prefs}
-                    {#each prefs as [key, value]}
-                        <ul class="u-flex u-gap-12">
-                            <InputText id={`key-${key}`} label="Key" bind:value={key} />
-                            <InputText id={`value-${value}`} label="Value" bind:value />
-                            <Button text on:click={() => deletePref(key)}>
-                                <span class="icon-x" aria-hidden="true" />
-                            </Button>
-                        </ul>
-                    {/each}
-                    {#if prefs.length === 0 || newPref}
-                        <ul class="u-flex u-gap-12">
-                            <InputText
-                                id="key"
-                                label="Key"
-                                placeholder="Enter Key"
-                                bind:value={newKey} />
-                            <InputText
-                                id="value"
-                                label="Value"
-                                placeholder="Enter Value"
-                                bind:value={newValue} />
-                            <Button
-                                text
-                                disabled={!prefs.length}
-                                on:click={() => (newPref = false)}>
-                                <span class="icon-x" aria-hidden="true" />
-                            </Button>
-                        </ul>
+            <p>
+                Enter a new password. A password must contain <b> at least 8 characters.</b>
+            </p>
+            <svelte:fragment slot="right">
+                <ul>
+                    <InputPassword
+                        id="newPassword"
+                        label="New Password"
+                        placeholder="Enter new password"
+                        autocomplete={false}
+                        meter={false}
+                        bind:value={newPassword} />
+                    {#if showError === 'password'}
+                        <Helper type={errorType}>{errorMessage}</Helper>
                     {/if}
-                {/if}
+                </ul>
+            </svelte:fragment>
 
-                <Button text on:click={() => (newPref = true)}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text"> Add Preferences </span></Button>
-            </div>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
-            <Button disabled={arePrefsDisabled} on:click={() => updatePrefs()}>Update</Button>
-        </div>
-    </Card>
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={!newPassword}
+                    on:click={() => {
+                        updatePassword();
+                    }}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+        <CardGrid>
+            <h6 class="heading-level-7">User Preferences</h6>
+            <p>
+                You can update your user preferences by storing information on the user's objects so
+                they can easily be shared across devices and sessions.
+            </p>
+            <svelte:fragment slot="right">
+                <form class="form u-grid u-gap-16">
+                    <ul class="form-list">
+                        {#if prefs}
+                            {#each prefs as [key, value]}
+                                <li class="form-item is-multiple">
+                                    <InputText id={`key-${key}`} label="Key" bind:value={key} />
+                                    <InputText id={`value-${value}`} label="Value" bind:value />
+                                    <div class="form-item-part u-cross-child-end">
+                                        <Button text on:click={() => deletePref(key)}>
+                                            <span class="icon-x" aria-hidden="true" />
+                                        </Button>
+                                    </div>
+                                </li>
+                            {/each}
+                            {#if prefs.length === 0 || newPref}
+                                <li class="form-item is-multiple">
+                                    <InputText
+                                        id="key"
+                                        label="Key"
+                                        placeholder="Enter Key"
+                                        bind:value={newKey} />
+                                    <InputText
+                                        id="value"
+                                        label="Value"
+                                        placeholder="Enter Value"
+                                        bind:value={newValue} />
+                                    <div class="form-item-part u-cross-child-end">
+                                        <Button
+                                            text
+                                            disabled={!prefs.length}
+                                            on:click={() => (newPref = false)}>
+                                            <span class="icon-x" aria-hidden="true" />
+                                        </Button>
+                                    </div>
+                                </li>
+                            {/if}
+                        {/if}
+                    </ul>
+                    <Button text on:click={() => (newPref = true)}>
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="text"> Add Preferences </span></Button>
+                </form>
+            </svelte:fragment>
 
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
+            <svelte:fragment slot="actions">
+                <Button disabled={arePrefsDisabled} on:click={() => updatePrefs()}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+
+        <CardGrid>
             <div>
                 <h6 class="heading-level-7">Danger Zone</h6>
-                <p>
-                    The user will be permanently deleted, including all data associated with this
-                    user. This action is irreversible.
-                </p>
             </div>
-            <div>
-                <div class="user-profile-button">
-                    <Avatar
-                        size={64}
-                        name={$user.response.name}
-                        src={getAvatar($user.response.name)} />
-                    <span class="user-profile-info">
-                        <h6 class="heading-level-7">{$user.response.name}</h6>
-                        <span class="title">{$user.response.email}</span>
-                    </span>
-                </div>
-            </div>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
-            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-        </div>
-    </Card>
-</Container>
+            <p>
+                The user will be permanently deleted, including all data associated with this user.
+                This action is irreversible.
+            </p>
+            <svelte:fragment slot="right">
+                <Box>
+                    <svelte:fragment slot="image">
+                        <Avatar
+                            size={64}
+                            name={$user.response.name}
+                            src={getAvatar($user.response.name)} />
+                    </svelte:fragment>
+                    <svelte:fragment slot="title">
+                        <h6 class="u-bold">{$user.response.name}</h6>
+                    </svelte:fragment>
+                    <p>{$user.response.email}</p>
+                </Box>
+            </svelte:fragment>
 
+            <svelte:fragment slot="actions">
+                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Container>
+{/if}
 <DeleteUser bind:showDelete />
diff --git a/src/routes/console/[project]/users/user/[user]/memberships.svelte b/src/routes/console/[project]/users/user/[user]/memberships.svelte
index 69d9e7b34..fa0d1f5d7 100644
--- a/src/routes/console/[project]/users/user/[user]/memberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/memberships.svelte
@@ -37,7 +37,7 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
-            <div class="u-flex u-main-space-end  common-section">
+            <div class="u-flex u-main-end  common-section">
                 <Button secondary on:click={() => (showDeleteAll = true)}>
                     <span class="text">Delete All</span>
                 </Button>
diff --git a/src/routes/console/[project]/users/user/[user]/sessions.svelte b/src/routes/console/[project]/users/user/[user]/sessions.svelte
index a697f312a..e0e4ad4dd 100644
--- a/src/routes/console/[project]/users/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/sessions.svelte
@@ -33,7 +33,7 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
-            <div class="u-flex u-main-space-end  common-section">
+            <div class="u-flex u-main-end  common-section">
                 <Button secondary on:click={() => (showDeleteAll = true)}>
                     <span class="icon-plus" aria-hidden="true" />
                     <span class="text">Delete All</span>