diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index 921f54b28..526121d46 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -9,7 +9,7 @@
     const dispatch = createEventDispatcher();
 </script>
 
-<section class={`alert is-${type} common-section`}>
+<section class={`alert is-${type} `}>
     <div class="alert-grid">
         {#if dismissible}
             <button
diff --git a/src/lib/components/cardDrop.svelte b/src/lib/components/cardDrop.svelte
new file mode 100644
index 000000000..7ce00a63b
--- /dev/null
+++ b/src/lib/components/cardDrop.svelte
@@ -0,0 +1,26 @@
+<script>
+    import { Card } from '$lib/components';
+    export let show = false;
+</script>
+
+{#if show}
+    <Card>
+        <header class="modal-header">
+            <h4 class="modal-title"><slot name="header" /></h4>
+            <button
+                type="button"
+                class="x-button"
+                aria-label="Close"
+                title="Close"
+                on:click={() => (show = false)}>
+                <span class="icon-x" aria-hidden="true" />
+            </button>
+        </header>
+        <div class="modal-content">
+            <slot />
+        </div>
+        <div class="modal-footer">
+            <slot name="footer" />
+        </div>
+    </Card>
+{/if}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 01de65cfb..928a68fe5 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -2,6 +2,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 CardDrop } from './cardDrop.svelte';
 export { default as Tile } from './tile.svelte';
 export { default as Tiles } from './tiles.svelte';
 export { default as Back } from './back.svelte';
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index e4b02785a..7843b7c91 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -3,7 +3,8 @@
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
 
     export let show = false;
-
+    export let size: 'small' | 'big' = null;
+    export let warning = false;
     let browser = false;
     //TODO: explore other solutions compatible with testing library
     onMount(() => {
@@ -51,9 +52,18 @@
 
 {#if show}
     <div class="modal-curtain" data-curtain on:click={handleBLur} transition:fade={transitionFade}>
-        <section class="modal" transition:fly={transitionFly}>
+        <section
+            class:is-small={size === 'small'}
+            class:is-big={size === 'big'}
+            class="modal"
+            transition:fly={transitionFly}>
             <header class="modal-header">
-                <h4 class="modal-title">
+                {#if warning}
+                    <div class="avatar is-color-orange is-medium">
+                        <span class="icon-exclamation" aria-hidden="true" />
+                    </div>
+                {/if}
+                <h4 class="heading-level-5">
                     <slot name="header" />
                 </h4>
                 <button
diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 06c560898..6633be014 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index 9294b1af7..115e2f3b6 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index 0cba42edd..5356238cd 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
+    import { Modal, CardDrop } from '$lib/components';
+    import { Pill } from '$lib/elements';
     import { InputText, Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -9,11 +10,12 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string;
+    let name: string, id: string;
+    let showDropdown = false;
 
     const create = async () => {
         try {
-            const team = await sdkForProject.teams.create('unique()', name);
+            const team = await sdkForProject.teams.create(id ? id : 'unique()', name);
             name = '';
             showCreate = false;
             dispatch('created', team);
@@ -27,7 +29,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText
@@ -36,6 +38,33 @@
                 placeholder="John Doe"
                 autofocus={true}
                 bind:value={name} />
+            {#if !showDropdown}
+                <div>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}
+                        >Team ID <i class="icon-pencil" /></Pill>
+                </div>
+            {:else}
+                <CardDrop bind:show={showDropdown}>
+                    <svelte:fragment slot="header">Team ID</svelte:fragment>
+                    <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
+                    <svelte:fragment slot="footer">
+                        <input
+                            class="input-text "
+                            type="text"
+                            name="id"
+                            id="id"
+                            placeholder="Enter ID"
+                            bind:value={id} />
+                        <div class="u-flex u-gap-12">
+                            <div class="icon-info u-block" />
+                            <p class="u-small">
+                                Allowed characters: alphanumeric, hyphen, non-leading underscore,
+                                period
+                            </p>
+                        </div>
+                    </svelte:fragment>
+                </CardDrop>
+            {/if}
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 1079de97e..314ba30b9 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
+    import { Modal, CardDrop } from '$lib/components';
     import { Pill } from '$lib/elements/';
     import {
         Button,
@@ -17,7 +17,7 @@
 
     const dispatch = createEventDispatcher();
 
-    let idModal = false;
+    let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
 
     const create = async () => {
@@ -36,7 +36,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText
@@ -58,15 +58,32 @@
                 required={true}
                 bind:value={pass} />
 
-            <div>
-                <Pill button on:click={() => (idModal = !idModal)}
-                    >User ID <i class="icon-pencil" /></Pill>
-            </div>
-            {#if idModal}
-                <div class="common-section">
-                    <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
-                    <InputText id="id" label="" placeholder="" bind:value={id} />
+            {#if !showDropdown}
+                <div>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}
+                        >User ID <i class="icon-pencil" /></Pill>
                 </div>
+            {:else}
+                <CardDrop bind:show={showDropdown}>
+                    <svelte:fragment slot="header">User ID</svelte:fragment>
+                    <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
+                    <svelte:fragment slot="footer">
+                        <input
+                            class="input-text "
+                            type="text"
+                            name="id"
+                            id="id"
+                            placeholder="Enter ID"
+                            bind:value={id} />
+                        <div class="u-flex u-gap-12">
+                            <div class="icon-info u-block" />
+                            <p class="u-small">
+                                Allowed characters: alphanumeric, hyphen, non-leading underscore,
+                                period
+                            </p>
+                        </div>
+                    </svelte:fragment>
+                </CardDrop>
             {/if}
         </FormList>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index c0b4b7b93..7f93434ce 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/users/_microsoftOAuth.svelte
index 10a549edf..64e3721b0 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index 2f842f6c1..883691244 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMember.svelte b/src/routes/console/[project]/users/teams/[team]/_createMember.svelte
index 278315321..c0cac2ecb 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMember.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_createMember.svelte
@@ -42,7 +42,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal warning={true} bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputEmail
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
index 5f30ba58e..9af6db795 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
@@ -35,8 +35,8 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete member</svelte:fragment>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Member</svelte:fragment>
 
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
index b8dd33a9e..7cf7911da 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
@@ -26,8 +26,8 @@
 </script>
 
 <Form on:submit={deleteTeam}>
-    <Modal bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete member</svelte:fragment>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Team</svelte:fragment>
 
         <p>
             Are you sure you want to delete <b>{team.name}</b>?
diff --git a/src/routes/console/[project]/users/teams/[team]/activity.svelte b/src/routes/console/[project]/users/teams/[team]/activity.svelte
index 5badf1ec1..35b9b8fb0 100644
--- a/src/routes/console/[project]/users/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/activity.svelte
@@ -37,23 +37,25 @@
                     {#each response.logs as log}
                         <TableRow>
                             <TableCellText title="Client">
-                                <div class="image-item">
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                        alt={log.clientName} />
-                                </div>
-                                <span class="">
-                                    <p>
-                                        {log.clientName}
-                                        {log.clientVersion}
-                                    </p>
-                                    <span class="u-small">
-                                        on {log.osName}
-                                        {log.osVersion}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="image-item">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <span class="u-line-height-1-5">
+                                        <p>
+                                            {log.clientName}
+                                            {log.clientVersion}
+                                        </p>
+                                        <span class="u-small">
+                                            on {log.osName}
+                                            {log.osVersion}
+                                        </span>
                                     </span>
-                                </span>
+                                </div>
                             </TableCellText>
                             <TableCellText title="Event">{log.event}</TableCellText>
 
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
index 0c1b62c41..929d17e45 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
@@ -27,8 +27,8 @@
 </script>
 
 <Form on:submit={deleteAllMemberships}>
-    <Modal bind:show={showDeleteAll}>
-        <svelte:fragment slot="header">Delete all memberships</svelte:fragment>
+    <Modal warning={true} bind:show={showDeleteAll}>
+        <svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
 
         <p>
             Are you sure you want to delete <b>{$user.response.name}'s</b> all memberships?
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
index 02e9bc301..f3ff70117 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteAllSessions}>
-    <Modal bind:show={showDeleteAll}>
+    <Modal warning={true} bind:show={showDeleteAll}>
         <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
index 2666bf0c6..cc1ef893f 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
@@ -35,8 +35,8 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete member</svelte:fragment>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Member</svelte:fragment>
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
         </p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte b/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
index 9da04c77e..ee2ca5781 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteSession}>
-    <Modal bind:show={showDelete}>
+    <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
 
         <p>Are you sure you want to delete this session?</p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
index 8631721f4..bc177b861 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
@@ -26,8 +26,8 @@
 </script>
 
 <Form on:submit={deleteUser}>
-    <Modal bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete user</svelte:fragment>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete User</svelte:fragment>
         <p>Are you sure you want to delete <b>{$user.response.name}</b> from '{$project.name}'?</p>
         <svelte:fragment slot="footer">
             <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/console/[project]/users/user/[user]/activity.svelte b/src/routes/console/[project]/users/user/[user]/activity.svelte
index df75127bc..2acd80987 100644
--- a/src/routes/console/[project]/users/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/users/user/[user]/activity.svelte
@@ -37,19 +37,25 @@
                     {#each response.logs as log}
                         <TableRow>
                             <TableCellText title="Client">
-                                <div class="image-item">
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                        alt={log.clientName} />
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="image-item">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <span class="u-line-height-1-5">
+                                        <p>
+                                            {log.clientName}
+                                            {log.clientVersion}
+                                        </p>
+                                        <span class="u-small">
+                                            on {log.osName}
+                                            {log.osVersion}
+                                        </span>
+                                    </span>
                                 </div>
-                                <p>
-                                    {log.clientName}
-                                    {log.clientVersion}
-                                </p>
-                                on {log.osName}
-                                {log.osVersion}
                             </TableCellText>
                             <TableCellText title="Event">{log.event}</TableCellText>
 
diff --git a/src/routes/console/[project]/users/user/[user]/sessions.svelte b/src/routes/console/[project]/users/user/[user]/sessions.svelte
index f5c0a2612..313e2a87e 100644
--- a/src/routes/console/[project]/users/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/sessions.svelte
@@ -50,21 +50,20 @@
                     {#each response.sessions as session}
                         <TableRow>
                             <TableCellText title="Client">
-                                <div class="image-item">
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={`/icons/color/${session?.clientName.toLocaleLowerCase()}.svg`}
-                                        alt={session.clientName} />
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="image-item">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={`/icons/color/${session?.clientName.toLocaleLowerCase()}.svg`}
+                                            alt={session.clientName} />
+                                    </div>
+                                    <span class="u-line-height-1-5">
+                                        <p>{session.clientName}</p>
+                                        <span class="u-small">
+                                            Last activity: {toLocaleDateTime(session?.expire)}
+                                        </span></span>
                                 </div>
-                                <span>
-                                    <p>
-                                        {session.clientName}
-                                    </p>
-                                    <span class="u-small">
-                                        Last activity: {toLocaleDateTime(session?.expire)}
-                                    </span>
-                                </span>
                             </TableCellText>
 
                             <TableCellText title="IP">{session.ip}</TableCellText>