diff --git a/frontend/App.tsx b/frontend/App.tsx
new file mode 100644
index 00000000..5fc932a5
--- /dev/null
+++ b/frontend/App.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import LanguageScreen from './src/screens/LanguageScreen';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/screens/LanguageScreen.tsx b/frontend/src/screens/LanguageScreen.tsx
new file mode 100644
index 00000000..f83e8747
--- /dev/null
+++ b/frontend/src/screens/LanguageScreen.tsx
@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+ SafeAreaView,
+ ScrollView,
+ Image,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+const LANGUAGES = [
+ { code: 'en', name: 'English', nativeName: 'English' },
+ { code: 'ku', name: 'Kurdish (Kurmanji)', nativeName: 'Kurdî (Kurmancî)' },
+ { code: 'ckb', name: 'Kurdish (Sorani)', nativeName: 'کوردی (سۆرانی)' },
+ { code: 'tr', name: 'Turkish', nativeName: 'Türkçe' },
+ { code: 'ar', name: 'Arabic', nativeName: 'العربية' },
+ { code: 'fa', name: 'Persian', nativeName: 'فارسی' },
+];
+
+export default function LanguageScreen({ navigation }: any) {
+ const [selected, setSelected] = useState('en');
+
+ return (
+
+
+
+
+ ☀️
+
+
+ PezkuwiChain
+ Digital Citizenship Platform
+
+
+
+ Select Your Language
+
+ {LANGUAGES.map((lang) => (
+ setSelected(lang.code)}
+ activeOpacity={0.7}
+ >
+
+ {lang.name}
+ {lang.nativeName}
+
+ {selected === lang.code && (
+
+ )}
+
+ ))}
+
+
+
+ alert('Selected: ' + selected)}
+ >
+ Continue
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#F8F9FA',
+ },
+ header: {
+ alignItems: 'center',
+ paddingTop: 40,
+ paddingBottom: 30,
+ backgroundColor: '#FFF',
+ borderBottomWidth: 1,
+ borderBottomColor: '#E5E7EB',
+ },
+ logoContainer: {
+ marginBottom: 20,
+ },
+ sunLogo: {
+ width: 80,
+ height: 80,
+ borderRadius: 40,
+ backgroundColor: '#FFF',
+ alignItems: 'center',
+ justifyContent: 'center',
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.1,
+ shadowRadius: 8,
+ elevation: 4,
+ },
+ sunEmoji: {
+ fontSize: 50,
+ },
+ title: {
+ fontSize: 28,
+ fontWeight: '700',
+ color: '#1F2937',
+ marginBottom: 4,
+ },
+ subtitle: {
+ fontSize: 14,
+ color: '#6B7280',
+ },
+ content: {
+ flex: 1,
+ padding: 20,
+ },
+ instruction: {
+ fontSize: 18,
+ fontWeight: '600',
+ color: '#1F2937',
+ marginBottom: 20,
+ },
+ languageCard: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ backgroundColor: '#FFF',
+ padding: 16,
+ borderRadius: 12,
+ marginBottom: 12,
+ borderWidth: 2,
+ borderColor: '#FFF',
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 1 },
+ shadowOpacity: 0.05,
+ shadowRadius: 2,
+ elevation: 2,
+ },
+ languageCardSelected: {
+ borderColor: '#00A651',
+ backgroundColor: '#F0FDF4',
+ },
+ languageName: {
+ fontSize: 16,
+ fontWeight: '600',
+ color: '#1F2937',
+ marginBottom: 2,
+ },
+ languageNative: {
+ fontSize: 14,
+ color: '#6B7280',
+ },
+ footer: {
+ padding: 20,
+ backgroundColor: '#FFF',
+ borderTopWidth: 1,
+ borderTopColor: '#E5E7EB',
+ },
+ continueButton: {
+ backgroundColor: '#EE2A35',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: 16,
+ borderRadius: 12,
+ gap: 8,
+ },
+ continueText: {
+ fontSize: 16,
+ fontWeight: '600',
+ color: '#FFF',
+ },
+});