diff --git a/lib/src/views/settings/profile/modify_avatar_view.dart b/lib/src/views/settings/profile/modify_avatar_view.dart
new file mode 100644
index 0000000..4682ac7
--- /dev/null
+++ b/lib/src/views/settings/profile/modify_avatar_view.dart
@@ -0,0 +1,135 @@
+import 'dart:math';
+import 'package:avatar_maker/avatar_maker.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:twonly/src/json_models/userdata.dart';
+import 'package:twonly/src/providers/api/api.dart';
+import 'package:twonly/src/providers/settings_change_provider.dart';
+import 'package:twonly/src/utils/misc.dart';
+import 'package:twonly/src/utils/storage.dart';
+
+class ModifyAvatar extends StatelessWidget {
+  const ModifyAvatar({super.key});
+
+  Future updateUserAvatar(String json, String svg) async {
+    UserData? user = await getUser();
+    if (user == null) return null;
+
+    user.avatarJson = json;
+    user.avatarSvg = svg;
+    if (user.avatarCounter == null) {
+      user.avatarCounter = 1;
+    } else {
+      user.avatarCounter = user.avatarCounter! + 1;
+    }
+    await updateUser(user);
+    await notifyContactsAboutProfileChange();
+  }
+
+  AvatarMakerThemeData getAvatarMakerTheme(BuildContext context) {
+    ThemeMode? selectedTheme =
+        context.watch<SettingsChangeProvider>().themeMode;
+
+    bool isDarkMode =
+        MediaQuery.of(context).platformBrightness == Brightness.dark;
+
+    if (selectedTheme == ThemeMode.dark ||
+        (selectedTheme == ThemeMode.system && isDarkMode)) {
+      return AvatarMakerThemeData(
+        boxDecoration: BoxDecoration(
+          boxShadow: [BoxShadow()],
+        ),
+        unselectedTileDecoration: BoxDecoration(
+          color: const Color.fromARGB(255, 50, 50, 50), // Dark mode color
+          borderRadius: BorderRadius.circular(10),
+        ),
+        selectedTileDecoration: BoxDecoration(
+          color: const Color.fromARGB(255, 100, 100, 100), // Dark mode color
+          borderRadius: BorderRadius.circular(10),
+        ),
+        selectedIconColor: Colors.white,
+        unselectedIconColor: Colors.grey,
+        primaryBgColor: Colors.black, // Dark mode background
+        secondaryBgColor: Colors.grey[850]!, // Dark mode secondary background
+        labelTextStyle:
+            TextStyle(color: Colors.white), // Light text for dark mode
+      );
+    } else {
+      return AvatarMakerThemeData(
+        boxDecoration: BoxDecoration(
+          boxShadow: [BoxShadow()],
+        ),
+        unselectedTileDecoration: BoxDecoration(
+          color: const Color.fromARGB(255, 240, 240, 240), // Light mode color
+          borderRadius: BorderRadius.circular(10),
+        ),
+        selectedTileDecoration: BoxDecoration(
+          color: const Color.fromARGB(255, 200, 200, 200), // Light mode color
+          borderRadius: BorderRadius.circular(10),
+        ),
+        selectedIconColor: Colors.black,
+        unselectedIconColor: Colors.grey,
+        primaryBgColor: Colors.white, // Light mode background
+        secondaryBgColor: Colors.grey[200]!, // Light mode secondary background
+        labelTextStyle:
+            TextStyle(color: Colors.black), // Dark text for light mode
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var width = MediaQuery.of(context).size.width;
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(context.lang.settingsProfileCustomizeAvatar),
+      ),
+      body: Center(
+        child: SingleChildScrollView(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 00),
+                child: AvatarMakerAvatar(
+                  radius: 130,
+                  backgroundColor: Colors.transparent,
+                ),
+              ),
+              SizedBox(
+                width: min(600, width * 0.85),
+                child: Row(
+                  children: [
+                    Spacer(),
+                    AvatarMakerSaveWidget(
+                      onTap: () async {
+                        final json =
+                            await AvatarMakerController.getJsonOptions();
+                        final svg = await AvatarMakerController.getAvatarSVG();
+                        await updateUserAvatar(json, svg);
+                        if (context.mounted) {
+                          Navigator.pop(context);
+                        }
+                      },
+                    ),
+                    AvatarMakerRandomWidget(),
+                    AvatarMakerResetWidget(),
+                  ],
+                ),
+              ),
+              Padding(
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 8.0, vertical: 30),
+                child: AvatarMakerCustomizer(
+                  scaffoldWidth: min(600, width * 0.85),
+                  autosave: false,
+                  theme: getAvatarMakerTheme(context),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/src/views/settings/profile_view.dart b/lib/src/views/settings/profile/profile_view.dart
similarity index 53%
rename from lib/src/views/settings/profile_view.dart
rename to lib/src/views/settings/profile/profile_view.dart
index c735596..11056f0 100644
--- a/lib/src/views/settings/profile_view.dart
+++ b/lib/src/views/settings/profile/profile_view.dart
@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:avatar_maker/avatar_maker.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
@@ -8,6 +6,7 @@ import 'package:twonly/src/json_models/userdata.dart';
 import 'package:twonly/src/providers/api/api.dart';
 import 'package:twonly/src/utils/misc.dart';
 import 'package:twonly/src/utils/storage.dart';
+import 'package:twonly/src/views/settings/profile/modify_avatar_view.dart';
 
 class ProfileView extends StatefulWidget {
   const ProfileView({super.key});
@@ -94,99 +93,6 @@ class _ProfileViewState extends State<ProfileView> {
   }
 }
 
-class ModifyAvatar extends StatelessWidget {
-  const ModifyAvatar({super.key});
-
-  Future updateUserAvatar(String json, String svg) async {
-    UserData? user = await getUser();
-    if (user == null) return null;
-
-    user.avatarJson = json;
-    user.avatarSvg = svg;
-    if (user.avatarCounter == null) {
-      user.avatarCounter = 1;
-    } else {
-      user.avatarCounter = user.avatarCounter! + 1;
-    }
-    await updateUser(user);
-    await notifyContactsAboutProfileChange();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    var _width = MediaQuery.of(context).size.width;
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(context.lang.settingsProfileCustomizeAvatar),
-      ),
-      body: Center(
-        child: SingleChildScrollView(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: [
-              Padding(
-                padding: const EdgeInsets.symmetric(vertical: 00),
-                child: AvatarMakerAvatar(
-                  radius: 130,
-                  backgroundColor: Colors.transparent,
-                ),
-              ),
-              SizedBox(
-                width: min(600, _width * 0.85),
-                child: Row(
-                  children: [
-                    Spacer(),
-                    AvatarMakerSaveWidget(
-                      onTap: () async {
-                        final json =
-                            await AvatarMakerController.getJsonOptions();
-                        final svg = await AvatarMakerController.getAvatarSVG();
-                        await updateUserAvatar(json, svg);
-                        if (context.mounted) {
-                          Navigator.pop(context);
-                        }
-                      },
-                    ),
-                    AvatarMakerRandomWidget(),
-                    AvatarMakerResetWidget(),
-                  ],
-                ),
-              ),
-              Padding(
-                padding:
-                    const EdgeInsets.symmetric(horizontal: 8.0, vertical: 30),
-                child: AvatarMakerCustomizer(
-                  scaffoldWidth: min(600, _width * 0.85),
-                  autosave: false,
-                  theme: AvatarMakerThemeData(
-                    boxDecoration: BoxDecoration(
-                      boxShadow: [BoxShadow()],
-                    ),
-                    unselectedTileDecoration: BoxDecoration(
-                      color: const Color.fromARGB(255, 83, 83, 83),
-                      borderRadius: BorderRadius.circular(10),
-                    ),
-                    selectedTileDecoration: BoxDecoration(
-                      color: const Color.fromARGB(255, 117, 117, 117),
-                      borderRadius: BorderRadius.circular(10),
-                    ),
-                    selectedIconColor: Colors.white,
-                    unselectedIconColor: Colors.grey,
-                    primaryBgColor: Colors.transparent,
-                    secondaryBgColor: Colors.transparent,
-                    labelTextStyle: TextStyle(
-                        color: Theme.of(context).colorScheme.tertiary),
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
 Future<String?> showDisplayNameChangeDialog(
     BuildContext context, String currentName) {
   final TextEditingController controller =
diff --git a/lib/src/views/settings/settings_main_view.dart b/lib/src/views/settings/settings_main_view.dart
index 4823334..e6a3ae2 100644
--- a/lib/src/views/settings/settings_main_view.dart
+++ b/lib/src/views/settings/settings_main_view.dart
@@ -9,7 +9,7 @@ import 'package:twonly/src/views/settings/account_view.dart';
 import 'package:twonly/src/views/settings/appearance_view.dart';
 import 'package:twonly/src/views/settings/chat_settings_view.dart';
 import 'package:twonly/src/views/settings/notification_view.dart';
-import 'package:twonly/src/views/settings/profile_view.dart';
+import 'package:twonly/src/views/settings/profile/profile_view.dart';
 import 'package:twonly/src/views/settings/help_view.dart';
 import 'package:twonly/src/views/settings/privacy_view.dart';