diff --git a/lib/components/app_bar.dart b/lib/components/app_bar.dart
index c2079f7..4cc7c3e 100644
--- a/lib/components/app_bar.dart
+++ b/lib/components/app_bar.dart
@@ -22,6 +22,11 @@ class GymLinkAppBar extends StatelessWidget implements PreferredSizeWidget {
               width: 24,
               height: 24,
               semanticsLabel: 'GymLink Logo',
+              colorFilter: ColorFilter.mode(
+                  Theme.of(context).brightness == Brightness.dark
+                      ? Colors.white
+                      : Colors.black,
+                  BlendMode.srcIn),
             ),
           ),
           Align(
diff --git a/lib/mobile_example.dart b/lib/mobile_example.dart
index 03e98f6..6c52a2b 100644
--- a/lib/mobile_example.dart
+++ b/lib/mobile_example.dart
@@ -129,7 +129,7 @@ class _ExamplePageState extends State<ExamplePage> {
   Future<void> _setToken() async {
     final token = await getToken('eeb42dcb-8e5b-4f21-825a-3fc7ada43445', '123');
     if (token != '') {
-      context.read<GymLinkProvider>().onTokenReceived(token);
+      context.read<GymLinkProvider>().checkToken(token);
     } else {
       context.read<GymLinkProvider>().onError();
     }
@@ -205,7 +205,7 @@ class _ExampleClub2PageState extends State<ExampleClub2Page> {
     final token = await getToken('a8622a61-3142-487e-8db8-b6aebd4f04aa', '123');
     context.read<GymLinkProvider>().changeTheme(0xFFAABCAB);
     if (token != '') {
-      context.read<GymLinkProvider>().onTokenReceived(token);
+      context.read<GymLinkProvider>().checkToken(token);
     } else {
       context.read<GymLinkProvider>().onError();
     }
diff --git a/lib/pages/main.dart b/lib/pages/main.dart
index effdae4..869cbb8 100644
--- a/lib/pages/main.dart
+++ b/lib/pages/main.dart
@@ -73,6 +73,7 @@ class _MainPageState extends State<MainPage> {
   bool isSearching = false;
   List<GymCategory> categories = [];
   GymCategory? selectedCategory;
+  final ScrollController _scrollController = ScrollController();
 
   @override
   void initState() {
@@ -122,7 +123,7 @@ class _MainPageState extends State<MainPage> {
     });
   }
 
-  void _onSearch() async {
+  void _onSearch() {
     final categoryId = selectedCategory == null ? '' : selectedCategory!.id;
     _searchItems(searchText: searchText, categoryId: categoryId);
   }
@@ -250,7 +251,9 @@ class _MainPageState extends State<MainPage> {
               onEndOfPage: _onLoad,
               isLoading: isLoading,
               child: Scrollbar(
+                controller: _scrollController,
                 child: ListView(
+                  controller: _scrollController,
                   children: [
                     filteredData.isEmpty &&
                             (searchText != '' || selectedCategory != null) &&
diff --git a/lib/providers/main.dart b/lib/providers/main.dart
index 69eda9d..16cf9b2 100644
--- a/lib/providers/main.dart
+++ b/lib/providers/main.dart
@@ -14,17 +14,10 @@ class GymLinkProvider with ChangeNotifier {
 
   void Function() get onError => _onError;
 
-  void onTokenReceived(String token) {
+  void checkToken(String token) {
     _token = token;
     _isLoading = false;
     notifyListeners();
-    // if (token == 'token123') {
-    //   _isLoading = false;
-    //   notifyListeners();
-    // } else {
-    //   _isLoading = true;
-    //   notifyListeners();
-    // }
   }
 
   void changeTheme(int color, {bool blackTheme = false}) {
diff --git a/lib/states/web.dart b/lib/states/web.dart
index 1a00024..bd60f62 100644
--- a/lib/states/web.dart
+++ b/lib/states/web.dart
@@ -48,13 +48,13 @@ class MyAppStateWeb extends State<MyApp> {
   }
 
   @js.JSExport()
-  void onTokenReceived(String token) {
-    context.read<GymLinkProvider>().onTokenReceived(token);
+  void checkToken(String token) {
+    context.read<GymLinkProvider>().checkToken(token);
   }
 
   @js.JSExport()
-  void changeColor(int color) {
-    context.read<GymLinkProvider>().changeTheme(color);
+  void changeColor(int color, bool blackTheme) {
+    context.read<GymLinkProvider>().changeTheme(color, blackTheme: blackTheme);
   }
 
   @js.JSExport()
diff --git a/web/index.html b/web/index.html
index 74caa6e..f9b0c2c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <!--
+    <head>
+        <!--
     If you are serving your web app in a path other than the root, change the
     href value below to reflect the base path you are serving from.
 
@@ -14,54 +14,55 @@
     This is a placeholder for base href that will be replaced by the value of
     the `--base-href` argument provided to `flutter build`.
   -->
-  <base href="$FLUTTER_BASE_HREF">
+        <base href="$FLUTTER_BASE_HREF" />
 
-  <meta charset="UTF-8">
-  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
+        <meta charset="UTF-8" />
+        <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
+        <meta name="description" content="A new Flutter project." />
 
-  <!-- iOS meta tags & icons -->
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="flutter_application_1">
-  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+        <!-- iOS meta tags & icons -->
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="apple-mobile-web-app-title" content="flutter_application_1" />
+        <link rel="apple-touch-icon" href="icons/Icon-192.png" />
 
-  <!-- Favicon -->
-  <link rel="icon" type="image/png" href="favicon.png"/>
+        <!-- Favicon -->
+        <link rel="icon" type="image/png" href="favicon.png" />
 
-  <title>flutter_application_1</title>
-  <link rel='stylesheet' href='css/styles.css'>
-  <link rel="manifest" href="manifest.json">
+        <title>flutter_application_1</title>
+        <link rel="stylesheet" href="css/styles.css" />
+        <link rel="manifest" href="manifest.json" />
 
-  <!-- <script>
+        <!-- <script>
     // The value below is injected by flutter build, do not touch.
     const serviceWorkerVersion = null;
   </script> -->
-  <!-- This script adds the flutter initialization JS code -->
-  <script src="flutter.js" defer></script>
-</head>
-<body>
-  <button id='token'>Token btn</button>
-  <button id='colorChangeBtnRed'>Color btn Red</button>
-  <button id='colorChangeBtnBlue'>Color btn Blue</button>
-  <section class='contents'>
-    <article>
-      <div id="flutter_target"></div>
-    </article>
-  </section>
-  <script>
-    window.addEventListener('load', function(ev) {
-      let target = document.querySelector('#flutter_target');
-      _flutter.loader.loadEntrypoint({
-        onEntrypointLoaded: async function (engineInitializer) {
-          let appRunner = await engineInitializer.initializeEngine({
-            hostElement: target,
-          });
-          await appRunner.runApp();
-        }
-      })
-    });
-  </script>
-  <script src='js/demo-js-interop.js' defer></script>
-</body>
+        <!-- This script adds the flutter initialization JS code -->
+        <script src="flutter.js" defer></script>
+    </head>
+    <body>
+        <button id="token">Token btn</button>
+        <button id="token2">Token btn 2</button>
+        <button id="colorChangeBtnRed">Color btn Red</button>
+        <button id="colorChangeBtnBlue">Color btn Blue</button>
+        <section class="contents">
+            <article>
+                <div id="flutter_target"></div>
+            </article>
+        </section>
+        <script>
+            window.addEventListener('load', function (ev) {
+                let target = document.querySelector('#flutter_target');
+                _flutter.loader.loadEntrypoint({
+                    onEntrypointLoaded: async function (engineInitializer) {
+                        let appRunner = await engineInitializer.initializeEngine({
+                            hostElement: target,
+                        });
+                        await appRunner.runApp();
+                    },
+                });
+            });
+        </script>
+        <script src="js/demo-js-interop.js" defer></script>
+    </body>
 </html>
diff --git a/web/js/demo-js-interop.js b/web/js/demo-js-interop.js
index 92e010c..bfb7cae 100644
--- a/web/js/demo-js-interop.js
+++ b/web/js/demo-js-interop.js
@@ -7,26 +7,22 @@
         };
         let appState = window._appState;
 
-        function getToken() {
-            fetch(
-                'http://gymlink.freemyip.com:8080/api/auth/authorize_client',
-                {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        GymKey: 'eeb42dcb-8e5b-4f21-825a-3fc7ada43445', // Just testing token
-                        id: '123',
-                    }),
-                }
-            )
+        function getToken(token) {
+            fetch('http://gymlink.freemyip.com:8080/api/auth/authorize_client', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    GymKey: token, // Just testing token
+                    id: '123',
+                }),
+            })
                 .then(res => res.json())
                 .catch(e => {
                     console.log(e);
                     setTimeout(getToken, 1000);
                 })
                 .then(data => {
-                    if (data.payload)
-                        appState.onTokenReceived(data.payload.token);
+                    if (data.payload) appState.checkToken(data.payload.token);
                     else {
                         console.log(data);
                         setTimeout(getToken, 1000);
@@ -34,31 +30,28 @@
                 });
         }
 
-        let btn = document.getElementById('token');
-        btn.addEventListener('click', getToken);
+        const btn = document.getElementById('token');
+        btn.addEventListener('click', () => getToken('eeb42dcb-8e5b-4f21-825a-3fc7ada43445'));
+
+        const btn2 = document.getElementById('token2');
+        btn2.addEventListener('click', () => getToken('a8622a61-3142-487e-8db8-b6aebd4f04aa'));
 
         let colorChangeBtnRed = document.getElementById('colorChangeBtnRed');
         colorChangeBtnRed.addEventListener('click', function () {
             var hexColor = '#FF0000'
-                .replace(
-                    /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
-                    (m, r, g, b) => '#ff' + r + r + g + g + b + b
-                )
+                .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#ff' + r + r + g + g + b + b)
                 .substring(1);
             var numColor = parseInt(hexColor, 16);
-            appState.changeColor(numColor);
+            appState.changeColor(numColor, true);
         });
 
         let colorChangeBtnBlue = document.getElementById('colorChangeBtnBlue');
         colorChangeBtnBlue.addEventListener('click', function () {
             var hexColor = '#0000FF'
-                .replace(
-                    /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
-                    (m, r, g, b) => '#ff' + r + r + g + g + b + b
-                )
+                .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#ff' + r + r + g + g + b + b)
                 .substring(1);
             var numColor = parseInt(hexColor, 16);
-            appState.changeColor(numColor);
+            appState.changeColor(numColor, false);
         });
 
         function onError() {