diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/users/teams/[team]/index.svelte
index e938b1e9c..36d979be5 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,31 @@
 {#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">
+
+        <CardGrid>
+            <svelte:fragment slot="left">
                 <h6 class="heading-level-7">Update Name</h6>
+            </svelte:fragment>
+
+            <svelte:fragment slot="right">
                 <ul>
                     <InputText
                         id="name"
@@ -75,42 +81,47 @@
                         <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">
+        <CardGrid>
+            <svelte:fragment slot="left">
                 <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">
+
+                <p>
+                    The team will be permanently deleted, including all data associated with this
+                    team. This action is irreversible.
+                </p>
+            </svelte:fragment>
+            <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..ff3d78f6f 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';
@@ -169,13 +169,11 @@
 </script>
 
 <Container>
-    <Card>
-        <div class="u-flex  u-gap-12 common-section">
-            <div class="user-profile-button">
+    <CardGrid>
+        <svelte:fragment slot="left">
+            <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,12 +181,15 @@
                         >{$user.response.emailVerification ? 'Verified' : 'Unverified'}</Pill>
                 {/if}
             </div>
+        </svelte:fragment>
+        <svelte:fragment slot="right">
             <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">
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
             <Button
                 text={$user.response.status}
                 secondary={!$user.response.status}
@@ -198,11 +199,14 @@
                 <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>
+    </CardGrid>
+    <CardGrid>
+        <svelte:fragment slot="left">
             <h6 class="heading-level-7">Update Name</h6>
+        </svelte:fragment>
+
+        <svelte:fragment slot="right">
             <ul>
                 <InputText
                     id="name"
@@ -214,18 +218,21 @@
                     <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={!userName}
                 on:click={() => {
                     updateName();
                 }}>Update</Button>
-        </div>
-    </Card>
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
+        </svelte:fragment>
+    </CardGrid>
+    <CardGrid>
+        <svelte:fragment slot="left">
             <h6 class="heading-level-7">Update Email</h6>
+        </svelte:fragment>
+        <svelte:fragment slot="right">
             <ul>
                 <InputEmail
                     id="email"
@@ -237,24 +244,27 @@
                     <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={!userEmail}
                 on:click={() => {
                     updateEmail();
                 }}>Update</Button>
-        </div>
-    </Card>
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
+        </svelte:fragment>
+    </CardGrid>
+    <CardGrid>
+        <svelte:fragment slot="left">
             <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>
 
+            <p>
+                Enter a new password. A password must contain <b> at least 8 characters.</b>
+            </p>
+        </svelte:fragment>
+        <svelte:fragment slot="right">
             <ul>
                 <InputPassword
                     id="newPassword"
@@ -267,93 +277,103 @@
                     <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={!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>
+        </svelte:fragment>
+    </CardGrid>
+    <CardGrid>
+        <svelte:fragment slot="left">
+            <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>
+        <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}
-                {/if}
-
+                </ul>
                 <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>
+            </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>
+        <svelte:fragment slot="left">
             <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">
+            <p>
+                The user will be permanently deleted, including all data associated with this user.
+                This action is irreversible.
+            </p>
+        </svelte:fragment>
+        <svelte:fragment slot="right">
+            <Box>
+                <svelte:fragment slot="image">
                     <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">
+                </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>
-        </div>
-    </Card>
+        </svelte:fragment>
+    </CardGrid>
 </Container>
 
 <DeleteUser bind:showDelete />