diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 2ed1f0670..f0cf489bf 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -61,5 +61,7 @@
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
+    {:else}
+        <slot name="helper" />
     {/if}
 </FormItem>
diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index 391abb3e7..8558f315f 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -22,3 +22,20 @@ export const toLocaleDateTime = (datetime: string | number) => {
 
     return date.toLocaleDateString('en', options);
 };
+
+export const isSameDay = (date1: Date, date2: Date) => {
+    return (
+        date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate()
+    );
+};
+
+export const isValidDate = (date: string) => {
+    return !isNaN(new Date(date).getTime());
+};
+
+export const diffDays = (date1: Date, date2: Date) => {
+    const diffTime = Math.abs(date2.getTime() - date1.getTime());
+    return Math.floor(diffTime / (1000 * 60 * 60 * 24));
+};
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index ae2389e79..3f385e20d 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -63,7 +63,7 @@
             trackEvent('submit_key_update_scopes');
             addNotification({
                 type: 'success',
-                message: 'API Key scopes has been updated'
+                message: 'API Key scopes have been updated'
             });
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte b/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
index 9fa7c7703..dab38a083 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { trackEvent } from '$lib/actions/analytics';
-    import CardGrid from '$lib/components/cardGrid.svelte';
-    import Heading from '$lib/components/heading.svelte';
+    import { Alert, CardGrid, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Form } from '$lib/elements/forms';
-    import Button from '$lib/elements/forms/button.svelte';
-    import FormList from '$lib/elements/forms/formList.svelte';
+    import { Button, Form, FormList } from '$lib/elements/forms';
+    import { diffDays } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../../../store';
@@ -37,6 +35,11 @@
             });
         }
     }
+
+    let alertsDismissed = false;
+    $: isExpiring =
+        !alertsDismissed && $key.expire && diffDays(new Date(), new Date($key.expire)) < 14;
+    $: isExpired = !alertsDismissed && $key.expire !== null && new Date($key.expire) < new Date();
 </script>
 
 <Form on:submit={updateExpire}>
@@ -44,6 +47,20 @@
         <Heading tag="h6" size="7">Update Expiration Date</Heading>
         <p class="text">Set a date after which your API Key will expire.</p>
         <svelte:fragment slot="aside">
+            {#if isExpired}
+                <Alert type="error" dismissible on:dismiss={() => (alertsDismissed = true)}>
+                    <span slot="title">Your API Key has expired</span>
+                    <p>
+                        For security reasons, we recommend you delete your expired key and create a
+                        new one.
+                    </p>
+                </Alert>
+            {:else if isExpiring}
+                <Alert type="warning" dismissible on:dismiss={() => (alertsDismissed = true)}>
+                    <span slot="title">Your API Key is about to expire</span>
+                    <p>Update the expiration date to keep the key active</p>
+                </Alert>
+            {/if}
             <FormList>
                 <ExpirationInput bind:value={expiration} />
             </FormList>
diff --git a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
index 55fca9e05..01ec1e2e8 100644
--- a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
+++ b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+    import Helper from '$lib/elements/forms/helper.svelte';
     import InputDateTime from '$lib/elements/forms/inputDateTime.svelte';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
         const date = new Date();
@@ -19,18 +21,7 @@
         return date.toISOString();
     }
 
