diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 004909298..435037fd6 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -23,14 +23,13 @@
         Navbar,
         Icon,
         Layout,
-        Link,
         Tooltip,
-        Card,
         ActionMenu,
         ToggleButton,
         Button,
         Avatar,
-        Typography
+        Typography,
+        Popover
     } from '@appwrite.io/pink-svelte';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
     import {
@@ -209,91 +208,79 @@
                     </Button.Button>
                     <span slot="tooltip">{isMac() ? '⌘ + K' : 'Ctrl + K'}</span></Tooltip>
             </Layout.Stack>
-            <Link.Button
-                on:click={() => {
-                    showAccountMenu = !showAccountMenu;
-                    shouldAnimateThemeToggle = false;
-                    if (showAccountMenu) {
-                        trackEvent(Click.MenuDropDownClick);
-                    }
-                }}>
-                <div style:user-select="none">
+            <Popover let:toggle let:showing>
+                <button
+                    type="button"
+                    on:click|preventDefault={(e) => {
+                        toggle(e);
+                        shouldAnimateThemeToggle = false;
+                        if (showing) {
+                            trackEvent(Click.MenuDropDownClick);
+                        }
+                    }}
+                    style:user-select="none">
                     <Avatar size="s" src={avatar} />
-                </div>
-            </Link.Button>
-            {#if showAccountMenu}
-                <div class="account-container">
-                    <Card.Base padding="xxxs" shadow={true}>
+                </button>
+                <svelte:fragment slot="tooltip" let:toggle>
+                    <ActionMenu.Root noPadding>
                         <Layout.Stack gap="xxs">
-                            <ActionMenu.Root>
-                                <Layout.Stack gap="xxs">
-                                    <div
-                                        style:padding-inline-start="10px"
-                                        style:padding-inline-end="8px"
-                                        style:padding-block="4px">
-                                        <Typography.Text variant="m-500">
-                                            {$user.email}
-                                        </Typography.Text>
-                                    </div>
-                                    <ActionMenu.Item.Anchor
-                                        trailingIcon={IconUser}
-                                        size="l"
-                                        href={`${base}/account`}>
-                                        Account</ActionMenu.Item.Anchor>
+                            <div
+                                style:padding-inline-start="10px"
+                                style:padding-inline-end="8px"
+                                style:padding-block="4px">
+                                <Typography.Text variant="m-500">
+                                    {$user.email}
+                                </Typography.Text>
+                            </div>
+                            <ActionMenu.Item.Anchor
+                                trailingIcon={IconUser}
+                                on:click={toggle}
+                                size="l"
+                                href={`${base}/account`}>
+                                Account</ActionMenu.Item.Anchor>
 
-                                    <ActionMenu.Item.Button
-                                        trailingIcon={IconLogoutRight}
-                                        size="l"
-                                        on:click={() => logout()}>Sign out</ActionMenu.Item.Button>
-                                    <div
-                                        style:padding-inline-start="10px"
-                                        style:padding-inline-end="8px">
-                                        <Layout.Stack
-                                            justifyContent="space-between"
-                                            direction="row"
-                                            alignItems="center">
-                                            <Typography.Text>Theme</Typography.Text>
-                                            <div
-                                                class:keepTransformTransition={shouldAnimateThemeToggle}>
-                                                <ToggleButton
-                                                    bind:active={activeTheme}
-                                                    on:change={() => {
-                                                        setTimeout(() => {
-                                                            shouldAnimateThemeToggle = true;
-                                                        }, 150);
-                                                    }}
-                                                    buttons={[
-                                                        {
-                                                            id: 'light',
-                                                            label: 'Light',
-                                                            icon: IconSun
-                                                        },
-                                                        {
-                                                            id: 'dark',
-                                                            label: 'Dark',
-                                                            icon: IconMoon
-                                                        },
-                                                        {
-                                                            id: 'auto',
-                                                            label: 'System',
-                                                            icon: IconMode
-                                                        }
-                                                    ]}></ToggleButton>
-                                            </div>
-                                        </Layout.Stack>
+                            <ActionMenu.Item.Button
+                                trailingIcon={IconLogoutRight}
+                                size="l"
+                                on:click={() => logout()}>Sign out</ActionMenu.Item.Button>
+                            <div style:padding-inline-start="10px" style:padding-inline-end="8px">
+                                <Layout.Stack
+                                    justifyContent="space-between"
+                                    direction="row"
+                                    alignItems="center">
+                                    <Typography.Text>Theme</Typography.Text>
+                                    <div class:keepTransformTransition={shouldAnimateThemeToggle}>
+                                        <ToggleButton
+                                            bind:active={activeTheme}
+                                            on:change={() => {
+                                                setTimeout(() => {
+                                                    shouldAnimateThemeToggle = true;
+                                                }, 150);
+                                            }}
+                                            buttons={[
+                                                {
+                                                    id: 'light',
+                                                    label: 'Light',
+                                                    icon: IconSun
+                                                },
+                                                {
+                                                    id: 'dark',
+                                                    label: 'Dark',
+                                                    icon: IconMoon
+                                                },
+                                                {
+                                                    id: 'auto',
+                                                    label: 'System',
+                                                    icon: IconMode
+                                                }
+                                            ]}></ToggleButton>
                                     </div>
                                 </Layout.Stack>
-                            </ActionMenu.Root>
+                            </div>
                         </Layout.Stack>
-                    </Card.Base>
-                </div>
-                <button
-                    class="account-backdrop"
-                    aria-label="Account menu"
-                    on:click={() => {
-                        showAccountMenu = false;
-                    }}></button>
-            {/if}
+                    </ActionMenu.Root>
+                </svelte:fragment>
+            </Popover>
         </div>
     </div>
 </Navbar.Base>
@@ -405,24 +392,6 @@
         }
     }
 
