diff --git a/src/lib/components/domains/cnameTable.svelte b/src/lib/components/domains/cnameTable.svelte
index 9569ce89ff..00a2abd766 100644
--- a/src/lib/components/domains/cnameTable.svelte
+++ b/src/lib/components/domains/cnameTable.svelte
@@ -35,29 +35,31 @@
         </Typography.Text>
     </Layout.Stack>
 
-    <Table.Root
-        columns={[
-            { id: 'type', width: { min: 150 } },
-            { id: 'name', width: { min: 80 } },
-            { id: 'value', width: { min: 100 } }
-        ]}
-        let:root>
-        <svelte:fragment slot="header" let:root>
-            <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
-            <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
-            <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
-        </svelte:fragment>
-        <Table.Row.Base {root}>
-            <Table.Cell column="type" {root}>CNAME</Table.Cell>
-            <Table.Cell column="name" {root}>{subdomain}</Table.Cell>
-            <Table.Cell column="value" {root}>
-                <InteractiveText
-                    variant="copy"
-                    isVisible
-                    text={$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME} />
-            </Table.Cell>
-        </Table.Row.Base>
-    </Table.Root>
+    <div class="responsive-table">
+        <Table.Root
+            columns={[
+                { id: 'type', width: { min: 150 } },
+                { id: 'name', width: { min: 80 } },
+                { id: 'value', width: { min: 100 } }
+            ]}
+            let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
+                <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+                <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
+            </svelte:fragment>
+            <Table.Row.Base {root}>
+                <Table.Cell column="type" {root}>CNAME</Table.Cell>
+                <Table.Cell column="name" {root}>{subdomain}</Table.Cell>
+                <Table.Cell column="value" {root}>
+                    <InteractiveText
+                        variant="copy"
+                        isVisible
+                        text={$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME} />
+                </Table.Cell>
+            </Table.Row.Base>
+        </Table.Root>
+    </div>
     <Layout.Stack gap="s" direction="row" alignItems="center">
         <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
         <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
@@ -69,3 +71,13 @@
         </Typography.Text>
     </Layout.Stack>
 </Layout.Stack>
+
+<style>
+    /* responsive table container */
+    .responsive-table {
+        overflow: hidden;
+        width: 100%;
+        scrollbar-width: thin;
+        position: relative;
+    }
+</style>
diff --git a/src/lib/components/domains/recordTable.svelte b/src/lib/components/domains/recordTable.svelte
index 6dc145e35d..7d760dbb61 100644
--- a/src/lib/components/domains/recordTable.svelte
+++ b/src/lib/components/domains/recordTable.svelte
@@ -101,40 +101,44 @@
         </Typography.Text>
     </Layout.Stack>
 
