src/frontend/components/ErrorDataTable.tsx

@@ -149,8 +149,7 @@ export function ErrorDataTable() {
           </Group>
         }
         styles={{
-          header: { padding: '24px', borderBottom: '1px solid rgba(255,255,255,0.1)' },
-          content: { background: 'rgba(15, 23, 42, 0.95)', backdropFilter: 'blur(12px)' }
+          header: { padding: '24px', borderBottom: '1px solid var(--mantine-color-default-border)' },
         }}
       >
         {selectedError && (
@@ -175,11 +174,9 @@ export function ErrorDataTable() {
 
             <Box>
               <Text size="xs" fw={700} c="dimmed" mb="sm">STACK TRACE</Text>
-              <Paper p="md" radius="md" bg="dark.8" style={{ border: '1px solid rgba(255,255,255,0.1)' }}>
-                <Code block color="red" bg="transparent" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
-                  {selectedError.stackTrace}
-                </Code>
-              </Paper>
+              <Code block color="red" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, border: '1px solid var(--mantine-color-default-border)' }}>
+                {selectedError.stackTrace}
+              </Code>
             </Box>
 
             <Group justify="flex-end" mt="xl">

src/frontend/components/SummaryCard.tsx

@@ -16,6 +16,8 @@ interface SummaryCardProps {
       label: string
   }
   isError?: boolean
+  onClick?: () => void
+  children?: React.ReactNode
 }
 
 export function SummaryCard({ 
@@ -25,7 +27,9 @@ export function SummaryCard({
     color = 'brand-blue', 
     trend, 
     progress,
-    isError 
+    isError,
+    onClick,
+    children
 }: SummaryCardProps) {
   const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
 
@@ -35,6 +39,8 @@ export function SummaryCard({
       padding="xl"
       radius="2xl"
       className="glass"
+      onClick={onClick}
+      style={{ cursor: onClick ? 'pointer' : 'default' }}
       styles={(theme) => ({
         root: {
           backgroundColor: isError && Number(value) > 0 
@@ -95,6 +101,8 @@ export function SummaryCard({
           />
         </Box>
       )}
+
+      {children}
     </Card>
   )
 }

src/frontend/routes/apps.$appId.errors.tsx

@@ -106,7 +106,7 @@ function AppErrorsPage() {
             <Accordion.Item 
               key={error.id} 
               value={error.id.toString()} 
-              style={{ border: '1px solid rgba(255,255,255,0.05)', background: 'rgba(255,255,255,0.02)', marginBottom: '12px' }}
+              style={{ border: '1px solid var(--mantine-color-default-border)', background: 'var(--mantine-color-default)', marginBottom: '12px' }}
             >
               <Accordion.Control>
                 <Group wrap="nowrap">
@@ -153,11 +153,9 @@ function AppErrorsPage() {
 
                   <Box>
                     <Text size="xs" fw={700} c="dimmed" mb={4}>STACK TRACE</Text>
-                    <Paper p="sm" radius="md" bg="dark.8" style={{ border: '1px solid rgba(255,255,255,0.1)' }}>
-                      <Code block color="red" bg="transparent" style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: '11px' }}>
-                        {error.stackTrace}
-                      </Code>
-                    </Paper>
+                    <Code block color="red" style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: '11px', border: '1px solid var(--mantine-color-default-border)' }}>
+                      {error.stackTrace}
+                    </Code>
                   </Box>
 
                   <Group justify="flex-end" pt="sm">

src/frontend/routes/apps.$appId.index.tsx

@@ -7,9 +7,16 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  Title
+  Title,
+  Modal,
+  Button,
+  TextInput,
+  Switch,
+  Badge,
+  Textarea
 } from '@mantine/core'
-import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useDisclosure } from '@mantine/hooks'
+import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
 import {
   TbActivity,
   TbAlertTriangle,
@@ -24,10 +31,28 @@ export const Route = createFileRoute('/apps/$appId/')({
 
 function AppOverviewPage() {
   const { appId } = useParams({ from: '/apps/$appId/' })
+  const navigate = useNavigate()
   const isDesaPlus = appId === 'desa-plus'
+  const [versionModalOpened, { open: openVersionModal, close: closeVersionModal }] = useDisclosure(false)
 
   return (
-    <Stack gap="xl">
+    <>
+      <Modal opened={versionModalOpened} onClose={closeVersionModal} title="Update Version Information" radius="md">
+        <Stack gap="md">
+          <TextInput label="Active Version" defaultValue="v1.2.0" />
+          <TextInput label="Minimum Version" defaultValue="v1.0.0" />
+          <Textarea 
+            label="Update Message" 
+            placeholder="Enter release notes or update message..." 
+            minRows={3}
+            autosize
+          />
+          <Switch label="Maintenance Mode" description="Enable to put the app in maintenance mode for users." />
+          <Button fullWidth onClick={closeVersionModal}>Save Changes</Button>
+        </Stack>
+      </Modal>
+
+      <Stack gap="xl">
       {/* 🔝 HEADER SECTION */}
       {/* <Paper withBorder p="lg" radius="2xl" className="glass"> */}
       <Group justify="space-between">
@@ -67,7 +92,19 @@ function AppOverviewPage() {
           value="v1.2.0"
           icon={TbVersions}
           color="brand-blue"
-        />
+          onClick={openVersionModal}
+        >
+          <Group justify="space-between" mt="md">
+            <Stack gap={0}>
+              <Text size="xs" c="dimmed">Min. Version</Text>
+              <Text size="sm" fw={600}>v1.0.0</Text>
+            </Stack>
+            <Stack gap={0} align="flex-end">
+              <Text size="xs" c="dimmed">Maintenance</Text>
+              <Badge size="sm" color="gray" variant="light">False</Badge>
+            </Stack>
+          </Group>
+        </SummaryCard>
         <SummaryCard
           title="Total Activity Today"
           value="3,842"
@@ -80,7 +117,13 @@ function AppOverviewPage() {
           value="138"
           icon={TbBuildingCommunity}
           color="indigo"
-        />
+          onClick={() => navigate({ to: `/apps/${appId}/villages` })}
+        >
+          <Group justify="space-between" mt="md">
+            <Text size="xs" c="dimmed">Nonactive Villages</Text>
+            <Badge size="sm" color="red" variant="light">24</Badge>
+          </Group>
+        </SummaryCard>
         <SummaryCard
           title="Errors Today"
           value="12"
@@ -100,5 +143,6 @@ function AppOverviewPage() {
       {/* 🐞 4. LATEST ERROR REPORTS */}
       <ErrorDataTable />
     </Stack>
+    </>
   )
 }

src/frontend/routes/apps.$appId.products.tsx

@@ -53,7 +53,7 @@ function ProductsPage() {
         {mockProducts.map((product) => (
           <Card key={product.id} withBorder radius="2xl" p="md" className="glass h-full">
             <Card.Section>
-              <Box h={160} style={{ background: 'rgba(255,255,255,0.03)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Box h={160} style={{ background: 'var(--mantine-color-default-hover)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                 <ThemeIcon variant="light" size={60} radius="xl" color="brand-blue">
                   <TbArchive size={34} />
                 </ThemeIcon>
@@ -90,7 +90,7 @@ function ProductsPage() {
                 />
               </Box>
 
-              <Group justify="flex-end" mt="md" pt="sm" style={{ borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+              <Group justify="flex-end" mt="md" pt="sm" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
                 <Tooltip label="Edit Product">
                   <ActionIcon variant="light" size="sm" color="blue">
                     <TbPencil size={14} />

src/index.css

@@ -1,5 +1,5 @@
 @import '@mantine/core/styles.css';
-
+@import '@mantine/charts/styles.css';
 :root {
   --font-inter: 'Inter', system-ui, -apple-system, sans-serif;