diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index b9eeef8..ac1cd90 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -9,5 +9,10 @@ jobs:
         with:
             channel: beta
             cache: true
+            
+      - name: Make envfile
+        uses: SpicyPizza/create-envfile@v2.0
+        with:
+          envkey_API_URL: ${{ secrets.API_URL }}
         
       - run: flutter test
\ No newline at end of file
diff --git a/.github/workflows/web.yml b/.github/workflows/web.yml
index 6b74560..7caea45 100644
--- a/.github/workflows/web.yml
+++ b/.github/workflows/web.yml
@@ -19,6 +19,11 @@ jobs:
         with:
           channel: beta
           cache: true
+      
+      - name: Make envfile
+        uses: SpicyPizza/create-envfile@v2.0
+        with:
+          envkey_API_URL: ${{ secrets.API_URL }}
 
       - name: Run Tests
         run: flutter test
diff --git a/.gitignore b/.gitignore
index 8f94e0e..01bf524 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,7 +19,7 @@ migrate_working_dir/
 # The .vscode folder contains launch configuration and tasks you configure in
 # VS Code which you may wish to be included in version control, so this line
 # is commented out by default.
-#.vscode/
+.vscode/
 
 # Flutter/Dart/Pub related
 **/doc/api/
@@ -44,3 +44,4 @@ app.*.map.json
 
 # Until I change the config for dev and release
 web/flutter_bootstrap.js
+.env*
diff --git a/README.md b/README.md
index 91acc1b..e13d1b2 100644
--- a/README.md
+++ b/README.md
@@ -28,17 +28,16 @@ with the data of multiples sites about the Samba Schools in Brazil 🇧🇷
 - [x] Offload initialization of the main method
 - [x] Personalized Widgets with helper extensions
 - [x] Pagination and TextSearch to the API
+- [x] Make web deploy automatic
+- [x] Make design adaptive for material3
+- [x] Deploy in Web
+- [x] Use Dio Cache
 
 # To do
 
-- [ ] Deploy in Web
+
 - [ ] Testing
-- [ ] Make deploy automatic
-- [ ] Make design adaptive for material3
-- [ ] Search in the 3 tabs
 - [ ] Load Favorites by separate at the start
-- [ ] Update Parades Design
-- [ ] Fix some schools image names
 - [ ] Add Instruments photos
 - [ ] Add Instruments learning text
-- [ ] Store data in cache for offline use
+
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 5c0045b..dd0be15 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -20,6 +20,7 @@
               android:name="io.flutter.embedding.android.NormalTheme"
               android:resource="@style/NormalTheme"
               />
+           
             <intent-filter>
                 <action android:name="android.intent.action.MAIN"/>
                 <category android:name="android.intent.category.LAUNCHER"/>
@@ -30,6 +31,9 @@
         <meta-data
             android:name="flutterEmbedding"
             android:value="2" />
+         <meta-data
+              android:name="io.flutter.embedding.android.EnableImpeller"
+              android:value="true" />
     </application>
     <!-- Required to query activities that can process text, see:
          https://developer.android.com/training/package-visibility and
diff --git a/android/app/src/main/res/drawable-hdpi/branding.png b/android/app/src/main/res/drawable-hdpi/branding.png
new file mode 100644
index 0000000..533a915
Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-mdpi/branding.png b/android/app/src/main/res/drawable-mdpi/branding.png
new file mode 100644
index 0000000..0db9a71
Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-v21/launch_background.xml b/android/app/src/main/res/drawable-v21/launch_background.xml
index f88598c..4e9fdda 100644
--- a/android/app/src/main/res/drawable-v21/launch_background.xml
+++ b/android/app/src/main/res/drawable-v21/launch_background.xml
@@ -3,4 +3,7 @@
     <item>
         <bitmap android:gravity="fill" android:src="@drawable/background"/>
     </item>
+    <item>
+        <bitmap android:gravity="bottom" android:src="@drawable/branding"/>
+    </item>
 </layer-list>
diff --git a/android/app/src/main/res/drawable-xhdpi/branding.png b/android/app/src/main/res/drawable-xhdpi/branding.png
new file mode 100644
index 0000000..7d41bc8
Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/branding.png b/android/app/src/main/res/drawable-xxhdpi/branding.png
new file mode 100644
index 0000000..7f32273
Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/branding.png b/android/app/src/main/res/drawable-xxxhdpi/branding.png
new file mode 100644
index 0000000..620d6e2
Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable/launch_background.xml b/android/app/src/main/res/drawable/launch_background.xml
index f88598c..4e9fdda 100644
--- a/android/app/src/main/res/drawable/launch_background.xml
+++ b/android/app/src/main/res/drawable/launch_background.xml
@@ -3,4 +3,7 @@
     <item>
         <bitmap android:gravity="fill" android:src="@drawable/background"/>
     </item>
+    <item>
+        <bitmap android:gravity="bottom" android:src="@drawable/branding"/>
+    </item>
 </layer-list>
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png
index 299dfea..7e279d3 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
index f408303..aaa1cb8 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png
index 22f84fb..3be3471 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
index 1cee4b7..da7825f 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png
index e05322d..18c07d0 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
index 4973d28..0062df1 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png
index d5f02d8..b99f040 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
index 1774e98..22b1cbd 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png
index 534ffa9..b82727a 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
index b252431..192813d 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/assets/ic_background.png b/assets/ic_background.png
index 3bf6509..bf6048c 100644
Binary files a/assets/ic_background.png and b/assets/ic_background.png differ
diff --git a/assets/ic_foreground.png b/assets/ic_foreground.png
index fe08c32..e2a9eb5 100644
Binary files a/assets/ic_foreground.png and b/assets/ic_foreground.png differ
diff --git a/assets/ic_logo.png b/assets/ic_logo.png
new file mode 100644
index 0000000..688d1ce
Binary files /dev/null and b/assets/ic_logo.png differ
diff --git a/coverage/lcov.info b/coverage/lcov.info
index 90f9738..a7c2578 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -1,50 +1,49 @@
 SF:lib/constants.dart
-DA:10,0
+DA:12,0
 LF:1
 LH:0
 end_of_record
 SF:lib/core/providers/client_network.dart
-DA:20,0
-DA:22,0
-DA:24,0
+DA:21,0
+DA:23,0
 DA:25,0
 DA:26,0
 DA:27,0
 DA:28,0
 DA:29,0
-DA:31,0
-DA:33,0
+DA:30,0
+DA:32,0
 DA:34,0
-DA:37,0
-DA:39,0
+DA:35,0
+DA:38,0
 DA:40,0
 DA:41,0
 DA:42,0
 DA:43,0
-DA:47,0
-DA:51,0
+DA:44,0
+DA:48,0
 DA:52,0
 DA:53,0
 DA:54,0
-DA:61,0
-DA:63,0
-DA:65,0
-DA:67,0
-DA:80,0
+DA:55,0
+DA:62,0
+DA:64,0
+DA:66,0
+DA:68,0
 DA:81,0
-DA:82,1
+DA:82,0
 DA:83,1
-DA:84,0
+DA:84,3
 DA:85,0
 DA:86,0
-DA:93,0
-DA:95,0
+DA:87,0
+DA:94,0
 DA:96,0
-DA:98,0
+DA:97,0
 DA:99,0
-DA:101,0
+DA:100,0
 DA:102,0
-DA:104,0
+DA:103,0
 DA:105,0
 DA:106,0
 DA:107,0
@@ -53,503 +52,569 @@ DA:109,0
 DA:110,0
 DA:111,0
 DA:112,0
+DA:113,0
 LF:49
 LH:2
 end_of_record
 SF:lib/core/providers/client_network.g.dart
 DA:9,0
-DA:13,2
-DA:14,1
+DA:13,0
+DA:14,0
 LF:3
-LH:2
-end_of_record
-SF:lib/common_widgets/app_back_button.dart
-DA:7,6
-DA:9,0
-DA:11,0
-DA:15,0
-DA:16,0
-DA:17,0
-DA:20,0
-DA:21,0
-LF:8
-LH:1
+LH:0
 end_of_record
-SF:lib/core/extensions/is_ios_or_macos_platform_extension.dart
-DA:3,0
-DA:4,0
-DA:5,0
-LF:3
+SF:lib/core/extensions/app_localization_extension.dart
+DA:6,0
+LF:1
 LH:0
 end_of_record
-SF:lib/core/extensions/theme_of_context_extension.dart
-DA:8,0
-DA:10,0
-DA:11,0
+SF:lib/l10n/app_localizations.dart
+DA:65,0
+DA:69,0
+DA:70,0
+DA:648,6
+DA:650,0
+DA:652,0
+DA:655,0
+DA:656,0
+DA:658,0
+DA:662,0
+DA:666,0
+DA:667,0
+DA:668,0
+DA:669,0
+DA:670,0
+DA:673,0
+LF:16
+LH:1
+end_of_record
+SF:lib/localization/language.dart
 DA:12,0
+DA:13,0
 DA:14,0
-DA:17,0
-DA:18,0
+DA:15,0
+DA:16,0
 DA:19,0
 DA:20,0
 DA:21,0
 DA:22,0
 DA:23,0
-DA:24,0
-DA:25,0
 DA:26,0
 DA:27,0
 DA:28,0
 DA:29,0
-DA:32,0
-DA:33,0
-DA:34,0
-DA:35,0
-DA:36,0
-DA:37,0
+DA:30,0
+DA:33,1
+DA:34,1
+DA:35,1
+DA:36,1
+DA:37,1
+DA:40,0
 DA:41,0
 DA:42,0
 DA:43,0
 DA:44,0
-DA:47,0
-DA:48,0
-DA:49,0
-DA:50,0
-DA:53,0
-DA:54,0
-DA:55,0
-LF:35
-LH:0
-end_of_record
-SF:lib/common_widgets/app_cupertino_button.dart
-DA:10,0
-DA:23,0
-DA:46,0
-DA:48,0
-DA:52,0
-DA:53,0
-DA:54,0
+DA:47,1
+DA:48,2
+DA:50,4
 DA:55,0
 DA:56,0
 DA:57,0
-DA:64,0
-DA:65,0
-DA:66,0
-DA:68,0
-DA:69,0
-DA:70,0
-DA:71,0
-DA:72,0
-DA:73,0
-DA:74,0
-DA:76,0
-DA:77,0
-DA:78,0
-DA:80,0
-DA:82,0
-DA:100,0
-DA:105,0
-DA:106,0
-DA:107,0
-DA:108,0
-LF:30
-LH:0
+DA:58,0
+DA:59,0
+LF:33
+LH:8
 end_of_record
-SF:lib/common_widgets/app_cupertino_sliver_navigation_bar.dart
-DA:13,0
-DA:26,0
+SF:lib/localization/language_app_controller.dart
+DA:10,1
+DA:12,4
+DA:13,1
+DA:14,4
+DA:16,1
+DA:17,3
+DA:18,1
+DA:22,1
+DA:25,4
+DA:26,1
+DA:27,1
+DA:29,2
+DA:31,2
+LF:13
+LH:13
+end_of_record
+SF:lib/localization/language_app_controller.g.dart
+DA:9,0
+DA:14,2
+DA:15,1
+LF:3
+LH:2
+end_of_record
+SF:lib/utils/app_loggers.dart
+DA:4,0
+DA:5,3
+DA:6,0
+DA:7,0
+DA:8,0
+DA:12,0
+DA:14,0
+DA:16,0
+DA:18,0
+DA:19,0
+DA:20,0
+DA:22,0
+DA:23,0
+DA:25,0
 DA:28,0
-DA:30,0
-DA:32,0
 DA:33,0
-DA:36,0
-DA:37,0
+DA:34,0
 DA:38,0
 DA:39,0
 DA:40,0
 DA:41,0
 DA:42,0
-DA:46,0
-DA:47,0
+DA:44,0
+DA:49,0
 DA:51,0
 DA:52,0
-DA:56,0
-DA:57,0
+DA:53,0
+DA:54,0
 DA:58,0
-LF:20
-LH:0
+LF:29
+LH:1
 end_of_record
-SF:lib/core/extensions/js_bottom_padding_extension.dart
-DA:1,0
-DA:2,0
-DA:3,0
-DA:4,0
-LF:4
+SF:lib/core/providers/client_network/network_client_adapter.dart
+DA:5,0
+DA:6,0
+DA:7,0
+DA:8,0
+DA:9,0
+DA:15,0
+DA:16,0
+LF:7
 LH:0
 end_of_record
-SF:lib/features/home/widgets/settings_modal_sheet.dart
-DA:12,0
+SF:lib/core/providers/prefs.g.dart
+DA:9,1
+DA:13,9
+LF:2
+LH:2
+end_of_record
+SF:lib/core/providers/prefs.dart
+DA:6,1
+DA:8,1
+LF:2
+LH:2
+end_of_record
+SF:lib/l10n/app_localizations_en.dart
+DA:5,0
+DA:7,0
+DA:10,0
+DA:13,0
 DA:16,0
+DA:19,0
 DA:22,0
+DA:25,0
 DA:28,0
-DA:33,0
-DA:35,0
+DA:31,0
+DA:34,0
 DA:37,0
-DA:39,0
-DA:41,0
-DA:42,0
-DA:45,0
+DA:40,0
+DA:43,0
 DA:46,0
-DA:50,0
-DA:51,0
+DA:49,0
 DA:52,0
-DA:53,0
 DA:55,0
-DA:56,0
-DA:57,0
-DA:80,6
-DA:82,0
-DA:84,0
-DA:86,0
+DA:58,0
+DA:61,0
+DA:64,0
+DA:67,0
+DA:70,0
+DA:73,0
+DA:76,0
+DA:79,0
+DA:82,0
+DA:85,0
 DA:88,0
-DA:89,0
-DA:90,0
-DA:92,0
-DA:96,0
+DA:91,0
+DA:94,0
 DA:97,0
-DA:98,0
-DA:99,0
 DA:100,0
-DA:101,0
-DA:104,0
+DA:103,0
 DA:106,0
-DA:108,0
 DA:109,0
-DA:111,0
 DA:112,0
 DA:115,0
-LF:40
-LH:1
+DA:118,0
+DA:121,0
+DA:124,0
+DA:127,0
+DA:130,0
+DA:133,0
+DA:136,0
+DA:139,0
+DA:142,0
+DA:145,0
+DA:148,0
+DA:151,0
+DA:154,0
+DA:157,0
+DA:160,0
+DA:163,0
+DA:166,0
+DA:169,0
+DA:172,0
+DA:175,0
+DA:178,0
+DA:181,0
+DA:184,0
+DA:187,0
+DA:190,0
+DA:193,0
+DA:196,0
+DA:199,0
+DA:202,0
+DA:205,0
+DA:208,0
+DA:211,0
+DA:214,0
+DA:217,0
+DA:220,0
+DA:223,0
+DA:226,0
+DA:229,0
+DA:232,0
+DA:235,0
+DA:238,0
+DA:241,0
+DA:244,0
+DA:247,0
+DA:250,0
+DA:253,0
+DA:256,0
+DA:259,0
+DA:262,0
+DA:265,0
+DA:268,0
+DA:271,0
+DA:274,0
+DA:277,0
+LF:92
+LH:0
 end_of_record
-SF:lib/utils/screen_size.dart
-DA:8,0
-DA:9,0
+SF:lib/l10n/app_localizations_es.dart
+DA:5,0
+DA:7,0
 DA:10,0
-DA:12,0
 DA:13,0
-DA:14,0
-DA:15,0
-DA:18,0
+DA:16,0
 DA:19,0
-DA:20,0
-DA:21,0
-DA:24,0
+DA:22,0
+DA:25,0
 DA:28,0
-DA:29,0
-DA:30,0
 DA:31,0
-DA:36,0
-DA:37,0
-DA:52,0
-LF:19
-LH:0
-end_of_record
-SF:lib/common_widgets/app_fade_in_image.dart
-DA:18,0
+DA:34,0
 DA:37,0
-DA:39,0
 DA:40,0
-DA:41,0
 DA:43,0
-DA:44,0
-DA:45,0
 DA:46,0
-DA:48,0
 DA:49,0
-DA:50,0
-DA:51,0
 DA:52,0
-DA:53,0
-DA:54,0
-DA:57,0
+DA:55,0
 DA:58,0
-DA:59,0
-DA:65,0
+DA:61,0
+DA:64,0
+DA:67,0
+DA:70,0
+DA:73,0
+DA:76,0
+DA:79,0
 DA:82,0
-DA:84,0
 DA:85,0
-DA:86,0
 DA:88,0
-DA:89,0
-DA:90,0
-DA:93,0
+DA:91,0
 DA:94,0
-DA:99,0
+DA:97,0
 DA:100,0
-DA:104,0
-DA:105,0
-LF:33
-LH:0
-end_of_record
-SF:lib/core/extensions/app_localization_extension.dart
-DA:6,0
-LF:1
+DA:103,0
+DA:106,0
+DA:109,0
+DA:112,0
+DA:115,0
+DA:118,0
+DA:121,0
+DA:124,0
+DA:127,0
+DA:130,0
+DA:133,0
+DA:136,0
+DA:139,0
+DA:142,0
+DA:145,0
+DA:148,0
+DA:151,0
+DA:154,0
+DA:157,0
+DA:160,0
+DA:163,0
+DA:166,0
+DA:169,0
+DA:172,0
+DA:175,0
+DA:178,0
+DA:181,0
+DA:184,0
+DA:187,0
+DA:190,0
+DA:193,0
+DA:196,0
+DA:199,0
+DA:202,0
+DA:205,0
+DA:208,0
+DA:211,0
+DA:214,0
+DA:217,0
+DA:220,0
+DA:223,0
+DA:226,0
+DA:229,0
+DA:232,0
+DA:235,0
+DA:238,0
+DA:241,0
+DA:244,0
+DA:247,0
+DA:250,0
+DA:253,0
+DA:256,0
+DA:259,0
+DA:262,0
+DA:265,0
+DA:268,0
+DA:271,0
+DA:274,0
+DA:277,0
+LF:92
 LH:0
 end_of_record
-SF:lib/utils/app_loggers.dart
-DA:4,0
-DA:5,3
-DA:6,0
+SF:lib/l10n/app_localizations_ja.dart
+DA:5,0
 DA:7,0
-DA:8,0
-DA:12,0
-DA:14,0
+DA:10,0
+DA:13,0
 DA:16,0
-DA:18,0
 DA:19,0
-DA:20,0
 DA:22,0
-DA:23,0
 DA:25,0
 DA:28,0
-DA:33,0
+DA:31,0
 DA:34,0
-DA:38,0
-DA:39,0
+DA:37,0
 DA:40,0
-DA:41,0
-DA:42,0
-DA:44,0
-DA:49,0
-DA:51,0
-DA:52,0
-DA:53,0
-DA:54,0
-DA:58,0
-LF:29
-LH:1
-end_of_record
-SF:lib/common_widgets/app_web_padding.dart
-DA:11,0
-DA:21,0
-DA:30,0
-DA:41,0
-DA:44,0
-DA:45,0
+DA:43,0
 DA:46,0
-DA:47,0
-DA:48,0
 DA:49,0
-DA:50,0
 DA:52,0
-DA:56,0
+DA:55,0
+DA:58,0
 DA:61,0
-DA:77,0
-DA:86,0
-DA:90,0
-DA:93,0
-DA:94,0
-DA:95,0
-DA:96,0
-DA:97,0
-DA:98,0
-DA:99,0
-DA:100,0
-DA:102,0
-DA:107,0
-LF:27
-LH:0
-end_of_record
-SF:lib/l10n/app_localizations.dart
-DA:65,0
-DA:69,0
+DA:64,0
+DA:67,0
 DA:70,0
-DA:636,6
-DA:638,0
-DA:640,0
-DA:643,0
-DA:644,0
-DA:646,0
-DA:650,0
-DA:654,0
-DA:655,0
-DA:656,0
-DA:657,0
-DA:658,0
-DA:661,0
-LF:16
-LH:1
-end_of_record
-SF:lib/core/extensions/text_lines_extension.dart
-DA:6,0
-DA:7,0
-DA:8,0
-DA:10,0
-DA:13,0
-DA:15,0
-DA:18,0
-DA:24,0
-DA:26,0
-LF:9
-LH:0
-end_of_record
-SF:lib/core/theme/app_theme.dart
-DA:9,0
-DA:31,0
-DA:32,0
-DA:34,0
-DA:35,0
-DA:38,0
-DA:57,0
-DA:58,0
-DA:61,0
-DA:62,0
-DA:63,0
-DA:66,0
-DA:69,0
-DA:72,0
 DA:73,0
-DA:74,0
-DA:75,0
 DA:76,0
-DA:77,0
-DA:78,0
-DA:80,0
-DA:81,0
-DA:83,0
-DA:98,0
+DA:79,0
+DA:82,0
+DA:85,0
+DA:88,0
+DA:91,0
+DA:94,0
+DA:97,0
+DA:100,0
+DA:103,0
 DA:106,0
-DA:113,0
-DA:120,0
-DA:125,0
-DA:126,0
+DA:109,0
+DA:112,0
+DA:115,0
+DA:118,0
+DA:121,0
+DA:124,0
 DA:127,0
-DA:128,0
-DA:129,0
 DA:130,0
-DA:134,0
+DA:133,0
 DA:136,0
-DA:140,0
-DA:141,0
+DA:139,0
 DA:142,0
-DA:143,0
-DA:144,0
 DA:145,0