-    export let value: string | null = null;
-    let expirationSelect = value === null ? null : 'custom';
-    let expirationCustom: string | null = value ?? null;
-
-    $: {
-        value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
-    }
-</script>
-
-<InputSelect
-    bind:value={expirationSelect}
-    options={[
+    const options = [
         {
             label: 'Never',
             value: null
@@ -55,9 +46,42 @@
             label: 'Custom Date',
             value: 'custom'
         }
-    ]}
-    id="preset"
-    label="Expiration Date" />
+    ];
+
+    export let value: string | null = null;
+
+    function initExpirationSelect() {
+        if (value === null || !isValidDate(value)) return null;
+
+        let result = 'custom';
+        for (const option of options) {
+            if (!isValidDate(option.value)) continue;
+
+            if (isSameDay(new Date(option.value), new Date(value))) {
+                result = option.value;
+                break;
+            }
+        }
+
+        return result;
+    }
+    let expirationSelect = initExpirationSelect();
+    let expirationCustom: string | null = value ?? null;
+
+    $: {
+        if (!isSameDay(new Date(expirationSelect), new Date(value))) {
+            value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
+        }
+    }
+</script>
+
+<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date">
+    <svelte:fragment slot="helper">
+        {#if expirationSelect !== 'custom' && expirationSelect !== null}
+            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
+        {/if}
+    </svelte:fragment>
+</InputSelect>
 {#if expirationSelect === 'custom'}
     <InputDateTime id="expire" label="" bind:value={expirationCustom} showLabel={false} />
 {/if}
diff --git a/src/routes/console/project-[project]/overview/keys/scopes.svelte b/src/routes/console/project-[project]/overview/keys/scopes.svelte
index 4f3b44036..ac9ae7c86 100644
--- a/src/routes/console/project-[project]/overview/keys/scopes.svelte
+++ b/src/routes/console/project-[project]/overview/keys/scopes.svelte
@@ -77,10 +77,15 @@
     }
 </script>
 
-<div class="u-flex u-cross-center u-main-end">
-    <Button text on:click={deselectAll}>Deselect all</Button>
-    <Button text on:click={selectAll}>Select all</Button>
-</div>
+<ul class="buttons-list u-main-end">
+    <li class="buttons-list-item">
+        <Button text on:click={deselectAll}>Deselect all</Button>
+    </li>
+    <li class="buttons-list-item">
+        <Button text on:click={selectAll}>Select all</Button>
+    </li>
+</ul>
+
 <Collapsible>
     {#each [Category.Auth, Category.Database, Category.Functions, Category.Storage, Category.Other] as category}
         {@const checked = categoryState(category, scopes)}
@@ -96,8 +101,11 @@
                 {category}
             </svelte:fragment>
             <svelte:fragment slot="subtitle">
-                ({allScopes.filter((n) => n.category === category && scopes.includes(n.scope))
-                    .length} Scopes)
+                {@const scopesLength = allScopes.filter(
+                    (n) => n.category === category && scopes.includes(n.scope)
+                ).length}
+                ({scopesLength}
+                {scopesLength === 1 ? 'Scope' : 'Scopes'})
             </svelte:fragment>
             <div class="form">
                 <FormList>
diff --git a/tests/unit/helpers/date.test.ts b/tests/unit/helpers/date.test.ts
index 4b67f4f3d..16b5ff3f4 100644
--- a/tests/unit/helpers/date.test.ts
+++ b/tests/unit/helpers/date.test.ts
@@ -1,5 +1,11 @@
 import '@testing-library/jest-dom';
-import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+import {
+    toLocaleDate,
+    toLocaleDateTime,
+    isSameDay,
+    isValidDate,
+    diffDays
+} from '$lib/helpers/date';
 
 describe('local date', () => {
     [
@@ -22,3 +28,52 @@ describe('local date time', () => {
         });
     });
 });
+
+describe('is same day', () => {
+    const entries: Array<[string, string, boolean]> = [
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:28', true],
+        ['2022-11-15 08:26:28', '2022-11-16 08:26:28', false],
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:29', true],
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:27', true]
+    ];
+
+    entries.forEach(([value1, value2, expected]) => {
+        it(`${value1} ${value2}`, () => {
+            expect(isSameDay(new Date(value1), new Date(value2))).toBe(expected);
+        });
+    });
+});
+
+describe('is valid date', () => {
+    const entries: Array<[string, boolean]> = [
+        ['2022-11-15 08:26:28', true],
+        ['2022-11-15 08:26:28', true],
+        ['abc', false],
+        ['2022-11-15', true],
+        ['123.123.123', false]
+    ];
+
+    entries.forEach(([value, expected]) => {
+        it(value, () => {
+            expect(isValidDate(value)).toBe(expected);
+        });
+    });
+});
+
+describe('diff days', () => {
+    const entries: Array<[string, string, number]> = [
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:28', 0],
+        ['2022-11-15 08:26:28', '2022-11-16 08:26:28', 1],
+        ['2022-11-15 08:26:28', '2022-11-16 08:26:27', 0],
+        ['2022-11-15 08:26:28', '2022-11-14 08:26:29', 0],
+        ['2022-11-15 08:26:28', '2022-11-14 08:26:27', 1],
+        ['2022-11-15 08:26:28', '2022-11-20 08:26:29', 5],
+        ['2022-11-15 08:26:28', '2022-11-20 08:26:27', 4]
+    ];
+
+    entries.forEach(([value1, value2, expected]) => {
+        it(`${value1} ${value2}`, () => {
+            expect(diffDays(new Date(value1), new Date(value2))).toBe(expected);
+        });
+    });
+});