diff --git a/README.md b/README.md
index 5723bff..e3f1ea2 100644
--- a/README.md
+++ b/README.md
@@ -39,5 +39,7 @@ When building for release, please make sure to enable the canvaskit renderer oth
 
 ## © Copyright
 Certain images and sounds used in this project have been acquired from sources that provide copyright free services.
+
 Images are compiled from [Pexels](https://www.pexels.com/) and [Vecteezy](https://vecteezy.com/).
+
 Sounds are compiled from [Zapsplat](https://www.zapsplat.com/), [Mixkit](https://mixkit.co/) and [Pixabay](https://pixabay.com/).
\ No newline at end of file
diff --git a/android/app/build.gradle b/android/app/build.gradle
index ef0bfa5..6ccba77 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -44,8 +44,8 @@ android {
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.beck.slide_puzzle"
-        minSdkVersion flutter.minSdkVersion
-        targetSdkVersion flutter.targetSdkVersion
+        minSdkVersion 21
+        targetSdkVersion 30
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index e7c9f0b..ea8f3ea 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -8,7 +8,7 @@
         </intent>
     </queries>
    <application
-        android:label="Slide Puzzle"
+        android:label="Retro Slide Puzzle"
         android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher">
         <activity
diff --git a/android/app/src/main/res/drawable-hdpi/splash.png b/android/app/src/main/res/drawable-hdpi/splash.png
new file mode 100644
index 0000000..7f0e628
Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-mdpi/splash.png b/android/app/src/main/res/drawable-mdpi/splash.png
new file mode 100644
index 0000000..b1c5de3
Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-v21/background.png b/android/app/src/main/res/drawable-v21/background.png
new file mode 100644
index 0000000..e29b3b5
Binary files /dev/null and b/android/app/src/main/res/drawable-v21/background.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 f74085f..3fe6b2e 100644
--- a/android/app/src/main/res/drawable-v21/launch_background.xml
+++ b/android/app/src/main/res/drawable-v21/launch_background.xml
@@ -1,12 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Modify this file to customize your launch splash screen -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="?android:colorBackground" />
-
-    <!-- You can insert your own image assets here -->
-    <!-- <item>
-        <bitmap
-            android:gravity="center"
-            android:src="@mipmap/launch_image" />
-    </item> -->
-</layer-list>
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background"/>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/android/app/src/main/res/drawable-xhdpi/splash.png b/android/app/src/main/res/drawable-xhdpi/splash.png
new file mode 100644
index 0000000..f34812a
Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/splash.png b/android/app/src/main/res/drawable-xxhdpi/splash.png
new file mode 100644
index 0000000..61d54ab
Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/splash.png b/android/app/src/main/res/drawable-xxxhdpi/splash.png
new file mode 100644
index 0000000..5447da6
Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable/background.png b/android/app/src/main/res/drawable/background.png
new file mode 100644
index 0000000..e29b3b5
Binary files /dev/null and b/android/app/src/main/res/drawable/background.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 304732f..3fe6b2e 100644
--- a/android/app/src/main/res/drawable/launch_background.xml
+++ b/android/app/src/main/res/drawable/launch_background.xml
@@ -1,12 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Modify this file to customize your launch splash screen -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@android:color/white" />
-
-    <!-- You can insert your own image assets here -->
-    <!-- <item>
-        <bitmap
-            android:gravity="center"
-            android:src="@mipmap/launch_image" />
-    </item> -->
-</layer-list>
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background"/>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
index db77bb4..5faa99d 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
index 17987b7..9ab9909 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
index 09d4391..fd13f7d 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
index d5f1c8d..bf55337 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
index 4d6372e..e3c9f35 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/values-v31/styles.xml b/android/app/src/main/res/values-v31/styles.xml
new file mode 100644
index 0000000..37aab1f
--- /dev/null
+++ b/android/app/src/main/res/values-v31/styles.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
+    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:forceDarkAllowed">false</item>
+        <item name="android:windowFullscreen">false</item>
+        <item name="android:windowSplashScreenBackground">#ffffff</item>
+    </style>
+    <!-- Theme applied to the Android Window as soon as the process has started.
+         This theme determines the color of the Android Window while your
+         Flutter UI initializes, as well as behind your Flutter UI while its
+         running.
+         
+         This Theme is only used starting with V2 of Flutter's Android embedding. -->
+    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:windowBackground">?android:colorBackground</item>
+    </style>
+</resources>
\ No newline at end of file
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index d460d1e..4e3029c 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -5,6 +5,8 @@
         <!-- Show a splash screen on the activity. Automatically removed when
              Flutter draws its first frame -->
         <item name="android:windowBackground">@drawable/launch_background</item>
+        <item name="android:forceDarkAllowed">false</item>
+        <item name="android:windowFullscreen">false</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your
@@ -15,4 +17,4 @@
     <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <item name="android:windowBackground">?android:colorBackground</item>
     </style>
-</resources>
+</resources>
\ No newline at end of file
diff --git a/assets/aa795e77afcd7077b36c95f04a8a787b.ico.zip b/assets/aa795e77afcd7077b36c95f04a8a787b.ico.zip
new file mode 100644
index 0000000..239ec09
Binary files /dev/null and b/assets/aa795e77afcd7077b36c95f04a8a787b.ico.zip differ
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..047cdc1
Binary files /dev/null and b/assets/logo.png differ
diff --git a/ios/Runner.xcodeproj/project.pbxproj b/ios/Runner.xcodeproj/project.pbxproj
index 273c0a5..b655e0d 100644
--- a/ios/Runner.xcodeproj/project.pbxproj
+++ b/ios/Runner.xcodeproj/project.pbxproj
@@ -478,4 +478,4 @@
 /* End XCConfigurationList section */
 	};
 	rootObject = 97C146E61CF9000F007C117D /* Project object */;
-}
+}
\ No newline at end of file
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 dc9ada4..1db6652 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 28c6bf0..6ebd715 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 2ccbfd9..51fdef3 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 f091b6b..f235625 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 4cde121..4d71909 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 d0ef06e..16bfe8b 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 dcdc230..29b4a95 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 2ccbfd9..51fdef3 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 c8f9ed8..ec4151f 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 a6d6b86..2a3d85a 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 a6d6b86..2a3d85a 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 75b2d16..d06bb34 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 c4df70d..684795a 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 6a84f41..218c7c5 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 d0e1f58..a1a1e5f 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/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/Assets.xcassets/LaunchBackground.imageset/Contents.json b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/Contents.json
new file mode 100644
index 0000000..9f447e1
--- /dev/null
+++ b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "background.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png
new file mode 100644
index 0000000..e29b3b5
Binary files /dev/null and b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json b/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
index 0bedcf2..00cabce 100644
--- a/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
+++ b/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
@@ -1,23 +1,23 @@
 {
   "images" : [
     {
-      "idiom" : "universal",
       "filename" : "LaunchImage.png",
+      "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "idiom" : "universal",
       "filename" : "LaunchImage@2x.png",
+      "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "idiom" : "universal",
       "filename" : "LaunchImage@3x.png",
+      "idiom" : "universal",
       "scale" : "3x"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
 }
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png
index 9da19ea..b1c5de3 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png
index 9da19ea..f34812a 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png
index 9da19ea..61d54ab 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png differ
diff --git a/ios/Runner/Base.lproj/LaunchScreen.storyboard b/ios/Runner/Base.lproj/LaunchScreen.storyboard
index f2e259c..54b00ee 100644
--- a/ios/Runner/Base.lproj/LaunchScreen.storyboard
+++ b/ios/Runner/Base.lproj/LaunchScreen.storyboard
@@ -16,13 +16,19 @@
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <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="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>
                         </subviews>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
-                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="1a2-6s-vTC"/>
-                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="4X2-HB-R7a"/>
+                            <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"/>
+                            <constraint firstAttribute="trailing" secondItem="tWc-Dq-wcI" secondAttribute="trailing" id="Swv-Gf-Rwn"/>
+                            <constraint firstAttribute="trailing" secondItem="YRO-k0-Ey4" secondAttribute="trailing" id="TQA-XW-tRk"/>
+                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="duK-uY-Gun"/>
+                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="kV7-tw-vXt"/>
+                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="xPn-NY-SIU"/>
                         </constraints>
                     </view>
                 </viewController>
@@ -32,6 +38,7 @@
         </scene>
     </scenes>
     <resources>
-        <image name="LaunchImage" width="168" height="185"/>
+        <image name="LaunchImage" width="1000" height="1000"/>
+        <image name="LaunchBackground" width="1" height="1"/>
     </resources>
-</document>
+</document>
\ No newline at end of file
diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
index 64abb4c..60b43de 100644
--- a/ios/Runner/Info.plist
+++ b/ios/Runner/Info.plist
@@ -1,51 +1,53 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
-	<key>LSApplicationQueriesSchemes</key>
-	<array>
-		<string>twitter</string>
-	</array>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>$(DEVELOPMENT_LANGUAGE)</string>
-	<key>CFBundleDisplayName</key>
-	<string>Slide Test</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>Slide Puzzle</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>$(FLUTTER_BUILD_NAME)</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>$(FLUTTER_BUILD_NUMBER)</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIMainStoryboardFile</key>
-	<string>Main</string>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UISupportedInterfaceOrientations~ipad</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationPortraitUpsideDown</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<true/>
-</dict>
-</plist>
+	<dict>
+		<key>LSApplicationQueriesSchemes</key>
+		<array>
+			<string>twitter</string>
+		</array>
+		<key>CFBundleDevelopmentRegion</key>
+		<string>$(DEVELOPMENT_LANGUAGE)</string>
+		<key>CFBundleDisplayName</key>
+		<string>Slide Test</string>
+		<key>CFBundleExecutable</key>
+		<string>$(EXECUTABLE_NAME)</string>
+		<key>CFBundleIdentifier</key>
+		<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+		<key>CFBundleInfoDictionaryVersion</key>
+		<string>6.0</string>
+		<key>CFBundleName</key>
+		<string>Retro Slide Puzzle</string>
+		<key>CFBundlePackageType</key>
+		<string>APPL</string>
+		<key>CFBundleShortVersionString</key>
+		<string>$(FLUTTER_BUILD_NAME)</string>
+		<key>CFBundleSignature</key>
+		<string>????</string>
+		<key>CFBundleVersion</key>
+		<string>$(FLUTTER_BUILD_NUMBER)</string>
+		<key>LSRequiresIPhoneOS</key>
+		<true/>
+		<key>UILaunchStoryboardName</key>
+		<string>LaunchScreen</string>
+		<key>UIMainStoryboardFile</key>
+		<string>Main</string>
+		<key>UISupportedInterfaceOrientations</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UISupportedInterfaceOrientations~ipad</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationPortraitUpsideDown</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UIViewControllerBasedStatusBarAppearance</key>
+		<true/>
+		<key>UIStatusBarHidden</key>
+		<false/>
+	</dict>
+</plist>
\ No newline at end of file
diff --git a/lib/code/audio.dart b/lib/code/audio.dart
index e62f253..cb2f3ed 100644
--- a/lib/code/audio.dart
+++ b/lib/code/audio.dart
@@ -6,12 +6,13 @@ import 'package:soundpool/soundpool.dart';
 class AudioService {
   static final AudioService instance = AudioService._init();
   AudioService._init();
-  Soundpool pool = Soundpool.fromOptions(
-      // options: const SoundpoolOptions(streamType: StreamType.notification),
-      );
+  static Soundpool pool = Soundpool.fromOptions(
+    options:
+        const SoundpoolOptions(streamType: StreamType.music, maxStreams: 10),
+  );
 
   List<int> slideIds = List.generate(5, (index) => 0);
-  int shuffleId = 0;
+  static int shuffleId = 0;
   int entryId = 0;
   int elementEntryId = 0;
   int entryBgId = 0;
@@ -24,8 +25,11 @@ class AudioService {
   AudioStreamControl? dragStream;
   bool isMuted = !Storage.instance.sounds;
   bool shouldVibrate = Storage.instance.vibrations;
+  AudioStreamControl? downStream;
+  AudioStreamControl? upStream;
 
   Future<void> init() async {
+    await pool.release();
     for (var i = 0; i < 5; i++) {
       slideIds[i] = await rootBundle
           .load("assets/audio/slide_$i.wav")
@@ -99,13 +103,13 @@ class AudioService {
   shuffle() async {
     if (isMuted) return;
     // await Future.delayed(Duration(milliseconds: 400));
-    var stream = await pool.playWithControls(shuffleId);
+    await pool.playWithControls(shuffleId);
     // stream.setVolume(volume: 0.2);
     // await Future.delayed(Duration(milliseconds: defaultTime * 3));
     // stream.stop();
   }
 
-  entry() {
+  entry() async {
     if (isMuted) return;
     pool.play(entryId);
   }
@@ -134,14 +138,18 @@ class AudioService {
     pool.play(buttonId);
   }
 
-  buttonDown() {
+  buttonDown() async {
     if (isMuted) return;
-    pool.play(buttonDownId);
+    downStream = await pool.playWithControls(buttonDownId);
   }
 
-  buttonUp() {
+  buttonUp() async {
     if (isMuted) return;
-    pool.play(buttonUpId);
+
+    if (downStream == null || downStream!.playing) {
+      await Future.delayed(const Duration(milliseconds: 200));
+      upStream = await pool.playWithControls(buttonUpId);
+    }
   }
 
   bubbles() async {
diff --git a/lib/code/constants.dart b/lib/code/constants.dart
index 7ef816e..f75880f 100644
--- a/lib/code/constants.dart
+++ b/lib/code/constants.dart
@@ -18,20 +18,20 @@ List<ColorTheme> themes = [
   //   Color(0xffB6083D),
   //   Color(0xff856712),
   // ),
-  const ColorTheme(
-    Color.fromARGB(255, 33, 150, 243),
-    Color.fromARGB(255, 233, 59, 117),
-    Color.fromARGB(255, 24, 109, 179),
-  ),
   const ColorTheme(
     Color.fromARGB(255, 76, 175, 80),
     Color.fromARGB(255, 35, 35, 35),
     Color.fromARGB(255, 41, 100, 43),
   ),
   const ColorTheme(
-    Color(0xff856712),
-    Color.fromARGB(255, 33, 19, 13),
-    Color.fromARGB(255, 99, 76, 13),
+    Color.fromARGB(255, 33, 150, 243),
+    Color.fromARGB(255, 233, 59, 117),
+    Color.fromARGB(255, 24, 109, 179),
+  ),
+  const ColorTheme(
+    Color.fromARGB(255, 49, 49, 49),
+    Color.fromARGB(255, 145, 145, 145),
+    Color.fromARGB(255, 12, 12, 12),
   ),
 ];
 void changeColor(int index) {
@@ -40,11 +40,4 @@ void changeColor(int index) {
   buttonShadowColor = themes[index].buttonShadowColor;
 }
 
-List<String> slideAudio = [
-  "amb_electricarc_small_b_01.wav",
-  "amb_electricarc_small_b_02.wav",
-  "amb_electricarc_small_b_03.wav",
-  "amb_electricarc_small_b_04.wav",
-];
-
 String appLink = "https://n-puzzle-solver-1.web.app/";
diff --git a/lib/main.dart b/lib/main.dart
index ed595d5..7fdecd6 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -22,15 +22,23 @@ void main() async {
   );
   await GetStorage.init();
   Storage.instance.init();
-  runApp(const MyApp());
+  runApp(MyApp());
 }
 
-class MyApp extends StatelessWidget {
-  const MyApp({Key? key}) : super(key: key);
+final mainKey = GlobalKey<_MyAppState>();
 
+class MyApp extends StatefulWidget {
+  MyApp({Key? mainkey}) : super(key: mainKey);
+
+  @override
+  State<MyApp> createState() => _MyAppState();
+}
+
+class _MyAppState extends State<MyApp> {
   // flutter build web --release --base-href="/slide_puzzle_release/"
   @override
   Widget build(BuildContext context) {
+    Color colorScheme = primaryColor;
     // int gridSize = 3;
     // int totalTiles = pow(gridSize, 2).toInt();
     // List<TilesModel> list = List.generate(totalTiles, (index) {
@@ -80,9 +88,9 @@ class MyApp extends StatelessWidget {
         debugShowCheckedModeBanner: false,
         theme: ThemeData(
           fontFamily: "Arcade",
-          colorSchemeSeed: primaryColor,
+          colorSchemeSeed: colorScheme,
           brightness: Brightness.dark,
-          tooltipTheme: TooltipThemeData(
+          tooltipTheme: const TooltipThemeData(
             textStyle: TextStyle(
               fontFamily: "Glacial",
               color: Colors.black54,
diff --git a/lib/screen/app.dart b/lib/screen/app.dart
index 3d81549..f8a8f1e 100644
--- a/lib/screen/app.dart
+++ b/lib/screen/app.dart
@@ -40,8 +40,9 @@ class _LayoutPageState extends State<LayoutPage> {
   final isWebMobile = kIsWeb &&
       (defaultTargetPlatform == TargetPlatform.iOS ||
           defaultTargetPlatform == TargetPlatform.android);
-  final isMobile = (defaultTargetPlatform == TargetPlatform.iOS ||
-      defaultTargetPlatform == TargetPlatform.android);
+  final isMobileOnly = !kIsWeb &&
+      (defaultTargetPlatform == TargetPlatform.iOS ||
+          defaultTargetPlatform == TargetPlatform.android);
 
   void createTiles(
       {int? gridSize, bool isChangingGrid = false, bool shuffle = true}) {
@@ -201,7 +202,7 @@ class _LayoutPageState extends State<LayoutPage> {
     WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
       createTiles(shuffle: false, isChangingGrid: true);
     });
-    if (isWebMobile) area = 0.9;
+    if (isWebMobile || isMobileOnly) area = 0.9;
   }
 
   @override
@@ -221,136 +222,138 @@ class _LayoutPageState extends State<LayoutPage> {
       //   },
       // ),
       backgroundColor: Colors.white,
-      body: LayoutBuilder(
-        builder: (context, constraints) {
-          // final size = constraints.
-          double maxWidth = constraints.maxWidth;
-          double maxHeight = constraints.maxHeight;
-          bool isTall = maxWidth * 0.85 < maxHeight;
-          double absoluteWidth = maxWidth * area;
-          double absoluteHeight = maxHeight * area;
-          double topPad = MediaQuery.of(context).padding.top;
-          double puzzleHeight =
-              isTall ? min(absoluteWidth, maxHeight - 300) : absoluteHeight;
-          if (!isTall && isMobile) puzzleHeight -= topPad;
-          double puzzleWidth = puzzleHeight;
+      body: SafeArea(
+        child: LayoutBuilder(
+          builder: (context, constraints) {
+            // final size = constraints.
+            double maxWidth = constraints.maxWidth;
+            double maxHeight = constraints.maxHeight;
+            bool isTall = maxWidth * 0.85 < maxHeight;
+            double absoluteWidth = maxWidth * area;
+            double absoluteHeight = maxHeight * area;
+            double topPad = MediaQuery.of(context).padding.top;
+            double puzzleHeight =
+                isTall ? min(absoluteWidth, maxHeight - 300) : absoluteHeight;
+            if (!isTall && isMobileOnly) puzzleHeight -= topPad * 2;
+            double puzzleWidth = puzzleHeight;
 
-          // double imageListHeight = 100;
-          double imageListMainGap = isTall ? 24 : 64;
-          // double imageListCrossGap = (imageListVisibile ? 0 : -90);
-          double imageListCrossOffset =
-              1 + (2 * 95 / (isTall ? maxHeight : maxWidth));
-          double toolbarGap = isTall ? 24 : 64;
+            // double imageListHeight = 100;
+            double imageListMainGap = isTall ? 24 : 64;
+            // double imageListCrossGap = (imageListVisibile ? 0 : -90);
+            double imageListCrossOffset =
+                1 + (2 * 95 / (isTall ? maxHeight : maxWidth));
+            double toolbarGap = isTall ? 24 : 64;
 
-          // head scratcher below for a solid hour and still not perfect :(
-          double bottomButtonOffset =
-              (2 * puzzleHeight * area / maxHeight) - offsetFromCenter + 0.12;
-          double rightButtonOffset =
-              (2 * puzzleHeight * area / (maxWidth * 0.85)) -
-                  offsetFromCenter +
-                  0.12;
-          //     ((puzzleWidth - (offsetFromCenter * maxWidth / 2)) *
-          //         2 /
-          //         maxWidth);
-          // print(rightButtonOffset);
+            // head scratcher below for a solid hour and still not perfect :(
+            double bottomButtonOffset =
+                (2 * puzzleHeight * area / maxHeight) - offsetFromCenter + 0.12;
+            double rightButtonOffset =
+                (2 * puzzleHeight * area / (maxWidth * 0.85)) -
+                    offsetFromCenter +
+                    0.12;
+            //     ((puzzleWidth - (offsetFromCenter * maxWidth / 2)) *
+            //         2 /
+            //         maxWidth);
+            // print(rightButtonOffset);
 
-          // print("$maxWidth and $maxHeight");
-          // bool isTall = (width / height) < (6 / 5);
-          double padding = 32;
-          return Center(
-            child: ColoredBackground(
-              // decoration: const BoxDecoration(
-              //   color: Colors.white,
-              //   // image: DecorationImage(
-              //   //     image: AssetImage("images/stripes_bg.jpg"),
-              //   //     fit: BoxFit.cover),
-              //   // gradient: grad.LinearGradient(colors: [
-              //   //   primaryColor.withOpacity(0.5),
-              //   //   primaryColor.withOpacity(0.2),
-              //   // ]),
-              // ),
-              // color: primaryColor.withOpacity(0.2),
-              child: Stack(children: [
-                AnimatedAlign(
-                  duration: duration,
-                  curve: curve,
-                  alignment: const Alignment(0, -0.05),
-                  // left: isTopLeft ? 20 : 0,
-                  // right: !isTopLeft ? 23 : 0,
-                  // top: isTopLeft ? 23 : 0,
-                  // bottom: !isTopLeft ? 23 : 0,
-                  child: Container(
-                    height: puzzleHeight + buttonHeight,
-                    width: puzzleWidth,
-                    color: Colors.white,
-                    child: MyTransform(
-                      child: BorderedContainer(
-                        label: "puzzle",
-                        child: AnimatedContainer(
-                          duration: duration,
-                          curve: curve,
-                          padding: const EdgeInsets.all(4),
-                          color: secondaryColor,
-                          child: Puzzle(),
+            // print("$maxWidth and $maxHeight");
+            // bool isTall = (width / height) < (6 / 5);
+            double padding = 32;
+            return Center(
+              child: ColoredBackground(
+                // decoration: const BoxDecoration(
+                //   color: Colors.white,
+                //   // image: DecorationImage(
+                //   //     image: AssetImage("images/stripes_bg.jpg"),
+                //   //     fit: BoxFit.cover),
+                //   // gradient: grad.LinearGradient(colors: [
+                //   //   primaryColor.withOpacity(0.5),
+                //   //   primaryColor.withOpacity(0.2),
+                //   // ]),
+                // ),
+                // color: primaryColor.withOpacity(0.2),
+                child: Stack(children: [
+                  AnimatedAlign(
+                    duration: duration,
+                    curve: curve,
+                    alignment: Alignment(0, isMobileOnly ? 0 : -0.05),
+                    // left: isTopLeft ? 20 : 0,
+                    // right: !isTopLeft ? 23 : 0,
+                    // top: isTopLeft ? 23 : 0,
+                    // bottom: !isTopLeft ? 23 : 0,
+                    child: Container(
+                      height: puzzleHeight + buttonHeight,
+                      width: puzzleWidth,
+                      color: Colors.white,
+                      child: MyTransform(
+                        child: BorderedContainer(
+                          label: "puzzle",
+                          child: AnimatedContainer(
+                            duration: duration,
+                            curve: curve,
+                            padding: const EdgeInsets.all(4),
+                            color: secondaryColor,
+                            child: Puzzle(),
+                          ),
                         ),
                       ),
                     ),
                   ),
-                ),
 
-                // image list
-                AnimatedAlign(
-                  duration: duration,
-                  curve: curve,
-                  alignment: isTall
-                      ? imageListVisibile
-                          ? Alignment.bottomCenter
-                          : Alignment(0, imageListCrossOffset)
-                      : imageListVisibile
-                          ? Alignment.centerRight
-                          : Alignment(imageListCrossOffset, 0),
-                  // right: isTall ? imageListMainGap : imageListCrossGap,
-                  // top: isTall ? null : imageListMainGap,
-                  // left: isTall ? imageListMainGap : null,
-                  // bottom: isTall ? imageListCrossGap : imageListMainGap,
-                  child: Container(
-                    height: isTall ? null : maxHeight - 2 * imageListMainGap,
-                    width: isTall ? maxWidth - 2 * imageListMainGap : null,
-                    child: ImageList(
-                      constraints: constraints,
-                      isTall: isTall,
-                      isVisible: imageListVisibile,
-                      toggleImageList: (bool visibility) =>
-                          setState(() => imageListVisibile = visibility),
-                    ),
-                  ),
-                ),
-
-                // toolbar
-                AnimatedAlign(
-                  duration: duration,
-                  curve: curve,
-                  alignment:
-                      isTall ? Alignment.topCenter : Alignment.centerLeft,
-                  // left: isTall ? toolbarGap : 0,
-                  // top: isTall ? topPad : toolbarGap,
-                  // right: isTall ? toolbarGap : null,
-                  // bottom: isTall ? null : toolbarGap,
-                  child: SafeArea(
+                  // image list
+                  AnimatedAlign(
+                    duration: duration,
+                    curve: curve,
+                    alignment: isTall
+                        ? imageListVisibile
+                            ? Alignment.bottomCenter
+                            : Alignment(0, imageListCrossOffset)
+                        : imageListVisibile
+                            ? Alignment.centerRight
+                            : Alignment(imageListCrossOffset, 0),
+                    // right: isTall ? imageListMainGap : imageListCrossGap,
+                    // top: isTall ? null : imageListMainGap,
+                    // left: isTall ? imageListMainGap : null,
+                    // bottom: isTall ? imageListCrossGap : imageListMainGap,
                     child: Container(
-                      height: isTall ? null : maxHeight - 2 * toolbarGap,
-                      width: isTall ? maxWidth - 2 * toolbarGap : null,
-                      child: ToolBar(
+                      height: isTall ? null : maxHeight - 2 * imageListMainGap,
+                      width: isTall ? maxWidth - 2 * imageListMainGap : null,
+                      child: ImageList(
                         constraints: constraints,
                         isTall: isTall,
+                        isVisible: imageListVisibile,
+                        toggleImageList: (bool visibility) =>
+                            setState(() => imageListVisibile = visibility),
                       ),
                     ),
                   ),
-                ),
-              ]),
-            ),
-          );
-        },
+
+                  // toolbar
+                  AnimatedAlign(
+                    duration: duration,
+                    curve: curve,
+                    alignment:
+                        isTall ? Alignment.topCenter : Alignment.centerLeft,
+                    // left: isTall ? toolbarGap : 0,
+                    // top: isTall ? topPad : toolbarGap,
+                    // right: isTall ? toolbarGap : null,
+                    // bottom: isTall ? null : toolbarGap,
+                    child: SafeArea(
+                      child: Container(
+                        height: isTall ? null : maxHeight - 2 * toolbarGap,
+                        width: isTall ? maxWidth - 2 * toolbarGap : null,
+                        child: ToolBar(
+                          constraints: constraints,
+                          isTall: isTall,
+                        ),
+                      ),
+                    ),
+                  ),
+                ]),
+              ),
+            );
+          },
+        ),
       ),
     );
   }
diff --git a/lib/screen/landing.dart b/lib/screen/landing.dart
index aff7a60..46401ff 100644
--- a/lib/screen/landing.dart
+++ b/lib/screen/landing.dart
@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:english_words/english_words.dart';
 import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/material.dart';
@@ -9,6 +11,7 @@ import 'package:slide_puzzle/code/auth.dart';
 import 'package:slide_puzzle/code/constants.dart';
 import 'package:slide_puzzle/code/models.dart';
 import 'package:slide_puzzle/code/providers.dart';
+import 'package:slide_puzzle/code/service.dart';
 import 'package:slide_puzzle/code/store.dart';
 import 'package:slide_puzzle/screen/app.dart';
 import 'package:slide_puzzle/ui/3d_transform.dart';
@@ -53,6 +56,8 @@ class _LandingPageState extends State<LandingPage>
   }
 
   _updateUserName(String? newUsername) {
+    AudioService.instance.vibrate();
+    AudioService.instance.button();
     UserData? userData = context.read<UserData?>();
     if (newUsername == null || newUsername == userData!.username) return;
     DatabaseService.instance
@@ -183,9 +188,10 @@ class _LandingPageState extends State<LandingPage>
     usernames = _generateUserName();
     if (Storage.instance.showNameChange) _showNameChange();
 
-    AudioService.instance
-        .init()
-        .then((value) => setState(() => isLoaded = true));
+    AudioService.instance.init().then((value) {
+      print("audio loaded");
+      isLoaded = true;
+    });
     // _showOverlay();
     // DatabaseService.instance.fetchLeaderBoards();
     // DatabaseService.instance.submitDummyCommunityScores();
@@ -236,6 +242,120 @@ class _LandingPageState extends State<LandingPage>
           ),
         );
 
+    Widget licenses(double height, double width) {
+      WidgetSpan hyperlink({required String url, required String label}) =>
+          WidgetSpan(
+            child: MouseRegion(
+              cursor: SystemMouseCursors.click,
+              child: GestureDetector(
+                onTap: () => _launch(url),
+                child: Text(
+                  label,
+                  style: TextStyle(
+                    fontFamily: "Arcade",
+                    color: primaryColor,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+            ),
+          );
+
+      return MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: GestureDetector(
+            onTap: () {
+              AudioService.instance.vibrate();
+              AudioService.instance.button();
+              showDialog(
+                  context: context,
+                  builder: (context) {
+                    return MyDialog(
+                      height: height,
+                      width: width,
+                      child: DefaultTextStyle(
+                        style: const TextStyle(
+                          fontFamily: "Glacial",
+                          color: Colors.white,
+                          fontSize: 18,
+                        ),
+                        child: Stack(
+                          children: [
+                            Padding(
+                              padding: EdgeInsets.only(
+                                left: 16,
+                                right: 16,
+                                top: 32,
+                              ),
+                              child: ScrollConfiguration(
+                                behavior: MyCustomScrollBehavior(),
+                                child: ListView(
+                                  children: [
+                                    const Text(
+                                      "Made with 💙 by Ashish Beck in 🇮🇳",
+                                      style: TextStyle(
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                    ),
+                                    const SizedBox(
+                                      height: 16,
+                                    ),
+                                    Text.rich(TextSpan(
+                                        text:
+                                            "Images are gathered from the following sources:\n",
+                                        children: [
+                                          hyperlink(
+                                              url: "https://www.pexels.com/",
+                                              label: "Pexels"),
+                                          const TextSpan(text: "\n"),
+                                          hyperlink(
+                                              url: "https://vecteezy.com/",
+                                              label: "Vecteezy"),
+                                          const TextSpan(text: "\n"),
+                                          TextSpan(
+                                              text:
+                                                  "\nSounds are gathered from the following sources:\n"),
+                                          hyperlink(
+                                              url: "https://www.zapsplat.com/",
+                                              label: "Zapsplat"),
+                                          const TextSpan(text: "\n"),
+                                          hyperlink(
+                                              url: "https://mixkit.co/",
+                                              label: "Mixkit"),
+                                          const TextSpan(text: "\n"),
+                                          hyperlink(
+                                              url: "https://pixabay.com/",
+                                              label: "Pixabay"),
+                                        ]))
+                                  ],
+                                ),
+                              ),
+                            ),
+                            Align(
+                              alignment: Alignment.topRight,
+                              child: IconButton(
+                                onPressed: () {
+                                  AudioService.instance.vibrate();
+
+                                  AudioService.instance.button();
+                                  Navigator.of(context).pop();
+                                },
+                                icon: Icon(Icons.close),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    );
+                  });
+            },
+            child: Text(
+              "Licenses",
+              style: TextStyle(fontSize: 14),
+            )),
+      );
+    }
+
     Widget usernameWidget() {
       return Stack(
         clipBehavior: Clip.none,
@@ -246,7 +366,7 @@ class _LandingPageState extends State<LandingPage>
                 baseline: TextBaseline.alphabetic,
                 child: PopupMenuButton<String>(
                   child: Text(
-                    userData!.username,
+                    userData == null ? "..." : userData.username,
                     style: TextStyle(
                       color: primaryColor,
                       fontFamily: "Glacial",
@@ -262,6 +382,10 @@ class _LandingPageState extends State<LandingPage>
                     //   child: Text(userData.username),
                     //   value: userData.username,
                     // ),
+                    if (userData != null &&
+                        !usernames.contains(userData.username)) {
+                      usernames.insert(0, userData.username);
+                    }
                     return usernames
                         .map((e) => PopupMenuItem<String>(
                               child: Text(
@@ -319,175 +443,182 @@ class _LandingPageState extends State<LandingPage>
       );
     }
 
-    return RawKeyboardListener(
-      focusNode: _focusNode,
-      autofocus: true,
-      onKey: _handleKeyEvent,
-      child: Scaffold(
-        backgroundColor: secondaryColor,
-        body: userData == null && !isLoaded
-            ? const Spinner(
-                text: "Loading",
-              )
-            : ScaleTransition(
-                scale: Tween<double>(begin: 1, end: 350).animate(
-                    CurvedAnimation(
-                        parent: animationController,
-                        curve: Curves.easeInQuart)),
-                child: RotationTransition(
-                  turns: Tween<double>(begin: 0, end: 0.25).animate(
+    return SafeArea(
+      child: RawKeyboardListener(
+        focusNode: _focusNode,
+        autofocus: true,
+        onKey: _handleKeyEvent,
+        child: Scaffold(
+          backgroundColor: secondaryColor,
+          body: (userData == null && !isLoaded)
+              ? const Spinner(
+                  text: "Loading",
+                )
+              : ScaleTransition(
+                  scale: Tween<double>(begin: 1, end: 350).animate(
                       CurvedAnimation(
-                          parent: animationController, curve: Curves.easeIn)),
-                  child: LayoutBuilder(builder: (context, constraints) {
-                    double maxWidth = constraints.maxWidth;
-                    double maxHeight = constraints.maxHeight;
-                    return AnimatedContainer(
-                      duration: const Duration(milliseconds: 200),
-                      height: maxHeight,
-                      width: maxWidth,
-                      decoration: BoxDecoration(
-                        gradient: LinearGradient(
-                          colors: [
-                            // secondaryColor[400]!,
-                            secondaryColor,
-                            secondaryColor,
-                          ],
-                          begin: Alignment.topLeft,
-                          end: Alignment.bottomRight,
-                        ),
-                      ),
-                      child: Stack(
-                        children: [
-                          Center(
-                              child: Column(
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            children: [
-                              Text(
-                                appName,
-                                style: Theme.of(context).textTheme.headline5,
-                                textAlign: TextAlign.center,
-                              ),
-                              animationController.isAnimating
-                                  ? IgnorePointer(
-                                      child: button(),
-                                    )
-                                  : button(),
-                              Text(
-                                appName,
-                                style: Theme.of(context)
-                                    .textTheme
-                                    .headline5!
-                                    .copyWith(color: Colors.transparent),
-                                textAlign: TextAlign.center,
-                              ),
-                              // userData != null
-                              //     ? ScoreBoard(
-                              //         gridSize: 3,
-                              //         // currentMove: 0,
-                              //         // currentTime: 0,
-                              //         userData: userData,
-                              //         child: Container(),
-                              //       )
-                              //     : Container(),
+                          parent: animationController,
+                          curve: Curves.easeInQuart)),
+                  child: RotationTransition(
+                    turns: Tween<double>(begin: 0, end: 0.25).animate(
+                        CurvedAnimation(
+                            parent: animationController, curve: Curves.easeIn)),
+                    child: LayoutBuilder(builder: (context, constraints) {
+                      double maxWidth = constraints.maxWidth;
+                      double maxHeight = constraints.maxHeight;
+                      return AnimatedContainer(
+                        duration: const Duration(milliseconds: 200),
+                        height: maxHeight,
+                        width: maxWidth,
+                        decoration: BoxDecoration(
+                          gradient: LinearGradient(
+                            colors: [
+                              // secondaryColor[400]!,
+                              secondaryColor,
+                              secondaryColor,
                             ],
-                          )),
-                          Align(
-                            alignment: Alignment(0, 0.2),
-                            // top: maxHeight * 0.55,
-                            // left: 0,
-                            // right: 0,
-                            child: usernameWidget(),
-                          ),
-                          const Align(
-                            alignment: Alignment(0.95, -0.98),
-                            child: SoundsVibrationsTool(isTall: false),
+                            begin: Alignment.topLeft,
+                            end: Alignment.bottomRight,
                           ),
-                          Align(
-                            alignment: Alignment(-0.95, -0.98),
-                            child: ThemeChanger(
-                              onTap: () {
-                                setState(() {});
-                              },
+                        ),
+                        child: Stack(
+                          children: [
+                            Center(
+                                child: Column(
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                Text(
+                                  appName,
+                                  style: Theme.of(context).textTheme.headline5,
+                                  textAlign: TextAlign.center,
+                                ),
+                                animationController.isAnimating
+                                    ? IgnorePointer(
+                                        child: button(),
+                                      )
+                                    : button(),
+                                Text(
+                                  appName,
+                                  style: Theme.of(context)
+                                      .textTheme
+                                      .headline5!
+                                      .copyWith(color: Colors.transparent),
+                                  textAlign: TextAlign.center,
+                                ),
+                                // userData != null
+                                //     ? ScoreBoard(
+                                //         gridSize: 3,
+                                //         // currentMove: 0,
+                                //         // currentTime: 0,
+                                //         userData: userData,
+                                //         child: Container(),
+                                //       )
+                                //     : Container(),
+                              ],
+                            )),
+                            Align(
+                              alignment: Alignment(0, 0.2),
+                              // top: maxHeight * 0.55,
+                              // left: 0,
+                              // right: 0,
+                              child: usernameWidget(),
                             ),
-                          ),
-                          Align(
-                            alignment: Alignment(0, 0.8),
-                            child: Text.rich(
-                              TextSpan(text: "A project by ", children: [
-                                WidgetSpan(
-                                  child: MouseRegion(
-                                    onEnter: (event) =>
-                                        setState(() => isHovering1 = true),
-                                    onExit: (event) =>
-                                        setState(() => isHovering1 = false),
-                                    cursor: SystemMouseCursors.click,
-                                    child: GestureDetector(
-                                      onTap: () => _launch(
-                                          'https://linktr.ee/ashishbeck'),
-                                      child: Text(
-                                        "Ashish Beck",
-                                        style: TextStyle(
-                                            color: isHovering1
-                                                ? Colors.white
-                                                : primaryColor),
+                            const Align(
+                              alignment: Alignment(0.95, -0.98),
+                              child: SoundsVibrationsTool(isTall: false),
+                            ),
+                            Align(
+                              alignment: Alignment(0.95, 0.98),
+                              child: licenses(
+                                  maxHeight * 0.5, min(500, maxWidth * 0.75)),
+                            ),
+                            Align(
+                              alignment: Alignment(-0.95, -0.98),
+                              child: ThemeChanger(
+                                onTap: () {
+                                  setState(() {});
+                                },
+                              ),
+                            ),
+                            Align(
+                              alignment: Alignment(0, 0.8),
+                              child: Text.rich(
+                                TextSpan(text: "A project by ", children: [
+                                  WidgetSpan(
+                                    child: MouseRegion(
+                                      onEnter: (event) =>
+                                          setState(() => isHovering1 = true),
+                                      onExit: (event) =>
+                                          setState(() => isHovering1 = false),
+                                      cursor: SystemMouseCursors.click,
+                                      child: GestureDetector(
+                                        onTap: () => _launch(
+                                            'https://linktr.ee/ashishbeck'),
+                                        child: Text(
+                                          "Ashish Beck",
+                                          style: TextStyle(
+                                              color: isHovering1
+                                                  ? Colors.white
+                                                  : primaryColor),
+                                        ),
                                       ),
                                     ),
                                   ),
-                                ),
-                                // TextSpan(
-                                //     text: "\nwith design help from ",
-                                //     style: Theme.of(context)
-                                //         .textTheme
-                                //         .labelSmall!
-                                //         .copyWith(
-                                //             decorationStyle: TextDecorationStyle.wavy,
-                                //             decorationThickness: 4,
-                                //             decoration: TextDecoration.lineThrough)),
-                                // WidgetSpan(
-                                //   child: MouseRegion(
-                                //     onEnter: (event) =>
-                                //         setState(() => isHovering2 = true),
-                                //     onExit: (event) =>
-                                //         setState(() => isHovering2 = false),
-                                //     cursor: SystemMouseCursors.click,
-                                //     child: GestureDetector(
-                                //       onTap: () =>
-                                //           _launch('https://linktr.ee/sushobhan'),
-                                //       child: Text(
-                                //         "Sushobhan Parida",
-                                //         style: Theme.of(context)
-                                //             .textTheme
-                                //             .labelSmall!
-                                //             .copyWith(
-                                //                 decorationStyle:
-                                //                     TextDecorationStyle.wavy,
-                                //                 decorationThickness: 4,
-                                //                 decoration:
-                                //                     TextDecoration.lineThrough,
-                                //                 color: isHovering2
-                                //                     ? Colors.white
-                                //                     : primaryColor),
-                                //       ),
-                                //     ),
-                                //   ),
-                                // ),
-                              ]),
-                              textAlign: TextAlign.center,
-                            ),
-                          ),
-                          Align(
-                            alignment: Alignment.bottomCenter,
-                            child: Text(
-                              "v${version}",
-                              style: Theme.of(context).textTheme.caption,
+                                  // TextSpan(
+                                  //     text: "\nwith design help from ",
+                                  //     style: Theme.of(context)
+                                  //         .textTheme
+                                  //         .labelSmall!
+                                  //         .copyWith(
+                                  //             decorationStyle: TextDecorationStyle.wavy,
+                                  //             decorationThickness: 4,
+                                  //             decoration: TextDecoration.lineThrough)),
+                                  // WidgetSpan(
+                                  //   child: MouseRegion(
+                                  //     onEnter: (event) =>
+                                  //         setState(() => isHovering2 = true),
+                                  //     onExit: (event) =>
+                                  //         setState(() => isHovering2 = false),
+                                  //     cursor: SystemMouseCursors.click,
+                                  //     child: GestureDetector(
+                                  //       onTap: () =>
+                                  //           _launch('https://linktr.ee/sushobhan'),
+                                  //       child: Text(
+                                  //         "Sushobhan Parida",
+                                  //         style: Theme.of(context)
+                                  //             .textTheme
+                                  //             .labelSmall!
+                                  //             .copyWith(
+                                  //                 decorationStyle:
+                                  //                     TextDecorationStyle.wavy,
+                                  //                 decorationThickness: 4,
+                                  //                 decoration:
+                                  //                     TextDecoration.lineThrough,
+                                  //                 color: isHovering2
+                                  //                     ? Colors.white
+                                  //                     : primaryColor),
+                                  //       ),
+                                  //     ),
+                                  //   ),
+                                  // ),
+                                ]),
+                                textAlign: TextAlign.center,
+                              ),
                             ),
-                          )
-                        ],
-                      ),
-                    );
-                  }),
+                            Align(
+                              alignment: Alignment.bottomCenter,
+                              child: Text(
+                                "v${version}",
+                                style: Theme.of(context).textTheme.caption,
+                              ),
+                            )
+                          ],
+                        ),
+                      );
+                    }),
+                  ),
                 ),
-              ),
+        ),
       ),
     );
   }
diff --git a/lib/screen/puzzle.dart b/lib/screen/puzzle.dart
index 931f795..cc0af0a 100644
--- a/lib/screen/puzzle.dart
+++ b/lib/screen/puzzle.dart
@@ -17,6 +17,7 @@ import 'package:rive/rive.dart';
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:slide_puzzle/screen/app.dart';
 import 'package:slide_puzzle/ui/Scoreboard.dart';
+import 'package:slide_puzzle/ui/animated_fader.dart';
 import 'package:slide_puzzle/ui/button.dart';
 import 'package:slide_puzzle/ui/delayed_loader.dart';
 import 'package:slide_puzzle/ui/dialog.dart';
@@ -627,51 +628,47 @@ class _PuzzleTileState extends State<PuzzleTile> with TickerProviderStateMixin {
     //     height * imageLeft,
     //     height *
     //         imageTop); //Offset(height * imageLeft - gap, height * imageTop - gap);
-    Widget tileContainer = Container(
-        // duration: configProvider.duration,
-        child: widget.isWhite &&
-                (configProvider.gamestate == GameState.started ||
-                    configProvider.gamestate == GameState.aiSolving)
-            ? Container()
-            : Stack(
-                alignment: Alignment.center,
-                children: [
-                  Container(
-                    // duration: Duration(milliseconds: defaultTime),
-                    // alignment: Alignment.center,
-                    height: height,
-                    width: height,
-                    // decoration: isHovering
-                    //     ? BoxDecoration(border: Border.all(color: primaryColor))
-                    //     : const BoxDecoration(),
-                    child: ClipRect(
-                      child: OverflowBox(
-                        maxWidth: double.infinity,
-                        maxHeight: double.infinity,
-                        // alignment: Alignment.topLeft,
-                        child: Transform.scale(
-                          scale: widget.gridSize.toDouble().toDouble(),
-                          origin: finalImageOffset,
-                          // alignment: Alignment(imageLeft, imageTop),
-                          child: widget.image,
-                        ),
-                      ),
-                    ),
+    Widget tileContainer = MyAnimatedFader(
+        isVisible: !widget.isWhite ||
+            (configProvider.gamestate == GameState.waiting ||
+                configProvider.gamestate == GameState.finished),
+        child: Stack(
+          alignment: Alignment.center,
+          children: [
+            Container(
+              // duration: Duration(milliseconds: defaultTime),
+              // alignment: Alignment.center,
+              height: height,
+              width: height,
+              // decoration: isHovering
+              //     ? BoxDecoration(border: Border.all(color: primaryColor))
+              //     : const BoxDecoration(),
+              child: ClipRect(
+                child: OverflowBox(
+                  maxWidth: double.infinity,
+                  maxHeight: double.infinity,
+                  // alignment: Alignment.topLeft,
+                  child: Transform.scale(
+                    scale: widget.gridSize.toDouble().toDouble(),
+                    origin: finalImageOffset,
+                    // alignment: Alignment(imageLeft, imageTop),
+                    child: widget.image,
                   ),
-                  configProvider.showNumbers
-                      ? Center(
-                          child: AutoSizeText(
-                          "${widget.defaultIndex + 1}",
-                          style: const TextStyle(
-                              fontSize: 32,
-                              color: Colors.white,
-                              shadows: [
-                                Shadow(color: Colors.black, blurRadius: 1)
-                              ]),
-                        ))
-                      : Container()
-                ],
-              ));
+                ),
+              ),
+            ),
+            configProvider.showNumbers
+                ? Center(
+                    child: AutoSizeText(
+                    "${widget.defaultIndex + 1}",
+                    style: const TextStyle(
+                        fontSize: 32,
+                        color: Colors.white,
+                        shadows: [Shadow(color: Colors.black, blurRadius: 1)]),
+                  ))
+                : Container()
+          ],
+        ));
     return AnimatedPositioned(
       duration: configProvider.duration,
       curve: configProvider.curve,
diff --git a/lib/ui/Scoreboard.dart b/lib/ui/Scoreboard.dart
index d7b5e48..993e3d8 100644
--- a/lib/ui/Scoreboard.dart
+++ b/lib/ui/Scoreboard.dart
@@ -377,10 +377,8 @@ class _ScoreBoardState extends State<ScoreBoard>
       return StreamBuilder<List<LeaderboardItem>>(
           stream: DatabaseService.instance.fetchLeaderBoards(grid),
           builder: (context, snapshot) {
-            bool isDone = !snapshot.hasError &&
-                snapshot.hasData &&
-                snapshot.data != null &&
-                snapshot.connectionState != ConnectionState.waiting;
+            bool isDone =
+                !snapshot.hasError && snapshot.hasData && snapshot.data != null;
             if (!isDone) {
               return Container(
                 padding: EdgeInsets.all(8),
@@ -420,9 +418,10 @@ class _ScoreBoardState extends State<ScoreBoard>
               child: ScrollConfiguration(
                 behavior: MyCustomScrollBehavior(),
                 child: ScrollablePositionedList.separated(
-                  separatorBuilder: (context, index) => Divider(
+                  separatorBuilder: (context, index) => const Divider(
                     indent: 24,
                     endIndent: 24,
+                    color: Colors.black,
                   ),
                   itemCount: data.length + (!myPosition.isNegative ? 0 : 1),
                   // physics: const BouncingScrollPhysics(),
@@ -502,7 +501,7 @@ class _ScoreBoardState extends State<ScoreBoard>
                         minFontSize: 8,
                       ),
                       SizedBox(
-                        height: maxHeight * 0.05,
+                        height: 16,
                       ),
                       Expanded(
                         child: board(timeChartData),
diff --git a/lib/ui/animated_fader.dart b/lib/ui/animated_fader.dart
new file mode 100644
index 0000000..4be7ea5
--- /dev/null
+++ b/lib/ui/animated_fader.dart
@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class MyAnimatedFader extends StatefulWidget {
+  final Widget child;
+  final bool isVisible;
+  const MyAnimatedFader({
+    Key? key,
+    required this.child,
+    required this.isVisible,
+  }) : super(key: key);
+
+  @override
+  State<MyAnimatedFader> createState() => _MyAnimatedFaderState();
+}
+
+class _MyAnimatedFaderState extends State<MyAnimatedFader>
+    with SingleTickerProviderStateMixin {
+  late AnimationController animationController;
+
+  @override
+  void initState() {
+    super.initState();
+    animationController = AnimationController(
+        vsync: this, duration: const Duration(milliseconds: 500));
+    animationController.value = 1;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.isVisible) {
+      animationController.forward();
+    } else {
+      animationController.reverse();
+    }
+    return FadeTransition(opacity: animationController, child: widget.child);
+  }
+}
diff --git a/lib/ui/bordered_container.dart b/lib/ui/bordered_container.dart
index d147f71..dae32a6 100644
--- a/lib/ui/bordered_container.dart
+++ b/lib/ui/bordered_container.dart
@@ -53,9 +53,9 @@ class _BorderedContainerState extends State<BorderedContainer>
       configProvider.seenEntryAnimation("3x3");
       configProvider.seenEntryAnimation("4x4");
     }
-    if (widget.label == "shuffle" || widget.label == "reset") {
-      configProvider.seenEntryAnimation("shuffle");
-      configProvider.seenEntryAnimation("reset");
+    if (widget.label == "Shuffle" || widget.label == "Reset") {
+      configProvider.seenEntryAnimation("Shuffle");
+      configProvider.seenEntryAnimation("Reset");
     }
 
     configProvider.seenEntryAnimation(widget.label);
diff --git a/lib/ui/button.dart b/lib/ui/button.dart
index 3cc393f..847dd9b 100644
--- a/lib/ui/button.dart
+++ b/lib/ui/button.dart
@@ -112,14 +112,15 @@ class _MyButtonState extends State<MyButton> {
         padding: const EdgeInsets.all(4),
         child: GestureDetector(
           onTap: () {
-            AudioService.instance.buttonDown();
+            print("tap");
+            // AudioService.instance.buttonDown();
             animationController.forward().then((value) {
               animationController.reverse();
-              AudioService.instance.buttonUp();
+              // AudioService.instance.buttonUp();
             });
           },
           onTapDown: (_) {
-            // print("down");
+            print("down");
             shouldExecute = true;
             AudioService.instance.buttonDown();
             animationController.forward();
@@ -133,7 +134,7 @@ class _MyButtonState extends State<MyButton> {
           onPanUpdate: _onUpdate,
           onLongPressMoveUpdate: _onUpdate,
           onTapUp: (_) {
-            // print("up");
+            print("up");
             AudioService.instance.buttonUp();
             animationController.reverse();
             if (!widget.isDisabled) {
@@ -225,6 +226,7 @@ class _MyButtonState extends State<MyButton> {
     final configProvider = context.read<ConfigProvider>();
     if (configProvider.previewedButtons[widget.label] == null ||
         !configProvider.previewedButtons[widget.label]!) {
+      if (widget.label == "Reset") return;
       await Future.delayed(Duration(milliseconds: 2000 + defaultEntryTime));
       if (this.mounted) {
         setState(() {
diff --git a/lib/ui/colored_background.dart b/lib/ui/colored_background.dart
index 0faf445..c9e291c 100644
--- a/lib/ui/colored_background.dart
+++ b/lib/ui/colored_background.dart
@@ -19,13 +19,13 @@ class ColoredBackground extends StatefulWidget {
 class _ColoredBackgroundState extends State<ColoredBackground> {
   Duration duration = const Duration(milliseconds: 3000);
 
-  _calculatePercentage(List<TilesModel> tileList) {
-    if (tileList.isEmpty) return 0;
+  double _calculatePercentage(List<TilesModel> tileList) {
+    if (tileList.isEmpty) return 1;
     int total = tileList.length;
     int done = tileList
         .where((element) => element.currentIndex == element.defaultIndex)
         .length;
-    return done / total;
+    return (done / total).toDouble();
   }
 
   @override
diff --git a/lib/ui/puzzle_image_thumbnail.dart b/lib/ui/puzzle_image_thumbnail.dart
index 71a0955..ab6d79c 100644
--- a/lib/ui/puzzle_image_thumbnail.dart
+++ b/lib/ui/puzzle_image_thumbnail.dart
@@ -30,6 +30,7 @@ class _PuzzleImageThumbnailState extends State<PuzzleImageThumbnail>
     with TickerProviderStateMixin {
   late AnimationController animationController;
   bool isHovering = false;
+  late Image image;
 
   bool _ifAnimated() {
     String name = "imageIndEntry${widget.index}";
@@ -63,6 +64,12 @@ class _PuzzleImageThumbnailState extends State<PuzzleImageThumbnail>
     animationController =
         AnimationController(vsync: this, duration: Duration(milliseconds: 500));
     _animateEntry();
+    image = Image.asset(
+      widget.tileProvider.images[widget.index],
+      fit: BoxFit.cover,
+      height: 75,
+      width: 75,
+    );
   }
 
   @override
@@ -71,6 +78,12 @@ class _PuzzleImageThumbnailState extends State<PuzzleImageThumbnail>
     super.dispose();
   }
 
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    precacheImage(image.image, context);
+  }
+
   @override
   Widget build(BuildContext context) {
     return ScaleTransition(
@@ -103,12 +116,7 @@ class _PuzzleImageThumbnailState extends State<PuzzleImageThumbnail>
               //   Radius.circular(10),
               // ),
             ),
-            child: Image.asset(
-              widget.tileProvider.images[widget.index],
-              fit: BoxFit.cover,
-              cacheHeight: 75,
-              cacheWidth: 75,
-            ),
+            child: image,
             // child: Text(widget.tileProvider.images[widget.index]),
             // child: Lottie.asset(
             //   widget.tileProvider.images[widget.index],
diff --git a/lib/ui/theme_changer.dart b/lib/ui/theme_changer.dart
index e116614..cc742b5 100644
--- a/lib/ui/theme_changer.dart
+++ b/lib/ui/theme_changer.dart
@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:slide_puzzle/code/audio.dart';
 
 import 'package:slide_puzzle/code/constants.dart';
 import 'package:slide_puzzle/code/models.dart';
 import 'package:slide_puzzle/code/store.dart';
+import 'package:slide_puzzle/main.dart';
 import 'package:slide_puzzle/ui/bordered_container.dart';
 
 class ThemeChanger extends StatelessWidget {
@@ -29,8 +31,11 @@ class ThemeChanger extends StatelessWidget {
             cursor: SystemMouseCursors.click,
             child: GestureDetector(
               onTap: () {
+                AudioService.instance.button();
+                AudioService.instance.vibrate();
                 changeColor(themes.indexOf(theme));
                 Storage.instance.changeColor(themes.indexOf(theme));
+                mainKey.currentState!.setState(() {});
                 onTap();
               },
               child: Stack(
diff --git a/pubspec.lock b/pubspec.lock
index 7f6fe26..7e05388 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -188,6 +188,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_launcher_icons:
+    dependency: "direct dev"
+    description:
+      name: flutter_launcher_icons
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.2"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -195,6 +202,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  flutter_native_splash:
+    dependency: "direct dev"
+    description:
+      name: flutter_native_splash
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
   flutter_svg:
     dependency: "direct main"
     description:
@@ -254,6 +268,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.0.0"
+  image:
+    dependency: transitive
+    description:
+      name: image
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.3"
   intl:
     dependency: transitive
     description:
@@ -623,6 +644,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.0"
+  universal_io:
+    dependency: transitive
+    description:
+      name: universal_io
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.4"
   url_launcher:
     dependency: "direct main"
     description:
@@ -749,6 +777,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "5.3.1"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.0"
 sdks:
   dart: ">=2.15.1 <3.0.0"
   flutter: ">=2.10.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index 7d6a610..7f21321 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -15,7 +15,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
-version: 0.6.3+18
+version: 0.6.4+19
 
 environment:
   sdk: ">=2.15.1 <3.0.0"
@@ -65,6 +65,21 @@ dev_dependencies:
   # rules and activating additional ones.
   flutter_lints: ^1.0.0
   rename: ^2.0.1
+  flutter_launcher_icons: ^0.9.2
+  flutter_native_splash: ^2.1.0
+
+flutter_icons:
+  android: true
+  ios: true
+  remove_alpha_ios: true
+  image_path: "assets/logo.png"
+
+flutter_native_splash:
+  color: "#ffffff"
+  image: assets/logo.png
+  android: true
+  ios: true
+  web: false
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
diff --git a/test/widget_test.dart b/test/widget_test.dart
index 96d7c2a..cf9fce6 100644
--- a/test/widget_test.dart
+++ b/test/widget_test.dart
@@ -13,7 +13,7 @@ import 'package:slide_puzzle/main.dart';
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {
     // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
+    await tester.pumpWidget(MyApp());
 
     // Verify that our counter starts at 0.
     expect(find.text('0'), findsOneWidget);
diff --git a/web/favicon.ico b/web/favicon.ico
new file mode 100644
index 0000000..389fd41
Binary files /dev/null and b/web/favicon.ico differ
diff --git a/web/favicon.png b/web/favicon.png
deleted file mode 100644
index 8aaa46a..0000000
Binary files a/web/favicon.png and /dev/null differ
diff --git a/web/icons/Icon-192.png b/web/icons/Icon-192.png
deleted file mode 100644
index b749bfe..0000000
Binary files a/web/icons/Icon-192.png and /dev/null differ
diff --git a/web/icons/Icon-512.png b/web/icons/Icon-512.png
deleted file mode 100644
index 88cfd48..0000000
Binary files a/web/icons/Icon-512.png and /dev/null differ
diff --git a/web/icons/Icon-maskable-192.png b/web/icons/Icon-maskable-192.png
deleted file mode 100644
index eb9b4d7..0000000
Binary files a/web/icons/Icon-maskable-192.png and /dev/null differ
diff --git a/web/icons/Icon-maskable-512.png b/web/icons/Icon-maskable-512.png
deleted file mode 100644
index d69c566..0000000
Binary files a/web/icons/Icon-maskable-512.png and /dev/null differ
diff --git a/web/icons/android-icon-144x144.png b/web/icons/android-icon-144x144.png
new file mode 100644
index 0000000..505b827
Binary files /dev/null and b/web/icons/android-icon-144x144.png differ
diff --git a/web/icons/android-icon-192x192.png b/web/icons/android-icon-192x192.png
new file mode 100644
index 0000000..b3124c3
Binary files /dev/null and b/web/icons/android-icon-192x192.png differ
diff --git a/web/icons/android-icon-36x36.png b/web/icons/android-icon-36x36.png
new file mode 100644
index 0000000..919c185
Binary files /dev/null and b/web/icons/android-icon-36x36.png differ
diff --git a/web/icons/android-icon-48x48.png b/web/icons/android-icon-48x48.png
new file mode 100644
index 0000000..12c7d58
Binary files /dev/null and b/web/icons/android-icon-48x48.png differ
diff --git a/web/icons/android-icon-72x72.png b/web/icons/android-icon-72x72.png
new file mode 100644
index 0000000..6936103
Binary files /dev/null and b/web/icons/android-icon-72x72.png differ
diff --git a/web/icons/android-icon-96x96.png b/web/icons/android-icon-96x96.png
new file mode 100644
index 0000000..3c634c4
Binary files /dev/null and b/web/icons/android-icon-96x96.png differ
diff --git a/web/icons/apple-icon-114x114.png b/web/icons/apple-icon-114x114.png
new file mode 100644
index 0000000..7e48cae
Binary files /dev/null and b/web/icons/apple-icon-114x114.png differ
diff --git a/web/icons/apple-icon-120x120.png b/web/icons/apple-icon-120x120.png
new file mode 100644
index 0000000..7440e3b
Binary files /dev/null and b/web/icons/apple-icon-120x120.png differ
diff --git a/web/icons/apple-icon-144x144.png b/web/icons/apple-icon-144x144.png
new file mode 100644
index 0000000..505b827
Binary files /dev/null and b/web/icons/apple-icon-144x144.png differ
diff --git a/web/icons/apple-icon-152x152.png b/web/icons/apple-icon-152x152.png
new file mode 100644
index 0000000..b4f57bb
Binary files /dev/null and b/web/icons/apple-icon-152x152.png differ
diff --git a/web/icons/apple-icon-180x180.png b/web/icons/apple-icon-180x180.png
new file mode 100644
index 0000000..0ea84df
Binary files /dev/null and b/web/icons/apple-icon-180x180.png differ
diff --git a/web/icons/apple-icon-57x57.png b/web/icons/apple-icon-57x57.png
new file mode 100644
index 0000000..5e84230
Binary files /dev/null and b/web/icons/apple-icon-57x57.png differ
diff --git a/web/icons/apple-icon-60x60.png b/web/icons/apple-icon-60x60.png
new file mode 100644
index 0000000..f2c5086
Binary files /dev/null and b/web/icons/apple-icon-60x60.png differ
diff --git a/web/icons/apple-icon-72x72.png b/web/icons/apple-icon-72x72.png
new file mode 100644
index 0000000..6936103
Binary files /dev/null and b/web/icons/apple-icon-72x72.png differ
diff --git a/web/icons/apple-icon-76x76.png b/web/icons/apple-icon-76x76.png
new file mode 100644
index 0000000..2922e0e
Binary files /dev/null and b/web/icons/apple-icon-76x76.png differ
diff --git a/web/icons/apple-icon-precomposed.png b/web/icons/apple-icon-precomposed.png
new file mode 100644
index 0000000..3ba5f65
Binary files /dev/null and b/web/icons/apple-icon-precomposed.png differ
diff --git a/web/icons/apple-icon.png b/web/icons/apple-icon.png
new file mode 100644
index 0000000..3ba5f65
Binary files /dev/null and b/web/icons/apple-icon.png differ
diff --git a/web/icons/favicon-16x16.png b/web/icons/favicon-16x16.png
new file mode 100644
index 0000000..3a6c8ce
Binary files /dev/null and b/web/icons/favicon-16x16.png differ
diff --git a/web/icons/favicon-32x32.png b/web/icons/favicon-32x32.png
new file mode 100644
index 0000000..7b6f1db
Binary files /dev/null and b/web/icons/favicon-32x32.png differ
diff --git a/web/icons/favicon-96x96.png b/web/icons/favicon-96x96.png
new file mode 100644
index 0000000..3c634c4
Binary files /dev/null and b/web/icons/favicon-96x96.png differ
diff --git a/web/icons/ms-icon-144x144.png b/web/icons/ms-icon-144x144.png
new file mode 100644
index 0000000..505b827
Binary files /dev/null and b/web/icons/ms-icon-144x144.png differ
diff --git a/web/icons/ms-icon-150x150.png b/web/icons/ms-icon-150x150.png
new file mode 100644
index 0000000..dd6bc9f
Binary files /dev/null and b/web/icons/ms-icon-150x150.png differ
diff --git a/web/icons/ms-icon-310x310.png b/web/icons/ms-icon-310x310.png
new file mode 100644
index 0000000..9233962
Binary files /dev/null and b/web/icons/ms-icon-310x310.png differ
diff --git a/web/icons/ms-icon-70x70.png b/web/icons/ms-icon-70x70.png
new file mode 100644
index 0000000..460cbdd
Binary files /dev/null and b/web/icons/ms-icon-70x70.png differ
diff --git a/web/index.html b/web/index.html
index ad91a82..fc3286b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -24,12 +24,27 @@
   <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="Slide Puzzle">
-  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+  <link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+  <meta name="theme-color" content="#ffffff">
 
   <!-- Favicon -->
-  <link rel="icon" type="image/png" href="favicon.png"/>
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
 
-  <title>Slide Puzzle</title>
+  <title>Retro Slide Puzzle</title>
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
diff --git a/web/manifest.json b/web/manifest.json
index 84c91a3..82fe786 100644
--- a/web/manifest.json
+++ b/web/manifest.json
@@ -3,33 +3,47 @@
     "short_name": "Slide Puzzle",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#0175C2",
-    "theme_color": "#0175C2",
+    "background_color": "#FFFFFF",
+    "theme_color": "#FFFFFF",
     "description": "A slide puzzle made for flutter puzzle hack challenge",
     "orientation": "portrait-primary",
     "prefer_related_applications": false,
     "icons": [
+		{
+            "src": "\/icons/android-icon-36x36.png",
+            "sizes": "36x36",
+            "type": "image\/png",
+            "density": "0.75"
+        },
         {
-            "src": "icons/Icon-192.png",
-            "sizes": "192x192",
-            "type": "image/png"
+            "src": "\/icons/android-icon-48x48.png",
+            "sizes": "48x48",
+            "type": "image\/png",
+            "density": "1.0"
         },
         {
-            "src": "icons/Icon-512.png",
-            "sizes": "512x512",
-            "type": "image/png"
+            "src": "\/icons/android-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image\/png",
+            "density": "1.5"
         },
         {
-            "src": "icons/Icon-maskable-192.png",
-            "sizes": "192x192",
-            "type": "image/png",
-            "purpose": "maskable"
+            "src": "\/icons/android-icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image\/png",
+            "density": "2.0"
         },
         {
-            "src": "icons/Icon-maskable-512.png",
-            "sizes": "512x512",
-            "type": "image/png",
-            "purpose": "maskable"
+            "src": "\/icons/android-icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image\/png",
+            "density": "3.0"
+        },
+        {
+            "src": "\/icons/android-icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image\/png",
+            "density": "4.0"
         }
-    ]
+	 ]
 }