diff --git a/formulus-formplayer/src/App.tsx b/formulus-formplayer/src/App.tsx
index 052abd2fa..ecc20ad06 100644
--- a/formulus-formplayer/src/App.tsx
+++ b/formulus-formplayer/src/App.tsx
@@ -576,6 +576,13 @@ function App() {
             console.log(
               `Found ${availableDrafts.length} draft(s) for form ${receivedFormType}, showing draft selector`,
             );
+            // Apply theme from params so draft selector respects light/dark mode
+            const params = initData.params;
+            const isDarkMode = params?.darkMode === true;
+            setDarkMode(isDarkMode);
+            if (params?.themeColors && typeof params.themeColors === 'object') {
+              setCustomThemeColors(params.themeColors as CustomThemeColors);
+            }
             setPendingFormInit(initData);
             setShowDraftSelector(true);
             setIsLoading(false);
@@ -979,16 +986,19 @@ function App() {
     );
   }, [customThemeColors]);
 
-  // Show draft selector if we have pending form init and available drafts
+  // Show draft selector if we have pending form init and available drafts.
+  // Wrap in ThemeProvider so DraftSelector gets the same theme (dark mode + custom colors).
   if (showDraftSelector && pendingFormInit) {
     return (
-      <DraftSelector
-        formType={pendingFormInit.formType}
-        formVersion={(pendingFormInit.formSchema as any)?.version}
-        onResumeDraft={handleResumeDraft}
-        onStartNew={handleStartNewForm}
-        fullScreen={true}
-      />
+      <ThemeProvider theme={currentTheme}>
+        <DraftSelector
+          formType={pendingFormInit.formType}
+          formVersion={(pendingFormInit.formSchema as any)?.version}
+          onResumeDraft={handleResumeDraft}
+          onStartNew={handleStartNewForm}
+          fullScreen={true}
+        />
+      </ThemeProvider>
     );
   }
 
