feat: beautify the UI

generate-app-icons

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+
+ICON="assets/app-icon.png"
+
+# Android icons
+for d in mdpi:48 hdpi:72 xhdpi:96 xxhdpi:144 xxxhdpi:192; do
+  density="${d%%:*}"
+  size="${d##*:}"
+
+  out_dir="android/app/src/main/res/mipmap-${density}"
+  round_icon="${out_dir}/ic_launcher_round.png"
+
+  sips -z "$size" "$size" "$ICON" \
+    --out "${out_dir}/ic_launcher.png" >/dev/null
+
+  sips -z "$size" "$size" "$ICON" \
+    --out "$round_icon" >/dev/null
+
+  # Proper circular crop with preserved transparency (ImageMagick)
+  if command -v magick >/dev/null 2>&1; then
+    magick "$round_icon" \
+      -alpha set -background none \
+      \( -size ${size}x${size} xc:none \
+         -fill white -draw "circle $((size/2)),$((size/2)) $((size/2)),1" \) \
+      -compose CopyOpacity -composite \
+      "$round_icon"
+  else
+    echo "Warning: ImageMagick not found; skipping circular crop for $round_icon" >&2
+  fi
+done
+
+# iOS icons
+OUT="ios/Expensso/Images.xcassets/AppIcon.appiconset"
+
+sips -z 40 40 "$ICON"  --out "$OUT/Icon-20@2x.png"  >/dev/null
+sips -z 60 60 "$ICON"  --out "$OUT/Icon-20@3x.png"  >/dev/null
+sips -z 58 58 "$ICON"  --out "$OUT/Icon-29@2x.png"  >/dev/null
+sips -z 87 87 "$ICON"  --out "$OUT/Icon-29@3x.png"  >/dev/null
+sips -z 80 80 "$ICON"  --out "$OUT/Icon-40@2x.png"  >/dev/null
+sips -z 120 120 "$ICON" --out "$OUT/Icon-40@3x.png" >/dev/null
+sips -z 120 120 "$ICON" --out "$OUT/Icon-60@2x.png" >/dev/null
+sips -z 180 180 "$ICON" --out "$OUT/Icon-60@3x.png" >/dev/null
+sips -z 1024 1024 "$ICON" --out "$OUT/Icon-1024.png" >/dev/null
+
+echo "Icons generated!"

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "Expensso",
+  "name": "expensso",
-  "version": "0.0.1",
+  "version": "0.1.1-alpha",
   "private": true,
   "scripts": {
     "android": "react-native run-android",

src/components/CustomBottomSheet.tsx

@@ -199,6 +199,10 @@ function makeStyles(theme: MD3Theme) {
       backgroundColor: colors.surfaceContainerLow,
       borderTopLeftRadius: shape.extraLarge,
       borderTopRightRadius: shape.extraLarge,
+      borderTopWidth: 1,
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+      borderColor: colors.outlineVariant,
     },
     handleContainer: {
       alignItems: 'center',

src/components/SummaryCard.tsx

@@ -21,7 +21,13 @@ export const SummaryCard: React.FC<SummaryCardProps> = ({
 }) => {
   const {colors, typography, elevation, shape, spacing} = useTheme();
   return (
-    <View style={[styles.card, {backgroundColor: colors.surfaceContainerLow, ...elevation.level1}, style]}>
+    <View style={[styles.card, {
+      backgroundColor: colors.surfaceContainerLow,
+      borderRadius: shape.small,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
+      ...elevation.level1
+    }, style]}>
       <View style={styles.cardHeader}>
         {icon && <View style={styles.iconContainer}>{icon}</View>}
         <Text style={[styles.cardTitle, {color: colors.onSurfaceVariant}]}>{title}</Text>
@@ -36,7 +42,6 @@ export const SummaryCard: React.FC<SummaryCardProps> = ({
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: 16,
     padding: 16,
     shadowColor: '#000',
     shadowOffset: {width: 0, height: 2},

src/components/TransactionItem.tsx

@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
   iconCircle: {
     width: 44,
     height: 44,
-    borderRadius: 22,
+    borderRadius: 4,
     justifyContent: 'center',
     alignItems: 'center',
   },

src/components/dashboard/FinancialHealthGauges.tsx

@@ -187,6 +187,8 @@ function makeStyles(theme: MD3Theme) {
       flex: 1,
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.medium,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.lg,
       ...elevation.level1,
     },
@@ -236,6 +238,8 @@ function makeStyles(theme: MD3Theme) {
       marginTop: spacing.md,
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.medium,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.lg,
       ...elevation.level1,
     },

src/components/dashboard/NetWorthHeroCard.tsx

@@ -4,16 +4,18 @@
  */
 
 import React, {useMemo} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import {View, Text, StyleSheet, Dimensions} from 'react-native';
 import {LineChart} from 'react-native-gifted-charts';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import Animated, {FadeInDown} from 'react-native-reanimated';
+import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated';
 
 import {useTheme} from '../../theme';
 import type {MD3Theme} from '../../theme';
 import {formatCurrency, formatCompact} from '../../utils';
 import type {Currency, NetWorthSnapshot} from '../../types';
 
+const {width: SCREEN_WIDTH} = Dimensions.get('window');
+
 interface NetWorthHeroCardProps {
   netWorth: number;
   totalAssets: number;
@@ -39,10 +41,26 @@ export const NetWorthHeroCard: React.FC<NetWorthHeroCardProps> = ({
     }));
   }, [history]);
 
+  // Calculate trend percentage from history
+  const trendPercentage = useMemo(() => {
+    if (history.length < 2) return null;
+    const latest = history[history.length - 1].netWorth;
+    const previous = history[history.length - 2].netWorth;
+    if (previous === 0) return null;
+    return ((latest - previous) / Math.abs(previous)) * 100;
+  }, [history]);
+
   const isPositive = netWorth >= 0;
+  const isTrendUp = trendPercentage && trendPercentage > 0;
 
   return (
     <Animated.View entering={FadeInDown.duration(500).springify()} style={s.card}>
+      {/* Decorative Background Pattern */}
+      <View style={s.decorativeBackground}>
+        <View style={[s.decorCircle, {backgroundColor: theme.colors.primary + '08'}]} />
+        <View style={[s.decorCircle2, {backgroundColor: theme.colors.tertiary + '06'}]} />
+      </View>
+
       {/* Sparkline Background */}
       {sparklineData.length >= 2 && (
         <View style={s.sparklineContainer}>
@@ -55,70 +73,128 @@ export const NetWorthHeroCard: React.FC<NetWorthHeroCardProps> = ({
             hideAxesAndRules
             color={
               theme.isDark
-                ? theme.colors.primaryContainer + '40'
+                ? theme.colors.primaryContainer + '60'
-                : theme.colors.primary + '25'
+                : theme.colors.primary + '35'
             }
             startFillColor={
               theme.isDark
-                ? theme.colors.primaryContainer + '20'
+                ? theme.colors.primaryContainer + '25'
-                : theme.colors.primary + '12'
+                : theme.colors.primary + '15'
             }
             endFillColor="transparent"
-            thickness={2}
+            thickness={2.5}
-            width={280}
+            width={SCREEN_WIDTH - 80}
-            height={100}
+            height={120}
             adjustToWidth
             isAnimated
             animationDuration={800}
             initialSpacing={0}
             endSpacing={0}
-            yAxisOffset={Math.min(...sparklineData.map(d => d.value)) * 0.95}
+            yAxisOffset={Math.min(...sparklineData.map(d => d.value)) * 0.92}
           />
         </View>
       )}
 
       {/* Content Overlay */}
       <View style={s.content}>
+        {/* Header with trend badge */}
+        <View style={s.headerRow}>
           <View style={s.labelRow}>
             <Icon
               name="chart-line-variant"
-            size={16}
+              size={18}
               color={theme.colors.onSurfaceVariant}
             />
             <Text style={s.label}>NET WORTH</Text>
           </View>
+          {trendPercentage !== null && (
+            <Animated.View entering={FadeIn.delay(300)} style={[s.trendBadge, {
+              backgroundColor: isTrendUp 
+                ? theme.colors.successContainer 
+                : theme.colors.errorContainer,
+            }]}>
+              <Icon 
+                name={isTrendUp ? 'trending-up' : 'trending-down'} 
+                size={14} 
+                color={isTrendUp ? theme.colors.success : theme.colors.error}
+              />
+              <Text style={[s.trendText, {
+                color: isTrendUp ? theme.colors.success : theme.colors.error,
+              }]}>
+                {Math.abs(trendPercentage).toFixed(1)}%
+              </Text>
+            </Animated.View>
+          )}
+        </View>
 
+        {/* Main Value */}
         <Text
           style={[
             s.value,
-            {color: isPositive ? theme.colors.success : theme.colors.error},
+            {color: isPositive ? theme.colors.onSurface : theme.colors.error},
           ]}
           numberOfLines={1}
           adjustsFontSizeToFit>
           {formatCurrency(netWorth, currency)}
         </Text>
 
-        {/* Asset / Liability Split */}
+        {/* Asset / Liability Split - Enhanced */}
-        <View style={s.splitRow}>
+        <View style={s.splitContainer}>
+          <Animated.View entering={FadeIn.delay(200)} style={s.splitRow}>
             <View style={s.splitItem}>
-            <View style={[s.splitDot, {backgroundColor: theme.colors.success}]} />
+              <View style={[s.iconWrapper, {
-            <View>
+                backgroundColor: theme.colors.successContainer,
+              }]}>
+                <Icon 
+                  name="trending-up" 
+                  size={16} 
+                  color={theme.colors.success}
+                />
+              </View>
+              <View style={s.splitTextContainer}>
                 <Text style={s.splitLabel}>Assets</Text>
                 <Text style={[s.splitValue, {color: theme.colors.success}]}>
                   {formatCompact(totalAssets, currency)}
                 </Text>
               </View>
             </View>
+
             <View style={s.splitDivider} />
+
             <View style={s.splitItem}>
-            <View style={[s.splitDot, {backgroundColor: theme.colors.error}]} />
+              <View style={[s.iconWrapper, {
-            <View>
+                backgroundColor: theme.colors.errorContainer,
+              }]}>
+                <Icon 
+                  name="trending-down" 
+                  size={16} 
+                  color={theme.colors.error}
+                />
+              </View>
+              <View style={s.splitTextContainer}>
                 <Text style={s.splitLabel}>Liabilities</Text>
                 <Text style={[s.splitValue, {color: theme.colors.error}]}>
                   {formatCompact(totalLiabilities, currency)}
                 </Text>
               </View>
             </View>
+          </Animated.View>
+
+          {/* Visual Progress Bar */}
+          <View style={s.progressBar}>
+            <View 
+              style={[s.progressAsset, {
+                flex: totalAssets || 1,
+                backgroundColor: theme.colors.success,
+              }]} 
+            />
+            <View 
+              style={[s.progressLiability, {
+                flex: totalLiabilities || 0.1,
+                backgroundColor: theme.colors.error,
+              }]} 
+            />
+          </View>
         </View>
       </View>
     </Animated.View>
@@ -131,70 +207,143 @@ function makeStyles(theme: MD3Theme) {
     card: {
       marginHorizontal: spacing.xl,
       marginTop: spacing.md,
-      borderRadius: shape.extraLarge,
+      borderRadius: shape.medium,
+      borderWidth: 1.5,
+      borderColor: colors.outlineVariant,
       backgroundColor: colors.surfaceContainerLow,
       overflow: 'hidden',
       ...elevation.level3,
     },
+    decorativeBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      overflow: 'hidden',
+    },
+    decorCircle: {
+      position: 'absolute',
+      width: 200,
+      height: 200,
+      borderRadius: 100,
+      top: -60,
+      right: -40,
+    },
+    decorCircle2: {
+      position: 'absolute',
+      width: 150,
+      height: 150,
+      borderRadius: 75,
+      bottom: -30,
+      left: -20,
+    },
     sparklineContainer: {
       position: 'absolute',
       bottom: 0,
       left: 0,
       right: 0,
-      opacity: 0.6,
+      opacity: 0.7,
       overflow: 'hidden',
-      borderRadius: shape.extraLarge,
     },
     content: {
       padding: spacing.xxl,
+      paddingTop: spacing.xl,
+      paddingBottom: spacing.lg,
+    },
+    headerRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: spacing.sm,
     },
     labelRow: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: spacing.xs,
-      marginBottom: spacing.sm,
     },
     label: {
-      ...typography.labelSmall,
+      ...typography.labelMedium,
       color: colors.onSurfaceVariant,
-      letterSpacing: 1.5,
+      letterSpacing: 1.2,
+      fontWeight: '600',
+    },
+    trendBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingHorizontal: spacing.sm,
+      paddingVertical: 4,
+      borderRadius: shape.small,
+    },
+    trendText: {
+      ...typography.labelSmall,
+      fontWeight: '700',
     },
     value: {
       ...typography.displaySmall,
-      fontWeight: '700',
+      fontWeight: '800',
       marginBottom: spacing.lg,
+      marginTop: spacing.xs,
+      letterSpacing: -0.5,
+    },
+    splitContainer: {
+      gap: spacing.md,
     },
     splitRow: {
       flexDirection: 'row',
       alignItems: 'center',
       backgroundColor: colors.surfaceContainer,
       borderRadius: shape.medium,
-      padding: spacing.md,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant + '50',
+      padding: spacing.lg,
     },
     splitItem: {
       flex: 1,
       flexDirection: 'row',
       alignItems: 'center',
       gap: spacing.sm,
-      justifyContent: 'center',
     },
-    splitDot: {
+    iconWrapper: {
-      width: 8,
+      width: 32,
-      height: 8,
+      height: 32,
-      borderRadius: 4,
+      borderRadius: shape.small,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    splitTextContainer: {
+      flex: 1,
     },
     splitLabel: {
       ...typography.labelSmall,
       color: colors.onSurfaceVariant,
+      marginBottom: 2,
     },
     splitValue: {
-      ...typography.titleSmall,
+      ...typography.titleMedium,
       fontWeight: '700',
     },
     splitDivider: {
       width: 1,
-      height: 28,
+      height: 36,
       backgroundColor: colors.outlineVariant,
+      marginHorizontal: spacing.xs,
+    },
+    progressBar: {
+      flexDirection: 'row',
+      height: 6,
+      borderRadius: 3,
+      overflow: 'hidden',
+      backgroundColor: colors.surfaceContainerHighest,
+    },
+    progressAsset: {
+      borderTopLeftRadius: 3,
+      borderBottomLeftRadius: 3,
+    },
+    progressLiability: {
+      borderTopRightRadius: 3,
+      borderBottomRightRadius: 3,
     },
   });
 }

src/components/dashboard/RecentActivityList.tsx

@@ -174,7 +174,7 @@ function makeStyles(theme: MD3Theme) {
     iconCircle: {
       width: 40,
       height: 40,
-      borderRadius: 20,
+      borderRadius: 4,
       justifyContent: 'center',
       alignItems: 'center',
     },

src/components/dashboard/WealthDistributionChart.tsx

@@ -126,6 +126,8 @@ function makeStyles(theme: MD3Theme) {
       marginTop: spacing.xl,
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.xl,
       ...elevation.level1,
     },
@@ -164,7 +166,7 @@ function makeStyles(theme: MD3Theme) {
     legendDot: {
       width: 10,
       height: 10,
-      borderRadius: 5,
+      borderRadius: 2,
     },
     legendText: {
       flex: 1,

src/constants/index.ts

@@ -48,6 +48,7 @@ export const STATIC_EXCHANGE_RATES: ExchangeRates = {
   INR: 1,
   USD: 84.5, // 1 USD = 84.5 INR
   EUR: 91.2, // 1 EUR = 91.2 INR
+  GBP: 106.8, // 1 GBP = 106.8 INR
 };
 
 // ─── Currency Symbols ────────────────────────────────────────────────
@@ -56,6 +57,7 @@ export const CURRENCY_SYMBOLS: Record<string, string> = {
   INR: '₹',
   USD: '$',
   EUR: '€',
+  GBP: '£',
 };
 
 // ─── Theme Colors ────────────────────────────────────────────────────

src/i18n/en.ts

@@ -18,7 +18,7 @@ export default {
     // ─── Tabs ───
     tabs: {
       dashboard: 'Dashboard',
-      expenses: 'Expenses',
+      expenses: 'Transactions',
       netWorth: 'Net Worth',
       settings: 'Settings',
     },
@@ -38,9 +38,9 @@ export default {
       lastMonth: 'Last Month',
     },
 
-    // ─── Expenses ───
+    // ─── Transactions ───
     expenses: {
-      title: 'Expenses',
+      title: 'Transactions',
       addExpense: 'Add Expense',
       addIncome: 'Add Income',
       amount: 'Amount',

src/navigation/AppNavigator.tsx

@@ -17,7 +17,7 @@ const Tab = createBottomTabNavigator();
 
 const TAB_ICONS: Record<string, {focused: string; unfocused: string}> = {
   Dashboard: {focused: 'view-dashboard', unfocused: 'view-dashboard-outline'},
-  Expenses: {focused: 'receipt', unfocused: 'receipt'},
+  Transactions: {focused: 'receipt', unfocused: 'receipt'},
   NetWorth: {focused: 'chart-line', unfocused: 'chart-line'},
   Settings: {focused: 'cog', unfocused: 'cog-outline'},
 };
@@ -71,7 +71,7 @@ const AppNavigator: React.FC = () => {
           options={{tabBarLabel: t('tabs.dashboard')}}
         />
         <Tab.Screen
-          name="Expenses"
+          name="Transactions"
           component={ExpensesScreen}
           options={{tabBarLabel: t('tabs.expenses')}}
         />

src/screens/DashboardScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback} from 'react';
 import {
   View,
   Text,
@@ -15,7 +15,7 @@ import {BarChart, PieChart} from 'react-native-gifted-charts';
 
 import {SummaryCard, SectionHeader, TransactionItem, EmptyState} from '../components';
 import {useSettingsStore, useNetWorthStore, useExpenseStore} from '../store';
-import {formatCurrency, formatCompact, percentageChange} from '../utils';
+import {formatCurrency, formatCompact} from '../utils';
 import {COLORS} from '../constants';
 import {useThemeColors, useIsDarkTheme} from '../hooks';
 
@@ -280,7 +280,9 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.primary + '15',
     paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 20,
+    borderRadius: 0,
+    borderWidth: 1,
+    borderColor: COLORS.primary + '30',
   },
   currencyText: {
     fontSize: 13,
@@ -297,7 +299,9 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.surface,
     margin: 20,
     marginTop: 12,
-    borderRadius: 20,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: COLORS.border,
     padding: 24,
     shadowColor: '#000',
     shadowOffset: {width: 0, height: 4},
@@ -359,7 +363,9 @@ const styles = StyleSheet.create({
   chartCard: {
     backgroundColor: COLORS.surface,
     marginHorizontal: 20,
-    borderRadius: 16,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: COLORS.border,
     padding: 20,
     alignItems: 'center',
     shadowColor: '#000',
@@ -396,7 +402,7 @@ const styles = StyleSheet.create({
   legendDot: {
     width: 10,
     height: 10,
-    borderRadius: 5,
+    borderRadius: 2,
     marginRight: 8,
   },
   legendText: {
@@ -414,7 +420,9 @@ const styles = StyleSheet.create({
   transactionsList: {
     backgroundColor: COLORS.surface,
     marginHorizontal: 20,
-    borderRadius: 16,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: COLORS.border,
     overflow: 'hidden',
     shadowColor: '#000',
     shadowOffset: {width: 0, height: 2},

src/screens/ExpensesScreen.tsx

@@ -222,13 +222,15 @@ const ExpensesScreen: React.FC = () => {
         <Text style={s.headerTitle}>{t('expenses.title')}</Text>
       </Animated.View>
 
+      {renderHeader()}
+
+      <View style={s.listContainer}>
         <FlatList
           data={transactions}
           keyExtractor={item => item.id}
           renderItem={({item}) => (
             <TransactionItem transaction={item} onPress={handleDelete} />
           )}
-        ListHeaderComponent={renderHeader}
           ListEmptyComponent={
             <EmptyState
               icon="receipt"
@@ -242,6 +244,7 @@ const ExpensesScreen: React.FC = () => {
           contentContainerStyle={{paddingBottom: 80 + insets.bottom}}
           showsVerticalScrollIndicator={false}
         />
+      </View>
 
       {/* FAB */}
       <Pressable
@@ -482,6 +485,8 @@ function makeStyles(theme: MD3Theme) {
     summaryItem: {
       flex: 1,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.lg,
       alignItems: 'center',
     },
@@ -495,6 +500,17 @@ function makeStyles(theme: MD3Theme) {
       fontWeight: '700',
       marginTop: 2,
     },
+    listContainer: {
+      flex: 1,
+      backgroundColor: colors.surface,
+      marginHorizontal: spacing.xl,
+      marginTop: spacing.md,
+      borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
+      overflow: 'hidden',
+      ...elevation.level1,
+    },
     separator: {height: 1, marginLeft: 72},
     fab: {
       position: 'absolute',
@@ -511,6 +527,8 @@ function makeStyles(theme: MD3Theme) {
       flexDirection: 'row',
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.medium,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: 4,
       marginBottom: spacing.xl,
     },

src/screens/ModernDashboard.tsx

@@ -152,7 +152,7 @@ const ModernDashboard: React.FC = () => {
         <RecentActivityList
           transactions={transactions}
           currency={baseCurrency}
-          onViewAll={() => navigation.navigate('Expenses')}
+          onViewAll={() => navigation.navigate('Transactions')}
         />
 
         <View style={s.bottomSpacer} />
@@ -196,7 +196,9 @@ function makeStyles(theme: MD3Theme) {
       backgroundColor: colors.primaryContainer,
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.sm,
-      borderRadius: 20,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: colors.outline,
     },
     currencyText: {
       ...typography.labelMedium,

src/screens/NetWorthScreen.tsx

@@ -545,6 +545,8 @@ function makeStyles(theme: MD3Theme) {
       marginHorizontal: spacing.xl,
       marginTop: spacing.md,
       borderRadius: shape.extraLarge,
+      borderWidth: 1.5,
+      borderColor: colors.outlineVariant,
       padding: spacing.xl,
       ...elevation.level2,
     },
@@ -586,6 +588,8 @@ function makeStyles(theme: MD3Theme) {
       backgroundColor: colors.surfaceContainerLow,
       marginHorizontal: spacing.xl,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.xl,
       alignItems: 'center',
       ...elevation.level1,
@@ -594,6 +598,8 @@ function makeStyles(theme: MD3Theme) {
       backgroundColor: colors.surfaceContainerLow,
       marginHorizontal: spacing.xl,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       overflow: 'hidden',
       ...elevation.level1,
     },
@@ -610,7 +616,7 @@ function makeStyles(theme: MD3Theme) {
     listIcon: {
       width: 42,
       height: 42,
-      borderRadius: 21,
+      borderRadius: 4,
       justifyContent: 'center',
       alignItems: 'center',
     },

src/screens/SettingsScreen.tsx

@@ -228,7 +228,7 @@ const SettingsScreen: React.FC = () => {
               icon="information"
               iconColor="#7E57C2"
               label={t('settings.version')}
-              value="0.1.0 Alpha"
+              value="0.1.1-alpha"
             />
           </View>
         </Animated.View>
@@ -346,6 +346,8 @@ function makeStyles(theme: MD3Theme) {
     sectionCard: {
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       overflow: 'hidden',
       ...elevation.level1,
     },

src/theme/md3.ts

@@ -167,67 +167,70 @@ export const MD3DarkColors: typeof MD3LightColors = {
 
 // ─── MD3 Typography Scale ────────────────────────────────────────────
 
-const fontFamily = 'System'; // Falls back to Roboto on Android, SF Pro on iOS
+const fontFamily = 'JetBrainsMono-Regular';
+const fontFamilyMedium = 'JetBrainsMono-Medium';
+const fontFamilySemiBold = 'JetBrainsMono-SemiBold';
+const fontFamilyBold = 'JetBrainsMono-Bold';
 
 export const MD3Typography = {
   displayLarge: {
-    fontFamily,
+    fontFamily: fontFamilyBold,
     fontSize: 57,
     fontWeight: '400' as const,
     lineHeight: 64,
     letterSpacing: -0.25,
   },
   displayMedium: {
-    fontFamily,
+    fontFamily: fontFamilyBold,
     fontSize: 45,
     fontWeight: '400' as const,
     lineHeight: 52,
     letterSpacing: 0,
   },
   displaySmall: {
-    fontFamily,
+    fontFamily: fontFamilySemiBold,
     fontSize: 36,
     fontWeight: '400' as const,
     lineHeight: 44,
     letterSpacing: 0,
   },
   headlineLarge: {
-    fontFamily,
+    fontFamily: fontFamilySemiBold,
     fontSize: 32,
     fontWeight: '400' as const,
     lineHeight: 40,
     letterSpacing: 0,
   },
   headlineMedium: {
-    fontFamily,
+    fontFamily: fontFamilySemiBold,
     fontSize: 28,
     fontWeight: '400' as const,
     lineHeight: 36,
     letterSpacing: 0,
   },
   headlineSmall: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 24,
     fontWeight: '400' as const,
     lineHeight: 32,
     letterSpacing: 0,
   },
   titleLarge: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 22,
     fontWeight: '500' as const,
     lineHeight: 28,
     letterSpacing: 0,
   },
   titleMedium: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 16,
     fontWeight: '500' as const,
     lineHeight: 24,
     letterSpacing: 0.15,
   },
   titleSmall: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 14,
     fontWeight: '500' as const,
     lineHeight: 20,
@@ -255,21 +258,21 @@ export const MD3Typography = {
     letterSpacing: 0.4,
   },
   labelLarge: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 14,
     fontWeight: '500' as const,
     lineHeight: 20,
     letterSpacing: 0.1,
   },
   labelMedium: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 12,
     fontWeight: '500' as const,
     lineHeight: 16,
     letterSpacing: 0.5,
   },
   labelSmall: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 11,
     fontWeight: '500' as const,
     lineHeight: 16,
@@ -328,11 +331,11 @@ export const MD3Elevation = {
 
 export const MD3Shape = {
   none: 0,
-  extraSmall: 4,
+  extraSmall: 2,
-  small: 8,
+  small: 2,
-  medium: 12,
+  medium: 4,
-  large: 16,
+  large: 4,
-  extraLarge: 28,
+  extraLarge: 6,
   full: 9999,
 };