diff --git a/src/routes/console/project-[project]/authentication/_appleOAuth.svelte b/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
index 2b1dc4926..181236ece 100644
--- a/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
@@ -12,23 +12,37 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
+    import { onMount } from 'svelte';
 
     export let showModal = false;
     export let provider: Provider;
 
-    let { keyID, teamID, p8 } = JSON.parse(provider.secret);
+    let id: string = null;
+    let active = false;
+    let keyID: string = null;
+    let teamID: string = null;
+    let p8: string = null;
+
+    onMount(() => {
+        id ??= provider.id;
+        active ??= provider.active;
+        if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
+    });
+
     let error: string;
 
     const projectId = $page.params.project;
     const update = async () => {
         try {
-            const secret = JSON.stringify({ keyID, teamID, p8 });
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                provider.id,
+                id,
                 secret
             );
+            provider.active = active;
+            provider.id = id;
+            provider.secret = secret;
             showModal = false;
             addNotification({
                 type: 'success',
@@ -40,9 +54,11 @@
             error = message;
         }
     };
+
+    $: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
 </script>
 
-<Form on:submit={update}>
+<Form noMargin on:submit={update}>
     <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
@@ -53,16 +69,13 @@
                     visit the docs.
                 </a>
             </p>
-            <InputSwitch
-                id="state"
-                bind:value={provider.active}
-                label={provider.active ? 'Enabled' : 'Disabled'} />
+            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
             <InputText
                 id="bundleID"
                 label="Bundle ID"
                 autofocus={true}
                 placeholder="com.company.appname"
-                bind:value={provider.id} />
+                bind:value={id} />
             <InputText id="keyID" label="Key ID" placeholder="SHAB13ROFN" bind:value={keyID} />
             <InputText id="teamID" label="Team ID" placeholder="ELA2CD3AED" bind:value={teamID} />
             <InputTextarea id="p8" label="P8 File" placeholder="" bind:value={p8} />
@@ -79,7 +92,12 @@
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button submit>Update</Button>
+            <Button
+                disabled={(secret === provider.secret &&
+                    active === provider.active &&
+                    id === provider.id) ||
+                    !(id && keyID && teamID && p8)}
+                submit>Update</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte b/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
index 869907614..8a07aed3c 100644
--- a/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
@@ -12,23 +12,35 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
+    import { onMount } from 'svelte';
 
     export let showModal = false;
     export let provider: Provider;
 
-    let { clientSecret, auth0Domain } = JSON.parse(provider.secret);
+    let id: string = null;
+    let active = false;
+    let clientSecret: string = null;
+    let auth0Domain: string = null;
     let error: string;
 
+    onMount(() => {
+        id ??= provider.id;
+        active ??= provider.active;
+        if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
+    });
+
     const projectId = $page.params.project;
     const update = async () => {
         try {
-            const secret = JSON.stringify({ clientSecret, auth0Domain });
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                provider.id,
+                id,
                 secret
             );
+            provider.active = active;
+            provider.id = id;
+            provider.secret = secret;
             showModal = false;
             addNotification({
                 type: 'success',
@@ -40,9 +52,14 @@
             error = message;
         }
     };
+
+    $: secret =
+        clientSecret && auth0Domain
+            ? JSON.stringify({ clientSecret, auth0Domain })
+            : provider.secret;
 </script>
 
-<Form on:submit={update}>
+<Form noMargin on:submit={update}>
     <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
@@ -52,20 +69,18 @@
                 <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
                     >visit the docs.</a>
             </p>
-            <InputSwitch
-                id="state"
-                bind:value={provider.active}
-                label={provider.active ? 'Enabled' : 'Disabled'} />
+            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
             <InputText
                 id="clientID"
                 label="Client ID"
                 autofocus={true}
                 placeholder="Enter ID"
-                bind:value={provider.id} />
+                bind:value={id} />
             <InputPassword
                 id="secret"
                 label="Client Secret"
                 placeholder="Enter Client Secret"
+                minlength={0}
                 showPasswordButton
                 bind:value={clientSecret} />
             <InputText
@@ -86,7 +101,12 @@
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button submit>Update</Button>
+            <Button
+                disabled={(secret === provider.secret &&
+                    active === provider.active &&
+                    id === provider.id) ||
+                    !(id && clientSecret && auth0Domain)}
+                submit>Update</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/project-[project]/authentication/_mainOAuth.svelte b/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
index cf0495456..5c6074b32 100644
--- a/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
@@ -12,12 +12,22 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
+    import { onMount } from 'svelte';
 
     export let showModal = false;
     export let provider: Provider;
 
     const projectId = $page.params.project;
 
+    let active = false;
+    let id: string = null;
+    let secret: string = null;
+
+    onMount(() => {
+        active ??= provider.active;
+        id ??= provider.id;
+        secret ??= provider.secret;
+    });
     let error: string;
 
     const update = async () => {
@@ -25,9 +35,12 @@
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                provider.id,
-                provider.secret
+                id,
+                secret
             );
+            provider.active = active;
+            provider.id = id;
+            provider.secret = secret;
             showModal = false;
             addNotification({
                 type: 'success',
@@ -41,7 +54,7 @@
     };
 </script>
 
-<Form on:submit={update}>
+<Form noMargin on:submit={update}>
     <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
@@ -51,22 +64,20 @@
                 <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
                     >visit the docs.</a>
             </p>
-            <InputSwitch
-                id="state"
-                bind:value={provider.active}
-                label={provider.active ? 'Enabled' : 'Disabled'} />
+            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
             <InputText
                 id="appID"
                 label="App ID"
                 autofocus={true}
                 placeholder="Enter ID"
-                bind:value={provider.id} />
+                bind:value={id} />
             <InputPassword
                 id="secret"
                 label="App Secret"
                 placeholder="Enter App Secret"
+                minlength={0}
                 showPasswordButton
-                bind:value={provider.secret} />
+                bind:value={secret} />
             <Alert type="info">
                 To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
             </Alert>
@@ -80,7 +91,13 @@
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button submit>Update</Button>
+            <Button
+                disabled={!id ||
+                    !secret ||
+                    (id === provider.id &&
+                        secret === provider.secret &&
+                        active === provider.active)}
+                submit>Update</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte b/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
index a954704bc..695453153 100644
--- a/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
@@ -12,24 +12,36 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
+    import { onMount } from 'svelte';
 
     export let showModal = false;
     export let provider: Provider;
 
-    let { clientSecret, tenantID } = JSON.parse(provider.secret);
+    let id: string = null;
+    let active = false;
+    let clientSecret: string = null;
+    let tenantID: string = null;
     let error: string;
 
+    onMount(() => {
+        id ??= provider.id;
+        active ??= provider.active;
+        if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
+    });
+
     const projectId = $page.params.project;
 
     const update = async () => {
         try {
-            const secret = JSON.stringify({ clientSecret, tenantID });
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                provider.id,
+                id,
                 secret
             );
+            provider.active = active;
+            provider.id = id;
+            provider.secret = secret;
 
             showModal = false;
             addNotification({
@@ -42,9 +54,12 @@
             error = message;
         }
     };
+
+    $: secret =
+        clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
 </script>
 
-<Form on:submit={update}>
+<Form noMargin on:submit={update}>
     <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
@@ -55,21 +70,19 @@
                     visit the docs.
                 </a>
             </p>
-            <InputSwitch
-                id="state"
-                bind:value={provider.active}
-                label={provider.active ? 'Enabled' : 'Disabled'} />
+            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
             <InputText
                 id="appID"
                 label="Application (client) ID"
                 autofocus={true}
                 placeholder="Enter ID"
-                bind:value={provider.id} />
+                bind:value={id} />
             <InputPassword
                 id="secret"
                 label="Client Secret"
                 placeholder="Enter Client Secret"
                 showPasswordButton
+                minlength={0}
                 bind:value={clientSecret} />
             <InputText
                 id="tenant"
@@ -89,7 +102,12 @@
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button submit>Update</Button>
+            <Button
+                disabled={(secret === provider.secret &&
+                    active === provider.active &&
+                    id === provider.id) ||
+                    !(id && clientSecret && tenantID)}
+                submit>Update</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte b/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
index 2fabc91d1..01ec179b7 100644
--- a/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
@@ -12,24 +12,39 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
+    import { onMount } from 'svelte';
 
     export let showModal = false;
     export let provider: Provider;
 
-    let { clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret);
+    let id: string = null;
+    let active = false;
+    let clientSecret: string = null;
+    let oktaDomain: string = null;
+    let authorizationServerId: string = null;
+
+    onMount(() => {
+        id ??= provider.id;
+        active ??= provider.active;
+        if (provider.secret)
+            ({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
+    });
+
     let error: string;
 
     const projectId = $page.params.project;
 
     const update = async () => {
         try {
-            const secret = JSON.stringify({ clientSecret, oktaDomain, authorizationServerId });
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                provider.id,
+                id,
                 secret
             );
+            provider.active = active;
+            provider.id = id;
+            provider.secret = secret;
             showModal = false;
             addNotification({
                 type: 'success',
@@ -41,9 +56,14 @@
             error = message;
         }
     };
+
+    $: secret =
+        clientSecret && oktaDomain && authorizationServerId
+            ? JSON.stringify({ clientSecret, oktaDomain, authorizationServerId })
+            : provider.secret;
 </script>
 
-<Form on:submit={update}>
+<Form noMargin on:submit={update}>
     <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
@@ -53,20 +73,18 @@
                 <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
                     >visit the docs.</a>
             </p>
-            <InputSwitch
-                id="state"
-                bind:value={provider.active}
-                label={provider.active ? 'Enabled' : 'Disabled'} />
+            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
             <InputText
                 id="appID"
                 label="Client ID"
                 autofocus={true}
                 placeholder="Enter ID"
-                bind:value={provider.id} />
+                bind:value={id} />
             <InputPassword
                 id="secret"
                 label="Client Secret"
                 placeholder="Enter Client Secret"
+                minlength={0}
                 showPasswordButton
                 bind:value={clientSecret} />
             <InputText
@@ -93,7 +111,12 @@
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button submit>Update</Button>
+            <Button
+                disabled={(secret === provider.secret &&
+                    active === provider.active &&
+                    id === provider.id) ||
+                    !(id && clientSecret && oktaDomain && authorizationServerId)}
+                submit>Update</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/project-[project]/authentication/settings/+page.svelte b/src/routes/console/project-[project]/authentication/settings/+page.svelte
index 1ea1a9bad..be9a2b270 100644
--- a/src/routes/console/project-[project]/authentication/settings/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/settings/+page.svelte
@@ -70,6 +70,7 @@
             <ul class="grid-box common-section">
                 {#each $OAuthProviders.providers as provider}
                     <button
+                        class="card u-flex u-flex-vertical u-cross-center"
                         on:click={() => {
                             selectedProvider = provider;
                             showModal = true;
@@ -81,8 +82,7 @@
                             parameters: {
                                 provider: provider.name
                             }
-                        }}
-                        class="card u-flex u-flex-vertical u-cross-center">
+                        }}>
                         <div class="image-item">
                             <img
                                 height="20"
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index 3673ee03d..dda659047 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -65,7 +65,14 @@
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
-            <p>Create your first Database to get started</p>
+            <div class="u-text-center">
+                <p class="text u-line-height-1-5">Create your first Database to get started</p>
+                <p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
+            </div>
+            <div class="u-flex u-gap-12">
+                <Button external href="#/" text>Documentation</Button>
+                <Button secondary>Create Database</Button>
+            </div>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index a02da7912..a493d8fee 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -78,7 +78,14 @@
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
-            <p>Create your first collection to get started</p>
+            <div class="u-text-center">
+                <p class="text u-line-height-1-5">Create your first collection to get started</p>
+                <p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
+            </div>
+            <div class="u-flex u-gap-12 ">
+                <Button external href="#/" text>Documentation</Button>
+                <Button secondary>Create Collection</Button>
+            </div>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte
index 5451ca12c..edc4e9473 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte
@@ -49,6 +49,10 @@
         xdefault = selectedAttribute.default;
     }
 
+    $: if (required) {
+        xdefault = null;
+    }
+
     //TODO: refactor to use context module instead of submitted
 </script>
 
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/createAttribute.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/createAttribute.svelte
index 778b9d300..47fe506d1 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/createAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/createAttribute.svelte
@@ -19,6 +19,12 @@
     $: if (selectedOption) {
         $option = options.find((option) => option.name === selectedOption);
     }
+
+    $: if (!showCreate) {
+        key = null;
+        selectedOption = null;
+        submitted = false;
+    }
 </script>
 
 <Form on:submit={() => (submitted = true)}>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte
index 29a46d15f..1db971cfc 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte
@@ -51,6 +51,10 @@
         ({ required, array } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
+
+    $: if (required) {
+        xdefault = null;
+    }
 </script>
 
 <InputText
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/enum.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/enum.svelte
index ee9b9ad09..3a33b38d8 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/enum.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/enum.svelte
@@ -58,6 +58,9 @@
         ({ required, array, elements } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
+    $: if (required) {
+        xdefault = null;
+    }
 </script>
 
 <InputTags
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/float.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/float.svelte
index a13197eae..389dec445 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/float.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/float.svelte
@@ -55,6 +55,10 @@
         ({ required, array, min, max } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
+
+    $: if (required) {
+        xdefault = null;
+    }
 </script>
 
 <InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/integer.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/integer.svelte
index 8981e8f7e..41429ac93 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/integer.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/integer.svelte
@@ -55,6 +55,9 @@
         ({ required, array, min, max } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
+    $: if (required) {
+        xdefault = null;
+    }
 </script>
 
 <InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/ip.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/ip.svelte
index 7d169ef5d..f40f1d8fa 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/ip.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/ip.svelte
@@ -51,6 +51,9 @@
         ({ required, array } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
+    $: if (required) {
+        xdefault = null;
+    }
 </script>
 
 <InputText
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/string.svelte
index 4bf1e046a..b69dc22b9 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/string.svelte
@@ -53,6 +53,9 @@
         ({ required, array, size } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
+    $: if (required) {
+        xdefault = null;
+    }
 </script>
 
 <InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/url.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/url.svelte
index 449799f0f..23e57028b 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/url.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/url.svelte
@@ -51,6 +51,9 @@
         ({ required, array } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
+    $: if (required) {
+        xdefault = null;
+    }
 </script>
 
 <InputText
diff --git a/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
index 25742f18c..44b42c23b 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
@@ -8,6 +8,7 @@
     import { database } from '../store';
     import Delete from '../_delete.svelte';
     import { onMount } from 'svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
 
     const databaseId = $page.params.database;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
@@ -54,8 +55,8 @@
                     </div>
                 </div>
                 <div class="grid-1-2-col-2">
-                    <p>Created: TO IMPLEMENT</p>
-                    <p>Last Updated: TO IMPLEMENT</p>
+                    <p>Created: {toLocaleDateTime($database.$createdAt)}</p>
+                    <p>Last Updated: {toLocaleDateTime($database.$updatedAt)}</p>
                 </div>
             </div>
         </Card>
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index fec56c60b..9df27dda3 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -95,7 +95,14 @@
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
-            <p>Add your first bucket to get started</p>
+            <div class="u-text-center">
+                <p class="text u-line-height-1-5">Create your first bucket to get started</p>
+                <p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
+            </div>
+            <div class="u-flex u-gap-12">
+                <Button external href="#/" text>Documentation</Button>
+                <Button secondary>Create bucket</Button>
+            </div>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
index f381bafa7..13cdc5284 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
@@ -197,7 +197,14 @@
         </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
-            <p>Upload some files to get started</p>
+            <div class="u-text-center">
+                <p class="text u-line-height-1-5">Upload some files to get started</p>
+                <p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
+            </div>
+            <div class="u-flex u-gap-12 ">
+                <Button external href="#/" text>Documentation</Button>
+                <Button secondary>Add file</Button>
+            </div>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
index dc0be399b..2a5b9b0aa 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
@@ -85,7 +85,7 @@
                         <div class="u-grid u-gap-16">
                             <p>Drag and drop files here to upload</p>
                             <div>
-                                <Button secondary on:click={input.click}>
+                                <Button secondary on:click={() => input.click()}>
                                     <span class="icon-upload" aria-hidden="true" />
                                     <span class="text">Choose File</span>
                                 </Button>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
index 1b5488f96..14767ef91 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
@@ -257,8 +257,8 @@
                     will be ignored.
                 </p>
                 <svelte:fragment slot="aside">
-                    <ul class="u-flex u-gap-12 common-section">
-                        <li>
+                    <ul class="checkboxes-list">
+                        <li class="checkboxes-item">
                             <label class="label">
                                 <input
                                     type="radio"
@@ -269,7 +269,7 @@
                                 <span>Bucket Level</span>
                             </label>
                         </li>
-                        <li>
+                        <li class="checkboxes-item">
                             <label class="label">
                                 <input
                                     type="radio"
@@ -295,8 +295,8 @@
             <CardGrid>
                 <h2 class="heading-level-7">Update Security Settings</h2>
                 <p>
-                    Enable or disable security services for the bucket including <b> Ecryption</b>
-                    and <b> Antivirus scanning.</b>
+                    Enable or disable security services for the bucket including <b>Ecryption</b>
+                    and <b>Antivirus scanning.</b>
                 </p>
                 <svelte:fragment slot="aside">
                     <ul class="form-list">