diff --git a/formulus-formplayer/src/components/DraftSelector.tsx b/formulus-formplayer/src/components/DraftSelector.tsx
index 5e78f93c9..8f158f547 100644
--- a/formulus-formplayer/src/components/DraftSelector.tsx
+++ b/formulus-formplayer/src/components/DraftSelector.tsx
@@ -9,9 +9,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 import {
   Box,
   Typography,
-  Card,
-  CardContent,
-  CardActions,
   IconButton,
   Dialog,
   DialogTitle,
@@ -19,14 +16,14 @@ import {
   DialogActions,
   Alert,
   Chip,
-  Grid,
   Divider,
+  useTheme,
 } from '@mui/material';
+import { alpha } from '@mui/material/styles';
 import { Button } from '@ode/components/react-web';
 import {
   Delete as DeleteIcon,
   Schedule as ClockIcon,
-  Description as FormIcon,
 } from '@mui/icons-material';
 import { draftService, DraftSummary } from '../services/DraftService';
 
@@ -45,6 +42,13 @@ interface DraftSelectorProps {
   fullScreen?: boolean;
 }
 
+// Container style required
+const CONFIRM_CARD_RADIUS = 0.7;
+const CONFIRM_INNER_RADIUS = 0.7;
+const CONFIRM_BORDER_WIDTH = 1;
+const CONFIRM_CARD_PADDING = 16;
+const CONTAINER_ALPHA = 0.4;
+
 export const DraftSelector: React.FC<DraftSelectorProps> = ({
   formType,
   formVersion,
@@ -53,6 +57,7 @@ export const DraftSelector: React.FC<DraftSelectorProps> = ({
   onClose,
   fullScreen = false,
 }) => {
+  const theme = useTheme();
   const [drafts, setDrafts] = useState<DraftSummary[]>([]);
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
   const [draftToDelete, setDraftToDelete] = useState<string | null>(null);
@@ -123,160 +128,207 @@ export const DraftSelector: React.FC<DraftSelectorProps> = ({
   };
 
   const content = (
-    <Box sx={{ p: fullScreen ? 3 : 0 }}>
-      {/* Header */}
-      <Box sx={{ mb: 3 }}>
-        <Typography variant="h5" gutterBottom>
-          Resume Draft or Start New
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          Form: {formType}
-          {formVersion && (
-            <Chip label={`v${formVersion}`} size="small" sx={{ ml: 1 }} />
-          )}
-        </Typography>
-      </Box>
-
-      {/* Cleanup message */}
-      {cleanupMessage && (
-        <Alert severity="info" sx={{ mb: 3 }}>
-          {cleanupMessage}
-        </Alert>
-      )}
-
-      {/* Drafts list */}
-      {drafts.length > 0 ? (
+    <Box
+      sx={{
+        minHeight: fullScreen ? '100dvh' : 'auto',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        px: fullScreen ? 3 : 0,
+        py: fullScreen ? 4 : 0,
+        bgcolor: 'background.default',
+        color: 'text.primary',
+      }}>
+      <Box
+        sx={{
+          width: '100%',
+          maxWidth: 420,
+          textAlign: 'center',
+        }}>
+        {/* Header – theme-aware */}
         <Box sx={{ mb: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            Available Drafts ({drafts.length})
+          <Typography variant="h5" gutterBottom color="text.primary">
+            Resume Draft or Start New
           </Typography>
-          <Grid container spacing={2}>
-            {drafts.map(draft => (
-              <Grid size={{ xs: 12 }} key={draft.id}>
-                <Card
-                  variant="outlined"
-                  sx={{
-                    position: 'relative',
-                    '&:hover': {
-                      boxShadow: 2,
-                      borderColor: 'primary.main',
-                    },
-                  }}>
-                  <CardContent sx={{ pb: 1 }}>
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        justifyContent: 'space-between',
-                      }}>
-                      <Box sx={{ flex: 1 }}>
+          <Typography variant="body2" color="text.secondary">
+            Form: {formType}
+            {formVersion && (
+              <Chip label={`v${formVersion}`} size="small" sx={{ ml: 1 }} />
+            )}
+          </Typography>
+        </Box>
+
+        {/* Cleanup message */}
+        {cleanupMessage && (
+          <Alert severity="info" sx={{ mb: 3, textAlign: 'left' }}>
+            {cleanupMessage}
+          </Alert>
+        )}
+
+        {/* Available drafts – same outer + inner container style as Missing required fields dialog */}
+        {drafts.length > 0 ? (
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              width: '100%',
+              mb: 3,
+            }}>
+            <Box
+              sx={{
+                width: '100%',
+                maxWidth: 340,
+                borderRadius: CONFIRM_CARD_RADIUS,
+                border: `${CONFIRM_BORDER_WIDTH}px solid`,
+                borderColor: 'divider',
+                padding: `${CONFIRM_CARD_PADDING}px`,
+                backgroundColor: alpha(
+                  theme.palette.background.paper,
+                  CONTAINER_ALPHA,
+                ),
+                overflow: 'hidden',
+              }}>
+              <Box
+                sx={{
+                  borderRadius: CONFIRM_INNER_RADIUS,
+                  padding: `${CONFIRM_CARD_PADDING}px`,
+                  backgroundColor: theme.palette.background.paper,
+                  overflow: 'hidden',
+                }}>
+                <Typography
+                  variant="h6"
+                  sx={{ fontWeight: 600, textAlign: 'center', mb: 1.5 }}>
+                  Available Drafts ({drafts.length})
+                </Typography>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                  {drafts.map((draft, index) => {
+                    const age = getDraftAge(draft.updatedAt);
+                    const chipColor =
+                      age === 'recent'
+                        ? 'primary'
+                        : age === 'old'
+                          ? 'warning'
+                          : 'error';
+
+                    return (
+                      <Box key={draft.id}>
+                        {index > 0 && (
+                          <Divider sx={{ my: 1.5, borderColor: 'divider' }} />
+                        )}
                         <Box
-                          sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                          <FormIcon sx={{ mr: 1, color: 'text.secondary' }} />
-                          <Typography variant="subtitle1">
+                          sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            textAlign: 'center',
+                            gap: 1,
+                          }}>
+                          <Typography variant="subtitle1" color="text.primary">
                             Draft from {formatDate(draft.updatedAt)}
                           </Typography>
                           <Chip
                             icon={<ClockIcon />}
-                            label={getDraftAge(draft.updatedAt)}
+                            label={age}
                             size="small"
-                            color={
-                              getDraftAge(draft.updatedAt) === 'recent'
-                                ? 'success'
-                                : getDraftAge(draft.updatedAt) === 'old'
-                                  ? 'warning'
-                                  : 'error'
+                            color={chipColor}
+                            sx={
+                              age === 'recent'
+                                ? {
+                                    mt: 0.5,
+                                    bgcolor: theme.palette.primary.main,
+                                    color: theme.palette.primary.contrastText,
+                                  }
+                                : { mt: 0.5 }
                             }
-                            sx={{ ml: 1 }}
                           />
-                        </Box>
 
-                        <Typography
-                          variant="body2"
-                          color="text.secondary"
-                          sx={{ mb: 1 }}>
-                          {draft.dataPreview}
-                        </Typography>
+                          <IconButton
+                            onClick={() => handleDeleteDraft(draft.id)}
+                            size="small"
+                            color="error"
+                            sx={{ mt: 0.25 }}>
+                            <DeleteIcon />
+                          </IconButton>
 
-                        <Typography variant="caption" color="text.secondary">
-                          Created: {draft.createdAt.toLocaleDateString()}{' '}
-                          {draft.createdAt.toLocaleTimeString()}
-                          {draft.observationId && (
-                            <> • Editing observation: {draft.observationId}</>
-                          )}
-                        </Typography>
+                          <Typography
+                            variant="body2"
+                            color="text.secondary"
+                            sx={{ mt: 1 }}>
+                            {draft.dataPreview}
+                          </Typography>
+
+                          <Typography variant="caption" color="text.secondary">
+                            Created: {draft.createdAt.toLocaleDateString()}{' '}
+                            {draft.createdAt.toLocaleTimeString()}
+                            {draft.observationId && (
+                              <> • Editing observation: {draft.observationId}</>
+                            )}
+                          </Typography>
+
+                          <Button
+                            variant="neutral"
+                            size="medium"
+                            onPress={() => onResumeDraft(draft.id)}>
+                            Resume Draft
+                          </Button>
+                        </Box>
                       </Box>
+                    );
+                  })}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        ) : (
+          <Box sx={{ textAlign: 'center', py: 4, mb: 3 }}>
+            <Typography variant="body1" color="text.secondary">
+              No recent drafts found for this form.
+            </Typography>
+          </Box>
+        )}
 
-                      <IconButton
-                        onClick={() => handleDeleteDraft(draft.id)}
-                        size="small"
-                        color="error"
-                        sx={{ ml: 1 }}>
-                        <DeleteIcon />
-                      </IconButton>
-                    </Box>
-                  </CardContent>
+        <Divider sx={{ my: 3 }} />
 
-                  <CardActions sx={{ pt: 0 }}>
-                    <Button
-                      variant="primary"
-                      size="medium"
-                      onPress={() => onResumeDraft(draft.id)}>
-                      Resume Draft
-                    </Button>
-                  </CardActions>
-                </Card>
-              </Grid>
-            ))}
-          </Grid>
-        </Box>
-      ) : (
-        <Box sx={{ textAlign: 'center', py: 4, mb: 3 }}>
-          <Typography variant="body1" color="text.secondary">
-            No recent drafts found for this form.
+        {/* Start new form section – theme-aware */}
+        <Box sx={{ textAlign: 'center' }}>
+          <Typography variant="h6" gutterBottom color="text.primary">
+            Start Fresh
           </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Begin a new form without any saved data.
+          </Typography>
+          <Button
+            variant="primary"
+            size="large"
+            onPress={onStartNew}
+            style={{ minWidth: 200 }}>
+            Start New Form
+          </Button>
         </Box>
-      )}
-
-      <Divider sx={{ my: 3 }} />
 
-      {/* Start new form section */}
-      <Box sx={{ textAlign: 'center' }}>
-        <Typography variant="h6" gutterBottom>
-          Start Fresh
-        </Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          Begin a new form without any saved data.
-        </Typography>
-        <Button
-          variant="secondary"
-          size="large"
-          onPress={onStartNew}
-          style={{ minWidth: 200 }}>
-          Start New Form
-        </Button>
+        {/* Delete confirmation dialog */}
+        <Dialog
+          open={deleteConfirmOpen}
+          onClose={() => setDeleteConfirmOpen(false)}>
+          <DialogTitle>Delete Draft</DialogTitle>
+          <DialogContent>
+            <Typography>
+              Are you sure you want to delete this draft? This action cannot be
+              undone.
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              variant="neutral"
+              onPress={() => setDeleteConfirmOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="danger" onPress={confirmDeleteDraft}>
+              Delete
+            </Button>
+          </DialogActions>
+        </Dialog>
       </Box>
-
-      {/* Delete confirmation dialog */}
-      <Dialog
-        open={deleteConfirmOpen}
-        onClose={() => setDeleteConfirmOpen(false)}>
-        <DialogTitle>Delete Draft</DialogTitle>
-        <DialogContent>
-          <Typography>
-            Are you sure you want to delete this draft? This action cannot be
-            undone.
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <Button variant="neutral" onPress={() => setDeleteConfirmOpen(false)}>
-            Cancel
-          </Button>
-          <Button variant="danger" onPress={confirmDeleteDraft}>
-            Delete
-          </Button>
-        </DialogActions>
-      </Dialog>
     </Box>
   );
 
@@ -290,24 +342,17 @@ export const DraftSelector: React.FC<DraftSelectorProps> = ({
           sx: {
             bgcolor: 'background.default',
             backgroundImage: 'none',
+            color: 'text.primary',
           },
         }}>
-        <DialogTitle>
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}>
-            <Typography variant="h6">Select Draft</Typography>
-            {onClose && (
-              <Button variant="secondary" onPress={onClose}>
-                Close
-              </Button>
-            )}
-          </Box>
+        <DialogTitle sx={{ textAlign: 'center' }}>
+          <Typography variant="h6" color="text.primary">
+            Select Draft
+          </Typography>
         </DialogTitle>
-        <DialogContent>{content}</DialogContent>
+        <DialogContent sx={{ bgcolor: 'background.default' }}>
+          {content}
+        </DialogContent>
       </Dialog>
     );
   }
