diff --git a/src/frontend/components/ErrorDataTable.tsx b/src/frontend/components/ErrorDataTable.tsx
index 69b80b3..21b8e98 100644
--- a/src/frontend/components/ErrorDataTable.tsx
+++ b/src/frontend/components/ErrorDataTable.tsx
@@ -8,7 +8,6 @@ import {
   Group,
   Loader,
   Paper,
-  ScrollArea,
   SimpleGrid,
   Stack,
   Table,
@@ -74,7 +73,7 @@ export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTablePro
 
   return (
     <>
-      <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
+      <Paper withBorder radius="2xl" className="glass" style={{ overflowX: 'auto' }}>
         <Box p="lg" style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
           <Group justify="space-between">
             <Group gap="sm">
@@ -101,15 +100,15 @@ export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTablePro
           </Group>
         </Box>
 
-        <ScrollArea>
+        <Table.ScrollContainer minWidth={520}>
           <Table verticalSpacing="sm" highlightOnHover className="data-table">
             <Table.Thead>
               <Table.Tr>
                 <Table.Th px="lg">Error Description</Table.Th>
-                <Table.Th>Reporter</Table.Th>
-                <Table.Th>Version</Table.Th>
-                <Table.Th>Reported</Table.Th>
-                <Table.Th pr="lg">Status</Table.Th>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Reporter</Table.Th>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Version</Table.Th>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Reported</Table.Th>
+                <Table.Th pr="lg" style={{ whiteSpace: 'nowrap' }}>Status</Table.Th>
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
@@ -149,8 +148,8 @@ export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTablePro
                       v{error.affectedVersion || 'N/A'}
                     </Badge>
                   </Table.Td>
-                  <Table.Td>
-                    <Group gap={4}>
+                  <Table.Td style={{ whiteSpace: 'nowrap' }}>
+                    <Group gap={4} wrap="nowrap">
                       <TbHistory size={12} color="gray" />
                       <Text size="xs" c="dimmed">
                         {dayjs(error.createdAt).format('D MMM YYYY, HH:mm')}
@@ -170,7 +169,7 @@ export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTablePro
               ))}
             </Table.Tbody>
           </Table>
-        </ScrollArea>
+        </Table.ScrollContainer>
       </Paper>
 
       <Drawer
diff --git a/src/frontend/routes/apps.$appId.errors.tsx b/src/frontend/routes/apps.$appId.errors.tsx
index ee22865..30f66d1 100644
--- a/src/frontend/routes/apps.$appId.errors.tsx
+++ b/src/frontend/routes/apps.$appId.errors.tsx
@@ -463,27 +463,29 @@ function AppErrorsPage() {
                 }}
               >
                 <Accordion.Control>
-                  <Group wrap="nowrap">
+                  <Group wrap="nowrap" style={{ minWidth: 0 }}>
                     <ThemeIcon
                       color={STATUS_COLOR[bug.status] ?? 'gray'}
                       variant="light"
                       size="lg"
                       radius="md"
+                      style={{ flexShrink: 0 }}
                     >
                       <TbAlertTriangle size={20} />
                     </ThemeIcon>
-                    <Box style={{ flex: 1 }}>
-                      <Group justify="space-between">
-                        <Text size="sm" fw={600} lineClamp={1}>{bug.description}</Text>
+                    <Box style={{ flex: 1, minWidth: 0 }}>
+                      <Group wrap="nowrap" gap="xs">
+                        <Text size="sm" fw={600} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>{bug.description}</Text>
                         <Badge
                           color={STATUS_COLOR[bug.status] ?? 'gray'}
                           variant="dot"
                           size="sm"
+                          style={{ flexShrink: 0 }}
                         >
                           {STATUS_LABEL[bug.status] ?? bug.status}
                         </Badge>
                       </Group>