-LF:41
+DA:148,0
+DA:151,0
+DA:154,0
+DA:157,0
+DA:160,0
+DA:163,0
+DA:166,0
+DA:169,0
+DA:172,0
+DA:175,0
+DA:178,0
+DA:181,0
+DA:184,0
+DA:187,0
+DA:190,0
+DA:193,0
+DA:196,0
+DA:199,0
+DA:202,0
+DA:205,0
+DA:208,0
+DA:211,0
+DA:214,0
+DA:217,0
+DA:220,0
+DA:223,0
+DA:226,0
+DA:229,0
+DA:232,0
+DA:235,0
+DA:238,0
+DA:241,0
+DA:244,0
+DA:247,0
+DA:250,0
+DA:253,0
+DA:256,0
+DA:259,0
+DA:262,0
+DA:265,0
+DA:268,0
+DA:271,0
+DA:274,0
+DA:277,0
+LF:92
 LH:0
 end_of_record
-SF:lib/localization/language.dart
-DA:12,0
+SF:lib/l10n/app_localizations_pt.dart
+DA:5,0
+DA:7,0
+DA:10,0
 DA:13,0
-DA:14,0
-DA:15,0
 DA:16,0
 DA:19,0
-DA:20,0
-DA:21,0
 DA:22,0
-DA:23,0
-DA:26,0
-DA:27,0
+DA:25,0
 DA:28,0
-DA:29,0
-DA:30,0
-DA:33,1
-DA:34,1
-DA:35,1
-DA:36,1
-DA:37,1
+DA:31,0
+DA:34,0
+DA:37,0
 DA:40,0
-DA:41,0
-DA:42,0
 DA:43,0
-DA:44,0
-DA:47,1
-DA:48,2
-DA:50,4
+DA:46,0
+DA:49,0
+DA:52,0
 DA:55,0
-DA:56,0
-DA:57,0
 DA:58,0
-DA:59,0
-LF:33
-LH:8
-end_of_record
-SF:lib/localization/language_app_controller.dart
-DA:10,1
-DA:12,4
-DA:13,1
-DA:14,4
-DA:16,1
-DA:17,3
-DA:18,1
-DA:22,1
-DA:25,4
-DA:26,1
-DA:27,1
-DA:29,2
-DA:31,2
-LF:13
-LH:13
-end_of_record
-SF:lib/localization/language_app_controller.g.dart
-DA:9,0
-DA:14,2
-DA:15,1
-LF:3
-LH:2
-end_of_record
-SF:lib/core/providers/client_network/network_client_adapter.dart
-DA:5,0
-DA:6,0
-DA:7,0
-DA:8,0
-DA:9,0
-DA:15,0
-DA:16,0
-LF:7
+DA:61,0
+DA:64,0
+DA:67,0
+DA:70,0
+DA:73,0
+DA:76,0
+DA:79,0
+DA:82,0
+DA:85,0
+DA:88,0
+DA:91,0
+DA:94,0
+DA:97,0
+DA:100,0
+DA:103,0
+DA:106,0
+DA:109,0
+DA:112,0
+DA:115,0
+DA:118,0
+DA:121,0
+DA:124,0
+DA:127,0
+DA:130,0
+DA:133,0
+DA:136,0
+DA:139,0
+DA:142,0
+DA:145,0
+DA:148,0
+DA:151,0
+DA:154,0
+DA:157,0
+DA:160,0
+DA:163,0
+DA:166,0
+DA:169,0
+DA:172,0
+DA:175,0
+DA:178,0
+DA:181,0
+DA:184,0
+DA:187,0
+DA:190,0
+DA:193,0
+DA:196,0
+DA:199,0
+DA:202,0
+DA:205,0
+DA:208,0
+DA:211,0
+DA:214,0
+DA:217,0
+DA:220,0
+DA:223,0
+DA:226,0
+DA:229,0
+DA:232,0
+DA:235,0
+DA:238,0
+DA:241,0
+DA:244,0
+DA:247,0
+DA:250,0
+DA:253,0
+DA:256,0
+DA:259,0
+DA:262,0
+DA:265,0
+DA:268,0
+DA:271,0
+DA:274,0
+DA:277,0
+LF:92
 LH:0
 end_of_record
-SF:lib/core/providers/prefs.g.dart
-DA:9,1
-DA:13,9
-LF:2
-LH:2
-end_of_record
-SF:lib/core/providers/prefs.dart
-DA:6,1
-DA:8,1
-LF:2
-LH:2
-end_of_record
-SF:lib/core/theme/theme_mode_controller.dart
-DA:11,1
-DA:14,4
-DA:15,1
-DA:18,1
-DA:19,1
-DA:23,0
-DA:29,1
-DA:30,1
+SF:lib/theme/theme_mode_controller.dart
+DA:13,1
+DA:16,4
+DA:17,1
+DA:20,1
+DA:21,1
+DA:25,0
 DA:31,1
-DA:32,4
+DA:32,1
 DA:33,1
-DA:34,1
-DA:35,3
+DA:34,4
+DA:35,1
 DA:36,1
-DA:37,1
+DA:37,3
 DA:38,1
-DA:39,4
+DA:39,1
 DA:40,1
-DA:41,1
+DA:41,4
 DA:42,1
-DA:43,4
+DA:43,1
 DA:44,1
-DA:45,1
-DA:49,1
-DA:50,4
-DA:52,1
-DA:53,1
+DA:45,4
+DA:46,1
+DA:47,1
+DA:51,1
+DA:52,4
 DA:54,1
 DA:55,1
 DA:56,1
@@ -557,709 +622,619 @@ DA:57,1
 DA:58,1
 DA:59,1
 DA:60,1
-DA:67,1
-DA:70,5
-DA:73,3
-DA:79,1
-DA:80,4
-DA:81,2
-DA:82,1
+DA:61,1
+DA:62,1
+DA:69,1
+DA:72,5
+DA:75,3
+DA:81,1
+DA:82,4
 DA:83,2
-DA:85,1
-LF:43
+DA:84,1
+DA:85,2
+DA:87,1
+DA:94,0
+DA:96,0
+DA:97,0
+DA:99,0
+DA:102,0
+DA:105,0
+DA:108,0
+DA:109,0
+DA:110,0
+DA:112,0
+DA:113,0
+DA:115,0
+DA:118,0
+DA:119,0
+DA:122,0
+DA:125,0
+DA:126,0
+DA:127,0
+DA:128,0
+DA:129,0
+LF:63
 LH:42
 end_of_record
-SF:lib/core/theme/theme_mode_controller.g.dart
+SF:lib/theme/theme_mode_controller.g.dart
 DA:9,0
 DA:14,2
 DA:15,1
 DA:26,1
 DA:30,2
 DA:31,1
-LF:6
+DA:42,0
+DA:46,0
+DA:47,0
+LF:9
 LH:5
 end_of_record
-SF:lib/features/home/widgets/settings_theme_section.dart
-DA:9,6
-DA:11,0
-DA:13,0
-DA:14,0
-DA:16,0
-DA:17,0
-DA:19,0
-DA:20,0
-DA:21,0
-DA:23,0
-DA:27,0
-DA:28,0
-DA:29,0
-DA:30,0
+SF:lib/theme/app_theme_colors.dart
+DA:18,0
+DA:25,0
 DA:33,0
-DA:35,0
-DA:36,0
-DA:38,0
-DA:39,0
+DA:34,0
+DA:39,3
 DA:41,0
 DA:43,0
-DA:45,0
+DA:44,0
 DA:47,0
-DA:49,0
-DA:54,0
-DA:55,0
-DA:57,0
-DA:58,0
-DA:61,0
-DA:63,0
-DA:64,0
-DA:65,0
-DA:68,0
-DA:69,0
-DA:71,0
-DA:73,0
-DA:75,0
-DA:76,0
-DA:77,0
-LF:39
+DA:50,0
+DA:52,0
+LF:11
 LH:1
 end_of_record
-SF:lib/features/instruments/details/instrument_details_controller.g.dart
-DA:9,0
-DA:14,0
-DA:16,0
-DA:18,0
-DA:20,0
+SF:lib/features/instruments/instrument.dart
 DA:21,0
+LF:1
+LH:0
+end_of_record
+SF:lib/features/instruments/instruments_repo.dart
+DA:10,0
+DA:12,0
 DA:24,0
 DA:26,0
-DA:28,0
 DA:29,0
-DA:49,6
-DA:55,0
-DA:58,0
-DA:62,0
-DA:66,0
-DA:69,0
-DA:74,0
-DA:79,0
-DA:80,0
-DA:85,0
-DA:86,0
-DA:91,0
-DA:99,0
-DA:103,0
-DA:112,0
-DA:114,0
-DA:115,0
-DA:128,0
-DA:136,0
-DA:140,0
-DA:144,0
-DA:145,0
-DA:149,0
-DA:151,0
-DA:153,0
-DA:154,0
-DA:155,0
-DA:160,0
-DA:165,0
-DA:167,0
-DA:170,0
-DA:173,0
-DA:176,0
-DA:179,0
-DA:180,0
-DA:181,0
-DA:182,0
-DA:183,0
-DA:184,0
-DA:185,0
-DA:186,0
-DA:190,0
-DA:192,0
-DA:195,0
-DA:197,0
-DA:198,0
-DA:200,0
-DA:213,0
-DA:215,0
-DA:216,0
-LF:60
+DA:31,0
+DA:32,0
+DA:34,0
+DA:35,0
+DA:36,0
+DA:39,0
+DA:43,0
+DA:46,0
+DA:47,0
+DA:48,0
+DA:51,0
+DA:53,0
+LF:17
+LH:0
+end_of_record
+SF:lib/features/instruments/instruments_repo.g.dart
+DA:9,0
+DA:13,3
+LF:2
 LH:1
 end_of_record
-SF:lib/features/instruments/details/instrument_details_controller.dart
+SF:lib/utils/immutable_list.dart
 DA:9,0
 DA:11,0
-DA:12,0
 DA:13,0
-DA:14,0
+DA:15,0
 DA:16,0
+DA:23,0
 LF:6
 LH:0
 end_of_record
-SF:lib/features/instruments/instrument.dart
-DA:21,0
-LF:1
-LH:0
-end_of_record
-SF:lib/features/instruments/instruments_tab_controller.dart
+SF:lib/common_widgets/app_back_button.dart
+DA:7,2
+DA:9,0
 DA:11,0
-DA:13,0
+DA:15,0
 DA:16,0
 DA:17,0
-DA:18,0
-DA:19,0
 DA:20,0
-LF:7
+DA:21,0
+LF:8
+LH:1
+end_of_record
+SF:lib/core/extensions/is_ios_or_macos_platform_extension.dart
+DA:3,0
+DA:4,0
+DA:5,0
+LF:3
 LH:0
 end_of_record
-SF:lib/features/instruments/instruments_tab_controller.g.dart
+SF:lib/core/extensions/theme_of_context_extension.dart
 DA:9,0
+DA:10,0
+DA:12,0
+DA:13,0
 DA:14,0
-LF:2
-LH:0
-end_of_record
-SF:lib/features/instruments/details/instrument_details_page.dart
+DA:16,0
 DA:19,0
+DA:20,0
+DA:21,0
+DA:22,0
+DA:23,0
+DA:24,0
 DA:25,0
+DA:26,0
 DA:27,0
+DA:28,0
+DA:29,0
+DA:30,0
+DA:31,0
+DA:34,0
 DA:35,0
+DA:36,0
 DA:37,0
 DA:38,0
-DA:41,0
-DA:42,0
+DA:39,0
 DA:43,0
 DA:44,0
 DA:45,0
 DA:46,0
-DA:47,0
-DA:48,0
 DA:49,0
+DA:50,0
+DA:51,0
 DA:52,0
-DA:54,0
+DA:55,0
 DA:56,0
-DA:63,0
-DA:64,0
-DA:65,0
-DA:66,0
-DA:67,0
-DA:68,0
-DA:72,0
-DA:74,0
-DA:76,0
-DA:77,0
-DA:84,0
-DA:86,0
-DA:87,0
-DA:88,0
-DA:92,0
-DA:93,0
-DA:101,0
-DA:102,0
-DA:103,0
-DA:110,0
-DA:112,0
-DA:114,0
-DA:115,0
-DA:116,0
-DA:117,0
-DA:120,0
-DA:121,0
-DA:122,0
-DA:123,0
-DA:125,0
-DA:126,0
-DA:127,0
-DA:129,0
-DA:130,0
-DA:148,0
-DA:153,0
-LF:54
-LH:0
-end_of_record
-SF:lib/features/instruments/details/widgets/instrument_details_summary.dart
-DA:5,0
-DA:12,0
-DA:14,0
-DA:15,0
-DA:16,0
-DA:17,0
-DA:19,0
-DA:20,0
-DA:22,0
-DA:23,0
-DA:24,0
-LF:11
+DA:57,0
+LF:36
 LH:0
 end_of_record
-SF:lib/features/instruments/details/widgets/instrument_header_images.dart
-DA:12,0
-DA:22,0
-DA:24,0
+SF:lib/common_widgets/app_cupertino_sliver_navigation_bar.dart
+DA:11,0
 DA:26,0
 DA:28,0
 DA:30,0
 DA:31,0
 DA:32,0
-DA:34,0
 DA:35,0
 DA:36,0
 DA:37,0
 DA:38,0
-DA:39,0
+DA:40,0
 DA:41,0
 DA:42,0
-DA:44,0
-DA:45,0
 DA:46,0
-DA:53,0
-DA:57,0
-DA:58,0
-DA:59,0
-DA:61,0
-DA:62,0
-DA:74,0
-DA:75,0
-DA:77,0
-DA:79,0
-DA:80,0
-DA:82,0
-DA:83,0
-DA:84,0
-DA:85,0
-DA:93,0
-DA:97,0
-DA:99,0
-DA:100,0
-DA:111,0
-DA:112,0
-DA:114,0
-DA:115,0
-DA:116,0
-DA:117,0
-DA:118,0
-DA:119,0
-DA:120,0
-DA:121,0
-DA:122,0
-DA:141,0
-DA:146,0
-DA:147,0
-DA:148,0
-DA:149,0
-DA:154,0
-LF:55
+DA:47,0
+DA:51,0
+LF:16
 LH:0
 end_of_record
-SF:lib/utils/immutable_list.dart
+SF:lib/core/extensions/js_bottom_padding_extension.dart
+DA:1,0
+DA:2,0
+DA:3,0
+DA:4,0
+LF:4
+LH:0
+end_of_record
+SF:lib/utils/screen_size.dart
 DA:8,0
+DA:9,0
 DA:10,0
 DA:12,0
+DA:13,0
 DA:14,0
 DA:15,0
-LF:5
-LH:0
-end_of_record
-SF:lib/features/instruments/instruments_repo.dart
-DA:10,0
-DA:12,0
+DA:18,0
+DA:19,0
+DA:20,0
+DA:21,0
 DA:24,0
-DA:26,0
+DA:28,0
 DA:29,0
+DA:30,0
 DA:31,0
-DA:32,0
-DA:34,0
-DA:35,0
 DA:36,0
+DA:37,0
+DA:52,0
+LF:19
+LH:0
+end_of_record
+SF:lib/common_widgets/app_fade_in_image.dart
+DA:18,0
+DA:37,0
 DA:39,0
-DA:43,0
+DA:40,0
+DA:41,0
+DA:44,0
+DA:45,0
 DA:46,0
 DA:47,0
-DA:48,0
+DA:49,0
+DA:50,0
 DA:51,0
+DA:52,0
 DA:53,0
-LF:17
+DA:54,0
+DA:55,0
+DA:58,0
+DA:59,0
+DA:60,0
+DA:66,0
+DA:83,0
+DA:85,0
+DA:86,0
+DA:87,0
+DA:89,0
+DA:90,0
+DA:91,0
+DA:94,0
+DA:95,0
+DA:100,0
+DA:101,0
+DA:105,0
+DA:106,0
+LF:33
 LH:0
 end_of_record
-SF:lib/features/instruments/instruments_repo.g.dart
-DA:9,0
-DA:13,3
-LF:2
-LH:1
+SF:lib/common_widgets/app_web_padding.dart
+DA:11,0
+DA:21,0
+DA:30,0
+DA:41,0
+DA:44,0
+DA:45,0
+DA:46,0
+DA:47,0
+DA:48,0
+DA:49,0
+DA:50,0
+DA:52,0
+DA:56,0
+DA:61,0
+DA:77,0
+DA:86,0
+DA:90,0
+DA:93,0
+DA:94,0
+DA:95,0
+DA:96,0
+DA:97,0
+DA:98,0
+DA:99,0
+DA:100,0
+DA:102,0
+DA:107,0
+LF:27
+LH:0
 end_of_record
-SF:lib/l10n/app_localizations_en.dart
-DA:5,0
+SF:lib/core/extensions/text_lines_extension.dart
+DA:6,0
 DA:7,0
+DA:8,0
 DA:10,0
 DA:13,0
-DA:16,0
+DA:15,0
+DA:18,0
+DA:24,0
+DA:26,0
+LF:9
+LH:0
+end_of_record
+SF:lib/theme/app_theme.dart
+DA:11,0
+DA:13,0
+DA:14,0
+DA:15,0
+DA:17,0
+DA:18,0
 DA:19,0
-DA:22,0
-DA:25,0
-DA:28,0
-DA:31,0
-DA:34,0
-DA:37,0
-DA:40,0
+DA:20,0
+DA:42,0
 DA:43,0
+DA:45,0
 DA:46,0
-DA:49,0
+DA:47,0
 DA:52,0
+DA:53,0
 DA:55,0
-DA:58,0
+DA:56,0
+DA:57,0
+DA:59,0
+DA:60,0
 DA:61,0
-DA:64,0
-DA:67,0
-DA:70,0
-DA:73,0
+DA:62,0
+DA:65,0
 DA:76,0
-DA:79,0
+DA:77,0
+DA:80,0
+DA:81,0
 DA:82,0
-DA:85,0
-DA:88,0
-DA:91,0
-DA:94,0
+DA:83,0
+DA:89,0
+DA:93,0
+DA:96,0
 DA:97,0
+DA:98,0
+DA:99,0
 DA:100,0
-DA:103,0
-DA:106,0
-DA:109,0
-DA:112,0
-DA:115,0
-DA:118,0
-DA:121,0
-DA:124,0
-DA:127,0
+DA:101,0
+DA:102,0
+DA:104,0
+DA:105,0
+DA:107,0
+DA:122,0
 DA:130,0
-DA:133,0
-DA:136,0
-DA:139,0
-DA:142,0
-DA:145,0
-DA:148,0
+DA:137,0
+DA:144,0
+DA:149,0
+DA:150,0
 DA:151,0
+DA:152,0
+DA:153,0
 DA:154,0
-DA:157,0
+DA:158,0
 DA:160,0
-DA:163,0
+DA:164,0
+DA:165,0
 DA:166,0
+DA:167,0
+DA:168,0
 DA:169,0
-DA:172,0
-DA:175,0
-DA:178,0
-DA:181,0
-DA:184,0
-DA:187,0
-DA:190,0
-DA:193,0
-DA:196,0
-DA:199,0
-DA:202,0
-DA:205,0
-DA:208,0
-DA:211,0
-DA:214,0
-DA:217,0
-DA:220,0
-DA:223,0
-DA:226,0
-DA:229,0
-DA:232,0
-DA:235,0
-DA:238,0
-DA:241,0
-DA:244,0
-DA:247,0
-DA:250,0
-DA:253,0
-DA:256,0
-DA:259,0
-DA:262,0
-DA:265,0
-DA:268,0
-DA:271,0
-LF:90
+LF:59
 LH:0
 end_of_record
-SF:lib/l10n/app_localizations_es.dart
-DA:5,0
-DA:7,0
-DA:10,0
-DA:13,0
-DA:16,0
-DA:19,0
-DA:22,0
-DA:25,0
-DA:28,0
-DA:31,0
-DA:34,0
-DA:37,0
+SF:lib/features/instruments/details/gallery_page/instruments_gallery_page.dart
+DA:11,0
+DA:24,0
+DA:26,0
+DA:36,0
+DA:38,0
 DA:40,0
+DA:41,0
+DA:42,0
 DA:43,0
+DA:44,0
 DA:46,0
-DA:49,0
+DA:47,0
+DA:48,0
+DA:50,0
+DA:51,0
 DA:52,0
-DA:55,0
-DA:58,0
-DA:61,0
-DA:64,0
-DA:67,0
+DA:53,0
+DA:56,0
+DA:57,0
+DA:65,0
+DA:66,0
+DA:68,0
 DA:70,0
+DA:72,0
 DA:73,0
-DA:76,0
+DA:84,0
+DA:86,0
+DA:87,0
+DA:92,0
+DA:93,0
+DA:96,0
+DA:97,0
+DA:99,0
+DA:101,0
+LF:34
+LH:0
+end_of_record
+SF:lib/features/instruments/details/instrument_details_controller.dart
+DA:9,0
+DA:11,0
+DA:12,0
+DA:13,0
+DA:14,0
+DA:16,0
+LF:6
+LH:0
+end_of_record
+SF:lib/features/instruments/details/instrument_details_controller.g.dart
+DA:9,0
+DA:14,0
+DA:16,0
+DA:18,0
+DA:20,0
+DA:21,0
+DA:24,0
+DA:26,0
+DA:28,0
+DA:29,0
+DA:49,2
+DA:55,0
+DA:58,0
+DA:62,0
+DA:66,0
+DA:69,0
+DA:74,0
 DA:79,0
