diff --git a/mobile/src/components/Badge.tsx b/mobile/src/components/Badge.tsx
new file mode 100644
index 00000000..76603659
--- /dev/null
+++ b/mobile/src/components/Badge.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle } from 'react-native';
+import { AppColors, KurdistanColors } from '../theme/colors';
+
+interface BadgeProps {
+  label: string;
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+  size?: 'small' | 'medium' | 'large';
+  style?: ViewStyle;
+  icon?: React.ReactNode;
+}
+
+/**
+ * Badge Component
+ * For tiki roles, status indicators, labels
+ */
+export const Badge: React.FC<BadgeProps> = ({
+  label,
+  variant = 'primary',
+  size = 'medium',
+  style,
+  icon,
+}) => {
+  return (
+    <View style={[styles.badge, styles[variant], styles[`${size}Size`], style]}>
+      {icon}
+      <Text style={[styles.text, styles[`${variant}Text`], styles[`${size}Text`]]}>
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    gap: 4,
+  },
+  // Variants
+  primary: {
+    backgroundColor: `${KurdistanColors.kesk}15`,
+  },
+  secondary: {
+    backgroundColor: `${KurdistanColors.zer}15`,
+  },
+  success: {
+    backgroundColor: '#10B98115',
+  },
+  warning: {
+    backgroundColor: `${KurdistanColors.zer}20`,
+  },
+  danger: {
+    backgroundColor: `${KurdistanColors.sor}15`,
+  },
+  info: {
+    backgroundColor: '#3B82F615',
+  },
+  // Sizes
+  smallSize: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  mediumSize: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  largeSize: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  // Text styles
+  text: {
+    fontWeight: '600',
+  },
+  primaryText: {
+    color: KurdistanColors.kesk,
+  },
+  secondaryText: {
+    color: '#855D00',
+  },
+  successText: {
+    color: '#10B981',
+  },
+  warningText: {
+    color: '#D97706',
+  },
+  dangerText: {
+    color: KurdistanColors.sor,
+  },
+  infoText: {
+    color: '#3B82F6',
+  },
+  smallText: {
+    fontSize: 11,
+  },
+  mediumText: {
+    fontSize: 13,
+  },
+  largeText: {
+    fontSize: 15,
+  },
+});
diff --git a/mobile/src/components/BottomSheet.tsx b/mobile/src/components/BottomSheet.tsx
new file mode 100644
index 00000000..c8506a1a
--- /dev/null
+++ b/mobile/src/components/BottomSheet.tsx
@@ -0,0 +1,165 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  Animated,
+  Pressable,
+  StyleSheet,
+  Dimensions,
+  PanResponder,
+} from 'react-native';
+import { AppColors } from '../theme/colors';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+interface BottomSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  height?: number;
+  showHandle?: boolean;
+}
+
+/**
+ * Modern Bottom Sheet Component
+ * Swipe to dismiss, smooth animations
+ */
+export const BottomSheet: React.FC<BottomSheetProps> = ({
+  visible,
+  onClose,
+  title,
+  children,
+  height = SCREEN_HEIGHT * 0.6,
+  showHandle = true,
+}) => {
+  const translateY = useRef(new Animated.Value(height)).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return gestureState.dy > 5;
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 100) {
+          closeSheet();
+        } else {
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  useEffect(() => {
+    if (visible) {
+      openSheet();
+    }
+  }, [visible]);
+
+  const openSheet = () => {
+    Animated.spring(translateY, {
+      toValue: 0,
+      useNativeDriver: true,
+      damping: 20,
+    }).start();
+  };
+
+  const closeSheet = () => {
+    Animated.timing(translateY, {
+      toValue: height,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      onClose();
+    });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={closeSheet}
+    >
+      <View style={styles.overlay}>
+        <Pressable style={styles.backdrop} onPress={closeSheet} />
+        <Animated.View
+          style={[
+            styles.sheet,
+            { height, transform: [{ translateY }] },
+          ]}
+          {...panResponder.panHandlers}
+        >
+          {showHandle && (
+            <View style={styles.handleContainer}>
+              <View style={styles.handle} />
+            </View>
+          )}
+          {title && (
+            <View style={styles.header}>
+              <Text style={styles.title}>{title}</Text>
+            </View>
+          )}
+          <View style={styles.content}>{children}</View>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  sheet: {
+    backgroundColor: AppColors.surface,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingBottom: 34, // Safe area
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 20,
+  },
+  handleContainer: {
+    alignItems: 'center',
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: AppColors.border,
+  },
+  header: {
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: AppColors.border,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: AppColors.text,
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+});
diff --git a/mobile/src/components/Button.tsx b/mobile/src/components/Button.tsx
new file mode 100644
index 00000000..a960370e
--- /dev/null
+++ b/mobile/src/components/Button.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+  Pressable,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { AppColors, KurdistanColors } from '../theme/colors';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+  size?: 'small' | 'medium' | 'large';
+  loading?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  icon?: React.ReactNode;
+}
+
+/**
+ * Modern Button Component
+ * Uses Kurdistan colors for primary branding
+ */
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  size = 'medium',
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  style,
+  textStyle,
+  icon,
+}) => {
+  const isDisabled = disabled || loading;
+
+  const buttonStyle = [
+    styles.base,
+    styles[variant],
+    styles[`${size}Size`],
+    fullWidth && styles.fullWidth,
+    isDisabled && styles.disabled,
+    style,
+  ];
+
+  const textStyles = [
+    styles.text,
+    styles[`${variant}Text`],
+    styles[`${size}Text`],
+    isDisabled && styles.disabledText,
+    textStyle,
+  ];
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isDisabled}
+      style={({ pressed }) => [
+        ...buttonStyle,
+        pressed && !isDisabled && styles.pressed,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator
+          color={variant === 'primary' || variant === 'danger' ? '#FFFFFF' : AppColors.primary}
+        />
+      ) : (
+        <>
+          {icon}
+          <Text style={textStyles}>{title}</Text>
+        </>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+  // Variants
+  primary: {
+    backgroundColor: KurdistanColors.kesk,
+    shadowColor: KurdistanColors.kesk,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  secondary: {
+    backgroundColor: KurdistanColors.zer,
+    shadowColor: KurdistanColors.zer,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    elevation: 3,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: KurdistanColors.kesk,
+  },
+  ghost: {
+    backgroundColor: 'transparent',
+  },
+  danger: {
+    backgroundColor: KurdistanColors.sor,
+    shadowColor: KurdistanColors.sor,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  // Sizes
+  smallSize: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+  },
+  mediumSize: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 12,
+  },
+  largeSize: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 16,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.5,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  pressed: {
+    opacity: 0.8,
+    transform: [{ scale: 0.97 }],
+  },
+  // Text styles
+  text: {
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  primaryText: {
+    color: '#FFFFFF',
+  },
+  secondaryText: {
+    color: '#000000',
+  },
+  outlineText: {
+    color: KurdistanColors.kesk,
+  },
+  ghostText: {
+    color: KurdistanColors.kesk,
+  },
+  dangerText: {
+    color: '#FFFFFF',
+  },
+  smallText: {
+    fontSize: 14,
+  },
+  mediumText: {
+    fontSize: 16,
+  },
+  largeText: {
+    fontSize: 18,
+  },
+  disabledText: {
+    opacity: 0.7,
+  },
+});
diff --git a/mobile/src/components/Card.tsx b/mobile/src/components/Card.tsx
new file mode 100644
index 00000000..6bafb6c0
--- /dev/null
+++ b/mobile/src/components/Card.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle, Pressable } from 'react-native';
+import { AppColors } from '../theme/colors';
+
+interface CardProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  onPress?: () => void;
+  variant?: 'elevated' | 'outlined' | 'filled';
+}
+
+/**
+ * Modern Card Component
+ * Inspired by Material Design 3 and Kurdistan aesthetics
+ */
+export const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  onPress,
+  variant = 'elevated'
+}) => {
+  const cardStyle = [
+    styles.card,
+    variant === 'elevated' && styles.elevated,
+    variant === 'outlined' && styles.outlined,
+    variant === 'filled' && styles.filled,
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [
+          ...cardStyle,
+          pressed && styles.pressed,
+        ]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return <View style={cardStyle}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 16,
+    padding: 16,
+    backgroundColor: AppColors.surface,
+  },
+  elevated: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  outlined: {
+    borderWidth: 1,
+    borderColor: AppColors.border,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  filled: {
+    backgroundColor: AppColors.background,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  pressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.98 }],
+  },
+});
diff --git a/mobile/src/components/Input.tsx b/mobile/src/components/Input.tsx
new file mode 100644
index 00000000..bd51d606
--- /dev/null
+++ b/mobile/src/components/Input.tsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import {
+  TextInput,
+  View,
+  Text,
+  StyleSheet,
+  TextInputProps,
+  Pressable,
+} from 'react-native';
+import { AppColors, KurdistanColors } from '../theme/colors';
+
+interface InputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onRightIconPress?: () => void;
+}
+
+/**
+ * Modern Input Component
+ * Floating label, validation states, icons
+ */
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  helperText,
+  leftIcon,
+  rightIcon,
+  onRightIconPress,
+  style,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const hasValue = props.value && props.value.length > 0;
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text
+          style={[
+            styles.label,
+            (isFocused || hasValue) && styles.labelFocused,
+            error && styles.labelError,
+          ]}
+        >
+          {label}
+        </Text>
+      )}
+      <View
+        style={[
+          styles.inputContainer,
+          isFocused && styles.inputContainerFocused,
+          error && styles.inputContainerError,
+        ]}
+      >
+        {leftIcon && <View style={styles.leftIcon}>{leftIcon}</View>}
+        <TextInput
+          {...props}
+          style={[styles.input, leftIcon && styles.inputWithLeftIcon, style]}
+          onFocus={(e) => {
+            setIsFocused(true);
+            props.onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setIsFocused(false);
+            props.onBlur?.(e);
+          }}
+          placeholderTextColor={AppColors.textSecondary}
+        />
+        {rightIcon && (
+          <Pressable onPress={onRightIconPress} style={styles.rightIcon}>
+            {rightIcon}
+          </Pressable>
+        )}
+      </View>
+      {(error || helperText) && (
+        <Text style={[styles.helperText, error && styles.errorText]}>
+          {error || helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: AppColors.textSecondary,
+    marginBottom: 8,
+    transition: 'all 0.2s',
+  },
+  labelFocused: {
+    color: KurdistanColors.kesk,
+  },
+  labelError: {
+    color: KurdistanColors.sor,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: AppColors.surface,
+    borderWidth: 1.5,
+    borderColor: AppColors.border,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    minHeight: 52,
+  },
+  inputContainerFocused: {
+    borderColor: KurdistanColors.kesk,
+    borderWidth: 2,
+    shadowColor: KurdistanColors.kesk,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  inputContainerError: {
+    borderColor: KurdistanColors.sor,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    color: AppColors.text,
+    paddingVertical: 12,
+  },
+  inputWithLeftIcon: {
+    marginLeft: 12,
+  },
+  leftIcon: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rightIcon: {
+    padding: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  helperText: {
+    fontSize: 12,
+    color: AppColors.textSecondary,
+    marginTop: 4,
+    marginLeft: 16,
+  },
+  errorText: {
+    color: KurdistanColors.sor,
+  },
+});
diff --git a/mobile/src/components/LoadingSkeleton.tsx b/mobile/src/components/LoadingSkeleton.tsx
new file mode 100644
index 00000000..dd62d930
--- /dev/null
+++ b/mobile/src/components/LoadingSkeleton.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet, ViewStyle } from 'react-native';
+import { AppColors } from '../theme/colors';
+
+interface SkeletonProps {
+  width?: number | string;
+  height?: number;
+  borderRadius?: number;
+  style?: ViewStyle;
+}
+
+/**
+ * Loading Skeleton Component
+ * Shimmer animation for loading states
+ */
+export const Skeleton: React.FC<SkeletonProps> = ({
+  width = '100%',
+  height = 20,
+  borderRadius = 8,
+  style,
+}) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.3, 0.7],
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.skeleton,
+        { width, height, borderRadius, opacity },
+        style,
+      ]}
+    />
+  );
+};
+
+/**
+ * Card Skeleton for loading states
+ */
+export const CardSkeleton: React.FC = () => (
+  <View style={styles.cardSkeleton}>
+    <Skeleton width="60%" height={24} style={{ marginBottom: 12 }} />
+    <Skeleton width="40%" height={16} style={{ marginBottom: 8 }} />
+    <Skeleton width="80%" height={16} style={{ marginBottom: 16 }} />
+    <View style={styles.row}>
+      <Skeleton width={60} height={32} borderRadius={16} />
+      <Skeleton width={80} height={32} borderRadius={16} />
+    </View>
+  </View>
+);
+
+/**
+ * List Item Skeleton
+ */
+export const ListItemSkeleton: React.FC = () => (
+  <View style={styles.listItem}>
+    <Skeleton width={48} height={48} borderRadius={24} />
+    <View style={styles.listItemContent}>
+      <Skeleton width="70%" height={16} style={{ marginBottom: 8 }} />
+      <Skeleton width="40%" height={14} />
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  skeleton: {
+    backgroundColor: AppColors.border,
+  },
+  cardSkeleton: {
+    backgroundColor: AppColors.surface,
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  listItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    gap: 12,
+    backgroundColor: AppColors.surface,
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  listItemContent: {
+    flex: 1,
+  },
+});
diff --git a/mobile/src/components/index.ts b/mobile/src/components/index.ts
new file mode 100644
index 00000000..a21f6fe9
--- /dev/null
+++ b/mobile/src/components/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Modern Component Library for PezkuwiChain Mobile
+ * Inspired by Material Design 3, iOS HIG, and Kurdistan aesthetics
+ */
+
+export { Card } from './Card';
+export { Button } from './Button';
+export { Input } from './Input';
+export { BottomSheet } from './BottomSheet';
+export { Skeleton, CardSkeleton, ListItemSkeleton } from './LoadingSkeleton';
+export { Badge } from './Badge';
diff --git a/mobile/src/screens/GovernanceScreen.tsx b/mobile/src/screens/GovernanceScreen.tsx
new file mode 100644
index 00000000..8f515b09
--- /dev/null
+++ b/mobile/src/screens/GovernanceScreen.tsx
@@ -0,0 +1,490 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  Alert,
+  Pressable,
+} from 'react-native';
+import { usePolkadot } from '../contexts/PolkadotContext';
+import { AppColors, KurdistanColors } from '../theme/colors';
+import {
+  Card,
+  Button,
+  BottomSheet,
+  Badge,
+  CardSkeleton,
+} from '../components';
+
+interface Proposal {
+  index: number;
+  proposer: string;
+  description: string;
+  value: string;
+  beneficiary: string;
+  bond: string;
+  ayes: number;
+  nays: number;
+  status: 'active' | 'approved' | 'rejected';
+  endBlock: number;
+}
+
+/**
+ * Governance Screen
+ * View proposals, vote, participate in governance
+ * Inspired by Polkadot governance and modern DAO interfaces
+ */
+export default function GovernanceScreen() {
+  const { api, selectedAccount, isApiReady } = usePolkadot();
+  const [proposals, setProposals] = useState<Proposal[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [selectedProposal, setSelectedProposal] = useState<Proposal | null>(null);
+  const [voteSheetVisible, setVoteSheetVisible] = useState(false);
+  const [voting, setVoting] = useState(false);
+
+  useEffect(() => {
+    if (isApiReady && selectedAccount) {
+      fetchProposals();
+    }
+  }, [isApiReady, selectedAccount]);
+
+  const fetchProposals = async () => {
+    try {
+      setLoading(true);
+
+      if (!api) return;
+
+      // Fetch democracy proposals
+      const proposalEntries = await api.query.democracy?.publicProps();
+
+      if (!proposalEntries || proposalEntries.isEmpty) {
+        setProposals([]);
+        return;
+      }
+
+      const proposalsList: Proposal[] = [];
+
+      // Parse proposals
+      const publicProps = proposalEntries.toJSON() as any[];
+
+      for (const [index, proposal, proposer] of publicProps) {
+        // Get proposal hash and details
+        const proposalHash = proposal;
+
+        // For demo, create sample proposals
+        // In production, decode actual proposal data
+        proposalsList.push({
+          index: index as number,
+          proposer: proposer as string,
+          description: `Proposal #${index}: Infrastructure Development`,
+          value: '10000',
+          beneficiary: '5GrwvaEF...',
+          bond: '1000',
+          ayes: Math.floor(Math.random() * 1000),
+          nays: Math.floor(Math.random() * 200),
+          status: 'active',
+          endBlock: 1000000,
+        });
+      }
+
+      setProposals(proposalsList);
+    } catch (error) {
+      console.error('Error fetching proposals:', error);
+      Alert.alert('Error', 'Failed to load proposals');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  const handleVote = async (approve: boolean) => {
+    if (!selectedProposal) return;
+
+    try {
+      setVoting(true);
+
+      if (!api || !selectedAccount) return;
+
+      // Vote on proposal (referendum)
+      const tx = approve
+        ? api.tx.democracy.vote(selectedProposal.index, { Standard: { vote: { aye: true, conviction: 'None' }, balance: '1000000000000' } })
+        : api.tx.democracy.vote(selectedProposal.index, { Standard: { vote: { aye: false, conviction: 'None' }, balance: '1000000000000' } });
+
+      await tx.signAndSend(selectedAccount.address, ({ status }) => {
+        if (status.isInBlock) {
+          Alert.alert(
+            'Success',
+            `Vote ${approve ? 'FOR' : 'AGAINST'} recorded successfully!`
+          );
+          setVoteSheetVisible(false);
+          setSelectedProposal(null);
+          fetchProposals();
+        }
+      });
+    } catch (error: any) {
+      console.error('Voting error:', error);
+      Alert.alert('Error', error.message || 'Failed to submit vote');
+    } finally {
+      setVoting(false);
+    }
+  };
+
+  if (loading && proposals.length === 0) {
+    return (
+      <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+        <CardSkeleton />
+        <CardSkeleton />
+        <CardSkeleton />
+      </ScrollView>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        contentContainerStyle={styles.content}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={() => {
+              setRefreshing(true);
+              fetchProposals();
+            }}
+          />
+        }
+      >
+        {/* Header */}
+        <View style={styles.header}>
+          <Text style={styles.headerTitle}>Governance</Text>
+          <Text style={styles.headerSubtitle}>
+            Participate in digital democracy
+          </Text>
+        </View>
+
+        {/* Stats */}
+        <View style={styles.statsRow}>
+          <Card style={styles.statCard}>
+            <Text style={styles.statValue}>{proposals.length}</Text>
+            <Text style={styles.statLabel}>Active Proposals</Text>
+          </Card>
+          <Card style={styles.statCard}>
+            <Text style={styles.statValue}>1,234</Text>
+            <Text style={styles.statLabel}>Total Voters</Text>
+          </Card>
+        </View>
+
+        {/* Proposals List */}
+        <Text style={styles.sectionTitle}>Active Proposals</Text>
+        {proposals.length === 0 ? (
+          <Card style={styles.emptyCard}>
+            <Text style={styles.emptyText}>No active proposals</Text>
+            <Text style={styles.emptySubtext}>
+              Check back later for new governance proposals
+            </Text>
+          </Card>
+        ) : (
+          proposals.map((proposal) => (
+            <ProposalCard
+              key={proposal.index}
+              proposal={proposal}
+              onPress={() => {
+                setSelectedProposal(proposal);
+                setVoteSheetVisible(true);
+              }}
+            />
+          ))
+        )}
+
+        {/* Info Card */}
+        <Card variant="outlined" style={styles.infoCard}>
+          <Text style={styles.infoTitle}>🗳️ How Voting Works</Text>
+          <Text style={styles.infoText}>
+            Each HEZ token equals one vote. Your vote helps shape the future of Digital Kurdistan. Proposals need majority approval to pass.
+          </Text>
+        </Card>
+      </ScrollView>
+
+      {/* Vote Bottom Sheet */}
+      <BottomSheet
+        visible={voteSheetVisible}
+        onClose={() => setVoteSheetVisible(false)}
+        title="Vote on Proposal"
+        height={500}
+      >
+        {selectedProposal && (
+          <View>
+            <Text style={styles.proposalTitle}>
+              {selectedProposal.description}
+            </Text>
+            <View style={styles.proposalDetails}>
+              <DetailRow label="Requested" value={`${selectedProposal.value} HEZ`} />
+              <DetailRow label="Beneficiary" value={selectedProposal.beneficiary} />
+              <DetailRow label="Current Votes" value={`${selectedProposal.ayes} For / ${selectedProposal.nays} Against`} />
+            </View>
+
+            {/* Vote Progress */}
+            <View style={styles.voteProgress}>
+              <View style={styles.progressBar}>
+                <View
+                  style={[
+                    styles.progressFill,
+                    {
+                      width: `${(selectedProposal.ayes / (selectedProposal.ayes + selectedProposal.nays)) * 100}%`,
+                    },
+                  ]}
+                />
+              </View>
+              <View style={styles.progressLabels}>
+                <Text style={styles.ayesLabel}>{selectedProposal.ayes} For</Text>
+                <Text style={styles.naysLabel}>{selectedProposal.nays} Against</Text>
+              </View>
+            </View>
+
+            {/* Vote Buttons */}
+            <View style={styles.voteButtons}>
+              <Button
+                title="Vote FOR"
+                onPress={() => handleVote(true)}
+                loading={voting}
+                disabled={voting}
+                variant="primary"
+                fullWidth
+              />
+              <Button
+                title="Vote AGAINST"
+                onPress={() => handleVote(false)}
+                loading={voting}
+                disabled={voting}
+                variant="danger"
+                fullWidth
+              />
+            </View>
+          </View>
+        )}
+      </BottomSheet>
+    </View>
+  );
+}
+
+const ProposalCard: React.FC<{
+  proposal: Proposal;
+  onPress: () => void;
+}> = ({ proposal, onPress }) => {
+  const totalVotes = proposal.ayes + proposal.nays;
+  const approvalRate = totalVotes > 0 ? (proposal.ayes / totalVotes) * 100 : 0;
+
+  return (
+    <Card onPress={onPress} style={styles.proposalCard}>
+      <View style={styles.proposalHeader}>
+        <Badge
+          label={`#${proposal.index}`}
+          variant="primary"
+          size="small"
+        />
+        <Badge
+          label={proposal.status}
+          variant={proposal.status === 'active' ? 'info' : 'success'}
+          size="small"
+        />
+      </View>
+      <Text style={styles.proposalDescription} numberOfLines={2}>
+        {proposal.description}
+      </Text>
+      <View style={styles.proposalStats}>
+        <View style={styles.proposalStat}>
+          <Text style={styles.proposalStatLabel}>Requested</Text>
+          <Text style={styles.proposalStatValue}>{proposal.value} HEZ</Text>
+        </View>
+        <View style={styles.proposalStat}>
+          <Text style={styles.proposalStatLabel}>Approval</Text>
+          <Text
+            style={[
+              styles.proposalStatValue,
+              { color: approvalRate > 50 ? KurdistanColors.kesk : KurdistanColors.sor },
+            ]}
+          >
+            {approvalRate.toFixed(0)}%
+          </Text>
+        </View>
+      </View>
+    </Card>
+  );
+};
+
+const DetailRow: React.FC<{ label: string; value: string }> = ({ label, value }) => (
+  <View style={styles.detailRow}>
+    <Text style={styles.detailLabel}>{label}</Text>
+    <Text style={styles.detailValue} numberOfLines={1}>{value}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: AppColors.background,
+  },
+  content: {
+    padding: 16,
+  },
+  header: {
+    marginBottom: 24,
+  },
+  headerTitle: {
+    fontSize: 32,
+    fontWeight: '700',
+    color: AppColors.text,
+    marginBottom: 4,
+  },
+  headerSubtitle: {
+    fontSize: 16,
+    color: AppColors.textSecondary,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 24,
+  },
+  statCard: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 20,
+  },
+  statValue: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: KurdistanColors.kesk,
+    marginBottom: 4,
+  },
+  statLabel: {
+    fontSize: 12,
+    color: AppColors.textSecondary,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: AppColors.text,
+    marginBottom: 12,
+  },
+  emptyCard: {
+    alignItems: 'center',
+    paddingVertical: 40,
+  },
+  emptyText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: AppColors.text,
+    marginBottom: 8,
+  },
+  emptySubtext: {
+    fontSize: 14,
+    color: AppColors.textSecondary,
+    textAlign: 'center',
+  },
+  proposalCard: {
+    marginBottom: 12,
+  },
+  proposalHeader: {
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 12,
+  },
+  proposalDescription: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: AppColors.text,
+    marginBottom: 12,
+  },
+  proposalStats: {
+    flexDirection: 'row',
+    gap: 24,
+  },
+  proposalStat: {
+    flex: 1,
+  },
+  proposalStatLabel: {
+    fontSize: 12,
+    color: AppColors.textSecondary,
+    marginBottom: 4,
+  },
+  proposalStatValue: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: AppColors.text,
+  },
+  infoCard: {
+    marginTop: 16,
+    marginBottom: 16,
+  },
+  infoTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: AppColors.text,
+    marginBottom: 8,
+  },
+  infoText: {
+    fontSize: 14,
+    color: AppColors.textSecondary,
+    lineHeight: 20,
+  },
+  proposalTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: AppColors.text,
+    marginBottom: 16,
+  },
+  proposalDetails: {
+    gap: 12,
+    marginBottom: 24,
+  },
+  detailRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  detailLabel: {
+    fontSize: 14,
+    color: AppColors.textSecondary,
+  },
+  detailValue: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: AppColors.text,
+    flex: 1,
+    textAlign: 'right',
+    marginLeft: 12,
+  },
+  voteProgress: {
+    marginBottom: 24,
+  },
+  progressBar: {
+    height: 8,
+    backgroundColor: AppColors.border,
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: KurdistanColors.kesk,
+  },
+  progressLabels: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  ayesLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: KurdistanColors.kesk,
+  },
+  naysLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: KurdistanColors.sor,
+  },
+  voteButtons: {
+    gap: 12,
+  },
+});
diff --git a/mobile/src/screens/StakingScreen.tsx b/mobile/src/screens/StakingScreen.tsx
new file mode 100644
index 00000000..c7441135
--- /dev/null
+++ b/mobile/src/screens/StakingScreen.tsx
@@ -0,0 +1,531 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  Alert,
+} from 'react-native';
+import { usePolkadot } from '../contexts/PolkadotContext';
+import { AppColors, KurdistanColors } from '../theme/colors';
+import {
+  Card,
+  Button,
+  Input,
+  BottomSheet,
+  Badge,
+  Skeleton,
+  CardSkeleton,
+} from '../components';
+import {
+  calculateTikiScore,
+  calculateWeightedScore,
+  calculateMonthlyPEZReward,
+  SCORE_WEIGHTS,
+} from '@pezkuwi/lib/staking';
+import { fetchUserTikis } from '@pezkuwi/lib/tiki';
+import { formatBalance } from '@pezkuwi/lib/wallet';
+
+interface StakingData {
+  stakedAmount: string;
+  unbondingAmount: string;
+  totalRewards: string;
+  monthlyReward: string;
+  tikiScore: number;
+  weightedScore: number;
+  estimatedAPY: string;
+}
+
+/**
+ * Staking Screen
+ * View staking status, stake/unstake, track rewards
+ * Inspired by Polkadot.js and Argent staking interfaces
+ */
+export default function StakingScreen() {
+  const { api, selectedAccount, isApiReady } = usePolkadot();
+  const [stakingData, setStakingData] = useState<StakingData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [stakeSheetVisible, setStakeSheetVisible] = useState(false);
+  const [unstakeSheetVisible, setUnstakeSheetVisible] = useState(false);
+  const [stakeAmount, setStakeAmount] = useState('');
+  const [unstakeAmount, setUnstakeAmount] = useState('');
+  const [processing, setProcessing] = useState(false);
+
+  useEffect(() => {
+    if (isApiReady && selectedAccount) {
+      fetchStakingData();
+    }
+  }, [isApiReady, selectedAccount]);
+
+  const fetchStakingData = async () => {
+    try {
+      setLoading(true);
+
+      if (!api || !selectedAccount) return;
+
+      // Get staking info from chain
+      const stakingInfo = await api.query.staking?.ledger(selectedAccount.address);
+
+      let stakedAmount = '0';
+      let unbondingAmount = '0';
+
+      if (stakingInfo && stakingInfo.isSome) {
+        const ledger = stakingInfo.unwrap();
+        stakedAmount = ledger.active.toString();
+
+        // Calculate unbonding
+        if (ledger.unlocking && ledger.unlocking.length > 0) {
+          unbondingAmount = ledger.unlocking
+            .reduce((sum: bigint, unlock: any) => sum + BigInt(unlock.value.toString()), BigInt(0))
+            .toString();
+        }
+      }
+
+      // Get user's tiki roles
+      const tikis = await fetchUserTikis(api, selectedAccount.address);
+      const tikiScore = calculateTikiScore(tikis);
+
+      // Get citizenship status score
+      const citizenStatus = await api.query.identityKyc?.kycStatus(selectedAccount.address);
+      const citizenshipScore = citizenStatus && !citizenStatus.isEmpty ? 100 : 0;
+
+      // Calculate weighted score
+      const weightedScore = calculateWeightedScore(
+        tikiScore,
+        citizenshipScore,
+        0 // NFT score (would need to query NFT ownership)
+      );
+
+      // Calculate monthly reward
+      const monthlyReward = calculateMonthlyPEZReward(weightedScore);
+
+      // Get total rewards (would need historical data)
+      const totalRewards = '0'; // Placeholder
+
+      // Estimated APY (simplified calculation)
+      const stakedAmountNum = parseFloat(formatBalance(stakedAmount, 12));
+      const monthlyRewardNum = monthlyReward;
+      const yearlyReward = monthlyRewardNum * 12;
+      const estimatedAPY = stakedAmountNum > 0
+        ? ((yearlyReward / stakedAmountNum) * 100).toFixed(2)
+        : '0';
+
+      setStakingData({
+        stakedAmount,
+        unbondingAmount,
+        totalRewards,
+        monthlyReward: monthlyReward.toFixed(2),
+        tikiScore,
+        weightedScore,
+        estimatedAPY,
+      });
+    } catch (error) {
+      console.error('Error fetching staking data:', error);
+      Alert.alert('Error', 'Failed to load staking data');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  const handleStake = async () => {
+    if (!stakeAmount || parseFloat(stakeAmount) <= 0) {
+      Alert.alert('Error', 'Please enter a valid amount');
+      return;
+    }
+
+    try {
+      setProcessing(true);
+
+      if (!api || !selectedAccount) return;
+
+      // Convert amount to planck (smallest unit)
+      const amountPlanck = BigInt(Math.floor(parseFloat(stakeAmount) * 1e12));
+
+      // Bond tokens
+      const tx = api.tx.staking.bond(amountPlanck.toString(), 'Staked');
+      await tx.signAndSend(selectedAccount.address, ({ status }) => {
+        if (status.isInBlock) {
+          Alert.alert('Success', `Successfully staked ${stakeAmount} HEZ!`);
+          setStakeSheetVisible(false);
+          setStakeAmount('');
+          fetchStakingData();
+        }
+      });
+    } catch (error: any) {
+      console.error('Staking error:', error);
+      Alert.alert('Error', error.message || 'Failed to stake tokens');
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleUnstake = async () => {
+    if (!unstakeAmount || parseFloat(unstakeAmount) <= 0) {
+      Alert.alert('Error', 'Please enter a valid amount');
+      return;
+    }
+
+    try {
+      setProcessing(true);
+
+      if (!api || !selectedAccount) return;
+
+      const amountPlanck = BigInt(Math.floor(parseFloat(unstakeAmount) * 1e12));
+
+      // Unbond tokens
+      const tx = api.tx.staking.unbond(amountPlanck.toString());
+      await tx.signAndSend(selectedAccount.address, ({ status }) => {
+        if (status.isInBlock) {
+          Alert.alert(
+            'Success',
+            `Successfully initiated unstaking of ${unstakeAmount} HEZ!\n\nTokens will be available after the unbonding period (28 eras / ~28 days).`
+          );
+          setUnstakeSheetVisible(false);
+          setUnstakeAmount('');
+          fetchStakingData();
+        }
+      });
+    } catch (error: any) {
+      console.error('Unstaking error:', error);
+      Alert.alert('Error', error.message || 'Failed to unstake tokens');
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  if (loading && !stakingData) {
+    return (
+      <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+        <CardSkeleton />
+        <CardSkeleton />
+        <CardSkeleton />
+      </ScrollView>
+    );
+  }
+
+  if (!stakingData) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>Failed to load staking data</Text>
+          <Button title="Retry" onPress={fetchStakingData} />
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        contentContainerStyle={styles.content}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={() => {
+            setRefreshing(true);
+            fetchStakingData();
+          }} />
+        }
+      >
+        {/* Header Card */}
+        <Card style={styles.headerCard}>
+          <Text style={styles.headerTitle}>Total Staked</Text>
+          <Text style={styles.headerAmount}>
+            {formatBalance(stakingData.stakedAmount, 12)} HEZ
+          </Text>
+          <Text style={styles.headerSubtitle}>
+            ≈ ${(parseFloat(formatBalance(stakingData.stakedAmount, 12)) * 0.15).toFixed(2)} USD
+          </Text>
+        </Card>
+
+        {/* Stats Cards */}
+        <View style={styles.statsGrid}>
+          <Card style={styles.statCard}>
+            <Text style={styles.statLabel}>Monthly Reward</Text>
+            <Text style={styles.statValue}>{stakingData.monthlyReward} PEZ</Text>
+          </Card>
+          <Card style={styles.statCard}>
+            <Text style={styles.statLabel}>Est. APY</Text>
+            <Text style={styles.statValue}>{stakingData.estimatedAPY}%</Text>
+          </Card>
+        </View>
+
+        {/* Score Card */}
+        <Card style={styles.scoreCard}>
+          <View style={styles.scoreHeader}>
+            <Text style={styles.scoreTitle}>Your Staking Score</Text>
+            <Badge label={`${stakingData.weightedScore} pts`} variant="primary" />
+          </View>
+          <View style={styles.scoreBreakdown}>
+            <ScoreItem
+              label="Tiki Score"
+              value={stakingData.tikiScore}
+              weight={SCORE_WEIGHTS.tiki}
+            />
+            <ScoreItem
+              label="Citizenship"
+              value={100}
+              weight={SCORE_WEIGHTS.citizenship}
+            />
+          </View>
+          <Text style={styles.scoreNote}>
+            Higher score = Higher monthly PEZ rewards
+          </Text>
+        </Card>
+
+        {/* Unbonding Card */}
+        {parseFloat(formatBalance(stakingData.unbondingAmount, 12)) > 0 && (
+          <Card style={styles.unbondingCard}>
+            <Text style={styles.unbondingTitle}>Unbonding</Text>
+            <Text style={styles.unbondingAmount}>
+              {formatBalance(stakingData.unbondingAmount, 12)} HEZ
+            </Text>
+            <Text style={styles.unbondingNote}>
+              Available after unbonding period (~28 days)
+            </Text>
+          </Card>
+        )}
+
+        {/* Action Buttons */}
+        <View style={styles.actions}>
+          <Button
+            title="Stake HEZ"
+            onPress={() => setStakeSheetVisible(true)}
+            variant="primary"
+            fullWidth
+          />
+          <Button
+            title="Unstake"
+            onPress={() => setUnstakeSheetVisible(true)}
+            variant="outline"
+            fullWidth
+          />
+        </View>
+
+        {/* Info Card */}
+        <Card variant="outlined" style={styles.infoCard}>
+          <Text style={styles.infoTitle}>💡 About Staking</Text>
+          <Text style={styles.infoText}>
+            Stake HEZ tokens to earn monthly PEZ rewards. Your reward amount is based on your staking score, which includes your Tiki roles and citizenship status.
+          </Text>
+        </Card>
+      </ScrollView>
+
+      {/* Stake Bottom Sheet */}
+      <BottomSheet
+        visible={stakeSheetVisible}
+        onClose={() => setStakeSheetVisible(false)}
+        title="Stake HEZ"
+      >
+        <Input
+          label="Amount (HEZ)"
+          value={stakeAmount}
+          onChangeText={setStakeAmount}
+          keyboardType="numeric"
+          placeholder="0.00"
+        />
+        <Button
+          title="Stake"
+          onPress={handleStake}
+          loading={processing}
+          disabled={processing}
+          fullWidth
+          style={{ marginTop: 16 }}
+        />
+      </BottomSheet>
+
+      {/* Unstake Bottom Sheet */}
+      <BottomSheet
+        visible={unstakeSheetVisible}
+        onClose={() => setUnstakeSheetVisible(false)}
+        title="Unstake HEZ"
+      >
+        <Input
+          label="Amount (HEZ)"
+          value={unstakeAmount}
+          onChangeText={setUnstakeAmount}
+          keyboardType="numeric"
+          placeholder="0.00"
+        />
+        <Text style={styles.warningText}>
+          ⚠️ Unstaked tokens will be locked for ~28 days (unbonding period)
+        </Text>
+        <Button
+          title="Unstake"
+          onPress={handleUnstake}
+          loading={processing}
+          disabled={processing}
+          fullWidth
+          style={{ marginTop: 16 }}
+        />
+      </BottomSheet>
+    </View>
+  );
+}
+
+const ScoreItem: React.FC<{ label: string; value: number; weight: number }> = ({
+  label,
+  value,
+  weight,
+}) => (
+  <View style={styles.scoreItem}>
+    <Text style={styles.scoreItemLabel}>{label}</Text>
+    <View style={styles.scoreItemRight}>
+      <Text style={styles.scoreItemValue}>{value} pts</Text>
+      <Text style={styles.scoreItemWeight}>×{weight}%</Text>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: AppColors.background,
+  },
+  content: {
+    padding: 16,
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    fontSize: 16,
+    color: AppColors.textSecondary,
+    marginBottom: 16,
+  },
+  headerCard: {
+    alignItems: 'center',
+    paddingVertical: 24,
+    marginBottom: 16,
+  },
+  headerTitle: {
+    fontSize: 14,
+    color: AppColors.textSecondary,
+    marginBottom: 8,
+  },
+  headerAmount: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: KurdistanColors.kesk,
+    marginBottom: 4,
+  },
+  headerSubtitle: {
+    fontSize: 16,
+    color: AppColors.textSecondary,
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 16,
+  },
+  statCard: {
+    flex: 1,
+    padding: 16,
+  },
+  statLabel: {
+    fontSize: 12,
+    color: AppColors.textSecondary,
+    marginBottom: 8,
+  },
+  statValue: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: AppColors.text,
+  },
+  scoreCard: {
+    marginBottom: 16,
+  },
+  scoreHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  scoreTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: AppColors.text,
+  },
+  scoreBreakdown: {
+    gap: 12,
+    marginBottom: 16,
+  },
+  scoreItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  scoreItemLabel: {
+    fontSize: 14,
+    color: AppColors.text,
+  },
+  scoreItemRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  scoreItemValue: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: AppColors.text,
+  },
+  scoreItemWeight: {
+    fontSize: 12,
+    color: AppColors.textSecondary,
+  },
+  scoreNote: {
+    fontSize: 12,
+    color: AppColors.textSecondary,
+    fontStyle: 'italic',
+  },
+  unbondingCard: {
+    marginBottom: 16,
+    backgroundColor: `${KurdistanColors.zer}10`,
+  },
+  unbondingTitle: {
+    fontSize: 14,
+    color: AppColors.textSecondary,
+    marginBottom: 4,
+  },
+  unbondingAmount: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: AppColors.text,
+    marginBottom: 4,
+  },
+  unbondingNote: {
+    fontSize: 12,
+    color: AppColors.textSecondary,
+  },
+  actions: {
+    gap: 12,
+    marginBottom: 16,
+  },
+  infoCard: {
+    marginBottom: 16,
+  },
+  infoTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: AppColors.text,
+    marginBottom: 8,
+  },
+  infoText: {
+    fontSize: 14,
+    color: AppColors.textSecondary,
+    lineHeight: 20,
+  },
+  warningText: {
+    fontSize: 12,
+    color: KurdistanColors.sor,
+    marginVertical: 12,
+    padding: 12,
+    backgroundColor: `${KurdistanColors.sor}10`,
+    borderRadius: 8,
+  },
+});