-                      <Text size="xs" c="dimmed">
+                      <Text size="xs" c="dimmed" lineClamp={1}>
                         {dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
                       </Text>
                     </Box>
diff --git a/src/frontend/routes/apps.$appId.villages.$villageId.tsx b/src/frontend/routes/apps.$appId.villages.$villageId.tsx
index 1fb5aa5..f50a798 100644
--- a/src/frontend/routes/apps.$appId.villages.$villageId.tsx
+++ b/src/frontend/routes/apps.$appId.villages.$villageId.tsx
@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Card,
+  Grid,
   Group,
   Loader,
   Modal,
@@ -218,34 +219,36 @@ function RecentVillageLogs({ villageId }: { villageId: string }) {
       ) : logs.length === 0 ? (
         <Text size="sm" c="dimmed" ta="center" py="md">No recent activity.</Text>
       ) : (
-        <Table verticalSpacing="xs" className="data-table">
-          <Table.Thead>
-            <Table.Tr>
-              <Table.Th>Time</Table.Th>
-              <Table.Th>User</Table.Th>
-              <Table.Th>Action</Table.Th>
-              <Table.Th>Description</Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-            {logs.map((log: any, i: number) => (
-              <Table.Tr key={i}>
-                <Table.Td>
-                  <Text size="xs">{dayjs(log.timestamp).format('D MMM YYYY, HH:mm')}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="sm" fw={500}>{log.userName || 'Unknown'}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="xs">{log.action || '-'}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="xs" c="dimmed" lineClamp={1}>{log.desc || '-'}</Text>
-                </Table.Td>
+        <Table.ScrollContainer minWidth={380}>
+          <Table verticalSpacing="xs" className="data-table">
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Time</Table.Th>
+                <Table.Th>User</Table.Th>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Action</Table.Th>
+                <Table.Th>Description</Table.Th>
               </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
+            </Table.Thead>
+            <Table.Tbody>
+              {logs.map((log: any, i: number) => (
+                <Table.Tr key={i}>
+                  <Table.Td style={{ whiteSpace: 'nowrap' }}>
+                    <Text size="xs">{dayjs(log.timestamp).format('D MMM YYYY, HH:mm')}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="sm" fw={500}>{log.userName || 'Unknown'}</Text>
+                  </Table.Td>
+                  <Table.Td style={{ whiteSpace: 'nowrap' }}>
+                    <Text size="xs">{log.action || '-'}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="xs" c="dimmed">{log.desc || '-'}</Text>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
       )}
     </Paper>
   )
@@ -561,47 +564,42 @@ function VillageDetailPage() {
       <ActivityChart villageId={villageId} />
 
       {/* ── Recent Logs + System Info ── */}
-      <Box
-        style={{
-          display: 'grid',
-          gridTemplateColumns: '2fr 1fr',
-          gap: '1rem',
-          alignItems: 'start',
-        }}
-      >
-        <Box style={{ minWidth: 0 }}>
+      <Grid gutter="md" align="flex-start">
+        <Grid.Col span={{ base: 12, md: 8 }}>
           <RecentVillageLogs villageId={villageId} />
-        </Box>
+        </Grid.Col>
 
-        <Paper withBorder radius="xl" p="lg">
-          <Group gap="xs" mb="md">
-            <ThemeIcon size={28} radius="md" variant="light" color="teal">
-              <TbCalendar size={14} />
-            </ThemeIcon>
-            <Text fw={700} size="sm">System Information</Text>
-          </Group>
-          <Stack gap={0}>
-            {[
-              { label: 'Date Created', value: village.createdAt },
-              { label: 'Created By', value: '-' },
-              { label: 'Last Updated', value: village.updatedAt },
-            ].map((item, idx, arr) => (
-              <Group
-                key={item.label}
-                justify="space-between"
-                py="xs"
-                wrap="wrap"
-                style={{
-                  borderBottom: idx < arr.length - 1 ? '1px solid var(--mantine-color-default-border)' : 'none',
-                }}
-              >
-                <Text size="xs" c="dimmed">{item.label}</Text>
-                <Text size="xs" fw={600} ta="right">{item.value}</Text>
-              </Group>
-            ))}
-          </Stack>
-        </Paper>
-      </Box>
+        <Grid.Col span={{ base: 12, md: 4 }}>
+          <Paper withBorder radius="xl" p="lg">
+            <Group gap="xs" mb="md">
+              <ThemeIcon size={28} radius="md" variant="light" color="teal">
+                <TbCalendar size={14} />
+              </ThemeIcon>
+              <Text fw={700} size="sm">System Information</Text>
+            </Group>
+            <Stack gap={0}>
+              {[
+                { label: 'Date Created', value: village.createdAt },
+                { label: 'Created By', value: '-' },
+                { label: 'Last Updated', value: village.updatedAt },
+              ].map((item, idx, arr) => (
+                <Group
+                  key={item.label}
+                  justify="space-between"
+                  py="xs"
+                  wrap="wrap"
+                  style={{
+                    borderBottom: idx < arr.length - 1 ? '1px solid var(--mantine-color-default-border)' : 'none',
+                  }}
+                >
+                  <Text size="xs" c="dimmed">{item.label}</Text>
+                  <Text size="xs" fw={600} ta="right">{item.value}</Text>
+                </Group>
+              ))}
+            </Stack>
+          </Paper>
+        </Grid.Col>
+      </Grid>
 
       {/* ── Confirmation Modal ── */}
       <Modal