diff --git a/formulus-formplayer/src/components/FormLayout.tsx b/formulus-formplayer/src/components/FormLayout.tsx
index 589ba8e40..067eb9c61 100644
--- a/formulus-formplayer/src/components/FormLayout.tsx
+++ b/formulus-formplayer/src/components/FormLayout.tsx
@@ -163,7 +163,7 @@ const FormLayout: React.FC<FormLayoutProps> = ({
         (previousButton || nextButton) &&
         !isKeyboardVisible && (
           <Paper
-            elevation={4}
+            elevation={0}
             sx={theme => ({
               position: 'fixed',
               bottom: 0,
@@ -181,10 +181,10 @@ const FormLayout: React.FC<FormLayoutProps> = ({
                 sm: `calc(${theme.spacing(1.5)} + env(safe-area-inset-bottom, 0px))`,
                 md: `calc(${theme.spacing(1.5)} + env(safe-area-inset-bottom, 0px))`,
               },
-              backgroundColor: 'background.paper',
+              backgroundColor: 'background.default',
               borderTop: 'none',
-              borderColor: 'divider',
-              boxShadow: `0 -4px 12px rgba(0,0,0,${(tokens as any).opacity?.['15'] ?? 0.15})`,
+              borderColor: 'transparent',
+              boxShadow: 'none',
               transition:
                 'opacity 0.2s ease-in-out, transform 0.2s ease-in-out',
               boxSizing: 'border-box',
diff --git a/formulus-formplayer/src/components/QuestionShell.tsx b/formulus-formplayer/src/components/QuestionShell.tsx
index 7e519f9ab..a5639c608 100644
--- a/formulus-formplayer/src/components/QuestionShell.tsx
+++ b/formulus-formplayer/src/components/QuestionShell.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Box, Typography, Alert, Stack, Divider } from '@mui/material';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
 
 /**
  * Simple HTML sanitizer that removes dangerous tags and attributes.
@@ -115,7 +116,16 @@ const QuestionShell: React.FC<QuestionShellProps> = ({
       )}
 
       {normalizedError && (
-        <Alert severity="error" sx={{ width: '100%', mb: -1 }}>
+        <Alert
+          severity="error"
+          icon={<ErrorOutline />}
+          sx={{
+            width: '100%',
+            mb: -1,
+            backgroundColor: 'transparent',
+            color: 'error.main',
+            '& .MuiAlert-icon': { color: 'error.main' },
+          }}>
           {normalizedError}
         </Alert>
       )}
diff --git a/formulus-formplayer/src/renderers/AdateQuestionRenderer.tsx b/formulus-formplayer/src/renderers/AdateQuestionRenderer.tsx
index 354bc2a5b..145b3c520 100644
--- a/formulus-formplayer/src/renderers/AdateQuestionRenderer.tsx
+++ b/formulus-formplayer/src/renderers/AdateQuestionRenderer.tsx
@@ -8,6 +8,7 @@ import {
   schemaMatches,
 } from '@jsonforms/core';
 import { TextField, Box, Typography, Alert, Button } from '@mui/material';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import { CalendarToday } from '@mui/icons-material';
 import QuestionShell from '../components/QuestionShell';
 import { tokens } from '../theme/tokens-adapter';
@@ -359,9 +360,17 @@ const AdateQuestionRenderer: React.FC<ControlProps> = ({
           </Box>
         )}
 
-        {/* Validation errors */}
+        {/* Validation errors – same as QuestionShell: icon, no background, text color matches icon */}
         {hasError && (
-          <Alert severity="error" sx={{ mt: 2 }}>
+          <Alert
+            severity="error"
+            icon={<ErrorOutline />}
+            sx={{
+              mt: 2,
+              backgroundColor: 'transparent',
+              color: 'error.main',
+              '& .MuiAlert-icon': { color: 'error.main' },
+            }}>
             {Array.isArray(errors) ? errors.join(', ') : String(errors)}
           </Alert>
         )}
diff --git a/formulus-formplayer/src/renderers/SwipeLayoutRenderer.tsx b/formulus-formplayer/src/renderers/SwipeLayoutRenderer.tsx
index a386167bf..75dc32e53 100644
--- a/formulus-formplayer/src/renderers/SwipeLayoutRenderer.tsx
+++ b/formulus-formplayer/src/renderers/SwipeLayoutRenderer.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import {
   JsonFormsDispatch,
   withJsonFormsControlProps,
@@ -11,7 +12,8 @@ import {
   RankedTester,
 } from '@jsonforms/core';
 import { useSwipeable } from 'react-swipeable';
-import { Snackbar, Box, Typography } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
+import { alpha } from '@mui/material/styles';
 import { Button } from '@ode/components/react-web';
 import { tokens } from '../theme/tokens-adapter';
 import { useFormContext } from '../App';
@@ -118,6 +120,13 @@ export const groupAsSwipeLayoutTester: RankedTester = rankWith(
 // SwipeLayoutRenderer
 // ---------------------------------------------------------------------------
 
+// Match ConfirmModal
+const CONFIRM_CARD_RADIUS = 0.7;
+const CONFIRM_INNER_RADIUS = 0.7;
+const CONFIRM_BORDER_WIDTH = 1;
+const CONFIRM_CARD_PADDING = 16;
+const CONTAINER_ALPHA = 0.4;
+
 const SwipeLayoutRenderer = ({
   schema,
   uischema,
@@ -130,6 +139,7 @@ const SwipeLayoutRenderer = ({
   currentPage,
   onPageChange,
 }: SwipeLayoutProps) => {
+  const theme = useTheme();
   const [isNavigating, setIsNavigating] = useState(false);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [pendingNavigation, setPendingNavigation] = useState<number | null>(
@@ -512,25 +522,83 @@ const SwipeLayoutRenderer = ({
         )}
       </div>
 
-      <Snackbar
-        open={snackbarOpen}
-        autoHideDuration={6000}
-        onClose={handleSnackbarClose}
-        message={snackbarMessage || 'Some required fields are missing'}
-        action={
-          <Button variant="secondary" size="small" onPress={handleGoBack}>
-            Go Back
-          </Button>
-        }
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        sx={{
-          '& .MuiSnackbarContent-root': {
-            backgroundColor: `rgba(0, 0, 0, ${(tokens as any).opacity?.['90'] ?? 0.9})`,
-            color: tokens.color.neutral.white,
-            boxShadow: (tokens as any).shadow?.portal?.md ?? tokens.shadow?.md,
-          },
-        }}
-      />
+      {snackbarOpen &&
+        typeof document !== 'undefined' &&
+        createPortal(
+          <Box
+            sx={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              minHeight: '100dvh',
+              height: '100%',
+              zIndex: 99,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 4,
+              backgroundColor: `rgba(0,0,0,${
+                (tokens as any).opacity?.['80'] ?? 0.8
+              })`,
+            }}>
+            <Box
+              sx={{
+                width: '100%',
+                maxWidth: 340,
+                borderRadius: CONFIRM_CARD_RADIUS,
+                border: `${CONFIRM_BORDER_WIDTH}px solid`,
+                borderColor: 'divider',
+                padding: `${CONFIRM_CARD_PADDING}px`,
+                backgroundColor: alpha(
+                  theme.palette.background.paper,
+                  CONTAINER_ALPHA,
+                ),
+                overflow: 'hidden',
+              }}>
+              <Box
+                sx={{
+                  borderRadius: CONFIRM_INNER_RADIUS,
+                  padding: `${CONFIRM_CARD_PADDING}px`,
+                  backgroundColor: theme.palette.background.paper,
+                  overflow: 'hidden',
+                }}>
+                <Typography
+                  variant="h6"
+                  sx={{ fontWeight: 600, textAlign: 'center', mb: 1.5 }}>
+                  Missing required fields
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  sx={{ textAlign: 'center', mb: 3 }}>
+                  {snackbarMessage ||
+                    'Some required fields are missing. Any unsaved changes will be available as a draft when you return.'}
+                </Typography>
+                <Box
+                  sx={{
+                    flexDirection: 'row',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: 2,
+                    flexWrap: 'wrap',
+                  }}>
+                  <Button
+                    variant="neutral"
+                    size="medium"
+                    onPress={handleSnackbarClose}>
+                    Stay here
+                  </Button>
+                  <Button variant="danger" size="medium" onPress={handleGoBack}>
+                    Go back
+                  </Button>
+                </Box>
+              </Box>
+            </Box>
+          </Box>,
+          document.body,
+        )}
     </FormLayout>
   );
 };
diff --git a/formulus-formplayer/src/theme/theme.ts b/formulus-formplayer/src/theme/theme.ts
index 09a4e595e..84719118b 100644
--- a/formulus-formplayer/src/theme/theme.ts
+++ b/formulus-formplayer/src/theme/theme.ts
@@ -88,11 +88,15 @@ export const getThemeOptions = (
   const c = (custom: string | undefined, fallback: string): string =>
     custom ?? fallback;
 
+  // Effective primary for component overrides so custom app colors apply everywhere (radios, inputs, chips, etc.)
+  const primaryMain = c(customColors?.primary, tokens.color.brand.primary[500]);
+  const errorMain = c(customColors?.error, tokens.color.semantic.error[500]);
+
   return {
     palette: {
       mode: mode,
       primary: {
-        main: c(customColors?.primary, tokens.color.brand.primary[500]),
+        main: c(customColors?.primary, primaryMain),
         light: c(customColors?.primaryLight, tokens.color.brand.primary[400]),
         dark: c(customColors?.primaryDark, tokens.color.brand.primary[600]),
         contrastText: c(customColors?.onPrimary, tokens.color.neutral.white),
@@ -280,9 +284,7 @@ export const getThemeOptions = (
           },
           text: {
             '&:hover': {
-              backgroundColor: isDark
-                ? `${tokens.color.brand.primary[500]}20` // 12% opacity for dark mode
-                : `${tokens.color.brand.primary[500]}14`, // 8% opacity for light mode
+              backgroundColor: isDark ? `${primaryMain}20` : `${primaryMain}14`,
             },
           },
           sizeSmall: {
@@ -319,7 +321,7 @@ export const getThemeOptions = (
                   : tokens.color.neutral[900], // Dark: #757575, Light: #212121
               },
               '&.Mui-focused fieldset': {
-                borderColor: tokens.color.brand.primary[500],
+                borderColor: primaryMain,
                 borderWidth: parsePx(tokens.border.width.medium), // 2px on focus
               },
               '&.Mui-error fieldset': {
@@ -344,7 +346,7 @@ export const getThemeOptions = (
                 ? tokens.color.neutral[400]
                 : tokens.color.neutral[600], // Dark: #BDBDBD, Light: #757575
               '&.Mui-focused': {
-                color: tokens.color.brand.primary[500],
+                color: primaryMain,
               },
               '&.Mui-error': {
                 color: tokens.color.semantic.error[500],
@@ -387,7 +389,7 @@ export const getThemeOptions = (
                 : tokens.color.neutral[900],
             },
             '&.Mui-focused fieldset': {
-              borderColor: tokens.color.brand.primary[500],
+              borderColor: primaryMain,
               borderWidth: parsePx(tokens.border.width.medium),
             },
             '&.Mui-error fieldset': {
@@ -415,7 +417,7 @@ export const getThemeOptions = (
             fontSize: parsePx(tokens.typography.fontSize.base),
             '&.Mui-focused': {
               '& .MuiOutlinedInput-notchedOutline': {
-                borderColor: tokens.color.brand.primary[500],
+                borderColor: primaryMain,
                 borderWidth: parsePx(tokens.border.width.medium),
               },
             },
@@ -456,7 +458,7 @@ export const getThemeOptions = (
               ? tokens.color.neutral[500]
               : tokens.color.neutral[400],
             '&.Mui-checked': {
-              color: tokens.color.brand.primary[500],
+              color: primaryMain,
             },
             '&.Mui-disabled': {
               color: isDark
@@ -475,7 +477,7 @@ export const getThemeOptions = (
               ? tokens.color.neutral[500]
               : tokens.color.neutral[400],
             '&.Mui-checked': {
-              color: tokens.color.brand.primary[500],
+              color: primaryMain,
             },
             '&.Mui-disabled': {
               color: isDark
@@ -514,7 +516,7 @@ export const getThemeOptions = (
                 transform: `translateX(${tokens.spacing?.[5] ?? '20px'})`,
                 color: tokens.color.neutral.white,
                 '& + .MuiSwitch-track': {
-                  backgroundColor: tokens.color.brand.primary[500],
+                  backgroundColor: primaryMain,
                   opacity: 1,
                   border: 0,
                 },
@@ -551,7 +553,7 @@ export const getThemeOptions = (
             minHeight: `${tokens.touchTarget.large}px`,
             '&.Mui-focused': {
               '& .MuiOutlinedInput-notchedOutline': {
-                borderColor: tokens.color.brand.primary[500],
+                borderColor: primaryMain,
                 borderWidth: parsePx(tokens.border.width.medium),
               },
             },
@@ -608,9 +610,7 @@ export const getThemeOptions = (
             minWidth: `${tokens.touchTarget.comfortable}px`,
             minHeight: `${tokens.touchTarget.comfortable}px`,
             '&:hover': {
-              backgroundColor: isDark
-                ? `${tokens.color.brand.primary[500]}20` // 12% opacity for dark mode
-                : `${tokens.color.brand.primary[500]}14`, // 8% opacity for light mode
+              backgroundColor: isDark ? `${primaryMain}20` : `${primaryMain}14`,
             },
           },
           sizeSmall: {
@@ -635,7 +635,21 @@ export const getThemeOptions = (
         styleOverrides: {
           root: {
             borderRadius: parsePx(tokens.border.radius.sm),
-            backgroundColor: isDark ? tokens.color.neutral[800] : undefined, // Dark: #424242 for alerts (matches paper)
+          },
+          standardError: {
+            backgroundColor: 'transparent',
+            color: errorMain,
+            '& .MuiAlert-icon': { color: errorMain },
+          },
+        },
+      },
+      MuiFormHelperText: {
+        styleOverrides: {
+          root: {
+            '&.Mui-error': {
+              backgroundColor: 'transparent',
+              color: errorMain,
+            },
           },
         },
       },
diff --git a/formulus/android/app/src/main/assets/webview/placeholder_app.html b/formulus/android/app/src/main/assets/webview/placeholder_app.html
index efa2094c5..8924bedfe 100644
--- a/formulus/android/app/src/main/assets/webview/placeholder_app.html
+++ b/formulus/android/app/src/main/assets/webview/placeholder_app.html
@@ -106,7 +106,7 @@
         margin: 0 0 var(--spacing-8);
       }
       [data-theme="dark"] .placeholder-subtitle {
-        color: var(--color-neutral-white);
+        color: var(--color-neutral-400);
       }
       [data-theme="light"] .placeholder-subtitle {
         color: var(--color-neutral-600);
@@ -161,8 +161,16 @@
   <body>
     <div class="placeholder-card">
       <h1 class="placeholder-title">Your Custom<br>App</h1>
-      <p class="placeholder-subtitle">Login and Sync to load your forms!</p>
-      <button type="button" class="placeholder-btn" id="login-btn" aria-label="Login to load forms">Login Now</button>
+      <p class="placeholder-subtitle" id="subtitle-text">
+        Login and Sync to load your forms
+      </p>
+      <button
+        type="button"
+        class="placeholder-btn"
+        id="login-btn"
+        aria-label="Login to load forms">
+        Login Now
+      </button>
       <p class="placeholder-tagline">Secure • Fast • Offline</p>
       <p class="placeholder-version" id="version-el">v0.1.0-native</p>
     </div>
diff --git a/formulus/assets/webview/placeholder_app.html b/formulus/assets/webview/placeholder_app.html
index efa2094c5..8924bedfe 100644
--- a/formulus/assets/webview/placeholder_app.html
+++ b/formulus/assets/webview/placeholder_app.html
@@ -106,7 +106,7 @@
         margin: 0 0 var(--spacing-8);
       }
       [data-theme="dark"] .placeholder-subtitle {
-        color: var(--color-neutral-white);
+        color: var(--color-neutral-400);
       }
       [data-theme="light"] .placeholder-subtitle {
         color: var(--color-neutral-600);
@@ -161,8 +161,16 @@
   <body>
     <div class="placeholder-card">
       <h1 class="placeholder-title">Your Custom<br>App</h1>
-      <p class="placeholder-subtitle">Login and Sync to load your forms!</p>
-      <button type="button" class="placeholder-btn" id="login-btn" aria-label="Login to load forms">Login Now</button>
+      <p class="placeholder-subtitle" id="subtitle-text">
+        Login and Sync to load your forms
+      </p>
+      <button
+        type="button"
+        class="placeholder-btn"
+        id="login-btn"
+        aria-label="Login to load forms">
+        Login Now
+      </button>
       <p class="placeholder-tagline">Secure • Fast • Offline</p>
       <p class="placeholder-version" id="version-el">v0.1.0-native</p>
     </div>
diff --git a/formulus/src/components/FormplayerModal.tsx b/formulus/src/components/FormplayerModal.tsx
index 3f0cff742..101c2f179 100644
--- a/formulus/src/components/FormplayerModal.tsx
+++ b/formulus/src/components/FormplayerModal.tsx
@@ -32,6 +32,12 @@ import {
 
 import { databaseService } from '../database';
 import colors from '../theme/colors';
+import {
+  odeSpacing,
+  odeTypography,
+  odeBorderWidth,
+  odeRadius,
+} from '../theme/odeDesign';
 import { FormSpec } from '../services'; // FormService will be imported directly
 import { ExtensionService } from '../services/ExtensionService';
 import RNFS from 'react-native-fs';
@@ -599,11 +605,24 @@ const FormplayerModal = forwardRef<FormplayerModalHandle, FormplayerModalProps>(
         presentationStyle="fullScreen"
         statusBarTranslucent={false}>
         <BlurredScreenBackground>
-          <View style={styles.container}>
+          <View
+            style={[
+              styles.container,
+              { backgroundColor: themeColors.background as string },
+            ]}>
             <View
               style={[
                 styles.header,
-                { borderBottomColor: themeColors.divider },
+                {
+                  backgroundColor:
+                    resolvedMode === 'dark'
+                      ? (colors.neutral[900] as string)
+                      : (colors.neutral[50] as string),
+                  borderWidth: odeBorderWidth.hairline,
+                  borderBottomWidth: odeBorderWidth.hairline,
+                  borderColor: themeColors.divider as string,
+                  borderBottomColor: themeColors.divider as string,
+                },
               ]}>
               <TouchableOpacity
                 onPress={handleClose}
@@ -633,7 +652,6 @@ const FormplayerModal = forwardRef<FormplayerModalHandle, FormplayerModalProps>(
                     ? 'Edit Observation'
                     : 'New Observation')}
               </Text>
-              <View style={styles.headerRightSpacer} />
             </View>
 
             <CustomAppWebView
@@ -668,24 +686,23 @@ const styles = StyleSheet.create({
   },
   header: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.neutral[200],
+    marginHorizontal: odeSpacing.sm,
+    padding: odeSpacing.md,
+    borderBottomWidth: odeBorderWidth.hairline,
+    borderBottomLeftRadius: odeRadius.card,
+    borderBottomRightRadius: odeRadius.card,
+    overflow: 'hidden',
   },
   headerTitle: {
-    fontSize: 18,
+    fontSize: odeTypography.screenTitle,
     fontWeight: 'bold',
-    flex: 1,
-    textAlign: 'center',
-    marginRight: 40, // To balance the close button width
-  },
-  headerRightSpacer: {
-    width: 40,
+    marginLeft: odeSpacing.sm,
+    flexShrink: 1,
   },
   closeButton: {
-    padding: 4,
+    padding: odeSpacing.xs,
   },
   disabledButton: {
     opacity: 0.5,
diff --git a/formulus/src/components/common/ObservationCard.tsx b/formulus/src/components/common/ObservationCard.tsx
index 508532cdd..d06a7489b 100644
--- a/formulus/src/components/common/ObservationCard.tsx
+++ b/formulus/src/components/common/ObservationCard.tsx
@@ -69,7 +69,7 @@ const ObservationCard: React.FC<ObservationCardProps> = ({
               size={24}
               color={
                 isSynced
-                  ? colors.semantic.success[500]
+                  ? (themeColors.primary as string)
                   : colors.semantic.warning[500]
               }
             />
@@ -90,15 +90,6 @@ const ObservationCard: React.FC<ObservationCardProps> = ({
               <Text style={styles.date}>
                 {dateStr} at {timeStr}
               </Text>
-              <View
-                style={[
-                  styles.statusBadge,
-                  isSynced ? styles.syncedBadge : styles.pendingBadge,
-                ]}>
-                <Text style={styles.statusText}>
-                  {isSynced ? 'Synced' : 'Pending'}
-                </Text>
-              </View>
             </View>
             <Text style={styles.owner} numberOfLines={1}>
               {`By ${
@@ -192,22 +183,6 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: colors.neutral[500],
   },
-  statusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 10,
-  },
-  syncedBadge: {
-    backgroundColor: colors.semantic.success[50],
-  },
-  pendingBadge: {
-    backgroundColor: colors.semantic.warning[50],
-  },
-  statusText: {
-    fontSize: 11,
-    fontWeight: '500',
-    color: colors.neutral[900],
-  },
   actions: {
     flexDirection: 'row',
     gap: 8,
diff --git a/formulus/src/navigation/MainAppNavigator.tsx b/formulus/src/navigation/MainAppNavigator.tsx
index b54f46d93..1f16aa6f5 100644
--- a/formulus/src/navigation/MainAppNavigator.tsx
+++ b/formulus/src/navigation/MainAppNavigator.tsx
@@ -1,15 +1,84 @@
 import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useFocusEffect } from '@react-navigation/native';
+import Icon from '@react-native-vector-icons/material-design-icons';
 import MainTabNavigator from './MainTabNavigator';
 import WelcomeScreen from '../screens/WelcomeScreen';
 import ObservationDetailScreen from '../screens/ObservationDetailScreen';
 import { MainAppStackParamList } from '../types/NavigationTypes';
 import { serverConfigService } from '../services/ServerConfigService';
 import { useAppTheme } from '../contexts/AppThemeContext';
+import {
+  odeSpacing,
+  odeRadius,
+  odeBorderWidth,
+  odeTypography,
+} from '../theme/odeDesign';
 
 const Stack = createStackNavigator<MainAppStackParamList>();
 
+function ObservationDetailHeader({
+  navigation,
+  themeColors,
+}: {
+  navigation: { goBack: () => void };
+  themeColors: Record<string, string>;
+}) {
+  return (
+    <View
+      style={[
+        observationDetailHeaderStyles.wrapper,
+        {
+          backgroundColor: themeColors.surface,
+          borderColor: themeColors.divider as string,
+        },
+      ]}>
+      <TouchableOpacity
+        onPress={() => navigation.goBack()}
+        style={observationDetailHeaderStyles.backBtn}>
+        <Icon name="arrow-left" size={24} color={themeColors.primary} />
+      </TouchableOpacity>
+      <Text
+        style={[
+          observationDetailHeaderStyles.title,
+          { color: themeColors.onBackground },
+        ]}
+        numberOfLines={1}>
+        Observation Details
+      </Text>
+      <View style={observationDetailHeaderStyles.placeholder} />
+    </View>
+  );
+}
+
+const observationDetailHeaderStyles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: odeSpacing.sm,
+    padding: odeSpacing.md,
+    borderWidth: odeBorderWidth.hairline,
+    borderBottomWidth: odeBorderWidth.hairline,
+    borderBottomLeftRadius: odeRadius.card,
+    borderBottomRightRadius: odeRadius.card,
+    overflow: 'hidden',
+  },
+  backBtn: {
+    padding: odeSpacing.xxs,
+    marginRight: odeSpacing.xs,
+  },
+  title: {
+    flex: 1,
+    fontSize: odeTypography.screenTitle,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  placeholder: {
+    width: 24 + odeSpacing.xxs * 2 + odeSpacing.xs,
+  },
+});
+
 const MainAppNavigator: React.FC = () => {
   const [isConfigured, setIsConfigured] = useState<boolean | null>(null);
 
@@ -60,7 +129,17 @@ const MainAppNavigator: React.FC = () => {
       <Stack.Screen
         name="ObservationDetail"
         component={ObservationDetailScreen}
-        options={{ title: 'Observation Details' }}
+        options={{
+          title: 'Observation Details',
+          headerTransparent: true,
+          headerStyle: { backgroundColor: 'transparent' },
+          header: props => (
+            <ObservationDetailHeader
+              navigation={props.navigation}
+              themeColors={themeColors}
+            />
+          ),
+        }}
       />
     </Stack.Navigator>
   );
diff --git a/formulus/src/navigation/MainTabNavigator.tsx b/formulus/src/navigation/MainTabNavigator.tsx
index f904c4d77..480691fbb 100644
--- a/formulus/src/navigation/MainTabNavigator.tsx
+++ b/formulus/src/navigation/MainTabNavigator.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { View, StyleSheet, Platform, Pressable } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Platform,
+  Pressable,
+  useWindowDimensions,
+} from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { CommonActions } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -137,35 +143,39 @@ const TAB_ICONS: Record<
 const isVisibleMainTab = (value: string): value is VisibleMainTab =>
   (VISIBLE_MAIN_TABS as readonly string[]).includes(value);
 
-const FadingTopLine = ({ borderColor }: { borderColor: string }) => (
-  <Svg
-    height={tabBarTokens.topLineHeight}
-    width="100%"
-    style={[styles.fadingLineSvg, { height: tabBarTokens.topLineHeight }]}
-    preserveAspectRatio="none">
-    <Defs>
-      <LinearGradient
-        id="tabBarTopLineGradient"
-        x1="0%"
-        y1="0"
-        x2="100%"
-        y2="0"
-        gradientUnits="userSpaceOnUse">
-        <Stop offset="0" stopColor={borderColor} stopOpacity="0" />
-        <Stop offset="0.15" stopColor={borderColor} stopOpacity="1" />
-        <Stop offset="0.85" stopColor={borderColor} stopOpacity="1" />
-        <Stop offset="1" stopColor={borderColor} stopOpacity="0" />
-      </LinearGradient>
-    </Defs>
-    <Rect
-      x={0}
-      y={0}
-      width="100%"
+const FadingTopLine = ({ borderColor }: { borderColor: string }) => {
+  const { width } = useWindowDimensions();
+
+  return (
+    <Svg
       height={tabBarTokens.topLineHeight}
-      fill="url(#tabBarTopLineGradient)"
-    />
-  </Svg>
-);
+      width={width}
+      style={[styles.fadingLineSvg, { height: tabBarTokens.topLineHeight }]}
+      preserveAspectRatio="none">
+      <Defs>
+        <LinearGradient
+          id="tabBarTopLineGradient"
+          x1="0%"
+          y1="0"
+          x2="100%"
+          y2="0"
+          gradientUnits="userSpaceOnUse">
+          <Stop offset="0" stopColor={borderColor} stopOpacity="0" />
+          <Stop offset="0.15" stopColor={borderColor} stopOpacity="1" />
+          <Stop offset="0.85" stopColor={borderColor} stopOpacity="1" />
+          <Stop offset="1" stopColor={borderColor} stopOpacity="0" />
+        </LinearGradient>
+      </Defs>
+      <Rect
+        x={0}
+        y={0}
+        width="100%"
+        height={tabBarTokens.topLineHeight}
+        fill="url(#tabBarTopLineGradient)"
+      />
+    </Svg>
+  );
+};
 
 const TabBarBackground = () => {
   const { themeColors, resolvedMode } = useAppTheme();
diff --git a/formulus/src/screens/ObservationDetailScreen.tsx b/formulus/src/screens/ObservationDetailScreen.tsx
index 67d4d3560..d5298b0ff 100644
--- a/formulus/src/screens/ObservationDetailScreen.tsx
+++ b/formulus/src/screens/ObservationDetailScreen.tsx
@@ -4,7 +4,6 @@ import {
   Text,
   StyleSheet,
   ScrollView,
-  TouchableOpacity,
   Alert,
   ActivityIndicator,
 } from 'react-native';
@@ -14,10 +13,12 @@ import { Observation } from '../database/models/Observation';
 import { FormService } from '../services/FormService';
 import { openFormplayerFromNative } from '../webview/FormulusMessageHandlers';
 import { useNavigation } from '@react-navigation/native';
-import colors from '../theme/colors';
+import colors, { withAlpha, CONTAINER_ALPHA } from '../theme/colors';
 import { Button } from '../components/common';
 import { useAppTheme } from '../contexts/AppThemeContext';
 import { useConfirmModal } from '../contexts/ConfirmModalContext';
+import BlurredScreenBackground from '../components/BlurredScreenBackground';
+import { odeSpacing, odeRadius } from '../theme/odeDesign';
 
 interface ObservationDetailScreenProps {
   route: {
@@ -142,7 +143,9 @@ const ObservationDetailScreen: React.FC<ObservationDetailScreenProps> = ({
           key={key}
           style={[styles.fieldContainer, { paddingLeft: level * 16 }]}>
           <Text style={fieldKeyStyle}>{key}:</Text>
-          <Text style={styles.fieldValue}>null</Text>
+          <Text style={[styles.fieldValue, { color: themeColors.onSurface }]}>
+            null
+          </Text>
         </View>
       );
     }
@@ -184,29 +187,40 @@ const ObservationDetailScreen: React.FC<ObservationDetailScreenProps> = ({
         key={key}
         style={[styles.fieldContainer, { paddingLeft: level * 16 }]}>
         <Text style={fieldKeyStyle}>{key}:</Text>
-        <Text style={styles.fieldValue}>{String(value)}</Text>
+        <Text style={[styles.fieldValue, { color: themeColors.onSurface }]}>
+          {String(value)}
+        </Text>
       </View>
     );
   };
 
   if (loading) {
     return (
-      <SafeAreaView style={styles.container}>
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color={themeColors.primary} />
-          <Text style={styles.loadingText}>Loading observation...</Text>
-        </View>
-      </SafeAreaView>
+      <BlurredScreenBackground>
+        <SafeAreaView
+          style={[styles.container, { backgroundColor: 'transparent' }]}>
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color={themeColors.primary} />
+            <Text
+              style={[styles.loadingText, { color: themeColors.onBackground }]}>
+              Loading observation...
+            </Text>
+          </View>
+        </SafeAreaView>
+      </BlurredScreenBackground>
     );
   }
 
   if (!observation) {
     return (
-      <SafeAreaView style={styles.container}>
-        <View style={styles.errorContainer}>
-          <Text style={styles.errorText}>Observation not found</Text>
-        </View>
-      </SafeAreaView>
+      <BlurredScreenBackground>
+        <SafeAreaView
+          style={[styles.container, { backgroundColor: 'transparent' }]}>
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>Observation not found</Text>
+          </View>
+        </SafeAreaView>
+      </BlurredScreenBackground>
     );
   }
 
@@ -218,193 +232,307 @@ const ObservationDetailScreen: React.FC<ObservationDetailScreenProps> = ({
       ? JSON.parse(observation.data)
       : observation.data;
 
-  return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          onPress={() => navigation.goBack()}
-          style={styles.backButton}>
-          <Icon name="arrow-left" size={24} color={themeColors.primary} />
-        </TouchableOpacity>
-        <Text style={styles.headerTitle}>Observation Details</Text>
-        <View style={styles.headerActions}>
-          <Button
-            title="Edit"
-            onPress={handleEdit}
-            variant="primary"
-            size="small"
-            position="left"
-          />
-          <Button
-            title="Delete"
-            onPress={handleDelete}
-            variant="danger"
-            size="small"
-            position="right"
-          />
-        </View>
-      </View>
+  const cardOuterBg = withAlpha(themeColors.surface as string, CONTAINER_ALPHA);
+  const cardInnerBg = withAlpha(themeColors.surface as string, CONTAINER_ALPHA);
 
-      <ScrollView
-        style={styles.content}
-        contentContainerStyle={styles.contentContainer}>
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Basic Information</Text>
-          <View style={styles.infoRow}>
-            <Text style={styles.infoLabel}>Form Type:</Text>
-            <Text style={styles.infoValue}>
-              {formName || observation.formType}
-            </Text>
-          </View>
-          <View style={styles.infoRow}>
-            <Text style={styles.infoLabel}>Observation ID:</Text>
-            <Text style={[styles.infoValue, styles.monoText]}>
-              {observation.observationId}
-            </Text>
-          </View>
-          <View style={styles.infoRow}>
-            <Text style={styles.infoLabel}>Created:</Text>
-            <Text style={styles.infoValue}>
-              {observation.createdAt.toLocaleString()}
-            </Text>
-          </View>
-          <View style={styles.infoRow}>
-            <Text style={styles.infoLabel}>Updated:</Text>
-            <Text style={styles.infoValue}>
-              {observation.updatedAt.toLocaleString()}
-            </Text>
+  return (
+    <BlurredScreenBackground>
+      <SafeAreaView
+        style={[styles.container, { backgroundColor: 'transparent' }]}>
+        <ScrollView
+          style={styles.content}
+          contentContainerStyle={[
+            styles.contentContainer,
+            { paddingTop: 56 + odeSpacing.md },
+          ]}>
+          <View style={styles.actionBar}>
+            <Button
+              title="Edit"
+              onPress={handleEdit}
+              variant="primary"
+              size="small"
+              position="left"
+            />
+            <Button
+              title="Delete"
+              onPress={handleDelete}
+              variant="danger"
+              size="small"
+              position="right"
+            />
           </View>
-          <View style={styles.infoRow}>
-            <Text style={styles.infoLabel}>Status:</Text>
+          <View
+            style={[
+              styles.section,
+              {
+                borderWidth: 1,
+                borderColor: themeColors.divider as string,
+                backgroundColor: cardOuterBg,
+              },
+            ]}>
             <View
-              style={[
-                styles.statusBadge,
-                isSynced ? styles.syncedBadge : styles.pendingBadge,
-              ]}>
-              <Icon
-                name={isSynced ? 'check-circle' : 'clock-outline'}
-                size={16}
-                color={
-                  isSynced
-                    ? colors.semantic.success[500]
-                    : colors.semantic.warning[500]
-                }
-              />
-              <Text style={styles.statusText}>
-                {isSynced ? 'Synced' : 'Pending'}
+              style={[styles.sectionInner, { backgroundColor: cardInnerBg }]}>
+              <Text
+                style={[styles.sectionTitle, { color: themeColors.onSurface }]}>
+                Basic Information
               </Text>
+              <View style={styles.infoRow}>
+                <Text
+                  style={[styles.infoLabel, { color: themeColors.onSurface }]}>
+                  Form Type:
+                </Text>
+                <Text
+                  style={[styles.infoValue, { color: themeColors.onSurface }]}>
+                  {formName || observation.formType}
+                </Text>
+              </View>
+              <View style={styles.infoRow}>
+                <Text
+                  style={[styles.infoLabel, { color: themeColors.onSurface }]}>
+                  Observation ID:
+                </Text>
+                <Text
+                  style={[
+                    styles.infoValue,
+                    styles.monoText,
+                    { color: themeColors.onSurface },
+                  ]}>
+                  {observation.observationId}
+                </Text>
+              </View>
+              <View style={styles.infoRow}>
+                <Text
+                  style={[styles.infoLabel, { color: themeColors.onSurface }]}>
+                  Created:
+                </Text>
+                <Text
+                  style={[styles.infoValue, { color: themeColors.onSurface }]}>
+                  {observation.createdAt.toLocaleString()}
+                </Text>
+              </View>
+              <View style={styles.infoRow}>
+                <Text
+                  style={[styles.infoLabel, { color: themeColors.onSurface }]}>
+                  Updated:
+                </Text>
+                <Text
+                  style={[styles.infoValue, { color: themeColors.onSurface }]}>
+                  {observation.updatedAt.toLocaleString()}
+                </Text>
+              </View>
+              <View style={styles.infoRow}>
+                <Text
+                  style={[styles.infoLabel, { color: themeColors.onSurface }]}>
+                  Status:
+                </Text>
+                <View
+                  style={[
+                    styles.statusBadge,
+                    isSynced ? styles.syncedBadge : styles.pendingBadge,
+                  ]}>
+                  <Icon
+                    name={isSynced ? 'check-circle' : 'clock-outline'}
+                    size={16}
+                    color={
+                      isSynced
+                        ? (themeColors.primary as string)
+                        : colors.semantic.warning[500]
+                    }
+                  />
+                  <Text style={styles.statusText}>
+                    {isSynced ? 'Synced' : 'Pending'}
+                  </Text>
+                </View>
+              </View>
+              {isSynced && observation.syncedAt && (
+                <View style={styles.infoRow}>
+                  <Text
+                    style={[
+                      styles.infoLabel,
+                      { color: themeColors.onSurface },
+                    ]}>
+                    Synced At:
+                  </Text>
+                  <Text
+                    style={[
+                      styles.infoValue,
+                      { color: themeColors.onSurface },
+                    ]}>
+                    {observation.syncedAt.toLocaleString()}
+                  </Text>
+                </View>
+              )}
             </View>
           </View>
-          {isSynced && observation.syncedAt && (
-            <View style={styles.infoRow}>
-              <Text style={styles.infoLabel}>Synced At:</Text>
-              <Text style={styles.infoValue}>
-                {observation.syncedAt.toLocaleString()}
-              </Text>
+
+          {observation.geolocation && (
+            <View
+              style={[
+                styles.section,
+                {
+                  borderWidth: 1,
+                  borderColor: themeColors.divider as string,
+                  backgroundColor: cardOuterBg,
+                },
+              ]}>
+              <View
+                style={[styles.sectionInner, { backgroundColor: cardInnerBg }]}>
+                <Text
+                  style={[
+                    styles.sectionTitle,
+                    { color: themeColors.onSurface },
+                  ]}>
+                  Location
+                </Text>
+                <View style={styles.infoRow}>
+                  <Text
+                    style={[
+                      styles.infoLabel,
+                      { color: themeColors.onSurface },
+                    ]}>
+                    Latitude:
+                  </Text>
+                  <Text
+                    style={[
+                      styles.infoValue,
+                      { color: themeColors.onSurface },
+                    ]}>
+                    {typeof observation.geolocation === 'string'
+                      ? JSON.parse(observation.geolocation).latitude
+                      : observation.geolocation.latitude}
+                  </Text>
+                </View>
+                <View style={styles.infoRow}>
+                  <Text
+                    style={[
+                      styles.infoLabel,
+                      { color: themeColors.onSurface },
+                    ]}>
+                    Longitude:
+                  </Text>
+                  <Text
+                    style={[
+                      styles.infoValue,
+                      { color: themeColors.onSurface },
+                    ]}>
+                    {typeof observation.geolocation === 'string'
+                      ? JSON.parse(observation.geolocation).longitude
+                      : observation.geolocation.longitude}
+                  </Text>
+                </View>
+              </View>
             </View>
           )}
-        </View>
 
-        {observation.geolocation && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Location</Text>
-            <View style={styles.infoRow}>
-              <Text style={styles.infoLabel}>Latitude:</Text>
-              <Text style={styles.infoValue}>
-                {typeof observation.geolocation === 'string'
-                  ? JSON.parse(observation.geolocation).latitude
-                  : observation.geolocation.latitude}
-              </Text>
-            </View>
-            <View style={styles.infoRow}>
-              <Text style={styles.infoLabel}>Longitude:</Text>
-              <Text style={styles.infoValue}>
-                {typeof observation.geolocation === 'string'
-                  ? JSON.parse(observation.geolocation).longitude
-                  : observation.geolocation.longitude}
+          <View
+            style={[
+              styles.section,
+              {
+                borderWidth: 1,
+                borderColor: themeColors.divider as string,
+                backgroundColor: cardOuterBg,
+              },
+            ]}>
+            <View
+              style={[styles.sectionInner, { backgroundColor: cardInnerBg }]}>
+              <Text
+                style={[styles.sectionTitle, { color: themeColors.onSurface }]}>
+                Ownership
               </Text>
+              <View style={styles.infoRow}>
+                <Text
+                  style={[styles.infoLabel, { color: themeColors.onSurface }]}>
+                  Author:
+                </Text>
+                <Text
+                  style={[styles.infoValue, { color: themeColors.onSurface }]}>
+                  {observation.author && observation.author.trim().length > 0
+                    ? observation.author
+                    : 'Unknown'}
+                </Text>
+              </View>
+              <View style={styles.infoRow}>
+                <Text
+                  style={[styles.infoLabel, { color: themeColors.onSurface }]}>
+                  Device ID:
+                </Text>
+                <Text
+                  style={[
+                    styles.infoValue,
+                    styles.monoText,
+                    { color: themeColors.onSurface },
+                  ]}>
+                  {observation.deviceId &&
+                  observation.deviceId.trim().length > 0
+                    ? observation.deviceId
+                    : 'Unknown'}
+                </Text>
+              </View>
             </View>
           </View>
-        )}
-
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Ownership</Text>
-          <View style={styles.infoRow}>
-            <Text style={styles.infoLabel}>Author:</Text>
-            <Text style={styles.infoValue}>
-              {observation.author && observation.author.trim().length > 0
-                ? observation.author
-                : 'Unknown'}
-            </Text>
-          </View>
-          <View style={styles.infoRow}>
-            <Text style={styles.infoLabel}>Device ID:</Text>
-            <Text style={[styles.infoValue, styles.monoText]}>
-              {observation.deviceId && observation.deviceId.trim().length > 0
-                ? observation.deviceId
-                : 'Unknown'}
-            </Text>
-          </View>
-        </View>
 
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Form Data</Text>
-          <View style={styles.dataContainer}>
-            {Object.entries(data).map(([key, value]) =>
-              renderDataField(key, value),
-            )}
+          <View
+            style={[
+              styles.section,
+              {
+                borderWidth: 1,
+                borderColor: themeColors.divider as string,
+                backgroundColor: cardOuterBg,
+              },
+            ]}>
+            <View
+              style={[styles.sectionInner, { backgroundColor: cardInnerBg }]}>
+              <Text
+                style={[styles.sectionTitle, { color: themeColors.onSurface }]}>
+                Form Data
+              </Text>
+              <View style={styles.dataContainer}>
+                {Object.entries(data).map(([key, value]) =>
+                  renderDataField(key, value),
+                )}
+              </View>
+            </View>
           </View>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+        </ScrollView>
+      </SafeAreaView>
+    </BlurredScreenBackground>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.neutral[50],
   },
-  header: {
+  actionBar: {
     flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 16,
-    backgroundColor: colors.neutral.white,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.neutral[200],
-  },
-  backButton: {
-    padding: 4,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: colors.neutral[900],
-    flex: 1,
-    textAlign: 'center',
-  },
-  headerActions: {
-    flexDirection: 'row',
-    gap: 8,
+    gap: odeSpacing.xs,
+    marginTop: odeSpacing.md,
+    marginBottom: odeSpacing.md,
   },
   content: {
     flex: 1,
   },
   contentContainer: {
-    padding: 16,
+    padding: odeSpacing.md,
   },
   section: {
-    backgroundColor: colors.neutral.white,
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
+    borderRadius: odeRadius.card,
+    padding: odeSpacing.md,
+    marginHorizontal: odeSpacing.md,
+    marginBottom: odeSpacing.md,
+  },
+  sectionInner: {
+    borderRadius: odeRadius.inner,
+    overflow: 'hidden',
+    padding: odeSpacing.sm,
   },
   sectionTitle: {
     fontSize: 18,
     fontWeight: '600',
-    color: colors.neutral[900],
     marginBottom: 12,
+    textAlign: 'center',
   },
   infoRow: {
     flexDirection: 'row',
@@ -454,17 +582,19 @@ const styles = StyleSheet.create({
     paddingBottom: 8,
     borderBottomWidth: 1,
     borderBottomColor: colors.neutral[100],
+    alignSelf: 'stretch',
   },
   fieldKey: {
     fontSize: 14,
     fontWeight: '600',
-    // color is applied inline via themeColors.primary
     marginBottom: 4,
+    textAlign: 'left',
   },
   fieldValue: {
     fontSize: 14,
     color: colors.neutral[900],
     marginLeft: 8,
+    textAlign: 'left',
   },
   arrayItem: {
     marginLeft: 16,