-DA:82,0
+DA:80,0
 DA:85,0
-DA:88,0
+DA:86,0
 DA:91,0
-DA:94,0
-DA:97,0
-DA:100,0
+DA:99,0
 DA:103,0
-DA:106,0
-DA:109,0
 DA:112,0
+DA:114,0
 DA:115,0
-DA:118,0
-DA:121,0
-DA:124,0
-DA:127,0
-DA:130,0
-DA:133,0
+DA:128,0
 DA:136,0
-DA:139,0
-DA:142,0
+DA:140,0
+DA:144,0
 DA:145,0
-DA:148,0
+DA:149,0
 DA:151,0
+DA:153,0
 DA:154,0
-DA:157,0
-DA:160,0
-DA:163,0
-DA:166,0
-DA:169,0
-DA:172,0
-DA:175,0
-DA:178,0
-DA:181,0
-DA:184,0
-DA:187,0
-DA:190,0
-DA:193,0
-DA:196,0
-DA:199,0
-DA:202,0
-DA:205,0
-DA:208,0
-DA:211,0
-DA:214,0
-DA:217,0
-DA:220,0
-DA:223,0
-DA:226,0
-DA:229,0
-DA:232,0
-DA:235,0
-DA:238,0
-DA:241,0
-DA:244,0
-DA:247,0
-DA:250,0
-DA:253,0
-DA:256,0
-DA:259,0
-DA:262,0
-DA:265,0
-DA:268,0
-DA:271,0
-LF:90
-LH:0
+DA:155,0
+DA:160,0
+DA:165,0
+DA:167,0
+DA:170,0
+DA:173,0
+DA:176,0
+DA:179,0
+DA:180,0
+DA:181,0
+DA:182,0
+DA:183,0
+DA:184,0
+DA:185,0
+DA:186,0
+DA:190,0
+DA:192,0
+DA:195,0
+DA:197,0
+DA:198,0
+DA:200,0
+DA:213,0
+DA:215,0
+DA:216,0
+LF:60
+LH:1
 end_of_record
-SF:lib/l10n/app_localizations_ja.dart
-DA:5,0
-DA:7,0
-DA:10,0
+SF:lib/features/instruments/instruments_tab_controller.dart
+DA:11,0
 DA:13,0
 DA:16,0
+DA:17,0
+DA:18,0
+DA:19,0
+DA:20,0
+LF:7
+LH:0
+end_of_record
+SF:lib/features/instruments/instruments_tab_controller.g.dart
+DA:9,0
+DA:14,0
+LF:2
+LH:0
+end_of_record
+SF:lib/features/instruments/details/instrument_details_page.dart
 DA:19,0
-DA:22,0
 DA:25,0
-DA:28,0
-DA:31,0
-DA:34,0
+DA:27,0
+DA:35,0
 DA:37,0
-DA:40,0
+DA:38,0
+DA:41,0
+DA:42,0
 DA:43,0
+DA:44,0
+DA:45,0
 DA:46,0
+DA:47,0
+DA:48,0
 DA:49,0
 DA:52,0
-DA:55,0
-DA:58,0
-DA:61,0
+DA:54,0
+DA:56,0
+DA:63,0
 DA:64,0
+DA:65,0
+DA:66,0
 DA:67,0
-DA:70,0
-DA:73,0
+DA:68,0
+DA:72,0
+DA:74,0
 DA:76,0
-DA:79,0
-DA:82,0
-DA:85,0
-DA:88,0
+DA:77,0
+DA:84,0
+DA:86,0
+DA:89,0
+DA:90,0
 DA:91,0
-DA:94,0
-DA:97,0
-DA:100,0
-DA:103,0
+DA:95,0
+DA:96,0
+DA:104,0
+DA:105,0
 DA:106,0
-DA:109,0
-DA:112,0
-DA:115,0
+DA:114,0
+DA:116,0
 DA:118,0
+DA:119,0
+DA:120,0
 DA:121,0
 DA:124,0
+DA:125,0
+DA:126,0
 DA:127,0
+DA:129,0
 DA:130,0
+DA:131,0
 DA:133,0
-DA:136,0
-DA:139,0
-DA:142,0
-DA:145,0
-DA:148,0
-DA:151,0
-DA:154,0
+DA:134,0
+DA:152,0
 DA:157,0
-DA:160,0
-DA:163,0
-DA:166,0
-DA:169,0
-DA:172,0
-DA:175,0
-DA:178,0
-DA:181,0
-DA:184,0
-DA:187,0
-DA:190,0
-DA:193,0
-DA:196,0
-DA:199,0
-DA:202,0
-DA:205,0
-DA:208,0
-DA:211,0
-DA:214,0
-DA:217,0
-DA:220,0
-DA:223,0
-DA:226,0
-DA:229,0
-DA:232,0
-DA:235,0
-DA:238,0
-DA:241,0
-DA:244,0
-DA:247,0
-DA:250,0
-DA:253,0
-DA:256,0
-DA:259,0
-DA:262,0
-DA:265,0
-DA:268,0
-DA:271,0
-LF:90
+LF:55
 LH:0
 end_of_record
-SF:lib/l10n/app_localizations_pt.dart
+SF:lib/features/instruments/details/widgets/instrument_details_summary.dart
 DA:5,0
-DA:7,0
-DA:10,0
-DA:13,0
+DA:12,0
+DA:14,0
+DA:15,0
 DA:16,0
+DA:17,0
 DA:19,0
+DA:20,0
 DA:22,0
+DA:23,0
+DA:24,0
+LF:11
+LH:0
+end_of_record
+SF:lib/features/instruments/details/widgets/instrument_header_images.dart
+DA:11,0
+DA:21,0
+DA:23,0
 DA:25,0
-DA:28,0
+DA:27,0
+DA:29,0
+DA:30,0
 DA:31,0
+DA:33,0
 DA:34,0
+DA:35,0
+DA:36,0
 DA:37,0
+DA:38,0
 DA:40,0
+DA:41,0
 DA:43,0
-DA:46,0
 DA:49,0
-DA:52,0
+DA:53,0
+DA:54,0
 DA:55,0
+DA:57,0
 DA:58,0
-DA:61,0
-DA:64,0
-DA:67,0
 DA:70,0
+DA:71,0
 DA:73,0
+DA:75,0
 DA:76,0
-DA:79,0
-DA:82,0
-DA:85,0
+DA:78,0
+DA:84,0
 DA:88,0
+DA:90,0
 DA:91,0
-DA:94,0
-DA:97,0
-DA:100,0
+DA:102,0
 DA:103,0
+DA:105,0
 DA:106,0
+DA:107,0
+DA:108,0
 DA:109,0
+DA:110,0
+DA:111,0
 DA:112,0
-DA:115,0
-DA:118,0
-DA:121,0
-DA:124,0
-DA:127,0
-DA:130,0
-DA:133,0
-DA:136,0
+DA:113,0
+DA:132,0
+DA:137,0
+DA:138,0
 DA:139,0
-DA:142,0
-DA:145,0
-DA:148,0
-DA:151,0
-DA:154,0
-DA:157,0
-DA:160,0
-DA:163,0
-DA:166,0
-DA:169,0
-DA:172,0
-DA:175,0
-DA:178,0
-DA:181,0
-DA:184,0
-DA:187,0
-DA:190,0
-DA:193,0
-DA:196,0
-DA:199,0
-DA:202,0
-DA:205,0
-DA:208,0
-DA:211,0
-DA:214,0
-DA:217,0
-DA:220,0
-DA:223,0
-DA:226,0
-DA:229,0
-DA:232,0
-DA:235,0
-DA:238,0
-DA:241,0
-DA:244,0
-DA:247,0
-DA:250,0
-DA:253,0
-DA:256,0
-DA:259,0
-DA:262,0
-DA:265,0
-DA:268,0
-DA:271,0
-LF:90
+DA:140,0
+DA:141,0
+LF:50
 LH:0
 end_of_record
 SF:lib/features/schools/school.dart
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png
index cd067ee..a3516ae 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png
index 36bbd93..d780356 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png
index e6f5d7f..d829568 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png
index 8f3fc3b..c2de42e 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png
index 19d4799..1244c3f 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png
index f24c217..550ecff 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png
index 473208c..d25198e 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png
index e6f5d7f..d829568 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png
index 2a72dc1..f9f7823 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png
index d558e6c..8eb50d2 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png
index d558e6c..8eb50d2 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png
index e708f24..018a639 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png
index 97d6390..02ad478 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png
index 51f0215..36ac255 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png
index 91cd46e..a86cfed 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage.png b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage.png
new file mode 100644
index 0000000..0db9a71
Binary files /dev/null and b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage.png differ
diff --git a/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@2x.png b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@2x.png
new file mode 100644
index 0000000..7d41bc8
Binary files /dev/null and b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@3x.png b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@3x.png
new file mode 100644
index 0000000..7f32273
Binary files /dev/null and b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/BrandingImage.imageset/Contents.json b/ios/Runner/Assets.xcassets/BrandingImage.imageset/Contents.json
new file mode 100644
index 0000000..1271227
--- /dev/null
+++ b/ios/Runner/Assets.xcassets/BrandingImage.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "BrandingImage.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "BrandingImage@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "BrandingImage@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/ios/Runner/Base.lproj/LaunchScreen.storyboard b/ios/Runner/Base.lproj/LaunchScreen.storyboard
index 55c0cae..a157da0 100644
--- a/ios/Runner/Base.lproj/LaunchScreen.storyboard
+++ b/ios/Runner/Base.lproj/LaunchScreen.storyboard
@@ -18,9 +18,12 @@
                         <subviews>
                             <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" image="LaunchBackground" translatesAutoresizingMaskIntoConstraints="NO" id="tWc-Dq-wcI"/>
                             <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4"></imageView>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" image="BrandingImage" translatesAutoresizingMaskIntoConstraints="NO" id="Uyq-Kz-ftE"/>
                         </subviews>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
+                            <constraint firstAttribute="bottom" secondItem="Uyq-Kz-ftE" secondAttribute="bottom" id="8Yb-q4-8bl"/>
+                            <constraint firstItem="Uyq-Kz-ftE" firstAttribute="centerX" secondItem="YRO-k0-Ey4" secondAttribute="centerX" id="3kg-TC-cPP"/>
                             <constraint firstItem="YRO-k0-Ey4" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="3T2-ad-Qdv"/>
                             <constraint firstItem="tWc-Dq-wcI" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="RPx-PI-7Xg"/>
                             <constraint firstItem="tWc-Dq-wcI" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="SdS-ul-q2q"/>
@@ -40,5 +43,6 @@
     <resources>
         <image name="LaunchImage" width="168" height="185"/>
         <image name="LaunchBackground" width="1" height="1"/>
+        <image name="BrandingImage" width="1" height="1"/>
     </resources>
 </document>
diff --git a/lib/common_widgets/app_animation_wrapper.dart b/lib/common_widgets/app_animation_wrapper.dart
index 1bb54c0..636793d 100644
--- a/lib/common_widgets/app_animation_wrapper.dart
+++ b/lib/common_widgets/app_animation_wrapper.dart
@@ -6,14 +6,15 @@ class AppAnimationWrapper extends StatefulWidget {
     super.key,
     this.keepAlive = false,
     this.duration = const Duration(milliseconds: 350),
+    this.start = 0.6,
+    this.end = 1.0,
   });
 
   final bool keepAlive;
   final Widget child;
   final Duration duration;
-
-  static const start = 0.6;
-  static const end = 1.0;
+  final double start;
+  final double end;
 
   @override
   State<AppAnimationWrapper> createState() => _AppAnimationWrapperState();
@@ -26,8 +27,8 @@ class _AppAnimationWrapperState extends State<AppAnimationWrapper>
     duration: widget.duration,
   )..forward();
   late final Animation<double> _animation = Tween<double>(
-    begin: AppAnimationWrapper.start,
-    end: AppAnimationWrapper.end,
+    begin: widget.start,
+    end: widget.end,
   ).animate(
     CurvedAnimation(
       parent: _controller,
diff --git a/lib/common_widgets/app_async_widget.dart b/lib/common_widgets/app_async_widget.dart
index 8deec35..7897303 100644
--- a/lib/common_widgets/app_async_widget.dart
+++ b/lib/common_widgets/app_async_widget.dart
@@ -11,46 +11,53 @@ class AppAsyncWidget<T> extends StatelessWidget {
   const AppAsyncWidget({
     required this.asyncValue,
     required this.child,
-    super.key,
     this.onErrorRetry,
+    this.loadingWidget,
+    super.key,
   });
 
   final AsyncValue<T> asyncValue;
   final VoidCallback? onErrorRetry;
+  final Widget? loadingWidget;
+
   final Widget child;
 
   @override
   Widget build(BuildContext context) {
-    return switch (asyncValue) {
-      AsyncData() => child,
-      AsyncError(:final error) => Center(
-          key: const ValueKey('error'),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Text(
-                error.toString(),
-                style: Theme.of(context).textTheme.titleLarge,
-              ),
-              if (onErrorRetry != null)
-                CupertinoButton(
-                  onPressed: onErrorRetry,
-                  child: Text(context.loc.retry),
+    return AnimatedSwitcher(
+      duration: kThemeAnimationDuration,
+      child: switch (asyncValue) {
+        AsyncData() => child,
+        AsyncError(:final error) => Center(
+            key: const ValueKey('error'),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(
+                  error.toString(),
+                  style: Theme.of(context).textTheme.titleLarge,
                 ),
-            ],
-          ),
-        ),
-      AsyncLoading() => const Center(
-          key: ValueKey('loading'),
-          child: Center(
-            child: SizedBox(
-              width: 32,
-              height: 32,
-              child: CircularProgressIndicator.adaptive(),
+                if (onErrorRetry != null)
+                  CupertinoButton(
+                    onPressed: onErrorRetry,
+                    child: Text(context.loc.retry),
+                  ),
+              ],
             ),
           ),
-        ),
-    };
+        AsyncLoading() => loadingWidget ??
+            const Center(
+              key: ValueKey('loading'),
+              child: Center(
+                child: SizedBox(
+                  width: 32,
+                  height: 32,
+                  child: CircularProgressIndicator.adaptive(),
+                ),
+              ),
+            ),
+      },
+    );
   }
 }
 
@@ -59,12 +66,14 @@ class AppAsyncSliverWidget<T> extends StatefulWidget {
     required this.asyncValue,
     required this.child,
     this.onErrorRetry,
+    this.loadingSliver,
     super.key,
   });
 
   final AsyncValue<T> asyncValue;
   final VoidCallback? onErrorRetry;
   final Widget Function(T) child;
+  final Widget? loadingSliver;
 
   @override
   State<AppAsyncSliverWidget<T>> createState() =>