-    .account-container {
-        position: absolute;
-        right: var(--space-7);
-        top: var(--base-44);
-        width: 244px;
-        display: flex;
-        z-index: 1;
-    }
-
-    .account-backdrop {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100vw;
-        height: 100vh;
-        background-color: transparent;
-    }
-
     /* The default drop list has a max-inline width of 280px, which squeezes the support modal. */
     :global(.extended-width) {
         max-inline-size: none;
diff --git a/src/routes/(console)/organization-[organization]/createProject.svelte b/src/routes/(console)/organization-[organization]/createProject.svelte
index 2e45d77c2..5e70a1acd 100644
--- a/src/routes/(console)/organization-[organization]/createProject.svelte
+++ b/src/routes/(console)/organization-[organization]/createProject.svelte
@@ -20,7 +20,7 @@
     let error: string;
     let showCustomId = false;
     let disabled: boolean = false;
-    let name: string = 'Appwrite project';
+    let name: string = 'New project';
 
     async function create() {
         try {
diff --git a/src/routes/(console)/organization-[organization]/createProjectCloud.svelte b/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
index fa8dd9975..075f3d4c0 100644
--- a/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
+++ b/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
@@ -17,7 +17,7 @@
     export let showCreateProjectCloud: boolean;
 
     let id: string = null;
-    let name: string = 'Appwrite project';
+    let name: string = 'New project';
     let region: string = Region.Fra;
     let error: string = null;
 
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte
index 006738f20..8fde81408 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte
@@ -39,12 +39,11 @@
     let showDelete = false;
     let selectedRecord: Models.DnsRecord = null;
 
-    function formatRecordName(name: string) {
-        const limit = 30;
+    function formatName(name: string, limit: number = 30) {
         return {
-            value: name.length > limit ? `${name.slice(0, limit)}...` : name,
-            truncated: name.length > limit,
-            whole: name
+            value: name ? (name.length > limit ? `${name.slice(0, limit)}...` : name) : '-',
+            truncated: name ? name.length > limit : undefined,
+            whole: name ?? '-'
         };
     }
 </script>
@@ -65,7 +64,7 @@
                 {#each $columns as column}
                     <Table.Cell column={column.id} {root}>
                         {#if column.id === 'name'}
-                            {@const formatted = formatRecordName(record.name)}
+                            {@const formatted = formatName(record.name)}
                             <Tooltip placement="bottom" disabled={!formatted.truncated}>
                                 <Typography.Text truncate>{formatted.value}</Typography.Text>
                                 <span
@@ -99,7 +98,22 @@
                             </Typography.Text>
                         {:else if column.id === 'comment'}
                             <Typography.Text truncate>
-                                {record?.comment ?? '-'}
+                                {@const formatted = formatName(record?.comment)}
+                                <Tooltip
+                                    placement="bottom"
+                                    maxWidth="fit-content"
+                                    disabled={!formatted.truncated}>
+                                    <Typography.Text truncate>{formatted.value}</Typography.Text>
+                                    <span
+                                        slot="tooltip"
+                                        let:showing
+                                        style:white-space="pre-wrap"
+                                        style:word-break="break-all">
+                                        {#if showing}
+                                            {formatted.whole}
+                                        {/if}
+                                    </span>
+                                </Tooltip>
                             </Typography.Text>
                         {:else if column.id === '$createdAt'}
                             <DualTimeView time={record.$createdAt} />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 59460df7e..8d0aa74df 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -115,9 +115,11 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
                 projectId,
                 platform,
                 $createPlatform.name,
-                $createPlatform.key || undefined,
+                platform === PlatformType.Flutterweb ? undefined : $createPlatform.key || undefined,
                 undefined,
-                undefined
+                platform === PlatformType.Flutterweb
+                    ? $createPlatform.hostname || undefined
+                    : undefined
             );
 
             isPlatformCreated = true;
@@ -189,19 +191,35 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
                                 bind:value={$createPlatform.name} />
 
                             <!-- Tooltips on InputText don't work as of now -->
-                            <InputText
-                                id="hostname"
-                                label={hostname[platform]}
-                                placeholder={placeholder[platform].hostname}
-                                required
-                                bind:value={$createPlatform.key}>
-                                <Tooltip slot="info" maxWidth="15rem">
-                                    <Icon icon={IconInfo} size="s" />
-                                    <Typography.Caption variant="400" slot="tooltip">
-                                        {placeholder[platform].tooltip}
-                                    </Typography.Caption>
-                                </Tooltip>
-                            </InputText>
+                            {#if platform === PlatformType.Flutterweb}
+                                <InputText
+                                    id="hostname"
+                                    label={hostname[platform]}
+                                    placeholder={placeholder[platform].hostname}
+                                    required
+                                    bind:value={$createPlatform.hostname}>
+                                    <Tooltip slot="info" maxWidth="15rem">
+                                        <Icon icon={IconInfo} size="s" />
+                                        <Typography.Caption variant="400" slot="tooltip">
+                                            {placeholder[platform].tooltip}
+                                        </Typography.Caption>
+                                    </Tooltip>
+                                </InputText>
+                            {:else}
+                                <InputText
+                                    id="key"
+                                    label={hostname[platform]}
+                                    placeholder={placeholder[platform].hostname}
+                                    required
+                                    bind:value={$createPlatform.key}>
+                                    <Tooltip slot="info" maxWidth="15rem">
+                                        <Icon icon={IconInfo} size="s" />
+                                        <Typography.Caption variant="400" slot="tooltip">
+                                            {placeholder[platform].tooltip}
+                                        </Typography.Caption>
+                                    </Tooltip>
+                                </InputText>
+                            {/if}
                         </Layout.Stack>
 
                         <Button
@@ -212,7 +230,7 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
                             submissionLoader={isCreatingPlatform}
                             disabled={!platform ||
                                 !$createPlatform.name ||
-                                !$createPlatform.key ||
+                                (!$createPlatform.key && !$createPlatform.hostname) ||
                                 isCreatingPlatform}>
                             Create platform
                         </Button>