diff --git a/android/app/build.gradle b/android/app/build.gradle
index 57aaebe..9daee03 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -25,7 +25,7 @@ if (flutterVersionName == null) {
 
 android {
     namespace = "com.nankai.openpeerchat_flutter"
-    compileSdk = flutter.compileSdkVersion
+    compileSdk 34
     ndkVersion = flutter.ndkVersion
 
     compileOptions {
diff --git a/lib/main.dart b/lib/main.dart
index 67ce4fc..41de4be 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -8,6 +8,41 @@ import 'classes/global.dart';
 import 'encyption/key_storage.dart';
 import 'encyption/rsa.dart';
 
+final ThemeData lightTheme = ThemeData(
+  brightness: Brightness.light,
+  primaryColor: Colors.blue,
+  scaffoldBackgroundColor: Colors.white,
+  textTheme: TextTheme(
+    displayLarge: TextStyle(
+      fontSize: 24.0,
+      fontWeight: FontWeight.bold,
+      color: Colors.black,
+    ),
+    bodyLarge: TextStyle(
+      fontSize: 16.0,
+      color: Colors.black87,
+    ),
+  ),
+);
+
+final ThemeData darkTheme = ThemeData(
+  brightness: Brightness.dark,
+  primaryColor: Colors.grey[900],
+  hintColor: Colors.blueAccent,
+  scaffoldBackgroundColor: Colors.grey[850],
+  textTheme: TextTheme(
+    displayLarge: TextStyle(
+      fontSize: 24.0,
+      fontWeight: FontWeight.bold,
+      color: Colors.white,
+    ),
+    bodyLarge: TextStyle(
+      fontSize: 16.0,
+      color: Colors.white70,
+    ),
+  ),
+);
+
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
@@ -48,10 +83,13 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const MaterialApp(
+    return MaterialApp(
       debugShowCheckedModeBanner: false,
       onGenerateRoute: generateRoute,
       initialRoute: '/',
+      theme: lightTheme,
+      darkTheme: darkTheme,
+      themeMode: ThemeMode.system,
     );
   }
 }
diff --git a/lib/pages/home_screen.dart b/lib/pages/home_screen.dart
index ea87b16..1bfe894 100644
--- a/lib/pages/home_screen.dart
+++ b/lib/pages/home_screen.dart
@@ -4,6 +4,7 @@ import 'chat_list_screen.dart';
 import '../classes/global.dart';
 import '../p2p/adhoc_housekeeping.dart';
 import 'device_list_screen.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 
 import '../database/database_helper.dart';
 
@@ -12,6 +13,43 @@ import '../database/database_helper.dart';
 /// As the app launches and navigates to the HomeScreen from the Profile screen,
 /// all the processes of message hopping are being initiated from this page.
 
+const String themePreferenceKey = 'themePreference';
+
+final ThemeData lightTheme = ThemeData(
+  brightness: Brightness.light,
+  primaryColor: Colors.blue,
+  scaffoldBackgroundColor: Colors.white,
+  textTheme: TextTheme(
+    displayLarge: TextStyle(
+      fontSize: 24.0,
+      fontWeight: FontWeight.bold,
+      color: Colors.black,
+    ),
+    bodyLarge: TextStyle(
+      fontSize: 16.0,
+      color: Colors.black87,
+    ),
+  ),
+);
+
+final ThemeData darkTheme = ThemeData(
+  brightness: Brightness.dark,
+  primaryColor: Colors.grey[900],
+  hintColor: Colors.blueAccent,
+  scaffoldBackgroundColor: Colors.grey[850],
+  textTheme: TextTheme(
+    displayLarge: TextStyle(
+      fontSize: 24.0,
+      fontWeight: FontWeight.bold,
+      color: Colors.white,
+    ),
+    bodyLarge: TextStyle(
+      fontSize: 16.0,
+      color: Colors.white70,
+    ),
+  ),
+);
+
 class HomeScreen extends StatefulWidget {
   const HomeScreen({Key? key}) : super(key: key);
 
@@ -22,11 +60,15 @@ class HomeScreen extends StatefulWidget {
 class _HomeScreenState extends State<HomeScreen> {
   bool isLoading = false;
 
+  //initial theme of the system
+  ThemeMode _themeMode = ThemeMode.system;
+
   @override
   void initState() {
     super.initState();
     // init(context);
     refreshMessages();
+    _loadTheme();
   }
 
   /// After reading all the cache, the home screen becomes visible.
@@ -53,49 +95,86 @@ class _HomeScreenState extends State<HomeScreen> {
     super.dispose();
   }
 
+  Future<void> _loadTheme() async {
+    SharedPreferences prefs = await SharedPreferences.getInstance();
+    int? themeIndex = prefs.getInt(themePreferenceKey);
+    if (themeIndex != null) {
+      setState(() {
+        _themeMode = ThemeMode.values[themeIndex];
+      });
+    }
+  }
+
+  Future<void> _saveTheme(ThemeMode mode) async {
+    SharedPreferences prefs = await SharedPreferences.getInstance();
+    await prefs.setInt(themePreferenceKey, mode.index);
+  }
+
+  void _toggleTheme() {
+    setState(() {
+      _themeMode = _themeMode == ThemeMode.light
+          ? ThemeMode.dark
+          : ThemeMode.light;
+    });
+    _saveTheme(_themeMode);
+  }
+
   @override
   Widget build(BuildContext context) {
     return DefaultTabController(
       length: 2,
-      child: Scaffold(
-        key: Global.scaffoldKey,
-        appBar: AppBar(
-          title: const Text("AOSSIE"),
-          actions: [
-            IconButton(
-              icon: const Icon(Icons.person),
-              onPressed: () {
-                Navigator.push(
-                  context,
-                  MaterialPageRoute(
-                    builder: (context) => const Profile(
-                      onLogin: false,
+      child: Theme(
+        data: ThemeData(
+          brightness: _themeMode == ThemeMode.dark
+              ? Brightness.dark
+              : Brightness.light, 
+          // You can further customize the theme here if needed
+        ),
+        child: Scaffold(
+          key: Global.scaffoldKey,
+          appBar: AppBar(
+            title: const Text("AOSSIE"),
+            actions: [
+              //toggle button fro light and dark themes
+              IconButton(
+                onPressed: _toggleTheme,
+                icon: Icon(Icons.toggle_off_outlined),
+              ),
+              IconButton(
+                icon: const Icon(Icons.person),
+                onPressed: () {
+                  Navigator.push(
+                    context,
+                    MaterialPageRoute(
+                      builder: (context) => const Profile(
+                        onLogin: false,
+                      ),
                     ),
-                  ),
-                );
-              },
-            ),
-          ],
-          bottom: const TabBar(
-            tabs: [
-              Tab(
-                text: "Devices",
+                  );
+                },
               ),
-              Tab(
-                text: "All Chats",
+            ],
+            bottom: const TabBar(
+              tabs: [
+                Tab(
+                  text: "Devices",
+                ),
+                Tab(
+                  text: "All Chats",
+                ),
+              ],
+            ),
+          ),
+          body: const TabBarView(
+            children: [
+              DevicesListScreen(
+                deviceType: DeviceType.browser,
               ),
+              ChatListScreen(),
             ],
           ),
         ),
-        body: const TabBarView(
-          children: [
-            DevicesListScreen(
-              deviceType: DeviceType.browser,
-            ),
-            ChatListScreen(),
-          ],
-        ),
       ),
     );
   }
-}
+}
\ No newline at end of file
diff --git a/macos/Flutter/GeneratedPluginRegistrant.swift b/macos/Flutter/GeneratedPluginRegistrant.swift
index 14cd431..9d4b458 100644
--- a/macos/Flutter/GeneratedPluginRegistrant.swift
+++ b/macos/Flutter/GeneratedPluginRegistrant.swift
@@ -9,7 +9,7 @@ import flutter_secure_storage_macos
 import local_auth_darwin
 import path_provider_foundation
 import shared_preferences_foundation
-import sqflite
+import sqflite_darwin
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   FlutterSecureStoragePlugin.register(with: registry.registrar(forPlugin: "FlutterSecureStoragePlugin"))