@@ -82,16 +91,17 @@ class _AppAsyncSliverWidgetState<T> extends State<AppAsyncSliverWidget<T>> {
       duration: kThemeAnimationDuration,
       child: switch (widget.asyncValue) {
         AsyncData(:final value) => widget.child(value),
-        AsyncLoading() => const SliverFillRemaining(
-            key: ValueKey('loading'),
-            child: Center(
-              child: SizedBox(
-                width: 32,
-                height: 32,
-                child: CircularProgressIndicator.adaptive(),
+        AsyncLoading() => widget.loadingSliver ??
+            const SliverFillRemaining(
+              key: ValueKey('loading'),
+              child: Center(
+                child: SizedBox(
+                  width: 32,
+                  height: 32,
+                  child: CircularProgressIndicator.adaptive(),
+                ),
               ),
             ),
-          ),
         AsyncError(:final error) => SliverFillRemaining(
             key: const ValueKey('error'),
             child: Padding(
diff --git a/lib/common_widgets/app_cupertino_button.dart b/lib/common_widgets/app_cupertino_button.dart
index 29f26d4..0053cae 100644
--- a/lib/common_widgets/app_cupertino_button.dart
+++ b/lib/common_widgets/app_cupertino_button.dart
@@ -1,4 +1,3 @@
-import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
@@ -15,7 +14,7 @@ class AppCupertinoButton extends StatelessWidget {
     this.disabledColor,
     this.icon,
     this.padding = EdgeInsets.zero,
-    this.minSize,
+    this.minSize = kMinInteractiveDimensionCupertino,
     this.borderRadius = const BorderRadius.all(Radius.circular(32)),
     this.type = CupertinoButtonType.plain,
   });
@@ -23,21 +22,34 @@ class AppCupertinoButton extends StatelessWidget {
   const AppCupertinoButton.tinted({
     required this.child,
     required this.onPressed,
-    required this.color,
+    this.color,
     super.key,
     this.disabledColor,
     this.icon,
     this.borderRadius = const BorderRadius.all(Radius.circular(12)),
-    this.padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
+    this.padding = EdgeInsets.zero,
     this.type = CupertinoButtonType.tinted,
-    this.minSize,
+    this.minSize = kMinInteractiveDimensionCupertino,
+  });
+
+  const AppCupertinoButton.filled({
+    required this.child,
+    required this.onPressed,
+    this.color,
+    super.key,
+    this.disabledColor,
+    this.icon,
+    this.borderRadius = const BorderRadius.all(Radius.circular(12)),
+    this.padding = EdgeInsets.zero,
+    this.type = CupertinoButtonType.filled,
+    this.minSize = kMinInteractiveDimensionCupertino,
   });
 
   final Widget child;
   final Widget? icon;
   final VoidCallback? onPressed;
   final EdgeInsetsGeometry? padding;
-  final double? minSize;
+  final double minSize;
   final Color? color;
   final Color? disabledColor;
   final BorderRadius borderRadius;
@@ -45,30 +57,47 @@ class AppCupertinoButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final typeSize = type == CupertinoButtonType.plain
-        ? 0.0
-        : kMinInteractiveDimensionCupertino;
-
     return Theme(
       data: Theme.of(context).copyWith(
         cupertinoOverrideTheme: CupertinoThemeData(
-          primaryColor: color ?? context.colorScheme.primary,
-          primaryContrastingColor: color ?? context.colorScheme.primary,
+          primaryColor:
+              color ?? context.theme.cupertinoOverrideTheme?.primaryColor,
+          primaryContrastingColor: type == CupertinoButtonType.tinted
+              ? color ?? context.colorScheme.primary
+              : null,
           scaffoldBackgroundColor: color ?? context.colorScheme.primary,
-          textTheme: const CupertinoTextThemeData(
-            primaryColor: Colors.white,
-            textStyle: TextStyle(),
-          ),
         ),
       ),
       child: Builder(
         builder: (context) {
+          if (type == CupertinoButtonType.filled) {
+            CupertinoButton.filled(
+              disabledColor:
+                  disabledColor ?? CupertinoColors.quaternarySystemFill,
+              onPressed: onPressed,
+              padding: padding,
+              minSize: minSize,
+              borderRadius: borderRadius,
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  if (icon != null)
+                    Padding(
+                      padding: const EdgeInsets.only(right: 4),
+                      child: icon,
+                    ),
+                  child,
+                ],
+              ),
+            );
+          }
+
           return CupertinoButton(
             disabledColor:
                 disabledColor ?? CupertinoColors.quaternarySystemFill,
             onPressed: onPressed,
             padding: padding,
-            minSize: minSize ?? typeSize,
+            minSize: minSize,
             borderRadius: borderRadius,
             color: type.calculateColor(color, context),
             child: Row(
@@ -95,7 +124,7 @@ enum CupertinoButtonType {
   tinted,
   filled;
 
-  static const tintedOpacity = 0.2;
+  static const tintedOpacity = 0.5;
 
   Color? calculateColor(
     Color? color,
@@ -104,8 +133,11 @@ enum CupertinoButtonType {
     return switch (this) {
       CupertinoButtonType.plain => null,
       CupertinoButtonType.gray => CupertinoColors.systemFill,
-      CupertinoButtonType.tinted => color?.withOpacity(tintedOpacity),
-      CupertinoButtonType.filled => context.colorScheme.primary.darken()
+      CupertinoButtonType.tinted => color?.withOpacity(tintedOpacity) ??
+          context.theme.cupertinoOverrideTheme?.primaryColor
+              ?.withOpacity(tintedOpacity),
+      CupertinoButtonType.filled =>
+        color ?? context.theme.cupertinoOverrideTheme?.primaryColor
     };
   }
 }
diff --git a/lib/common_widgets/app_cupertino_sliver_navigation_bar.dart b/lib/common_widgets/app_cupertino_sliver_navigation_bar.dart
index f5242da..c5a6137 100644
--- a/lib/common_widgets/app_cupertino_sliver_navigation_bar.dart
+++ b/lib/common_widgets/app_cupertino_sliver_navigation_bar.dart
@@ -2,11 +2,9 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
-import '../core/extensions/is_ios_or_macos_platform_extension.dart';
 import '../core/extensions/js_bottom_padding_extension.dart'
     if (dart.library.js_interop) '../core/extensions/js_bottom_padding_extension_web.dart';
 import '../core/extensions/theme_of_context_extension.dart';
-import '../features/home/widgets/settings_modal_sheet.dart';
 import '../utils/screen_size.dart';
 
 class AppCupertinoSliverNavigationBar extends StatelessWidget {
@@ -14,12 +12,14 @@ class AppCupertinoSliverNavigationBar extends StatelessWidget {
     required this.largeTitle,
     this.leading,
     this.stretch,
+    this.trailing,
     this.transitionBetweenRoutes = true,
     super.key,
   });
 
   final String largeTitle;
   final Widget? leading;
+  final Widget? trailing;
   final bool? stretch;
   final bool transitionBetweenRoutes;
 
@@ -28,7 +28,6 @@ class AppCupertinoSliverNavigationBar extends StatelessWidget {
     final screenSize = context.screenSize;
 
     return CupertinoSliverNavigationBar(
-      backgroundColor: Colors.transparent,
       largeTitle: Text(
         largeTitle,
         maxLines: 1,
@@ -37,6 +36,7 @@ class AppCupertinoSliverNavigationBar extends StatelessWidget {
       stretch: stretch ?? false,
       leading: leading,
       transitionBetweenRoutes: transitionBetweenRoutes,
+      backgroundColor: Colors.transparent,
       border: Border(
         bottom: BorderSide(
           color: context.customInverseTextColor.withOpacity(0.1),
@@ -48,17 +48,7 @@ class AppCupertinoSliverNavigationBar extends StatelessWidget {
               start: 16,
             )
           : const EdgeInsetsDirectional.symmetric(horizontal: 16),
-      trailing: screenSize.isSmall
-          ? CupertinoButton(
-              padding: EdgeInsets.zero,
-              borderRadius: BorderRadius.zero,
-              alignment: Alignment.centerRight,
-              onPressed: () => showSettingModalSheet(context),
-              child: Icon(
-                kIsCupertino ? CupertinoIcons.settings : Icons.settings,
-              ),
-            )
-          : null,
+      trailing: screenSize.isSmall && trailing != null ? trailing : null,
     );
   }
 }
diff --git a/lib/common_widgets/app_fade_in_image.dart b/lib/common_widgets/app_fade_in_image.dart
index 6a637d0..4bd7932 100644
--- a/lib/common_widgets/app_fade_in_image.dart
+++ b/lib/common_widgets/app_fade_in_image.dart
@@ -22,7 +22,7 @@ class AppFadeInImage extends StatelessWidget {
     this.fit,
     this.imageErrorBuilder,
     this.placeholder,
-    this.fadeInDuration = const Duration(milliseconds: 700),
+    this.fadeInDuration = const Duration(milliseconds: 300),
     super.key,
   });
 
@@ -39,6 +39,7 @@ class AppFadeInImage extends StatelessWidget {
     return FadeInImage(
       fadeInDuration: fadeInDuration,
       placeholder: placeholder ?? MemoryImage(kTransparentImage),
+      placeholderColorBlendMode: BlendMode.color,
       image:
           ExtendedNetworkImageProvider(image, cache: true, printError: false),
       imageErrorBuilder: imageErrorBuilder ??
diff --git a/lib/constants.dart b/lib/constants.dart
index c72196e..1784ea2 100644
--- a/lib/constants.dart
+++ b/lib/constants.dart
@@ -1,11 +1,13 @@
 final class Constants {
+  // Other type of constants are in the .env file
   // Network
-  static const baseUrlPath = 'https://samba.deno.dev';
   static const connectTimeout = Duration(seconds: 2);
   static const receiveTimeout = Duration(seconds: 3);
 
   /// Duration(milliseconds: 300)
   static const debouncerDelay = Duration(milliseconds: 300);
 
+  static const defaultColorName = 'Default';
+
   Constants._();
 }
diff --git a/lib/core/extensions/theme_of_context_extension.dart b/lib/core/extensions/theme_of_context_extension.dart
index f57f4ae..240be4a 100644
--- a/lib/core/extensions/theme_of_context_extension.dart
+++ b/lib/core/extensions/theme_of_context_extension.dart
@@ -1,11 +1,13 @@
 // ignore_for_file: avoid_non_null_assertion
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
-import '../theme/app_theme.dart';
+import '../../theme/app_theme.dart';
 import 'app_localization_extension.dart';
 
 extension ThemeOfContextExtension on BuildContext {
   ThemeData get theme => Theme.of(this);
+  CupertinoThemeData get cupertinoTheme => CupertinoTheme.of(this);
 
   Brightness get brightness => theme.brightness;
   bool get brightnessIsDark => brightness == Brightness.dark;
diff --git a/lib/core/providers/client_network.dart b/lib/core/providers/client_network.dart
index f850e26..ee194d7 100644
--- a/lib/core/providers/client_network.dart
+++ b/lib/core/providers/client_network.dart
@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:dio/dio.dart';
 import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
 import 'package:dio_cache_interceptor_hive_store/dio_cache_interceptor_hive_store.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
@@ -80,7 +81,7 @@ enum Endpoint {
   String get pathId => '$path/';
   String get pathSearch => '$path/search';
   String get path => switch (this) {
-        basePath => Constants.baseUrlPath,
+        basePath => dotenv.env['API_URL']!,
         parades => '/parades',
         instruments => '/instruments',
         schools => '/schools',
diff --git a/lib/features/home/home_page.dart b/lib/features/home/home_page.dart
index d23154b..9ba7b3f 100644
--- a/lib/features/home/home_page.dart
+++ b/lib/features/home/home_page.dart
@@ -1,5 +1,8 @@
+import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 
@@ -7,6 +10,9 @@ import '../../common_widgets/app_web_padding.dart';
 import '../../core/extensions/theme_of_context_extension.dart';
 import '../../utils/immutable_list.dart';
 import '../../utils/screen_size.dart';
+import '../instruments/instruments_tab_controller.dart';
+import '../parades/parades_tab_controller.dart';
+import '../schools/schools_tab_controller.dart';
 import 'home_page_controller.dart';
 import 'widgets/adaptive_navigation_bar.dart';
 import 'widgets/adaptive_navigation_rail.dart';
@@ -19,47 +25,65 @@ class HomePage extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final screenSize = context.screenSize;
+    final color = defaultTargetPlatform == TargetPlatform.iOS ||
+            defaultTargetPlatform == TargetPlatform.macOS
+        ? Theme.of(context).bottomNavigationBarTheme.backgroundColor
+        : Theme.of(context).colorScheme.primaryContainer;
+    final orientation = MediaQuery.orientationOf(context);
 
-    return Scaffold(
-      body: screenSize.isSmall
-          ? navigationShell
-          : AppWebPadding.only(
-              left: true,
-              color: context.colorScheme.surface,
-              child: Row(
-                children: [
-                  AdaptiveNavigationRail(
-                    destinations: ImmutableList(HomeTab.values),
-                    selectedIndex: navigationShell.currentIndex,
-                    onDestinationSelected: onDestinationSelected,
-                  ),
-                  const VerticalDivider(width: 1, thickness: 1),
-                  Expanded(
-                    child: navigationShell,
-                  ),
-                ],
-              ),
-            ),
-      bottomNavigationBar: screenSize.isMedium || screenSize.isLarge
-          ? null
-          : Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Divider(
-                  height: 1,
-                  thickness: 1,
-                  color: CupertinoDynamicColor.resolve(
-                    CupertinoColors.opaqueSeparator,
-                    context,
+    return _EagerInitialization(
+      child: AnnotatedRegion<SystemUiOverlayStyle>(
+        value: FlexColorScheme.themedSystemNavigationBar(
+          context,
+          systemNavBarStyle: orientation == Orientation.landscape
+              ? FlexSystemNavBarStyle.transparent
+              : FlexSystemNavBarStyle.system,
+          nullContextBrightness: Brightness.dark,
+          systemNavigationBarColor:
+              orientation == Orientation.landscape ? null : color,
+        ),
+        child: Scaffold(
+          body: screenSize.isSmall
+              ? navigationShell
+              : AppWebPadding.only(
+                  left: true,
+                  color: context.colorScheme.surface,
+                  child: Row(
+                    children: [
+                      AdaptiveNavigationRail(
+                        destinations: ImmutableList(HomeTab.values),
+                        selectedIndex: navigationShell.currentIndex,
+                        onDestinationSelected: onDestinationSelected,
+                      ),
+                      const VerticalDivider(width: 1, thickness: 1),
+                      Expanded(
+                        child: navigationShell,
+                      ),
+                    ],
                   ),
                 ),
-                AdaptiveNavigationBar(
-                  tabDestinations: ImmutableList(HomeTab.values),
-                  selectedIndex: navigationShell.currentIndex,
-                  onDestinationSelected: onDestinationSelected,
+          bottomNavigationBar: !screenSize.isSmall
+              ? null
+              : Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Divider(
+                      height: 1,
+                      thickness: 1,
+                      color: CupertinoDynamicColor.resolve(
+                        CupertinoColors.opaqueSeparator,
+                        context,
+                      ),
+                    ),
+                    AdaptiveNavigationBar(
+                      tabDestinations: ImmutableList(HomeTab.values),
+                      selectedIndex: navigationShell.currentIndex,
+                      onDestinationSelected: onDestinationSelected,
+                    ),
+                  ],
                 ),
-              ],
-            ),
+        ),
+      ),
     );
   }
 
@@ -70,3 +94,19 @@ class HomePage extends ConsumerWidget {
     );
   }
 }
+
+class _EagerInitialization extends ConsumerWidget {
+  const _EagerInitialization({required this.child});
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    // Eagerly initialize providers by watching them.
+    // By using "watch", the provider will stay alive and not be disposed.
+    ref.watch(instrumentsTabControllerProvider);
+    ref.watch(paradesTabControllerProvider);
+    ref.watch(schoolsTabControllerProvider);
+
+    return child;
+  }
+}
diff --git a/lib/features/home/home_page_controller.dart b/lib/features/home/home_page_controller.dart
index 2f123c7..c465c2d 100644
--- a/lib/features/home/home_page_controller.dart
+++ b/lib/features/home/home_page_controller.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import '../../core/extensions/app_localization_extension.dart';
+import '../../core/providers/prefs.dart';
+import '../../routing/app_router.dart';
 import '../instruments/instruments_tab_page.dart';
 import '../parades/parades_tab_page.dart';
 import '../schools/schools_tab_page.dart';
@@ -10,14 +12,22 @@ part 'home_page_controller.g.dart';
 @Riverpod(keepAlive: true)
 class HomePageController extends _$HomePageController {
   @override
-
-  ///Change for a pattern or record of hometab and boolean is is top
-  // HomeTab build() => HomeTab.instruments;
-  ({HomeTab tab, bool topRoute}) build() =>
-      (tab: HomeTab.instruments, topRoute: false);
-
-  void set(HomeTab tab, {bool top = false}) =>
-      state = (tab: tab, topRoute: top);
+  (HomeTab tab, bool isTopRoute) build() {
+    final initialPath = ref.read(initialLocationProvider).value;
+    if (initialPath != null) {
+      final tab = HomeTab.values.firstWhere((tab) => tab.path == initialPath);
+
+      return (tab, false);
+    }
+
+    return (HomeTab.instruments, false);
+  }
+
+  void set(HomeTab tab, {bool top = false}) {
+    final prefs = ref.read(prefsProvider).value;
+    prefs?.setString(initialLocationPrefKey, tab.path);
+    state = (tab, top);
+  }
 }
 
 enum HomeTab { instruments, parades, schools }
diff --git a/lib/features/home/home_page_controller.g.dart b/lib/features/home/home_page_controller.g.dart
index 9c8c691..3b8c23b 100644
--- a/lib/features/home/home_page_controller.g.dart
+++ b/lib/features/home/home_page_controller.g.dart
@@ -7,12 +7,12 @@ part of 'home_page_controller.dart';
 // **************************************************************************
 
 String _$homePageControllerHash() =>
-    r'df7d702c78f616ab4d2965468a89774e7e551e54';
+    r'a4fe5bf958f44ec5103c13f706c6a8a95bc1a7e6';
 
 /// See also [HomePageController].
 @ProviderFor(HomePageController)
 final homePageControllerProvider = NotifierProvider<HomePageController,
-    ({HomeTab tab, bool topRoute})>.internal(
+    (HomeTab tab, bool isTopRoute)>.internal(
   HomePageController.new,
   name: r'homePageControllerProvider',
   debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
@@ -22,6 +22,6 @@ final homePageControllerProvider = NotifierProvider<HomePageController,
   allTransitiveDependencies: null,
 );
 
-typedef _$HomePageController = Notifier<({HomeTab tab, bool topRoute})>;
+typedef _$HomePageController = Notifier<(HomeTab tab, bool isTopRoute)>;
 // ignore_for_file: type=lint
 // ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, inference_failure_on_uninitialized_variable, inference_failure_on_function_return_type, inference_failure_on_untyped_parameter, deprecated_member_use_from_same_package
diff --git a/lib/features/home/widgets/adaptive_navigation_bar.dart b/lib/features/home/widgets/adaptive_navigation_bar.dart
index 10e5ed0..f606330 100644
--- a/lib/features/home/widgets/adaptive_navigation_bar.dart
+++ b/lib/features/home/widgets/adaptive_navigation_bar.dart
@@ -50,24 +50,20 @@ class AdaptiveNavigationBar extends StatelessWidget {
       );
     }
 
-    return AppWebPadding.only(
-      color: context.colorScheme.primaryContainer,
-      bottom: true,
-      child: NavigationBar(
-        height: kBottomNavigationBarHeight,
-        backgroundColor: context.colorScheme.primaryContainer,
-        surfaceTintColor: Colors.transparent,
-        selectedIndex: selectedIndex,
-        onDestinationSelected: onDestinationSelected,
-        destinations: <Widget>[
-          for (final destination in tabDestinations)
-            NavigationDestination(
-              icon: Icon(destination.icon),
-              selectedIcon: Icon(destination.selectedIcon),
-              label: destination.label(context),
-            ),
-        ],
-      ),
+    return NavigationBar(
+      height: kBottomNavigationBarHeight,
+      backgroundColor: context.colorScheme.primaryContainer,
+      surfaceTintColor: Colors.transparent,
+      selectedIndex: selectedIndex,
+      onDestinationSelected: onDestinationSelected,
+      destinations: <Widget>[
+        for (final destination in tabDestinations)
+          NavigationDestination(
+            icon: Icon(destination.icon),
+            selectedIcon: Icon(destination.selectedIcon),
+            label: destination.label(context),
+          ),
+      ],
     );
   }
 }
diff --git a/lib/features/home/widgets/adaptive_navigation_rail_footer.dart b/lib/features/home/widgets/adaptive_navigation_rail_footer.dart
index b8e98b4..7989aab 100644
--- a/lib/features/home/widgets/adaptive_navigation_rail_footer.dart
+++ b/lib/features/home/widgets/adaptive_navigation_rail_footer.dart
@@ -5,9 +5,9 @@ import 'package:pull_down_button/pull_down_button.dart';
 
 import '../../../core/extensions/app_localization_extension.dart';
 import '../../../core/extensions/theme_of_context_extension.dart';
-import '../../../core/theme/theme_mode_controller.dart';
 import '../../../localization/language.dart';
 import '../../../localization/language_app_controller.dart';
+import '../../../theme/theme_mode_controller.dart';
 import '../../../utils/screen_size.dart';
 import 'settings_modal_sheet.dart';
 
diff --git a/lib/features/home/widgets/app_bar_trailing_settings_icon.dart b/lib/features/home/widgets/app_bar_trailing_settings_icon.dart
new file mode 100644
index 0000000..1c001fb
--- /dev/null
+++ b/lib/features/home/widgets/app_bar_trailing_settings_icon.dart
@@ -0,0 +1,21 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+import '../../../core/extensions/is_ios_or_macos_platform_extension.dart';
+import 'settings_modal_sheet.dart';
+
+class AppBarTrailingSettingsIcon extends StatelessWidget {
+  const AppBarTrailingSettingsIcon({super.key});
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoButton(
+      padding: EdgeInsets.zero,
+      borderRadius: BorderRadius.zero,
+      alignment: Alignment.centerRight,
+      onPressed: () => showSettingModalSheet(context),
+      child: Icon(
+        kIsCupertino ? CupertinoIcons.settings : Icons.settings,
+      ),
+    );
+  }
+}
diff --git a/lib/features/home/widgets/settings_modal_sheet.dart b/lib/features/home/widgets/settings_modal_sheet.dart
index 2365ec0..6f0f433 100644
--- a/lib/features/home/widgets/settings_modal_sheet.dart
+++ b/lib/features/home/widgets/settings_modal_sheet.dart
@@ -54,15 +54,14 @@ class SettingsModalSheet extends StatelessWidget {
                   padding: const EdgeInsets.only(right: 16),
                   child: AppCupertinoButton(
                     onPressed: () => Navigator.of(context).pop(),
-                    color: CupertinoDynamicColor.resolve(
-                      CupertinoColors.lightBackgroundGray,
-                      context,
-                    ),
                     padding: const EdgeInsets.all(4),
+                    color: const CupertinoDynamicColor.withBrightness(
+                      color: CupertinoColors.darkBackgroundGray,
+                      darkColor: CupertinoColors.lightBackgroundGray,
+                    ).resolveFrom(context),
                     child: const Icon(
                       CupertinoIcons.xmark,
                       size: 16,
-                      color: CupertinoColors.label,
                     ),
                   ),
                 ),
diff --git a/lib/features/home/widgets/settings_theme_section.dart b/lib/features/home/widgets/settings_theme_section.dart
index 0ecc159..e1c28b9 100644
--- a/lib/features/home/widgets/settings_theme_section.dart
+++ b/lib/features/home/widgets/settings_theme_section.dart
@@ -1,9 +1,13 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../../common_widgets/app_cupertino_button.dart';
+import '../../../constants.dart';
 import '../../../core/extensions/app_localization_extension.dart';
 import '../../../core/extensions/theme_of_context_extension.dart';
-import '../../../core/theme/theme_mode_controller.dart';
+import '../../../theme/app_theme_colors.dart';
+import '../../../theme/theme_mode_controller.dart';
+import '../../../utils/app_loggers.dart';
 
 class SettingsThemeSection extends ConsumerWidget {
   const SettingsThemeSection({super.key});
@@ -15,7 +19,7 @@ class SettingsThemeSection extends ConsumerWidget {
 
     return CupertinoListSection.insetGrouped(
       header: Padding(
-        padding: const EdgeInsets.only(left: 20),
+        padding: const EdgeInsets.only(left: 16),
         child: Text(
           context.loc.theme.toUpperCase(),
           style: TextStyle(
@@ -25,32 +29,69 @@ class SettingsThemeSection extends ConsumerWidget {
         ),
       ),
       children: [
-        CupertinoListTile(
-          backgroundColor: context.colorScheme.surface,
-          title: CupertinoSegmentedControl<ThemeMode>(
-            padding: EdgeInsets.zero,
-            // This represents a currently selected segmented control.
-            groupValue: ref.watch(themeModeControllerProvider),
-            // Callback that sets the selected segmented control.
-            onValueChanged: (ThemeMode value) {
-              ref.read(themeModeControllerProvider.notifier).setTheme(value);
-            },
-            children: <ThemeMode, Widget>{
-              ThemeMode.light: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 4),
-                child: Text(context.loc.light),
+        Container(
+          color: context.colorScheme.surface,
+          padding: const EdgeInsets.all(8.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              SettingThemeMode(
+                onPressed: () => ref
+                    .read(themeModeControllerProvider.notifier)
+                    .setThemeMode(ThemeMode.light),
+                isSelected: themeMode.isLight,
+                title: context.loc.light,
+                icon: Icons.wb_sunny,
               ),
-              ThemeMode.dark: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 4),
-                child: Text(context.loc.dark),
+              SettingThemeMode(
+                onPressed: () => ref
+                    .read(themeModeControllerProvider.notifier)
+                    .setThemeMode(ThemeMode.dark),
+                isSelected: themeMode.isDark,
+                title: context.loc.dark,
+                icon: Icons.nightlight_round,
               ),
-              ThemeMode.system: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 4),
-                child: Text(context.loc.system),
+              SettingThemeMode(
+                onPressed: () => ref
+                    .read(themeModeControllerProvider.notifier)
+                    .setThemeMode(ThemeMode.system),
+                isSelected: themeMode.isSystem,
+                title: context.loc.system,
+                icon: Icons.brightness_auto,
               ),
-            },
+            ],
           ),
         ),
+        Consumer(
+          builder: (context, ref, child) {
+            final colors = ref.watch(appSelectedColorsProvider);
+            final isDefault =
+                colors.name == AppThemeColors.defaultColors().name;
+
+            return CupertinoListTile(
+              backgroundColor: context.colorScheme.surface,
+              backgroundColorActivated: Colors.transparent,
+              title: Text(context.loc.theme),
+              trailing: AppCupertinoButton(
+                padding: const EdgeInsets.symmetric(horizontal: 16),
+                onPressed: isDefault
+                    ? null
+                    : () => ref
+                        .read(appSelectedColorsProvider.notifier)
+                        .setThemeColors(AppThemeColors.defaultColors()),
+                child: Text(isDefault ? '' : context.loc.resetTheme),
+              ),
+              subtitle: Text(
+                colors.name == Constants.defaultColorName
+                    ? context.loc.defaultTheme
+                    : ref.watch(appSelectedColorsProvider).name,
+                style: context.cupertinoTheme.textTheme.textStyle.copyWith(
+                  color: CupertinoColors.systemGrey,
+                ),
+              ),
+            );
+          },
+        ),
         CupertinoListTile(
           backgroundColor: context.colorScheme.surface,
           backgroundColorActivated: Colors.transparent,
@@ -80,3 +121,54 @@ class SettingsThemeSection extends ConsumerWidget {
     );
   }
 }
+
+class SettingThemeMode extends StatelessWidget {
+  const SettingThemeMode({
+    required this.onPressed,
+    required this.isSelected,
+    required this.title,
+    required this.icon,
+    super.key,
+  });
+
+  final VoidCallback onPressed;
+  final bool isSelected;
+  final String title;
+  final IconData icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return AppCupertinoButton(
+      onPressed: onPressed,
+      child: Column(
+        children: [
+          Container(
+            width: 96,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: Padding(
+              padding: const EdgeInsets.all(8),
+              child: Column(
+                children: [
+                  Icon(icon),
+                  const SizedBox(height: 8),
+                  Text(title),
+                ],
+              ),
+            ),
+          ),
+          IgnorePointer(
+            child: Checkbox.adaptive(
+              shape: const CircleBorder(),
+              value: isSelected,
+              onChanged: (_) {
+                logViews.finest('Checkbox.adaptive is disabled');
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/features/instruments/details/gallery_page/instruments_gallery_page.dart b/lib/features/instruments/details/gallery_page/instruments_gallery_page.dart
new file mode 100644
index 0000000..ba3b63f
--- /dev/null
+++ b/lib/features/instruments/details/gallery_page/instruments_gallery_page.dart
@@ -0,0 +1,104 @@
+import 'package:extended_image/extended_image.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../../../utils/immutable_list.dart';
+import '../instrument_details_controller.dart';
+
+class InstrumentsGalleryPage extends ConsumerStatefulWidget {
+  const InstrumentsGalleryPage({
+    required this.initialIndex,
+    required this.instrumentId,
+    this.withScaffold = false,
+    super.key,
+  });
+
+  final int initialIndex;
+  final int instrumentId;
+  final bool withScaffold;
+
+  static const path = 'images';
+
+  @override
+  ConsumerState<InstrumentsGalleryPage> createState() =>
+      _ImageGalleryWidgetState();
+}
+
+class _ImageGalleryWidgetState extends ConsumerState<InstrumentsGalleryPage> {
+  late ImmutableList<String> images = ref.watch(
+    instrumentDetailsControllerProvider(widget.instrumentId).select(
+      (value) => value.gallery,
+    ),
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return ColoredBox(
+      color: Colors.black,
+      child: Stack(
+        children: [
+          ExtendedImageGesturePageView.builder(
+            controller: ExtendedPageController(
+              initialPage: widget.initialIndex,
+            ),
+            onPageChanged: (int page) {
+              _preloadImage(page - 1);
+              _preloadImage(page + 1);
+            },
+            itemCount: images.length,
+            itemBuilder: (BuildContext context, int index) {
+              return ExtendedImage.network(
+                images[index],
+                fit: BoxFit.contain,
+                mode: ExtendedImageMode.gesture,
+                initGestureConfigHandler: (ExtendedImageState state) {
+                  return GestureConfig(
+                    inPageView: true,
+                    animationMaxScale: 6.0,
+                  );
+                },
+              );
+            },
+          ),
+          SafeArea(
+            child: Align(
+              alignment: Alignment.topLeft,
+              child: Padding(
+                padding: const EdgeInsets.only(top: 24),
+                child: CupertinoButton(
+                  child: const Icon(CupertinoIcons.xmark, color: Colors.white),
+                  onPressed: () {
+                    GoRouter.of(context).pop();
+                  },
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _preloadImage(1);
+  }
+
+  final List<int> _cachedIndexes = <int>[];
+
+  void _preloadImage(int index) {
+    if (_cachedIndexes.contains(index)) {
+      return;
+    }
+    if (0 <= index && index < images.length) {
+      final String url = images[index];
+
+      precacheImage(ExtendedNetworkImageProvider(url, cache: true), context);
+
+      _cachedIndexes.add(index);
+    }
+  }
+}
diff --git a/lib/features/instruments/details/instrument_details_page.dart b/lib/features/instruments/details/instrument_details_page.dart
index f8b8708..888b654 100644
--- a/lib/features/instruments/details/instrument_details_page.dart
+++ b/lib/features/instruments/details/instrument_details_page.dart
@@ -83,25 +83,29 @@ class _InstrumentDetailsPageState extends ConsumerState<InstrumentDetailsPage> {
                   ),
                   WebPaddingSliver.only(
                     right: true,
-                    sliver: SliverCrossAxisConstrained(
-                      maxCrossAxisExtent: ScreenSize.md.value,
-                      child: SliverPadding(
-                        padding: const EdgeInsets.symmetric(
-                          horizontal: 24,
-                        ),
-                        sliver: SliverToBoxAdapter(
-                          child: TabBar(
-                            overlayColor: const WidgetStatePropertyAll(
-                              Colors.transparent,
-                            ),
-                            indicatorSize: TabBarIndicatorSize.tab,
-                            indicatorPadding: const EdgeInsets.symmetric(
-                              horizontal: 4,
+                    sliver: SliverSafeArea(
+                      top: false,
+                      bottom: false,
+                      sliver: SliverCrossAxisConstrained(
+                        maxCrossAxisExtent: ScreenSize.md.value,
+                        child: SliverPadding(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 24,
+                          ),
+                          sliver: SliverToBoxAdapter(
+                            child: TabBar(
+                              overlayColor: const WidgetStatePropertyAll(
+                                Colors.transparent,
+                              ),
+                              indicatorSize: TabBarIndicatorSize.tab,
+                              indicatorPadding: const EdgeInsets.symmetric(
+                                horizontal: 4,
+                              ),
+                              tabs: [
+                                Tab(text: context.loc.instrumentDescription),
+                                Tab(text: context.loc.instrumentLearning),
+                              ],
                             ),
-                            tabs: [
-                              Tab(text: context.loc.instrumentDescription),
-                              Tab(text: context.loc.instrumentLearning),
-                            ],
                           ),
                         ),
                       ),
diff --git a/lib/features/instruments/details/widgets/instrument_header_images.dart b/lib/features/instruments/details/widgets/instrument_header_images.dart
index 849c0c4..f3ca091 100644
--- a/lib/features/instruments/details/widgets/instrument_header_images.dart
+++ b/lib/features/instruments/details/widgets/instrument_header_images.dart
@@ -1,12 +1,11 @@
-import 'package:easy_image_viewer/easy_image_viewer.dart';
-import 'package:extended_image/extended_image.dart';
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 
 import '../../../../common_widgets/app_fade_in_image.dart';
 import '../../../../core/extensions/theme_of_context_extension.dart';
-import '../../../../utils/immutable_list.dart';
 import '../../../../utils/screen_size.dart';
 import '../../instrument.dart';
+import '../gallery_page/instruments_gallery_page.dart';
 
 class InstrumentHeaderImages extends StatelessWidget {
   const InstrumentHeaderImages({
@@ -41,10 +40,7 @@ class InstrumentHeaderImages extends StatelessWidget {
                         child: InkWell(
                           onTap: () => showImage(
                             context,
-                            ImmutableList([
-                              ...instrument.gallery.take(3),
-                              instrument.imageUrl,
-                            ]),
+                            instrumentId: instrument.id,
                             initialIndex: i,
                           ),
                           borderRadius: const BorderRadius.all(
@@ -79,12 +75,7 @@ class InstrumentHeaderImages extends StatelessWidget {
                     child: InkWell(
                       onTap: () => showImage(
                         context,
-                        ImmutableList(
-                          [
-                            ...instrument.gallery.take(3),
-                            instrument.imageUrl,
-                          ],
-                        ),
+                        instrumentId: instrument.id,
                         initialIndex: 3,
                       ),
                       borderRadius: const BorderRadius.all(
@@ -139,21 +130,16 @@ class InstrumentHeaderImages extends StatelessWidget {
   }
 
   void showImage(
-    BuildContext context,
-    ImmutableList<String> images, {
-    int? initialIndex,
+    BuildContext context, {
+    required int instrumentId,
+    required int initialIndex,
   }) {
-    final multiImageProvider = MultiImageProvider(
-      [
-        for (final image in images)
-          ExtendedNetworkImageProvider(image, cache: true),
-      ],
-      initialIndex: initialIndex ?? 0,
-    );
-
-    showImageViewerPager(
-      context,
-      multiImageProvider,
+    context.go(
+      '/instruments/details/$instrumentId/${InstrumentsGalleryPage.path}',
+      extra: {
+        'index': initialIndex.toString(),
+        'id': instrumentId.toString(),
+      },
     );
   }
 }
diff --git a/lib/features/instruments/instruments_tab_controller.dart b/lib/features/instruments/instruments_tab_controller.dart
index 396adbf..ab45ffe 100644
--- a/lib/features/instruments/instruments_tab_controller.dart
+++ b/lib/features/instruments/instruments_tab_controller.dart
@@ -10,7 +10,7 @@ part 'instruments_tab_controller.g.dart';
 class InstrumentsTabController extends _$InstrumentsTabController {
   @override
   FutureOr<ImmutableList<Instrument>> build() async {
-    return await ref.watch(instrumentsRepoProvider).getInstruments();
+    return ref.watch(instrumentsRepoProvider).getInstruments();
   }
 
   void updateInstrument(Instrument instrument) {
diff --git a/lib/features/instruments/instruments_tab_controller.g.dart b/lib/features/instruments/instruments_tab_controller.g.dart
index 7f099a4..507ac38 100644
--- a/lib/features/instruments/instruments_tab_controller.g.dart
+++ b/lib/features/instruments/instruments_tab_controller.g.dart
@@ -7,7 +7,7 @@ part of 'instruments_tab_controller.dart';
 // **************************************************************************
 
 String _$instrumentsTabControllerHash() =>
-    r'af042f105ac11e3ed447c7fb429bd9abe1a3aaf1';
+    r'420f49a5f0db47244e5af9e202883c8090876a86';
 
 /// See also [InstrumentsTabController].
 @ProviderFor(InstrumentsTabController)
diff --git a/lib/features/instruments/instruments_tab_page.dart b/lib/features/instruments/instruments_tab_page.dart
index 9a498d0..40ef9e7 100644
--- a/lib/features/instruments/instruments_tab_page.dart
+++ b/lib/features/instruments/instruments_tab_page.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 import 'package:go_router/go_router.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 import 'package:sliver_tools/sliver_tools.dart';
 
 import '../../common_widgets/app_async_widget.dart';
@@ -10,6 +11,7 @@ import '../../common_widgets/app_web_padding.dart';
 import '../../core/extensions/app_localization_extension.dart';
 import '../../utils/screen_size.dart';
 import '../home/home_page_controller.dart';
+import '../home/widgets/app_bar_trailing_settings_icon.dart';
 import 'instruments_tab_controller.dart';
 import 'widgets/instrument_list_tile.dart';
 
@@ -23,6 +25,7 @@ class InstrumentsTabPage extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return Scaffold(
       body: CustomScrollView(
+        primary: true,
         slivers: [
           SliverCrossAxisConstrained(
             maxCrossAxisExtent: ScreenSize.lg.value,
@@ -30,41 +33,54 @@ class InstrumentsTabPage extends ConsumerWidget {
               slivers: [
                 AppCupertinoSliverNavigationBar(
                   largeTitle: context.loc.instrumentsTitle,
+                  trailing: const AppBarTrailingSettingsIcon(),
                 ),
                 const SliverPadding(padding: EdgeInsets.only(top: 8)),
-                SliverAnimatedSwitcher(
-                  duration: const Duration(milliseconds: 300),
-                  child: AppAsyncSliverWidget(
-                    asyncValue: ref.watch(instrumentsTabControllerProvider),
-                    onErrorRetry: () =>
-                        ref.invalidate(instrumentsTabControllerProvider),
-                    child: (value) => WebPaddingSliver.only(
-                      right: true,
-                      sliver: SliverSafeArea(
-                        top: false,
-                        sliver: SliverAlignedGrid.extent(
+                AppAsyncSliverWidget(
+                  asyncValue: ref.watch(instrumentsTabControllerProvider),
+                  onErrorRetry: () =>
+                      ref.invalidate(instrumentsTabControllerProvider),
+                  loadingSliver: WebPaddingSliver.only(
+                    right: true,
+                    sliver: SliverSafeArea(
+                      top: false,
+                      sliver: SliverSkeletonizer(
+                        child: SliverAlignedGrid.extent(
                           maxCrossAxisExtent: InstrumentListTile.cardMaxWidth,
-                          itemCount: value.length,
+                          itemCount: 10,
                           itemBuilder: (context, index) {
-                            final instrument = value[index];
-
-                            return InstrumentListTile(
-                              title: instrument.translatedName,
-                              originalTitle: instrument.name,
-                              subtitle: instrument.translatedDescription,
-                              index: index,
-                              onTap: () {
-                                context.go(
-                                  '$path/details/${instrument.id}',
-                                );
-                              },
-                              imageUrl: instrument.imageUrl,
-                            );
+                            return InstrumentListTile.skeleton();
                           },
                         ),
                       ),
                     ),
                   ),
+                  child: (value) => WebPaddingSliver.only(
+                    right: true,
+                    sliver: SliverSafeArea(
+                      top: false,
+                      sliver: SliverAlignedGrid.extent(
+                        maxCrossAxisExtent: InstrumentListTile.cardMaxWidth,
+                        itemCount: value.length,
+                        itemBuilder: (context, index) {
+                          final instrument = value[index];
+
+                          return InstrumentListTile(
+                            title: instrument.translatedName,
+                            originalTitle: instrument.name,
+                            subtitle: instrument.translatedDescription,
+                            index: index,
+                            onTap: () {
+                              context.go(
+                                '$path/details/${instrument.id}',
+                              );
+                            },
+                            imageUrl: instrument.imageUrl,
+                          );
+                        },
+                      ),
+                    ),
+                  ),
                 ),
               ],
             ),
diff --git a/lib/features/instruments/widgets/instrument_list_tile.dart b/lib/features/instruments/widgets/instrument_list_tile.dart
index e369ce3..3ae2548 100644
--- a/lib/features/instruments/widgets/instrument_list_tile.dart
+++ b/lib/features/instruments/widgets/instrument_list_tile.dart
@@ -1,5 +1,6 @@
+import 'package:extended_image/extended_image.dart';
 import 'package:flutter/material.dart';
-import '../../../common_widgets/app_fade_in_image.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 import '../../../core/extensions/theme_of_context_extension.dart';
 
 typedef ImageUrl = String;
@@ -15,14 +16,22 @@ class InstrumentListTile extends StatefulWidget {
     super.key,
   });
 
+  const InstrumentListTile.skeleton({super.key})
+      : title = 'Instrument',
+        originalTitle = 'Original Title',
+        subtitle = 'Subtitle' * 50,
+        imageUrl = '',
+        onTap = null,
+        index = 0;
+
   final String title;
   final String originalTitle;
   final String subtitle;
-  final VoidCallback onTap;
+  final VoidCallback? onTap;
   final ImageUrl imageUrl;
   final int index;
 
-  static const double cardMaxWidth = 400;
+  static const double cardMaxWidth = 480;
 
   @override
   State<InstrumentListTile> createState() => _InstrumentListTileState();
@@ -31,8 +40,8 @@ class InstrumentListTile extends StatefulWidget {
 class _InstrumentListTileState extends State<InstrumentListTile> {
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(8),
+    return Card(
+      margin: const EdgeInsets.all(8),
       child: ClipRRect(
         borderRadius: const BorderRadius.all(
           Radius.circular(12),
@@ -116,9 +125,12 @@ class _InstrumentListTileState extends State<InstrumentListTile> {
                             ),
                             child: AspectRatio(
                               aspectRatio: 8 / 9,
-                              child: AppFadeInImage(
-                                widget.imageUrl,
-                                fit: BoxFit.cover,
+                              child: Skeleton.replace(
+                                child: ExtendedImage.network(
+                                  widget.imageUrl,
+                                  gaplessPlayback: true,
+                                  fit: BoxFit.cover,
+                                ),
                               ),
                             ),
                           ),
diff --git a/lib/features/parades/parade.dart b/lib/features/parades/parade.dart
index 19201bf..e8ee825 100644
--- a/lib/features/parades/parade.dart
+++ b/lib/features/parades/parade.dart
@@ -42,7 +42,7 @@ class Parade with ParadeMappable {
   static const fromMap = ParadeMapper.fromMap;
   static const fromJson = ParadeMapper.fromJson;
 
-  Parade({
+  const Parade({
     required this.id,
     required this.schoolId,
     required this.carnivalId,
diff --git a/lib/features/parades/parades_tab_controller.dart b/lib/features/parades/parades_tab_controller.dart
index cad89a7..537f704 100644
--- a/lib/features/parades/parades_tab_controller.dart
+++ b/lib/features/parades/parades_tab_controller.dart
@@ -13,9 +13,7 @@ class ParadesTabController extends _$ParadesTabController {
 
   @override
   FutureOr<ImmutableList<Parade>> build() async {
-    final parades = await getParades();
-
-    return parades;
+    return getParades();
   }
 
   Future<bool?> fetchNextPage({int pageSize = _pageSize}) async {
diff --git a/lib/features/parades/parades_tab_controller.g.dart b/lib/features/parades/parades_tab_controller.g.dart
index 81c463e..284c9b6 100644
--- a/lib/features/parades/parades_tab_controller.g.dart
+++ b/lib/features/parades/parades_tab_controller.g.dart
@@ -7,7 +7,7 @@ part of 'parades_tab_controller.dart';
 // **************************************************************************
 
 String _$paradesTabControllerHash() =>
-    r'6c5d4cd7a66b471fdd03be710654b7eea981fc4e';
+    r'e15cecd0b0e7a576d5478587e95a8f9f4a93ec73';
 
 /// See also [ParadesTabController].
 @ProviderFor(ParadesTabController)
diff --git a/lib/features/parades/parades_tab_page.dart b/lib/features/parades/parades_tab_page.dart
index 759db41..00c212c 100644
--- a/lib/features/parades/parades_tab_page.dart
+++ b/lib/features/parades/parades_tab_page.dart
@@ -1,5 +1,7 @@
+import 'package:const_date_time/const_date_time.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 import 'package:sliver_tools/sliver_tools.dart';
 import 'package:super_sliver_list/super_sliver_list.dart';
 
@@ -9,9 +11,11 @@ import '../../common_widgets/app_cupertino_sliver_navigation_bar.dart';
 import '../../common_widgets/app_loading_indicator.dart';
 import '../../core/extensions/app_localization_extension.dart';
 import '../../utils/debouncer.dart';
+import '../../utils/immutable_list.dart';
 import '../../utils/screen_size.dart';
 import '../home/home_page_controller.dart';
 import '../schools/school.dart';
+import 'parade.dart';
 import 'parades_tab_controller.dart';
 import 'widgets/parade_item.dart';
 import 'widgets/parade_item_year_line.dart';
@@ -68,19 +72,13 @@ class _ParadesTabPageState extends ConsumerState<ParadesTabPage> {
                 Future.delayed(const Duration(milliseconds: 500), () {
               ref.invalidate(paradesTabControllerProvider);
             }),
-            child: (value) => SliverCrossAxisConstrained(
+            loadingSliver: SliverCrossAxisConstrained(
               maxCrossAxisExtent: ScreenSize.md.value,
-              child: SuperSliverList.builder(
-                itemCount: value.length,
-                listController: _listController,
-                itemBuilder: (_, index) {
-                  final parade = value[index];
-
-                  return ProviderScope(
-                    overrides: [
-                      currentParadeProvider.overrideWithValue(value[index]),
-                    ],
-                    child: Padding(
+              child: SliverSkeletonizer(
+                child: SuperSliverList.builder(
+                  itemCount: 10,
+                  itemBuilder: (_, index) {
+                    return Padding(
                       padding: index != 0
                           ? EdgeInsets.zero
                           : const EdgeInsets.only(top: 24),
@@ -89,20 +87,66 @@ class _ParadesTabPageState extends ConsumerState<ParadesTabPage> {
                         child: Row(
                           children: [
                             ParadeItemYearLine(
-                              year: parade.champion &&
-                                      parade.divisionNumber ==
-                                          SchoolDivision.especial
-                                  ? parade.paradeYear.toString()
-                                  : null,
+                              year: index == 0 ? '2222' : null,
                             ),
-                            const Expanded(
-                              child: AppAnimationWrapper(
+                            ProviderScope(
+                              overrides: [
+                                currentParadeProvider.overrideWithValue(
+                                  _paradeSkeleton(index + 1),
+                                ),
+                              ],
+                              child: const Expanded(
                                 child: ParadeItem(),
                               ),
                             ),
                           ],
                         ),
                       ),
+                    );
+                  },
+                ),
+              ),
+            ),
+            child: (value) => SliverCrossAxisConstrained(
+              maxCrossAxisExtent: ScreenSize.md.value,
+              child: SuperSliverList.builder(
+                itemCount: value.length,
+                listController: _listController,
+                itemBuilder: (_, index) {
+                  final parade = value[index];
+
+                  return ProviderScope(
+                    overrides: [
+                      currentParadeProvider.overrideWithValue(value[index]),
+                    ],
+                    child: SafeArea(
+                      top: false,
+                      bottom: false,
+                      child: Padding(
+                        padding: index != 0
+                            ? EdgeInsets.zero
+                            : const EdgeInsets.only(top: 24),
+                        child: SizedBox(
+                          height: ParadeItem.height,
+                          child: Row(
+                            children: [
+                              ParadeItemYearLine(
+                                year: parade.champion &&
+                                        parade.divisionNumber ==
+                                            SchoolDivision.especial
+                                    ? parade.paradeYear.toString()
+                                    : null,
+                              ),
+                              Expanded(
+                                child: AppAnimationWrapper(
+                                  start: value.length > 10 ? 0.6 : 1.0,
+                                  child: const ParadeItem(),
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
                     ),
                   );
                 },
@@ -126,3 +170,58 @@ class _ParadesTabPageState extends ConsumerState<ParadesTabPage> {
     super.dispose();
   }
 }
+
+Parade _paradeSkeleton(int index) => Parade(
+      id: index,
+      schoolId: index,
+      carnivalId: index,
+      carnivalName: "",
+      enredo: "",
+      carnavalescos: ImmutableList(const []),
+      division: "BoneMock.name,",
+      divisionNumber: SchoolDivision.especial,
+      subdivisionNumber: index,
+      paradeYear: const ConstDateTime(2024).year,
+      date: const ConstDateTime(2024),
+      championParade: const ConstDateTime(2024),
+      components: index,
+      numberOfWings: index,
+      numberOfFloats: index,
+      numberOfTripods: index,
+      placing: index,
+      relegated: false,
+      promoted: false,
+      champion: index == 1,
+      performanceOrder: index,
+      performanceDay: index,
+      points: index.toDouble(),
+      details: "BoneMock.longParagraph,",
+      translatedCarnivalName: "BoneMock.address,",
+      translatedEnredo: "BoneMock.address,",
+      translatedDivision: "BoneMock.address,",
+      translatedCarnavalescos: ImmutableList(const []),
+      school: const School(
+        id: 1,
+        name: "name",
+        translatedName: "translatedName",
+        imageUrl: "",
+        foundationDate: ConstDateTime(2024),
+        godmotherSchool: "godmotherSchool",
+        colors: IListConst(["colors"]),
+        colorsCode: IListConst([]),
+        symbols: IListConst([]),
+        carnivalCategory: SchoolCategory.escolasDeSamba,
+        currentDivision: SchoolDivision.especial,
+        divisionNumber: 1,
+        subdivisionNumber: 1,
+        firstDivisionChampionships: 1,
+        country: "country",
+        leagueLocation: "leagueLocation",
+        lastPosition: 1,
+        translatedColors: IListConst([]),
+        translatedSymbols: IListConst([]),
+        translatedGodmotherSchool: "translatedGodmotherSchool",
+        translatedLeagueLocation: "translatedLeagueLocation",
+        translatedCountry: "translatedCountry",
+      ),
+    );
diff --git a/lib/features/parades/widgets/parade_item.dart b/lib/features/parades/widgets/parade_item.dart
index fe5f349..0f96bd2 100644
--- a/lib/features/parades/widgets/parade_item.dart
+++ b/lib/features/parades/widgets/parade_item.dart
@@ -78,8 +78,8 @@ class ParadeItemContent extends StatelessWidget {
         Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            ParadeItemTextContentHeader(
-              padding: const EdgeInsets.only(left: 8, right: 8, top: 8),
+            ParadeItemSchoolName(
+              padding: const EdgeInsets.only(left: 8, right: 8),
               parade: parade,
             ),
             const Spacer(),
@@ -100,7 +100,6 @@ class ParadeItemContent extends StatelessWidget {
                           imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
                           child: AppFadeInImage(
                             parade.school.imageUrl,
-                            fadeInDuration: const Duration(milliseconds: 300),
                             imageErrorBuilder: (_, __, ___) {
                               return const SizedBox();
                             },
@@ -170,8 +169,8 @@ class ParadeItemBadge extends StatelessWidget {
   }
 }
 
-class ParadeItemTextContentHeader extends ConsumerWidget {
-  const ParadeItemTextContentHeader({
+class ParadeItemSchoolName extends ConsumerWidget {
+  const ParadeItemSchoolName({
     required this.padding,
     required this.parade,
     super.key,
@@ -190,37 +189,43 @@ class ParadeItemTextContentHeader extends ConsumerWidget {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          SizedBox(
-            height: 36,
-            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Flexible(
-                  child: Text(
-                    showOriginal
-                        ? '${parade.school.name}\n'
-                        : '${parade.school.translatedName}\n',
-                    maxLines: 2,
-                    style: context.labelSmall.copyWith(
-                      color: context.colorScheme.onSurfaceVariant,
-                    ),
-                    strutStyle: const StrutStyle(
-                      forceStrutHeight: true,
-                      height: 1.1,
+          Column(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(bottom: 8, top: 12),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Flexible(
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.end,
+                        children: [
+                          Text(
+                            showOriginal
+                                ? parade.school.name
+                                : parade.school.translatedName,
+                            maxLines: 2,
+                            style: context.labelSmall.copyWith(
+                              color: context.colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                        ],
+                      ),
                     ),
-                  ),
-                ),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 8),
-                  child: Text(
-                    parade.divisionNumber.shortName(context),
-                    style: context.labelSmall.copyWith(
-                      color: Colors.transparent,
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 8),
+                      child: Text(
+                        parade.divisionNumber.shortName(context),
+                        style: context.labelSmall.copyWith(
+                          color: Colors.transparent,
+                        ),
+                      ),
                     ),
-                  ),
+                  ],
                 ),
-              ],
-            ),
+              ),
+            ],
           ),
           Text.rich(
             TextSpan(
@@ -269,7 +274,7 @@ class ParadeItemTextContentDetails extends ConsumerWidget {
               TextSpan(
                 children: [
                   TextSpan(
-                    text: '${context.loc.carnavalescos}:',
+                    text: '${context.loc.carnavalescos}: ',
                     style: context.textTheme.labelMedium,
                   ),
                   TextSpan(
diff --git a/lib/features/schools/details/school_details_page.dart b/lib/features/schools/details/school_details_page.dart
index 3f50e53..f18dd40 100644
--- a/lib/features/schools/details/school_details_page.dart
+++ b/lib/features/schools/details/school_details_page.dart
@@ -8,6 +8,8 @@ import '../../../core/extensions/app_localization_extension.dart';
 import '../../../core/extensions/intl_extension.dart';
 import '../../../core/extensions/string_extensions.dart';
 import '../../../core/extensions/theme_of_context_extension.dart';
+import '../../../theme/app_theme_colors.dart';
+import '../../../theme/theme_mode_controller.dart';
 import '../school.dart';
 import '../school_extensions.dart';
 import '../widgets/school_flag.dart';
@@ -137,7 +139,7 @@ class _SchoolDetailsPageState extends ConsumerState<SchoolDetailsPage> {
   }
 }
 
-class SchoolDetailsText extends StatefulWidget {
+class SchoolDetailsText extends ConsumerStatefulWidget {
   const SchoolDetailsText({
     required this.school,
     required this.showOriginal,
@@ -150,10 +152,23 @@ class SchoolDetailsText extends StatefulWidget {
   final VoidCallback onTranslate;
 
   @override
-  State<SchoolDetailsText> createState() => _SchoolDetailsTextState();
+  ConsumerState<SchoolDetailsText> createState() => _SchoolDetailsTextState();
 }
 
-class _SchoolDetailsTextState extends State<SchoolDetailsText> {
+class _SchoolDetailsTextState extends ConsumerState<SchoolDetailsText> {
+  void setColors() {
+    final schoolColors = widget.school.colorsCode;
+    if (schoolColors.isNotEmpty) {
+      final colors = AppThemeColors(
+        primary: schoolColors.first,
+        name: widget.school.name,
+        secondary: schoolColors.elementAtOrNull(1),
+        tertiary: schoolColors.elementAtOrNull(2),
+      );
+      ref.read(appSelectedColorsProvider.notifier).setThemeColors(colors);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final school = widget.school;
@@ -276,48 +291,52 @@ class _SchoolDetailsTextState extends State<SchoolDetailsText> {
                 const SizedBox(height: 8),
               ],
             ),
-            if (widget.school.translatedName != widget.school.name ||
-                widget.school.symbols != widget.school.translatedSymbols)
-              Positioned(
-                bottom: 0,
-                right: 0,
-                child: Padding(
-                  padding: const EdgeInsets.only(bottom: 8),
-                  child: Column(
-                    children: [
-                      SizedBox(
-                        width: 32,
-                        child: Tooltip(
-                          message: widget.school.translatedColors.join(', '),
-                          child: Stack(
-                            alignment: Alignment.bottomRight,
-                            children: [
-                              for (final (index, colorCode)
-                                  in widget.school.colorsCode.indexed)
-                                Container(
-                                  height: 32,
-                                  width: 32,
-                                  margin: EdgeInsets.only(bottom: index * 12.0),
-                                  decoration: BoxDecoration(
-                                    color: colorCode,
-                                    shape: BoxShape.circle,
-                                    boxShadow: const [
-                                      BoxShadow(
-                                        color: Colors.black12,
-                                        blurRadius: 4,
-                                        offset: Offset(0, 2),
-                                      ),
-                                    ],
+            Positioned(
+              bottom: 0,
+              right: 0,
+              child: Padding(
+                padding: const EdgeInsets.only(bottom: 8),
+                child: Column(
+                  children: [
+                    SizedBox(
+                      width: 32,
+                      child: Consumer(
+                        builder: (context, ref, child) {
+                          return Tooltip(
+                            message: widget.school.translatedColors.join(', '),
+                            onTriggered: setColors,
+                            child: Stack(
+                              alignment: Alignment.bottomRight,
+                              children: [
+                                for (final (index, colorCode)
+                                    in widget.school.colorsCode.indexed)
+                                  Container(
+                                    height: 32,
+                                    width: 32,
+                                    margin:
+                                        EdgeInsets.only(bottom: index * 12.0),
+                                    decoration: BoxDecoration(
+                                      color: colorCode,
+                                      shape: BoxShape.circle,
+                                      boxShadow: const [
+                                        BoxShadow(
+                                          color: Colors.black12,
+                                          blurRadius: 4,
+                                          offset: Offset(0, 2),
+                                        ),
+                                      ],
+                                    ),
                                   ),
-                                ),
-                            ],
-                          ),
-                        ),
+                              ],
+                            ),
+                          );
+                        },
                       ),
-                    ],
-                  ),
+                    ),
+                  ],
                 ),
               ),
+            ),
           ],
         ),
       ),
diff --git a/lib/features/schools/details/schools_details_controller.g.dart b/lib/features/schools/details/schools_details_controller.g.dart
index 8a7d63d..f32e0bc 100644
--- a/lib/features/schools/details/schools_details_controller.g.dart
+++ b/lib/features/schools/details/schools_details_controller.g.dart
@@ -7,7 +7,7 @@ part of 'schools_details_controller.dart';
 // **************************************************************************
 
 String _$schoolsDetailsControllerHash() =>
-    r'29336ca2472c1525ae7bf07f6539f5557d5e486b';
+    r'd4c9e6099382232e260fa84b873b3e1307cac41f';
 
 /// Copied from Dart SDK
 class _SystemHash {
diff --git a/lib/features/schools/school_color_hook.dart b/lib/features/schools/school_color_hook.dart
index 4f0e599..45d077e 100644
--- a/lib/features/schools/school_color_hook.dart
+++ b/lib/features/schools/school_color_hook.dart
@@ -20,31 +20,31 @@ class SchoolColorHook extends MappingHook {
 
   Color _getColor(Object color) {
     return switch (color.toString().replaceAll('-', ' ').toLowerCase()) {
-      'anil' => Colors.indigo,
-      'vermelho' => Colors.red,
-      'rosa' => Colors.pink,
-      'roxo' || 'morado' => Colors.purple,
-      'roxo escuro' || 'púrpura profundo' => Colors.deepPurple,
-      'indigo' || 'índigo' => Colors.indigo,
-      'azul' => Colors.blue,
-      'azul claro' => Colors.lightBlue,
-      'azul pavo' || 'ciano' => Colors.cyan,
-      'verde azulado' => Colors.teal,
-      'verde' => Colors.green,
-      'verde claro' => Colors.lightGreen,
-      'lima' => Colors.lime,
-      'amarelo' => Colors.yellow,
-      'amber' || 'âmbar' || 'ámbar' || 'amarelo ouro' => Colors.amber,
-      'ouro' || 'dourado' => Colors.amber,
-      'laranja' => Colors.orange,
-      'laranja escuro' => Colors.deepOrange,
-      'marrom' => Colors.brown,
-      'cinza' => Colors.grey,
-      'azul grisáceo' => Colors.blueGrey,
+      'anil' => Colors.indigo.shade500,
+      'vermelho' => Colors.red.shade500,
+      'rosa' => Colors.pink.shade500,
+      'roxo' || 'morado' => Colors.purple.shade500,
+      'roxo escuro' || 'púrpura profundo' => Colors.deepPurple.shade500,
+      'indigo' || 'índigo' => Colors.indigo.shade500,
+      'azul' => Colors.blue.shade500,
+      'azul claro' => Colors.lightBlue.shade500,
+      'azul pavo' || 'ciano' => Colors.cyan.shade500,
+      'verde azulado' => Colors.teal.shade500,
+      'verde' => Colors.green.shade500,
+      'verde claro' => Colors.lightGreen.shade500,
+      'lima' => Colors.lime.shade500,
+      'amarelo' => Colors.yellow.shade500,
+      'amber' || 'âmbar' || 'ámbar' || 'amarelo ouro' => Colors.amber.shade500,
+      'ouro' || 'dourado' => Colors.amber.shade500,
+      'laranja' => Colors.orange.shade500,
+      'laranja escuro' => Colors.deepOrange.shade500,
+      'marrom' => Colors.brown.shade500,
+      'cinza' => Colors.grey.shade500,
+      'azul grisáceo' => Colors.blueGrey.shade500,
       'preto' || 'negro' => Colors.black,
       'branco' => Colors.white,
       'azul marinho' => Colors.blue.shade900,
-      'azul pavão' => Colors.cyan,
+      'azul pavão' => Colors.cyan.shade500,
       'azul royal' => Colors.blue.shade800,
       'azul turquesa' => Colors.cyan.shade400,
       'violeta' => Colors.purple.shade800,
diff --git a/lib/features/schools/schools_tab_controller.dart b/lib/features/schools/schools_tab_controller.dart
index 1c98217..03637fc 100644
--- a/lib/features/schools/schools_tab_controller.dart
+++ b/lib/features/schools/schools_tab_controller.dart
@@ -11,10 +11,10 @@ part 'schools_tab_controller.g.dart';
 
 @riverpod
 class SchoolsTabController extends _$SchoolsTabController {
-  static const _pageSize = 12;
+  static const _pageSize = 10;
 
   @override
-  Future<ImmutableList<School>> build() async {
+  FutureOr<ImmutableList<School>> build() async {
     return getSchools(pageSize: _pageSize);
   }
 
diff --git a/lib/features/schools/widgets/school_card.dart b/lib/features/schools/widgets/school_card.dart
index 0ad0457..54ac1d2 100644
--- a/lib/features/schools/widgets/school_card.dart
+++ b/lib/features/schools/widgets/school_card.dart
@@ -54,7 +54,7 @@ class _SchoolCardState extends ConsumerState<SchoolCard> {
                 begin: Alignment.topLeft,
                 end: Alignment.bottomRight,
                 colors: [
-                  if (school.colors.isEmpty)
+                  if (school.colorsCode.isEmpty)
                     for (final _ in Iterable<int>.generate(2))
                       CupertinoDynamicColor.resolve(
                         CupertinoColors.systemGrey5,
diff --git a/lib/features/schools/widgets/school_flag.dart b/lib/features/schools/widgets/school_flag.dart
index 54dfde1..b596790 100644
--- a/lib/features/schools/widgets/school_flag.dart
+++ b/lib/features/schools/widgets/school_flag.dart
@@ -2,6 +2,7 @@ import 'package:fast_immutable_collections/fast_immutable_collections.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 import '../../../common_widgets/app_fade_in_image.dart';
 import '../../../core/extensions/app_localization_extension.dart';
 import '../../../core/extensions/theme_of_context_extension.dart';
@@ -54,12 +55,15 @@ class SchoolFlag extends ConsumerWidget {
             },
             child: AspectRatio(
               aspectRatio: 3 / 2,
-              child: school.imageUrl.isNotEmpty
-                  ? AppFadeInImage(
-                      school.imageUrl,
-                      fit: BoxFit.cover,
-                    )
-                  : EmptyImage(colors: school.colorsCode),
+              child: Skeleton.replace(
+                child: AppFadeInImage(
+                  school.imageUrl,
+                  fit: BoxFit.cover,
+                  imageErrorBuilder: (context, error, stackTrace) => EmptyImage(
+                    colors: school.colorsCode,
+                  ),
+                ),
+              ),
             ),
           ),
         ),
diff --git a/lib/features/schools/widgets/schools_tab_body.dart b/lib/features/schools/widgets/schools_tab_body.dart
index 868d028..22b436e 100644
--- a/lib/features/schools/widgets/schools_tab_body.dart
+++ b/lib/features/schools/widgets/schools_tab_body.dart
@@ -1,6 +1,8 @@
+import 'package:const_date_time/const_date_time.dart';
 import 'package:dynamic_height_grid_view/dynamic_height_grid_view.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 import 'package:sliver_tools/sliver_tools.dart';
 
 import '../../../common_widgets/app_animation_wrapper.dart';
@@ -24,6 +26,22 @@ class SchoolsTabBody extends ConsumerWidget {
       sliver: AppAsyncSliverWidget(
         asyncValue: ref.watch(schoolsTabControllerProvider),
         onErrorRetry: () => ref.invalidate(schoolsTabControllerProvider),
+        loadingSliver: SliverCrossAxisConstrained(
+          maxCrossAxisExtent: ScreenSize.lg.value,
+          child: SliverPadding(
+            padding: EdgeInsets.only(
+              left: 16,
+              right: 16 + rightInset(),
+            ),
+            sliver: SliverSkeletonizer(
+              child: SliverSchoolsList(
+                schools: ImmutableList(
+                  [for (var i = 0; i < 10; i++) _schoolSkeleton],
+                ),
+              ),
+            ),
+          ),
+        ),
         child: (_) => Consumer(
           builder: (_, ref, __) {
             final schools = ref.watch(filteredSchoolsProvider);
@@ -67,6 +85,7 @@ class SliverSchoolsList extends StatelessWidget {
         final school = schools[index];
 
         return AppAnimationWrapper(
+          start: schools.length > 10 ? 0.6 : 1.0,
           child: ProviderScope(
             overrides: [
               currentSchoolProvider.overrideWithValue(school),
@@ -78,3 +97,28 @@ class SliverSchoolsList extends StatelessWidget {
     );
   }
 }
+
+School get _schoolSkeleton => const School(
+      id: 1,
+      name: "name",
+      translatedName: "translatedName",
+      imageUrl: "",
+      foundationDate: ConstDateTime(2024),
+      godmotherSchool: "godmotherSchool",
+      colors: IListConst([]),
+      colorsCode: IListConst([]),
+      symbols: IListConst([]),
+      carnivalCategory: SchoolCategory.escolasDeSamba,
+      currentDivision: SchoolDivision.especial,
+      divisionNumber: 1,
+      subdivisionNumber: 1,
+      firstDivisionChampionships: 1,
+      country: "country",
+      leagueLocation: "leagueLocation",
+      lastPosition: 1,
+      translatedColors: IListConst([]),
+      translatedSymbols: IListConst([]),
+      translatedGodmotherSchool: "translatedGodmotherSchool",
+      translatedLeagueLocation: "translatedLeagueLocation",
+      translatedCountry: "translatedCountry",
+    );
diff --git a/lib/initialization.dart b/lib/initialization.dart
index baeea1b..836bfe9 100644
--- a/lib/initialization.dart
+++ b/lib/initialization.dart
@@ -4,15 +4,14 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'core/extensions/app_localization_extension.dart';
 import 'core/providers/initialization.dart';
-import 'core/theme/theme_mode_controller.dart';
 import 'features/home/widgets/adaptive_navigation_rail.dart';
+import 'theme/theme_mode_controller.dart';
 import 'utils/screen_size.dart';
 
 class Initialization extends ConsumerWidget {
-  const Initialization({required this.onLoaded, super.key});
-  final WidgetBuilder onLoaded;
+  const Initialization({super.key});
 
-  static const path = '/startup';
+  static const path = '/';
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -22,7 +21,7 @@ class Initialization extends ConsumerWidget {
     return AnimatedSwitcher(
       duration: const Duration(milliseconds: 300),
       child: switch (initProvider) {
-        AsyncData() => onLoaded(context),
+        AsyncData() => const Scaffold(),
         AsyncLoading() => const AppStartupLoadingWidget(),
         AsyncError(:final error) => AppStartupErrorWidget(
             message: error.toString(),
diff --git a/lib/l10n/app_localizations.dart b/lib/l10n/app_localizations.dart
index 7521088..a1e8c26 100644
--- a/lib/l10n/app_localizations.dart
+++ b/lib/l10n/app_localizations.dart
@@ -175,6 +175,12 @@ abstract class AppLocalizations {
   /// **'Theme'**
   String get theme;
 
+  /// No description provided for @resetTheme.
+  ///
+  /// In en, this message translates to:
+  /// **'Reset'**
+  String get resetTheme;
+
   /// No description provided for @light.
   ///
   /// In en, this message translates to:
@@ -217,6 +223,12 @@ abstract class AppLocalizations {
   /// **'System Theme'**
   String get systemTheme;
 
+  /// No description provided for @defaultTheme.
+  ///
+  /// In en, this message translates to:
+  /// **'Default'**
+  String get defaultTheme;
+
   /// No description provided for @all.
   ///
   /// In en, this message translates to:
diff --git a/lib/l10n/app_localizations_en.dart b/lib/l10n/app_localizations_en.dart
index 809dc54..efcc531 100644
--- a/lib/l10n/app_localizations_en.dart
+++ b/lib/l10n/app_localizations_en.dart
@@ -43,6 +43,9 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get theme => 'Theme';
 
+  @override
+  String get resetTheme => 'Reset';
+
   @override
   String get light => 'Light';
 
@@ -64,6 +67,9 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get systemTheme => 'System Theme';
 
+  @override
+  String get defaultTheme => 'Default';
+
   @override
   String get all => 'All';
 
diff --git a/lib/l10n/app_localizations_es.dart b/lib/l10n/app_localizations_es.dart
index f5fb67c..3a4bb17 100644
--- a/lib/l10n/app_localizations_es.dart
+++ b/lib/l10n/app_localizations_es.dart
@@ -43,6 +43,9 @@ class AppLocalizationsEs extends AppLocalizations {
   @override
   String get theme => 'Tema';
 
+  @override
+  String get resetTheme => 'Restablecer';
+
   @override
   String get light => 'Claro';
 
@@ -64,6 +67,9 @@ class AppLocalizationsEs extends AppLocalizations {
   @override
   String get systemTheme => 'Tema del Sistema';
 
+  @override
+  String get defaultTheme => 'Predeterminado';
+
   @override
   String get all => 'Todo';
 
diff --git a/lib/l10n/app_localizations_ja.dart b/lib/l10n/app_localizations_ja.dart
index 64f6fef..4fa0570 100644
--- a/lib/l10n/app_localizations_ja.dart
+++ b/lib/l10n/app_localizations_ja.dart
@@ -43,6 +43,9 @@ class AppLocalizationsJa extends AppLocalizations {
   @override
   String get theme => 'テーマ';
 
+  @override
+  String get resetTheme => 'リセット';
+
   @override
   String get light => 'ライト';
 
@@ -64,6 +67,9 @@ class AppLocalizationsJa extends AppLocalizations {
   @override
   String get systemTheme => 'システムテーマ';
 
+  @override
+  String get defaultTheme => 'デフォルト';
+
   @override
   String get all => 'すべて';
 
diff --git a/lib/l10n/app_localizations_pt.dart b/lib/l10n/app_localizations_pt.dart
index 1cf602f..ad4fcbc 100644
--- a/lib/l10n/app_localizations_pt.dart
+++ b/lib/l10n/app_localizations_pt.dart
@@ -43,6 +43,9 @@ class AppLocalizationsPt extends AppLocalizations {
   @override
   String get theme => 'Tema';
 
+  @override
+  String get resetTheme => 'Redefinir';
+
   @override
   String get light => 'Claro';
 
@@ -64,6 +67,9 @@ class AppLocalizationsPt extends AppLocalizations {
   @override
   String get systemTheme => 'Tema do Sistema';
 
+  @override
+  String get defaultTheme => 'Padrão';
+
   @override
   String get all => 'Todos';
 
diff --git a/lib/localization/app_en.arb b/lib/localization/app_en.arb
index 844fde5..940baf8 100644
--- a/lib/localization/app_en.arb
+++ b/lib/localization/app_en.arb
@@ -17,6 +17,7 @@
 	"spanish": "Spanish",
 	"japanese": "Japanese",
 	"theme": "Theme",
+	"resetTheme": "Reset",
 	"light": "Light",
 	"dark": "Dark",
 	"system": "System",
@@ -24,6 +25,7 @@
 	"darkTheme": "Dark Theme",
 	"lightTheme": "Light Theme",
 	"systemTheme": "System Theme",
+	"defaultTheme": "Default",
 	"all": "All",
 	"retry": "Retry",
 	"@_HOME_PAGE": {},
diff --git a/lib/localization/app_es.arb b/lib/localization/app_es.arb
index 9a6229a..e97f87e 100644
--- a/lib/localization/app_es.arb
+++ b/lib/localization/app_es.arb
@@ -17,6 +17,7 @@
 	"spanish": "Español",
 	"japanese": "Japonés",
 	"theme": "Tema",
+	"resetTheme": "Restablecer",
 	"light": "Claro",
 	"dark": "Oscuro",
 	"system": "Sistema",
@@ -24,6 +25,7 @@
 	"darkTheme": "Tema Oscuro",
 	"lightTheme": "Tema Claro",
 	"systemTheme": "Tema del Sistema",
+	"defaultTheme": "Predeterminado",
 	"all": "Todo",
 	"retry": "Reintentar",
 	"@_HOME_PAGE": {},
diff --git a/lib/localization/app_ja.arb b/lib/localization/app_ja.arb
index 81e5065..e502f97 100644
--- a/lib/localization/app_ja.arb
+++ b/lib/localization/app_ja.arb
@@ -27,6 +27,8 @@
 	"spanish": "スペイン語",
 	"japanese": "日本語",
 	"theme": "テーマ",
+	"defaultTheme": "デフォルト",
+	"resetTheme": "リセット",
 	"light": "ライト",
 	"dark": "ダーク",
 	"system": "システム",
diff --git a/lib/localization/app_pt.arb b/lib/localization/app_pt.arb
index 2adc58f..b4b1b84 100644
--- a/lib/localization/app_pt.arb
+++ b/lib/localization/app_pt.arb
@@ -27,6 +27,8 @@
 	"spanish": "Espanhol",
 	"japanese": "Japonês",
 	"theme": "Tema",
+	"defaultTheme": "Padrão",
+	"resetTheme": "Redefinir",
 	"light": "Claro",
 	"dark": "Escuro",
 	"system": "Sistema",
diff --git a/lib/main.dart b/lib/main.dart
index 1865cad..fbeded3 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,21 +1,23 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 // ignore:depend_on_referenced_packages
 import 'package:flutter_web_plugins/url_strategy.dart';
 
 import 'core/extensions/app_localization_extension.dart';
-import 'core/theme/app_theme.dart';
-import 'core/theme/theme_mode_controller.dart';
 import 'l10n/app_localizations.dart';
 import 'localization/language.dart';
 import 'localization/language_app_controller.dart';
 import 'routing/app_router.dart';
+import 'theme/app_theme.dart';
+import 'theme/theme_mode_controller.dart';
 
-void main() {
+Future<void> main() async {
   usePathUrlStrategy();
+  await dotenv.load();
   runApp(const ProviderScope(child: MainApp()));
 }
 
@@ -24,11 +26,20 @@ class MainApp extends ConsumerWidget {
   const MainApp({super.key});
 
   void _initAndroid() {
-    if (TargetPlatform.android != defaultTargetPlatform) return;
+    if (defaultTargetPlatform != TargetPlatform.android) return;
+    SystemChrome.setEnabledSystemUIMode(
+      SystemUiMode.edgeToEdge,
+      overlays: [SystemUiOverlay.top],
+    );
     SystemChrome.setSystemUIOverlayStyle(
-      const SystemUiOverlayStyle(systemNavigationBarColor: Colors.transparent),
+      const SystemUiOverlayStyle(
+        statusBarColor: Colors.transparent,
+        systemStatusBarContrastEnforced: false,
+        systemNavigationBarColor: Colors.transparent,
+        systemNavigationBarDividerColor: Colors.transparent,
+        systemNavigationBarContrastEnforced: false,
+      ),
     );
-    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
   }
 
   @override
@@ -37,6 +48,7 @@ class MainApp extends ConsumerWidget {
     final router = ref.watch(appRouterProvider);
     final themeMode = ref.watch(themeModeControllerProvider);
     final isTrueBlack = ref.watch(appThemeTrueBlackProvider);
+    final themeColors = ref.watch(appSelectedColorsProvider);
     final language = ref.watch(languageAppControllerProvider).valueOrNull;
 
     return MaterialApp.router(
@@ -44,8 +56,8 @@ class MainApp extends ConsumerWidget {
       onGenerateTitle: (context) => context.loc.appTitle,
       restorationScopeId: 'app',
       debugShowCheckedModeBanner: false,
-      theme: AppTheme.lightTheme,
-      darkTheme: AppTheme.darkTheme(trueBlack: isTrueBlack),
+      theme: AppTheme.lightTheme(themeColors),
+      darkTheme: AppTheme.darkTheme(themeColors, trueBlack: isTrueBlack),
       themeMode: themeMode,
       themeAnimationStyle: AnimationStyle.noAnimation,
       localizationsDelegates: const [
diff --git a/lib/routing/adaptive_page.dart b/lib/routing/adaptive_page.dart
new file mode 100644
index 0000000..d59996a
--- /dev/null
+++ b/lib/routing/adaptive_page.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+class AdaptivePage<T> extends Page<T> {
+  final Widget child;
+  final bool maintainState;
+  final bool fullscreenDialog;
+
+  const AdaptivePage({
+    required this.child,
+    this.maintainState = true,
+    this.fullscreenDialog = false,
+    super.key,
+    super.name,
+    super.arguments,
+    super.restorationId,
+  });
+
+  @override
+  Route<T> createRoute(BuildContext context) {
+    return defaultTargetPlatform == TargetPlatform.iOS ||
+            defaultTargetPlatform == TargetPlatform.macOS
+        ? CupertinoPageRoute(
+            builder: (context) => child,
+            maintainState: maintainState,
+            fullscreenDialog: fullscreenDialog,
+          )
+        : MaterialPageRoute(
+            builder: (context) => child,
+            maintainState: maintainState,
+            fullscreenDialog: fullscreenDialog,
+          );
+  }
+}
diff --git a/lib/routing/app_router.dart b/lib/routing/app_router.dart
index 7f68aaa..f297fe2 100644
--- a/lib/routing/app_router.dart
+++ b/lib/routing/app_router.dart
@@ -1,10 +1,14 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
+
 import '../common_widgets/cupertino_sheet_route.dart';
 import '../core/providers/initialization.dart';
+import '../core/providers/prefs.dart';
 import '../features/home/home_page.dart';
 import '../features/home/home_page_controller.dart';
+import '../features/instruments/details/gallery_page/instruments_gallery_page.dart';
 import '../features/instruments/details/instrument_details_page.dart';
 import '../features/instruments/instruments_tab_page.dart';
 import '../features/parades/parades_tab_page.dart';
@@ -17,6 +21,11 @@ part 'app_router.g.dart';
 /// Required by StatefulShellRoute in GoRouter
 final _rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'root');
 
+/// If we want to show a page/dialog that cover the bottombar
+final _tabInstruments = GlobalKey<NavigatorState>(debugLabel: 'tabInstruments');
+
+const initialLocationPrefKey = 'initialLocation';
+
 @riverpod
 class AppRouter extends _$AppRouter {
   @override
@@ -24,11 +33,17 @@ class AppRouter extends _$AppRouter {
     final controllers = {
       for (final tab in HomeTab.values) tab.name: ScrollController(),
     };
+    final listenable = ValueNotifier<String>(HomeTab.instruments.path);
+    ref.listen(initialLocationProvider, (_, location) {
+      listenable.value = location.value ?? listenable.value;
+    });
     ref.watch(initializationProvider);
 
     return GoRouter(
       navigatorKey: _rootNavigatorKey,
-      initialLocation: HomeTab.instruments.path,
+      restorationScopeId: 'app',
+      refreshListenable: listenable,
+      initialLocation: Initialization.path,
       errorPageBuilder: (_, __) => const NoTransitionPage(
         child: Scaffold(body: Text('404 - Not Found')),
       ),
@@ -36,11 +51,8 @@ class AppRouter extends _$AppRouter {
       routes: [
         GoRoute(
           path: Initialization.path,
-          pageBuilder: (_, __) => NoTransitionPage(
-            child: Initialization(
-              // * Just a placeholder, route will be managed by GoRouter
-              onLoaded: (_) => const SizedBox.shrink(),
-            ),
+          pageBuilder: (_, __) => const NoTransitionPage(
+            child: Initialization(),
           ),
         ),
         StatefulShellRoute.indexedStack(
@@ -48,6 +60,7 @@ class AppRouter extends _$AppRouter {
               NoTransitionPage(child: HomePage(shell)),
           branches: <StatefulShellBranch>[
             StatefulShellBranch(
+              navigatorKey: _tabInstruments,
               routes: [
                 GoRoute(
                   path: InstrumentsTabPage.path,
@@ -70,6 +83,26 @@ class AppRouter extends _$AppRouter {
                       builder: (_, state) => InstrumentDetailsPage(
                         id: int.parse(state.pathParameters['id']!),
                       ),
+                      routes: [
+                        GoRoute(
+                          parentNavigatorKey: _rootNavigatorKey,
+                          path: InstrumentsGalleryPage.path,
+                          pageBuilder: (_, state) {
+                            final extra = state.extra as Map<String, String>?;
+                            if (extra == null) throw GoError('Extra is null');
+                            final initialIndex = int.parse(extra['index']!);
+                            final instrumentId = int.parse(extra['id']!);
+
+                            return CupertinoPage(
+                              fullscreenDialog: true,
+                              child: InstrumentsGalleryPage(
+                                initialIndex: initialIndex,
+                                instrumentId: instrumentId,
+                              ),
+                            );
+                          },
+                        ),
+                      ],
                     ),
                   ],
                 ),
@@ -136,10 +169,10 @@ class AppRouter extends _$AppRouter {
     }
   }
 
-  FutureOr<String?> _redirect(
+  String? _redirect(
     GoRouterState state,
     Map<String, ScrollController> controllers,
-  ) async {
+  ) {
     final init = ref.watch(initializationProvider);
     if (init.isLoading) {
       return Initialization.path;
@@ -147,28 +180,46 @@ class AppRouter extends _$AppRouter {
     if (init.hasError) {
       return Initialization.path;
     }
-    final path = state.fullPath?.split('/');
-    final topPath = path?.sublist(0, 2).join('/');
-    if (path != null && HomeTab.values.any((v) => v.path == topPath)) {
-      final home = ref.read(homePageControllerProvider);
-      final nextTab = HomeTab.values.firstWhere((t) => t.path == topPath);
-      final top = path.length <= 2;
-      if (home.tab.path != nextTab.path || home.topRoute != top) {
-        await Future.microtask(
+
+    /// Logic to handle the scroll to the top when the root tab is the same
+    final splittedPath =
+        state.fullPath?.split('/').where((v) => v.isNotEmpty).toList();
+    final topPath = '/${splittedPath?.firstOrNull ?? ''}';
+    if (splittedPath != null && HomeTab.values.any((v) => v.path == topPath)) {
+      final (homeTab, isTopRoute) = ref.read(homePageControllerProvider);
+      final isPathTop = splittedPath.length == 1;
+      if (homeTab.path != topPath || isTopRoute != isPathTop) {
+        final nextTab = HomeTab.values.firstWhere((v) => v.path == topPath);
+        Future.microtask(
           () => ref
               .read(homePageControllerProvider.notifier)
-              .set(nextTab, top: top),
+              .set(nextTab, top: isPathTop),
         );
       }
-      if (home.tab.path == nextTab.path && home.topRoute == top) {
-        await Future.microtask(
+      if (homeTab.path == topPath && isTopRoute && isPathTop) {
+        final nextTab = HomeTab.values.firstWhere((v) => v.path == topPath);
+        Future.microtask(
           () => _scrollTabToTheTop(controllers[nextTab.name]!),
         );
       }
+    }
 
-      return null;
+    if (state.fullPath == Initialization.path) {
+      final initialPath = ref.read(initialLocationProvider).value;
+      if (initialPath != null) {
+        return HomeTab.values.firstWhere((tab) => tab.path == initialPath).path;
+      }
+
+      return HomeTab.instruments.path;
     }
 
     return null;
   }
 }
+
+@riverpod
+FutureOr<String?> initialLocation(InitialLocationRef ref) async {
+  final prefs = await ref.watch(prefsProvider.future);
+
+  return prefs.getString(initialLocationPrefKey);
+}
diff --git a/lib/routing/app_router.g.dart b/lib/routing/app_router.g.dart
index df26be6..81de34d 100644
--- a/lib/routing/app_router.g.dart
+++ b/lib/routing/app_router.g.dart
@@ -6,7 +6,22 @@ part of 'app_router.dart';
 // RiverpodGenerator
 // **************************************************************************
 
-String _$appRouterHash() => r'9eba2f50346adf432762ce32a67d505104b7374e';
+String _$initialLocationHash() => r'ccb27e336cb1858587eaf1b2ab2365c484b9a2c5';
+
+/// See also [initialLocation].
+@ProviderFor(initialLocation)
+final initialLocationProvider = AutoDisposeFutureProvider<String?>.internal(
+  initialLocation,
+  name: r'initialLocationProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$initialLocationHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef InitialLocationRef = AutoDisposeFutureProviderRef<String?>;
+String _$appRouterHash() => r'76ee8b423fd5558a0ccb6682c9476bab47e76b8c';
 
 /// See also [AppRouter].
 @ProviderFor(AppRouter)
diff --git a/lib/core/theme/app_theme.dart b/lib/theme/app_theme.dart
similarity index 62%
rename from lib/core/theme/app_theme.dart
rename to lib/theme/app_theme.dart
index ee58245..760ebba 100644
--- a/lib/core/theme/app_theme.dart
+++ b/lib/theme/app_theme.dart
@@ -3,17 +3,22 @@ import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
+import 'app_theme_colors.dart';
+
 const _iOSFontLetterSpacing = -1.5;
 
 class AppTheme {
-  static ThemeData get lightTheme => FlexThemeData.light(
+  static ThemeData lightTheme(AppThemeColors colors) => FlexThemeData.light(
         useMaterial3: true,
-        keyColors: const FlexKeyColors(
-          useSecondary: true,
+        keyColors: FlexKeyColors(
+          useSecondary: colors.secondary != null,
+          useTertiary: colors.tertiary != null,
         ),
-        colors: const FlexSchemeColor(
-          primary: Color(0xffff00a5),
-          secondary: Color(0xff00a859),
+        colors: FlexSchemeColor.from(
+          primary: colors.primary,
+          secondary: colors.secondary ?? colors.primary,
+          tertiary: colors.tertiary,
+          brightness: Brightness.light,
         ),
         background: CupertinoColors.systemGroupedBackground,
         surface: CupertinoColors.systemBackground,
@@ -27,48 +32,67 @@ class AppTheme {
           bottomSheetRadius: 16,
           bottomSheetModalBackgroundColor: SchemeColor.background,
         ),
+        pageTransitionsTheme: const PageTransitionsTheme(
+          builders: {
+            TargetPlatform.android: PredictiveBackPageTransitionsBuilder(),
+            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
+          },
+        ),
         splashFactory: InkSparkle.splashFactory,
         extensions: [
           AppCustomColors.light(),
         ],
       ).copyWith(
-        cupertinoOverrideTheme: getCupertinoTheme(Brightness.light),
-      );
-
-  static ThemeData darkTheme({required bool trueBlack}) => FlexThemeData.dark(
-        useMaterial3: true,
-        keyColors: const FlexKeyColors(
-          useSecondary: true,
-        ),
-        colors: const FlexSchemeColor(
-          primary: Color(0xffff00a5),
-          secondary: Color(0xff00a859),
+        cupertinoOverrideTheme: getCupertinoTheme(
+          colors.primary,
+          Brightness.light,
         ),
-        subThemesData: const FlexSubThemesData(
-          tooltipSchemeColor: SchemeColor.inverseSurface,
-          adaptiveSplash: FlexAdaptive.apple(),
-          chipSchemeColor: SchemeColor.surfaceTint,
-          snackBarBackgroundSchemeColor: SchemeColor.inversePrimary,
-          snackBarRadius: 8,
-          snackBarElevation: 2,
-          bottomSheetRadius: 16,
-          bottomSheetModalBackgroundColor: SchemeColor.background,
-        ),
-        surface: CupertinoColors.systemBackground.darkColor,
-        background: CupertinoColors.systemGroupedBackground.darkColor,
-        splashFactory: InkSparkle.splashFactory,
-        darkIsTrueBlack: trueBlack,
-        extensions: [AppCustomColors.dark()],
-      ).copyWith(
-        cupertinoOverrideTheme: getCupertinoTheme(Brightness.dark),
       );
 
+  static ThemeData darkTheme(AppThemeColors colors, {required bool trueBlack}) {
+    return FlexThemeData.dark(
+      useMaterial3: true,
+      keyColors: FlexKeyColors(
+        useSecondary: colors.secondary != null,
+        useTertiary: colors.tertiary != null,
+      ),
+      colors: FlexSchemeColor.from(
+        primary: colors.primary,
+        secondary: colors.secondary ?? colors.primary,
+        tertiary: colors.tertiary,
+        brightness: Brightness.dark,
+      ),
+      usedColors: colors.usedColors,
+      subThemesData: const FlexSubThemesData(
+        tooltipSchemeColor: SchemeColor.inverseSurface,
+        adaptiveSplash: FlexAdaptive.apple(),
+        chipSchemeColor: SchemeColor.surfaceTint,
+        snackBarBackgroundSchemeColor: SchemeColor.inversePrimary,
+        snackBarRadius: 8,
+        snackBarElevation: 2,
+        bottomSheetRadius: 16,
+        bottomSheetModalBackgroundColor: SchemeColor.background,
+      ),
+      surface: CupertinoColors.systemBackground.darkColor,
+      background: CupertinoColors.systemGroupedBackground.darkColor,
+      splashFactory: InkSparkle.splashFactory,
+      darkIsTrueBlack: trueBlack,
+      extensions: [AppCustomColors.dark()],
+    ).copyWith(
+      cupertinoOverrideTheme: getCupertinoTheme(
+        colors.primary,
+        Brightness.dark,
+      ),
+    );
+  }
+
   static CupertinoThemeData getCupertinoTheme(
+    Color primaryColor,
     Brightness brightness,
   ) {
     return CupertinoThemeData(
       brightness: brightness,
-      primaryColor: const Color(0xffff00a5),
+      primaryColor: primaryColor,
       barBackgroundColor: brightness == Brightness.dark
           ? CupertinoColors.systemBackground.darkColor
           : CupertinoColors.systemBackground.color,
diff --git a/lib/theme/app_theme_colors.dart b/lib/theme/app_theme_colors.dart
new file mode 100644
index 0000000..de6d4ba
--- /dev/null
+++ b/lib/theme/app_theme_colors.dart
@@ -0,0 +1,54 @@
+import 'package:dart_mappable/dart_mappable.dart';
+import 'package:flutter/material.dart';
+
+import '../constants.dart';
+
+part 'app_theme_colors.mapper.dart';
+
+@MappableClass(includeCustomMappers: [ColorMapper()])
+class AppThemeColors with AppThemeColorsMappable {
+  final Color primary;
+  final Color? secondary;
+  final Color? tertiary;
+  final String name;
+
+  static const fromMap = AppThemeColorsMapper.fromMap;
+  static const fromJson = AppThemeColorsMapper.fromJson;
+
+  AppThemeColors({
+    required this.primary,
+    required this.name,
+    this.secondary,
+    this.tertiary,
+  });
+
+  AppThemeColors.defaultColors()
+      : primary = const Color(0xffff00a5),
+        name = Constants.defaultColorName,
+        secondary = const Color(0xff00a859),
+        tertiary = null;
+}
+
+extension AppColorsExtension on AppThemeColors {
+  int get usedColors {
+    return (secondary != null ? 1 : 0) + (tertiary != null ? 1 : 0) + 1;
+  }
+}
+
+class ColorMapper extends SimpleMapper<Color> {
+  const ColorMapper();
+
+  @override
+  Color decode(dynamic value) {
+    if (value is int) {
+      return Color(value);
+    }
+
+    return Color(int.parse(value.toString()));
+  }
+
+  @override
+  dynamic encode(Color self) {
+    return self.value;
+  }
+}
diff --git a/lib/theme/app_theme_colors.mapper.dart b/lib/theme/app_theme_colors.mapper.dart
new file mode 100644
index 0000000..e828ba8
--- /dev/null
+++ b/lib/theme/app_theme_colors.mapper.dart
@@ -0,0 +1,141 @@
+// coverage:ignore-file
+// GENERATED CODE - DO NOT MODIFY BY HAND
+// ignore_for_file: type=lint
+// ignore_for_file: unused_element, unnecessary_cast, override_on_non_overriding_member
+// ignore_for_file: strict_raw_type, inference_failure_on_untyped_parameter
+
+part of 'app_theme_colors.dart';
+
+class AppThemeColorsMapper extends ClassMapperBase<AppThemeColors> {
+  AppThemeColorsMapper._();
+
+  static AppThemeColorsMapper? _instance;
+  static AppThemeColorsMapper ensureInitialized() {
+    if (_instance == null) {
+      MapperContainer.globals.use(_instance = AppThemeColorsMapper._());
+      MapperContainer.globals.useAll([ColorMapper()]);
+    }
+    return _instance!;
+  }
+
+  @override
+  final String id = 'AppThemeColors';
+
+  static Color _$primary(AppThemeColors v) => v.primary;
+  static const Field<AppThemeColors, Color> _f$primary =
+      Field('primary', _$primary);
+  static String _$name(AppThemeColors v) => v.name;
+  static const Field<AppThemeColors, String> _f$name = Field('name', _$name);
+  static Color? _$secondary(AppThemeColors v) => v.secondary;
+  static const Field<AppThemeColors, Color> _f$secondary =
+      Field('secondary', _$secondary, opt: true);
+  static Color? _$tertiary(AppThemeColors v) => v.tertiary;
+  static const Field<AppThemeColors, Color> _f$tertiary =
+      Field('tertiary', _$tertiary, opt: true);
+
+  @override
+  final MappableFields<AppThemeColors> fields = const {
+    #primary: _f$primary,
+    #name: _f$name,
+    #secondary: _f$secondary,
+    #tertiary: _f$tertiary,
+  };
+
+  static AppThemeColors _instantiate(DecodingData data) {
+    return AppThemeColors(
+        primary: data.dec(_f$primary),
+        name: data.dec(_f$name),
+        secondary: data.dec(_f$secondary),
+        tertiary: data.dec(_f$tertiary));
+  }
+
+  @override
+  final Function instantiate = _instantiate;
+
+  static AppThemeColors fromMap(Map<String, dynamic> map) {
+    return ensureInitialized().decodeMap<AppThemeColors>(map);
+  }
+
+  static AppThemeColors fromJson(String json) {
+    return ensureInitialized().decodeJson<AppThemeColors>(json);
+  }
+}
+
+mixin AppThemeColorsMappable {
+  String toJson() {
+    return AppThemeColorsMapper.ensureInitialized()
+        .encodeJson<AppThemeColors>(this as AppThemeColors);
+  }
+
+  Map<String, dynamic> toMap() {
+    return AppThemeColorsMapper.ensureInitialized()
+        .encodeMap<AppThemeColors>(this as AppThemeColors);
+  }
+
+  AppThemeColorsCopyWith<AppThemeColors, AppThemeColors, AppThemeColors>
+      get copyWith => _AppThemeColorsCopyWithImpl(
+          this as AppThemeColors, $identity, $identity);
+  @override
+  String toString() {
+    return AppThemeColorsMapper.ensureInitialized()
+        .stringifyValue(this as AppThemeColors);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return AppThemeColorsMapper.ensureInitialized()
+        .equalsValue(this as AppThemeColors, other);
+  }
+
+  @override
+  int get hashCode {
+    return AppThemeColorsMapper.ensureInitialized()
+        .hashValue(this as AppThemeColors);
+  }
+}
+
+extension AppThemeColorsValueCopy<$R, $Out>
+    on ObjectCopyWith<$R, AppThemeColors, $Out> {
+  AppThemeColorsCopyWith<$R, AppThemeColors, $Out> get $asAppThemeColors =>
+      $base.as((v, t, t2) => _AppThemeColorsCopyWithImpl(v, t, t2));
+}
+
+abstract class AppThemeColorsCopyWith<$R, $In extends AppThemeColors, $Out>
+    implements ClassCopyWith<$R, $In, $Out> {
+  $R call({Color? primary, String? name, Color? secondary, Color? tertiary});
+  AppThemeColorsCopyWith<$R2, $In, $Out2> $chain<$R2, $Out2>(
+      Then<$Out2, $R2> t);
+}
+
+class _AppThemeColorsCopyWithImpl<$R, $Out>
+    extends ClassCopyWithBase<$R, AppThemeColors, $Out>
+    implements AppThemeColorsCopyWith<$R, AppThemeColors, $Out> {
+  _AppThemeColorsCopyWithImpl(super.value, super.then, super.then2);
+
+  @override
+  late final ClassMapperBase<AppThemeColors> $mapper =
+      AppThemeColorsMapper.ensureInitialized();
+  @override
+  $R call(
+          {Color? primary,
+          String? name,
+          Object? secondary = $none,
+          Object? tertiary = $none}) =>
+      $apply(FieldCopyWithData({
+        if (primary != null) #primary: primary,
+        if (name != null) #name: name,
+        if (secondary != $none) #secondary: secondary,
+        if (tertiary != $none) #tertiary: tertiary
+      }));
+  @override
+  AppThemeColors $make(CopyWithData data) => AppThemeColors(
+      primary: data.get(#primary, or: $value.primary),
+      name: data.get(#name, or: $value.name),
+      secondary: data.get(#secondary, or: $value.secondary),
+      tertiary: data.get(#tertiary, or: $value.tertiary));
+
+  @override
+  AppThemeColorsCopyWith<$R2, AppThemeColors, $Out2> $chain<$R2, $Out2>(
+          Then<$Out2, $R2> t) =>
+      _AppThemeColorsCopyWithImpl($value, $cast, t);
+}
diff --git a/lib/core/theme/theme_mode_controller.dart b/lib/theme/theme_mode_controller.dart
similarity index 61%
rename from lib/core/theme/theme_mode_controller.dart
rename to lib/theme/theme_mode_controller.dart
index db961d7..f1911a2 100644
--- a/lib/core/theme/theme_mode_controller.dart
+++ b/lib/theme/theme_mode_controller.dart
@@ -1,8 +1,10 @@
+import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:flutter/material.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
-import '../../utils/app_loggers.dart';
-import '../providers/prefs.dart';
+import '../core/providers/prefs.dart';
+import '../utils/app_loggers.dart';
+import 'app_theme_colors.dart';
 
 part 'theme_mode_controller.g.dart';
 
@@ -46,7 +48,7 @@ class ThemeModeController extends _$ThemeModeController {
     }
   }
 
-  void setTheme(ThemeMode mode) {
+  void setThemeMode(ThemeMode mode) {
     final prefs = ref.read(prefsProvider).requireValue;
     switch (mode) {
       case ThemeMode.system:
@@ -86,3 +88,44 @@ class AppThemeTrueBlack extends _$AppThemeTrueBlack {
     }
   }
 }
+
+@riverpod
+class AppSelectedColors extends _$AppSelectedColors {
+  @override
+  AppThemeColors build() {
+    final prefs = ref.watch(prefsProvider).value;
+    final colors = prefs?.getString('theme_color');
+    if (colors != null) {
+      return AppThemeColors.fromJson(colors);
+    }
+
+    return AppThemeColors.defaultColors();
+  }
+
+  Future<void> setThemeColors(AppThemeColors colors) async {
+    const percentage = 30;
+
+    final primaryLuminance = colors.primary.computeLuminance();
+    final secondaryLuminance = colors.secondary?.computeLuminance() ?? 0;
+    final validLuminance = secondaryLuminance != 0 && secondaryLuminance != 1;
+
+    Color primary = colors.primary;
+    final secondary = colors.secondary;
+
+    if (primaryLuminance == 0) {
+      primary = secondary != null && validLuminance
+          ? secondary
+          : colors.primary.lighten(percentage);
+    } else if (primaryLuminance == 1) {
+      primary = secondary != null && validLuminance
+          ? secondary
+          : colors.primary.darken(percentage);
+    }
+
+    state = colors.copyWith(primary: primary);
+    await ref
+        .read(prefsProvider)
+        .value
+        ?.setString('theme_color', colors.toJson());
+  }
+}
diff --git a/lib/core/theme/theme_mode_controller.g.dart b/lib/theme/theme_mode_controller.g.dart
similarity index 72%
rename from lib/core/theme/theme_mode_controller.g.dart
rename to lib/theme/theme_mode_controller.g.dart
index 79ac38e..2365436 100644
--- a/lib/core/theme/theme_mode_controller.g.dart
+++ b/lib/theme/theme_mode_controller.g.dart
@@ -7,7 +7,7 @@ part of 'theme_mode_controller.dart';
 // **************************************************************************
 
 String _$themeModeControllerHash() =>
-    r'dff5d6a2e47b086ae84bc400b4308dbce1143d7e';
+    r'ecfde857bd61bdf69250f1c193d00e516093c95f';
 
 /// See also [ThemeModeController].
 @ProviderFor(ThemeModeController)
@@ -39,5 +39,21 @@ final appThemeTrueBlackProvider =
 );
 
 typedef _$AppThemeTrueBlack = AutoDisposeNotifier<bool>;
+String _$appSelectedColorsHash() => r'cd7890940196742ede9b8a273da882480c804d92';
+
+/// See also [AppSelectedColors].
+@ProviderFor(AppSelectedColors)
+final appSelectedColorsProvider =
+    AutoDisposeNotifierProvider<AppSelectedColors, AppThemeColors>.internal(
+  AppSelectedColors.new,
+  name: r'appSelectedColorsProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$appSelectedColorsHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$AppSelectedColors = AutoDisposeNotifier<AppThemeColors>;
 // ignore_for_file: type=lint
 // ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, inference_failure_on_uninitialized_variable, inference_failure_on_function_return_type, inference_failure_on_untyped_parameter, deprecated_member_use_from_same_package
diff --git a/lib/utils/immutable_list.dart b/lib/utils/immutable_list.dart
index 94391b8..e36c230 100644
--- a/lib/utils/immutable_list.dart
+++ b/lib/utils/immutable_list.dart
@@ -3,6 +3,7 @@ import 'package:fast_immutable_collections/fast_immutable_collections.dart'
     as ic;
 
 typedef ImmutableList<T> = IList<T>;
+typedef IListConst<T> = ic.IListConst<T>;
 typedef IList<T> = ic.IList<T>;
 
 void initializeFICMappers() {
@@ -16,3 +17,8 @@ void initializeFICMappers() {
     ),
   ]);
 }
+
+// ignore: prefer_match_file_name
+extension ListX<T> on List<T> {
+  ImmutableList<T> get toImmutable => ImmutableList<T>(this);
+}
diff --git a/macos/Runner/Info.plist b/macos/Runner/Info.plist
index 4789daa..e07c781 100644
--- a/macos/Runner/Info.plist
+++ b/macos/Runner/Info.plist
@@ -28,5 +28,7 @@
 	<string>MainMenu</string>
 	<key>NSPrincipalClass</key>
 	<string>NSApplication</string>
+	<key>FLTEnableImpeller</key>
+  	<true />
 </dict>
 </plist>
diff --git a/pubspec.lock b/pubspec.lock
index db3d582..a8705bf 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -185,6 +185,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.18.0"
+  const_date_time:
+    dependency: "direct main"
+    description:
+      name: const_date_time
+      sha256: c110fcda4371c2f240348a4b9da8169c8b3a31d910100eb408d3b48581fb751b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   convert:
     dependency: transitive
     description:
@@ -281,6 +289,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.3.6"
+  dependency_validator:
+    dependency: "direct dev"
+    description:
+      name: dependency_validator
+      sha256: f727a5627aa405965fab4aef4f468e50a9b632ba0737fd2f98c932fec6d712b9
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.2.3"
   dio:
     dependency: "direct main"
     description:
@@ -313,14 +329,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.0.4"
-  easy_image_viewer:
-    dependency: "direct main"
-    description:
-      name: easy_image_viewer
-      sha256: eca828c492d580f9bd775495b281cf6481d34109b73010f1e9a3db87c4d2e5f7
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.5.0"
   extended_image:
     dependency: "direct main"
     description:
@@ -357,18 +365,18 @@ packages:
     dependency: transitive
     description:
       name: fetch_api
-      sha256: "6de87206bfc4b40a3084c791df806bb4c8cc0c7e54f06dcd25701466055caa57"
+      sha256: c0a76bfd84d4bc5a0733ab8b9fcee268d5069228790a6dd71fc2a6d1049223cc
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.0"
+    version: "2.1.0"
   fetch_client:
     dependency: "direct main"
     description:
       name: fetch_client
-      sha256: e11722d7d8cd21f944b52af780392274f7c34a41156b1c80053fc2a414e09a1b
+      sha256: "0b935eff9dfa84fb56bddadaf020c9aa61f02cbd6fa8dad914d6d343a838936d"
       url: "https://pub.dev"
     source: hosted
-    version: "1.1.0-wasm"
+    version: "1.1.1"
   ffi:
     dependency: transitive
     description:
@@ -414,6 +422,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_dotenv:
+    dependency: "direct main"
+    description:
+      name: flutter_dotenv
+      sha256: "9357883bdd153ab78cbf9ffa07656e336b8bbb2b5a3ca596b0b27e119f7c7d77"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.1.0"
   flutter_localizations:
     dependency: "direct main"
     description: flutter
@@ -949,6 +965,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  skeletonizer:
+    dependency: "direct main"
+    description:
+      name: skeletonizer
+      sha256: "50c3fdf3d1bf6182129c03b53bc7ff6dca10ca0b8e71ccdee148b9322caabdba"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2+1"
   sky_engine:
     dependency: transitive
     description: flutter
diff --git a/pubspec.yaml b/pubspec.yaml
index d20bbd0..7f52f15 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -10,20 +10,20 @@ environment:
   flutter: 3.22.0-0.3.pre
 
 dependencies:
+  const_date_time: ^1.1.0
   cupertino_icons: ^1.0.6
   dart_mappable: ^4.2.2
   dio: ^5.4.3
   dio_cache_interceptor: ^3.5.0
   dio_cache_interceptor_hive_store: ^3.2.2
   dynamic_height_grid_view: ^0.0.4
-  easy_image_viewer: ^1.4.1
   extended_image: ^8.2.0
   fast_immutable_collections: ^10.2.2
-  fetch_client: ^1.1.0-wasm
+  fetch_client: ^1.1.1
   flex_color_scheme: ^7.3.1
   flutter:
     sdk: flutter
-
+  flutter_dotenv: ^5.1.0
   flutter_localizations:
     sdk: flutter
   flutter_riverpod: ^3.0.0-dev.3
@@ -37,6 +37,7 @@ dependencies:
   riverpod_annotation: ^3.0.0-dev.3
   shared_preferences: ^2.2.2
   sheet: ^1.0.0
+  skeletonizer: ^1.1.2+1
   sliver_tools: ^0.2.12
   super_sliver_list: ^0.4.1
   transparent_image: ^2.0.1
@@ -45,6 +46,7 @@ dev_dependencies:
   build_runner: ^2.4.8
   custom_lint: ^0.5.11
   dart_mappable_builder: ^4.2.3
+  dependency_validator: ^3.0.0
   flutter_native_splash: ^2.4.0
   flutter_test:
     sdk: flutter
@@ -55,6 +57,7 @@ dev_dependencies:
   riverpod_lint: ^3.0.0-dev.4
   solid_lints: ^0.1.2
   very_good_analysis: ^5.1.0
+  
 
 flutter:
   uses-material-design: true
@@ -62,7 +65,8 @@ flutter:
   
   assets:
     # Add assets from the images directory to the application.
-    - assets/images/
+    - assets/
+    - .env
 
 icons_launcher:
   image_path: 'assets/ic_logo_border.png'
@@ -74,7 +78,7 @@ icons_launcher:
       adaptive_foreground_image: 'assets/ic_foreground.png'
     ios:
       enable: true
-      image_path: 'assets/ic_logo_border.png'
+      image_path: 'assets/ic_logo.png'
     web:
       enable: true
       image_path: 'assets/ic_logo_border.png'
@@ -82,6 +86,7 @@ icons_launcher:
 
 flutter_native_splash:
   color: "#100065"
+  branding: assets/ic_foreground.png
 
   android_12:
 
diff --git a/test/core/providers/client_network_provider_test.dart b/test/core/providers/client_network_provider_test.dart
index 02112cf..84a1490 100644
--- a/test/core/providers/client_network_provider_test.dart
+++ b/test/core/providers/client_network_provider_test.dart
@@ -4,6 +4,7 @@
 import 'package:batucadapp/constants.dart';
 import 'package:batucadapp/core/providers/client_network.dart';
 import 'package:dio/dio.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:http_mock_adapter/http_mock_adapter.dart';
@@ -21,6 +22,14 @@ class Listener<T> extends Mock {
 }
 
 void main() {
+  setUpAll(() {
+    dotenv.testLoad(
+      fileInput: '''
+                  API_URL=https://api.example.com
+                  ''',
+    );
+  });
+
   const dioOkResponseCode = 200;
   group('ClientNetwork build', () {
     test('Dio is configured with correct base URL and language', () async {
diff --git a/test/core/theme/theme_provider_test.dart b/test/core/theme/theme_provider_test.dart
index 39c2f3d..5786ba6 100644
--- a/test/core/theme/theme_provider_test.dart
+++ b/test/core/theme/theme_provider_test.dart
@@ -1,5 +1,5 @@
 import 'package:batucadapp/core/providers/prefs.dart';
-import 'package:batucadapp/core/theme/theme_mode_controller.dart';
+import 'package:batucadapp/theme/theme_mode_controller.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -100,7 +100,7 @@ void main() {
       expect(container.read(themeModeControllerProvider), ThemeMode.system);
       container
           .read(themeModeControllerProvider.notifier)
-          .setTheme(ThemeMode.system);
+          .setThemeMode(ThemeMode.system);
       verify(() => mockSharedPreferences.remove('theme_mode')).called(1);
       expect(container.read(themeModeControllerProvider), ThemeMode.system);
     });
@@ -112,7 +112,7 @@ void main() {
       final container = makeProviderContainer(mockSharedPreferences);
       container
           .read(themeModeControllerProvider.notifier)
-          .setTheme(ThemeMode.light);
+          .setThemeMode(ThemeMode.light);
       verify(() => mockSharedPreferences.setString('theme_mode', 'light'))
           .called(1);
       expect(container.read(themeModeControllerProvider), ThemeMode.light);
@@ -125,7 +125,7 @@ void main() {
       final container = makeProviderContainer(mockSharedPreferences);
       container
           .read(themeModeControllerProvider.notifier)
-          .setTheme(ThemeMode.dark);
+          .setThemeMode(ThemeMode.dark);
       verify(() => mockSharedPreferences.setString('theme_mode', 'dark'))
           .called(1);
       expect(container.read(themeModeControllerProvider), ThemeMode.dark);