diff --git a/mobile/App.tsx b/mobile/App.tsx
index 05d028b6..89509120 100644
--- a/mobile/App.tsx
+++ b/mobile/App.tsx
@@ -8,6 +8,7 @@
 
 import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -48,8 +49,8 @@ function TabNavigator() {
         options={{
           title: "Upload",
           tabBarLabel: "Upload",
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 20, color }}>⬆️</Text>
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="cloud-upload-outline" size={size} color={color} />
           ),
           headerTitle: "DocuElevate",
         }}
@@ -60,8 +61,8 @@ function TabNavigator() {
         options={{
           title: "Files",
           tabBarLabel: "Files",
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 20, color }}>📄</Text>
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="document-text-outline" size={size} color={color} />
           ),
           headerTitle: "My Documents",
         }}
@@ -72,8 +73,8 @@ function TabNavigator() {
         options={{
           title: "Profile",
           tabBarLabel: "Profile",
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 20, color }}>👤</Text>
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="person-circle-outline" size={size} color={color} />
           ),
           headerTitle: "Profile",
         }}
diff --git a/mobile/assets/adaptive-icon.png b/mobile/assets/adaptive-icon.png
index c7612a03..c6b980d1 100644
Binary files a/mobile/assets/adaptive-icon.png and b/mobile/assets/adaptive-icon.png differ
diff --git a/mobile/assets/favicon.png b/mobile/assets/favicon.png
index 5e2e4c59..72fb4fcb 100644
Binary files a/mobile/assets/favicon.png and b/mobile/assets/favicon.png differ
diff --git a/mobile/assets/icon.png b/mobile/assets/icon.png
index b90debad..f56f42d0 100644
Binary files a/mobile/assets/icon.png and b/mobile/assets/icon.png differ
diff --git a/mobile/assets/logo.png b/mobile/assets/logo.png
new file mode 100644
index 00000000..10618d80
Binary files /dev/null and b/mobile/assets/logo.png differ
diff --git a/mobile/assets/notification-icon.png b/mobile/assets/notification-icon.png
index 868ad545..309c1bfa 100644
Binary files a/mobile/assets/notification-icon.png and b/mobile/assets/notification-icon.png differ
diff --git a/mobile/assets/splash.png b/mobile/assets/splash.png
index 9183a7e0..f49af679 100644
Binary files a/mobile/assets/splash.png and b/mobile/assets/splash.png differ
diff --git a/mobile/src/screens/LoginScreen.tsx b/mobile/src/screens/LoginScreen.tsx
index b5fa5cb6..35c11a4f 100644
--- a/mobile/src/screens/LoginScreen.tsx
+++ b/mobile/src/screens/LoginScreen.tsx
@@ -10,6 +10,7 @@ import React, { useState } from "react";
 import {
   ActivityIndicator,
   Alert,
+  Image,
   KeyboardAvoidingView,
   Platform,
   Pressable,
@@ -53,7 +54,15 @@ export default function LoginScreen() {
       behavior={Platform.OS === "ios" ? "padding" : undefined}
     >
       <View style={styles.card}>
-        <Text style={styles.logo}>DocuElevate</Text>
+        <View style={styles.logoContainer}>
+          <Image
+            source={require("../../../assets/logo.png")}
+            style={styles.logoImage}
+            resizeMode="contain"
+            accessibilityLabel="DocuElevate logo"
+          />
+          <Text style={styles.logoText}>DocuElevate</Text>
+        </View>
         <Text style={styles.tagline}>Intelligent Document Processing</Text>
 
         <Text style={styles.label}>Server URL</Text>
@@ -110,12 +119,20 @@ const styles = StyleSheet.create({
     shadowRadius: 12,
     elevation: 4,
   },
-  logo: {
+  logoContainer: {
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  logoImage: {
+    width: 80,
+    height: 80,
+    marginBottom: 10,
+  },
+  logoText: {
     fontSize: 28,
     fontWeight: "700",
     color: "#1e40af",
     textAlign: "center",
-    marginBottom: 4,
   },
   tagline: {
     fontSize: 14,