-    <Table.Root
-        columns={[
-            { id: 'type', width: { min: 150 } },
-            { id: 'name', width: { min: 80 } },
-            { id: 'value', width: { min: 100 } }
-        ]}
-        let:root>
-        <svelte:fragment slot="header" let:root>
-            <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
-            <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
-            <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
-        </svelte:fragment>
-        <Table.Row.Base {root}>
-            <Table.Cell column="type" {root}>{variant.toUpperCase()}</Table.Cell>
-            <Table.Cell column="name" {root}>{subdomain || '@'}</Table.Cell>
-            <Table.Cell column="value" {root}>
-                <InteractiveText variant="copy" isVisible text={setTarget()} />
-            </Table.Cell>
-        </Table.Row.Base>
-        {#if $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}
+    <div class="responsive-table">
+        <Table.Root
+            columns={[
+                { id: 'type', width: { min: 150 } },
+                { id: 'name', width: { min: 80 } },
+                { id: 'value', width: { min: 200 } }
+            ]}
+            let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
+                <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+                <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
+            </svelte:fragment>
+
             <Table.Row.Base {root}>
-                <Table.Cell column="type" {root}>
-                    <Layout.Stack gap="s" direction="row" alignItems="center">
-                        <span>CAA</span>
-                        <Badge variant="secondary" size="xs" content="Recommended" />
-                    </Layout.Stack>
-                </Table.Cell>
-                <Table.Cell column="name" {root}>@</Table.Cell>
+                <Table.Cell column="type" {root}>{variant.toUpperCase()}</Table.Cell>
+                <Table.Cell column="name" {root}>{subdomain || '@'}</Table.Cell>
                 <Table.Cell column="value" {root}>
-                    <InteractiveText variant="copy" isVisible text={caaText} />
+                    <InteractiveText variant="copy" isVisible text={setTarget()} />
                 </Table.Cell>
             </Table.Row.Base>
-        {/if}
-    </Table.Root>
+
+            {#if $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="type" {root}>
+                        <Layout.Stack direction="row" alignItems="center" gap="s">
+                            <span>CAA</span>
+                            <Badge variant="secondary" size="xs" content="Recommended" />
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell column="name" {root}>@</Table.Cell>
+                    <Table.Cell column="value" {root}>
+                        <InteractiveText variant="copy" isVisible text={caaText} />
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/if}
+        </Table.Root>
+    </div>
     <Layout.Stack gap="s" direction="row" alignItems="center">
         {#if variant === 'cname' && !subdomain}
             {#if isCloud}
@@ -170,3 +174,13 @@
         {/if}
     </Layout.Stack>
 </Layout.Stack>
+
+<style>
+    /* responsive table container */
+    .responsive-table {
+        overflow: hidden;
+        width: 100%;
+        scrollbar-width: thin;
+        position: relative;
+    }
+</style>
diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index c77fa34888..3995a07d84 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -49,57 +49,59 @@
     expanded={databasesScreen && !insideSideSheet}
     slotSpacing={databasesScreen && !insideSideSheet}>
     {#if logs.total}
-        <Table.Root {columns} let:root>
-            <svelte:fragment slot="header" let:root>
-                <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
-                <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
-                <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
-                <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
-                <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
-            </svelte:fragment>
-            {#each logs.logs as log}
-                <Table.Row.Base {root}>
-                    <Table.Cell column="user" {root}>
-                        <Layout.Stack direction="row" alignItems="center">
-                            {#if log.userEmail}
-                                {#if log.userName}
-                                    <AvatarInitials size="xs" name={log.userName} />
-                                    <Trim>{log.userName}</Trim>
+        <div class="responsive-table">
+            <Table.Root {columns} let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
+                    <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
+                    <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
+                    <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
+                    <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
+                </svelte:fragment>
+                {#each logs.logs as log}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="user" {root}>
+                            <Layout.Stack direction="row" alignItems="center">
+                                {#if log.userEmail}
+                                    {#if log.userName}
+                                        <AvatarInitials size="xs" name={log.userName} />
+                                        <Trim>{log.userName}</Trim>
+                                    {:else}
+                                        <AvatarInitials size="xs" name={log.userEmail} />
+                                        <Trim>{log.userEmail}</Trim>
+                                    {/if}
                                 {:else}
-                                    <AvatarInitials size="xs" name={log.userEmail} />
-                                    <Trim>{log.userEmail}</Trim>
+                                    <div class="avatar is-size-small">
+                                        <span class="icon-anonymous" aria-hidden="true"></span>
+                                    </div>
+                                    <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
                                 {/if}
-                            {:else}
-                                <div class="avatar is-size-small">
-                                    <span class="icon-anonymous" aria-hidden="true"></span>
-                                </div>
-                                <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
-                            {/if}
-                        </Layout.Stack>
-                    </Table.Cell>
+                            </Layout.Stack>
+                        </Table.Cell>
 
-                    <Table.Cell column="event" {root}>
-                        {log.event}
-                    </Table.Cell>
+                        <Table.Cell column="event" {root}>
+                            {log.event}
+                        </Table.Cell>
 
-                    <Table.Cell column="location" {root}>
-                        {#if log.countryCode !== '--'}
-                            {log.countryName}
-                        {:else}
-                            Unknown
-                        {/if}
-                    </Table.Cell>
+                        <Table.Cell column="location" {root}>
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
+                            {:else}
+                                Unknown
+                            {/if}
+                        </Table.Cell>
 
-                    <Table.Cell column="ip" {root}>
-                        <InteractiveText variant="copy" text={log.ip} isVisible />
-                    </Table.Cell>
+                        <Table.Cell column="ip" {root}>
+                            <InteractiveText variant="copy" text={log.ip} isVisible />
+                        </Table.Cell>
 
-                    <Table.Cell column="date" {root}>
-                        <DualTimeView time={log.time} showDatetime />
-                    </Table.Cell>
-                </Table.Row.Base>
-            {/each}
-        </Table.Root>
+                        <Table.Cell column="date" {root}>
+                            <DualTimeView time={log.time} showDatetime />
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+        </div>
 
         <PaginationWithLimit
             {limit}
@@ -126,3 +128,12 @@
         </Card.Base>
     {/if}
 </Container>
+
+<style>
+    .responsive-table {
+        overflow: hidden;
+        width: 100%;
+        scrollbar-width: thin;
+        position: relative;
+    }
+</style>
diff --git a/src/routes/(console)/account/sessions/+page.svelte b/src/routes/(console)/account/sessions/+page.svelte
index bbc261abc0..2eb47ec93b 100644
--- a/src/routes/(console)/account/sessions/+page.svelte
+++ b/src/routes/(console)/account/sessions/+page.svelte
@@ -95,70 +95,84 @@
         <Typography.Title>Sessions</Typography.Title>
         <Button secondary on:click={logoutAll}>Sign out all sessions</Button>
     </Layout.Stack>
-
-    <Table.Root
-        let:root
-        columns={[
-            { id: 'client', width: { min: 450 } },
-            { id: 'location', width: { min: 200 } },
-            { id: 'ip', width: { min: 330 } },
-            { id: 'actions', width: 100 }
-        ]}>
-        <svelte:fragment slot="header" let:root>
-            <Table.Header.Cell column="client" {root}>Client</Table.Header.Cell>
-            <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
-            <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
-            <Table.Header.Cell column="actions" {root} />
-        </svelte:fragment>
-        {#each data.sessions.sessions as session}
-            {@const browser = getBrowser(session.clientCode)}
-            <Table.Row.Base {root}>
-                <Table.Cell column="client" {root}>
-                    <Layout.Stack direction="row" alignItems="center">
-                        {#if session.clientName}
-                            <div class="avatar is-size-small">
-                                {#if browser}
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={getBrowser(session.clientCode).toString()}
-                                        alt={session.clientName} />
-                                {:else}
-                                    <Icon icon={IconGlobeAlt} size="s" />
-                                {/if}
+    <div class="responsive-table">
+        <Table.Root
+            let:root
+            columns={[
+                { id: 'client', width: { min: 450 } },
+                { id: 'location', width: { min: 200 } },
+                { id: 'ip', width: { min: 330 } },
+                { id: 'actions', width: 100 }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="client" {root}>Client</Table.Header.Cell>
+                <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
+                <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
+                <Table.Header.Cell column="actions" {root} />
+            </svelte:fragment>
+            {#each data.sessions.sessions as session}
+                {@const browser = getBrowser(session.clientCode)}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="client" {root}>
+                        <Layout.Stack direction="row" alignItems="center">
+                            {#if session.clientName}
+                                <div class="avatar is-size-small">
+                                    {#if browser}
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(session.clientCode).toString()}
+                                            alt={session.clientName} />
+                                    {:else}
+                                        <Icon icon={IconGlobeAlt} size="s" />
+                                    {/if}
+                                </div>
+                                <Trim>
+                                    {session.clientName}
+                                    {session.clientVersion}
+                                    on {session.osName}
+                                    {session.osVersion}
+                                </Trim>
+                            {:else}
+                                <span class="avatar is-color-empty"></span>
+                                <p class="text u-trim">Unknown</p>
+                            {/if}
+                            <div class="is-only-desktop">
+                                <Badge variant="secondary" content={session.provider} />
                             </div>
-                            <Trim>
-                                {session.clientName}
-                                {session.clientVersion}
-                                on {session.osName}
-                                {session.osVersion}
-                            </Trim>
+                            {#if session.current}
+                                <Badge
+                                    type="success"
+                                    variant="secondary"
+                                    content="current session" />
+                            {/if}
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell column="location" {root}>
+                        {#if session.countryCode !== '--'}
+                            {session.countryName}
                         {:else}
-                            <span class="avatar is-color-empty"></span>
-                            <p class="text u-trim">Unknown</p>
-                        {/if}
-                        <div class="is-only-desktop">
-                            <Badge variant="secondary" content={session.provider} />
-                        </div>
-                        {#if session.current}
-                            <Badge type="success" variant="secondary" content="current session" />
+                            Unknown
                         {/if}
-                    </Layout.Stack>
-                </Table.Cell>
-                <Table.Cell column="location" {root}>
-                    {#if session.countryCode !== '--'}
-                        {session.countryName}
-                    {:else}
-                        Unknown
-                    {/if}
-                </Table.Cell>
-                <Table.Cell column="ip" {root}>
-                    <InteractiveText variant="copy" text={session.ip} isVisible />
-                </Table.Cell>
-                <Table.Cell column="actions" {root}>
-                    <Button size="xs" secondary on:click={() => logout(session)}>Sign out</Button>
-                </Table.Cell>
-            </Table.Row.Base>
-        {/each}
-    </Table.Root>
+                    </Table.Cell>
+                    <Table.Cell column="ip" {root}>
+                        <InteractiveText variant="copy" text={session.ip} isVisible />
+                    </Table.Cell>
+                    <Table.Cell column="actions" {root}>
+                        <Button size="xs" secondary on:click={() => logout(session)}
+                            >Sign out</Button>
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
+    </div>
 </Container>
+
+<style>
+    .responsive-table {
+        overflow: hidden;
+        width: 100%;
+        scrollbar-width: thin;
+        position: relative;
+    }
+</style>