diff --git a/assets/screenshots/app-mockup-android-screenshot-1-default-1080x1920-1.png b/assets/screenshots/app-mockup-android-screenshot-1-default-1080x1920-1.png
index 54706d2..7d47478 100644
Binary files a/assets/screenshots/app-mockup-android-screenshot-1-default-1080x1920-1.png and b/assets/screenshots/app-mockup-android-screenshot-1-default-1080x1920-1.png differ
diff --git a/assets/screenshots/app-mockup-android-screenshot-1-default-1080x1920-2.png b/assets/screenshots/app-mockup-android-screenshot-1-default-1080x1920-2.png
index d2b479a..3e07d70 100644
Binary files a/assets/screenshots/app-mockup-android-screenshot-1-default-1080x1920-2.png and b/assets/screenshots/app-mockup-android-screenshot-1-default-1080x1920-2.png differ
diff --git a/lib/drawer.dart b/lib/drawer.dart
index 5e9c661..389b8ec 100644
--- a/lib/drawer.dart
+++ b/lib/drawer.dart
@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
 
-const themeColor = Colors.blue;
+const primaryColor = Colors.indigo;
+// const a = Colors.
+const secondaryColor = Colors.indigoAccent;
 String appName = "", version = ""; // from ./pubspec.yaml
 
 class MyDrawer extends StatelessWidget {
@@ -33,7 +35,7 @@ class MyDrawer extends StatelessWidget {
         children: [
           DrawerHeader(
             decoration: const BoxDecoration(
-              color: Colors.blue,
+              color: primaryColor,
             ),
             child: Text(
               appName,
@@ -52,7 +54,9 @@ class MyDrawer extends StatelessWidget {
           ),
           ListTile(
             leading: const Icon(
-              IconData(0xe61e, fontFamily: "iconfont"), color: Colors.red,),
+              IconData(0xe61e, fontFamily: "iconfont"),
+              color: Colors.red,
+            ),
             title: const Text('Snooker'),
             onTap: () {
               Navigator.pushNamed(context, '/snooker');
@@ -60,7 +64,9 @@ class MyDrawer extends StatelessWidget {
           ),
           ListTile(
             leading: const Icon(
-              IconData(0xe63a, fontFamily: "iconfont"), color: Colors.black,),
+              IconData(0xe63a, fontFamily: "iconfont"),
+              color: Colors.black,
+            ),
             title: const Text('Eight-ball'),
             enabled: false,
             onTap: () {
diff --git a/lib/home.dart b/lib/home.dart
index 7c13660..6a63ab1 100644
--- a/lib/home.dart
+++ b/lib/home.dart
@@ -27,22 +27,21 @@ class _HomeState extends State<HomePage> {
         floatingActionButton:
             Column(mainAxisAlignment: MainAxisAlignment.end, children: [
           FloatingActionButton(
-            child: const Icon(Icons.delete),
             onPressed: () => setState(() {
               _count = 0;
             }),
             heroTag: null,
+            child: const Icon(Icons.delete),
           ),
           const SizedBox(
             height: 10,
           ),
           FloatingActionButton(
-            child: const Icon(Icons.add),
-            // onPressed: () => _someFunc(),
             onPressed: () => setState(() {
               _count++;
             }),
             heroTag: null,
+            child: const Icon(Icons.add),
           )
         ]));
   }
diff --git a/lib/main.dart b/lib/main.dart
index 970202c..20484f7 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -25,7 +25,8 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: appName, // used by the OS task switcher
       theme: ThemeData(
-        primarySwatch: themeColor,
+        useMaterial3: true,
+        primarySwatch: primaryColor,
         pageTransitionsTheme: const PageTransitionsTheme(
           builders: {
             TargetPlatform.android: ZoomPageTransitionsBuilder(),
diff --git a/lib/snooker.dart b/lib/snooker.dart
index 2adb35d..4a288e3 100644
--- a/lib/snooker.dart
+++ b/lib/snooker.dart
@@ -3,6 +3,23 @@ import 'package:flutter_material_pickers/flutter_material_pickers.dart';
 import 'package:material_segmented_control/material_segmented_control.dart';
 import 'drawer.dart';
 
+const scoreSize = Size(128, 1);
+
+Icon getBallIcon(Color color) {
+  return Icon(
+    Icons.circle,
+    color: color,
+    size: 64,
+    shadows: const [
+      Shadow(
+        blurRadius: 15,
+        offset: Offset(0.0, 2.0),
+        color: Colors.grey,
+      )
+    ],
+  );
+}
+
 class Snooker extends StatefulWidget {
   Snooker({Key? key}) : super(key: key);
 
@@ -16,7 +33,7 @@ class _SnookerState extends State<Snooker> {
   // var _lastScores_ = <int>[0, 0]; // TODO: return
   static const Icon _playing = Icon(
     IconData(0xe655, fontFamily: "iconfont"),
-    color: themeColor,
+    color: primaryColor,
   );
   static const Icon _waiting = Icon(
     Icons.airline_seat_recline_normal_rounded,
@@ -38,18 +55,17 @@ class _SnookerState extends State<Snooker> {
                 children: const {
                   0: Text(
                     "Player1",
-                    style: TextStyle(fontSize: 24),
+                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                   ),
                   1: Text(
                     "Player2",
-                    style: TextStyle(fontSize: 24),
+                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                   ),
                 },
                 selectionIndex: _curPlayer,
-                borderColor: Colors.grey,
-                selectedColor: themeColor,
+                borderColor: Colors.black,
+                selectedColor: secondaryColor,
                 unselectedColor: Colors.white,
-                borderRadius: 16.0,
                 onSegmentChosen: (int index) {
                   setState(() {
                     _curPlayer = index;
@@ -64,6 +80,7 @@ class _SnookerState extends State<Snooker> {
           ),
           const SizedBox(height: 16),
           Row(
+            mainAxisAlignment: MainAxisAlignment.center,
             children: [
               TextButton(
                   onPressed: () => showMaterialNumberPicker(
@@ -75,30 +92,35 @@ class _SnookerState extends State<Snooker> {
                         onChanged: (value) =>
                             setState(() => _scores_[0] = value),
                       ),
+                  style: ButtonStyle(
+                    minimumSize: MaterialStateProperty.all(scoreSize),
+                  ),
                   child: Text(
                     "${_scores_[0]}",
                     style: const TextStyle(fontSize: 64),
                   )),
               const Text(
                 ":",
-                style: TextStyle(fontSize: 64, color: themeColor),
+                style: TextStyle(fontSize: 64, color: primaryColor),
               ),
               TextButton(
                   onPressed: () => showMaterialNumberPicker(
                         context: context,
-                        title: "Score of Player1",
+                        title: "Score of Player2",
                         maxNumber: 147,
                         minNumber: 0,
                         selectedNumber: _scores_[1],
                         onChanged: (value) =>
                             setState(() => _scores_[1] = value),
                       ),
+                  style: ButtonStyle(
+                    minimumSize: MaterialStateProperty.all(scoreSize),
+                  ),
                   child: Text(
                     "${_scores_[1]}",
                     style: const TextStyle(fontSize: 64),
                   )),
             ],
-            mainAxisAlignment: MainAxisAlignment.center,
           ),
           Expanded(
             child: GridView.count(
@@ -109,68 +131,47 @@ class _SnookerState extends State<Snooker> {
               crossAxisCount: 3,
               children: <Widget>[
                 IconButton(
-                    onPressed: () => setState(() {
-                          _scores_[_curPlayer]++;
-                        }),
-                    icon: const Icon(
-                      Icons.circle,
-                      color: Color(0xFFFF0000),
-                      size: 64,
-                    )),
+                  onPressed: () => setState(() {
+                    _scores_[_curPlayer]++;
+                  }),
+                  icon: getBallIcon(const Color(0xFFFF0000)),
+                ),
                 IconButton(
-                    onPressed: () => setState(() {
-                          _scores_[_curPlayer] += 2;
-                        }),
-                    icon: const Icon(
-                      Icons.circle,
-                      color: Colors.yellow,
-                      size: 64,
-                    )),
+                  onPressed: () => setState(() {
+                    _scores_[_curPlayer] += 2;
+                  }),
+                  icon: getBallIcon(Colors.yellow),
+                ),
                 IconButton(
-                    onPressed: () => setState(() {
-                          _scores_[_curPlayer] += 3;
-                        }),
-                    icon: const Icon(
-                      Icons.circle,
-                      color: Colors.green,
-                      size: 64,
-                    )),
+                  onPressed: () => setState(() {
+                    _scores_[_curPlayer] += 3;
+                  }),
+                  icon: getBallIcon(Colors.green),
+                ),
                 IconButton(
-                    onPressed: () => setState(() {
-                          _scores_[_curPlayer] += 4;
-                        }),
-                    icon: const Icon(
-                      Icons.circle,
-                      color: Color(0xFFA52A2A),
-                      size: 64,
-                    )),
+                  onPressed: () => setState(() {
+                    _scores_[_curPlayer] += 4;
+                  }),
+                  icon: getBallIcon(const Color(0xFFA52A2A)),
+                ),
                 IconButton(
-                    onPressed: () => setState(() {
-                          _scores_[_curPlayer] += 5;
-                        }),
-                    icon: const Icon(
-                      Icons.circle,
-                      color: Colors.blue,
-                      size: 64,
-                    )),
+                  onPressed: () => setState(() {
+                    _scores_[_curPlayer] += 5;
+                  }),
+                  icon: getBallIcon(Colors.blue),
+                ),
                 IconButton(
-                    onPressed: () => setState(() {
-                          _scores_[_curPlayer] += 6;
-                        }),
-                    icon: const Icon(
-                      Icons.circle,
-                      color: Color(0xFFFF7FFF),
-                      size: 64,
-                    )),
+                  onPressed: () => setState(() {
+                    _scores_[_curPlayer] += 6;
+                  }),
+                  icon: getBallIcon(const Color(0xFFFF7FFF)),
+                ),
                 IconButton(
-                    onPressed: () => setState(() {
-                          _scores_[_curPlayer] += 7;
-                        }),
-                    icon: const Icon(
-                      Icons.circle,
-                      color: Colors.black,
-                      size: 64,
-                    )),
+                  onPressed: () => setState(() {
+                    _scores_[_curPlayer] += 7;
+                  }),
+                  icon: getBallIcon(Colors.black),
+                ),
                 IconButton(
                   onPressed: () => setState(() {
                     _scores_[1 - _curPlayer] += 4;
@@ -179,6 +180,13 @@ class _SnookerState extends State<Snooker> {
                     Icons.warning_rounded,
                     color: Colors.red,
                     size: 64,
+                    shadows: [
+                      Shadow(
+                        blurRadius: 15,
+                        offset: Offset(0.0, 2.0),
+                        color: Colors.grey,
+                      )
+                    ],
                   ),
                   tooltip: "罚 4 分",
                 ),
diff --git a/pubspec.lock b/pubspec.lock
index dfe22bc..f0ac6cf 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -42,7 +42,7 @@ packages:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.15.0"
+    version: "1.16.0"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -56,21 +56,21 @@ packages:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.0"
   ffi:
     dependency: transitive
     description:
       name: ffi
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "1.2.1"
   file_picker:
     dependency: transitive
     description:
       name: file_picker
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.3.2"
+    version: "4.5.1"
   fluro:
     dependency: "direct dev"
     description:
@@ -89,7 +89,7 @@ packages:
       name: flutter_colorpicker
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.6.1"
+    version: "1.0.3"
   flutter_linkify:
     dependency: "direct dev"
     description:
@@ -103,21 +103,21 @@ packages:
       name: flutter_lints
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.4"
+    version: "2.0.1"
   flutter_material_pickers:
     dependency: "direct dev"
     description:
       name: flutter_material_pickers
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.1.2"
+    version: "3.1.4+1"
   flutter_plugin_android_lifecycle:
     dependency: transitive
     description:
       name: flutter_plugin_android_lifecycle
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.5"
+    version: "2.0.6"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -155,7 +155,7 @@ packages:
       name: js
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.6.3"
+    version: "0.6.4"
   linkify:
     dependency: transitive
     description:
@@ -169,7 +169,7 @@ packages:
       name: lints
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.1"
+    version: "2.0.0"
   matcher:
     dependency: transitive
     description:
@@ -177,13 +177,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.4"
   material_segmented_control:
     dependency: "direct dev"
     description:
       name: material_segmented_control
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.1.2"
+    version: "4.0.0"
   meta:
     dependency: transitive
     description:
@@ -197,14 +204,14 @@ packages:
       name: package_info_plus
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.4.2"
   package_info_plus_linux:
     dependency: transitive
     description:
       name: package_info_plus_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.3"
+    version: "1.0.5"
   package_info_plus_macos:
     dependency: transitive
     description:
@@ -225,21 +232,21 @@ packages:
       name: package_info_plus_web
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   package_info_plus_windows:
     dependency: transitive
     description:
       name: package_info_plus_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.1"
   plugin_platform_interface:
     dependency: transitive
     description:
@@ -258,7 +265,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.8.2"
   stack_trace:
     dependency: transitive
     description:
@@ -293,49 +300,49 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.3"
+    version: "0.4.9"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   url_launcher:
     dependency: "direct dev"
     description:
       name: url_launcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.0.18"
+    version: "6.1.2"
   url_launcher_android:
     dependency: transitive
     description:
       name: url_launcher_android
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.0.14"
+    version: "6.0.17"
   url_launcher_ios:
     dependency: transitive
     description:
       name: url_launcher_ios
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.0.14"
+    version: "6.0.16"
   url_launcher_linux:
     dependency: transitive
     description:
       name: url_launcher_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.3"
+    version: "3.0.1"
   url_launcher_macos:
     dependency: transitive
     description:
       name: url_launcher_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "3.0.1"
   url_launcher_platform_interface:
     dependency: transitive
     description:
@@ -349,28 +356,28 @@ packages:
       name: url_launcher_web
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.6"
+    version: "2.0.11"
   url_launcher_windows:
     dependency: transitive
     description:
       name: url_launcher_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "3.0.1"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.1"
+    version: "2.1.2"
   win32:
     dependency: transitive
     description:
       name: win32
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.3.6"
+    version: "2.6.1"
 sdks:
-  dart: ">=2.15.0 <3.0.0"
-  flutter: ">=2.5.0"
+  dart: ">=2.17.0 <3.0.0"
+  flutter: ">=2.10.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index 755c114..1a00438 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.1.1
+version: 0.1.2
 
 environment:
   sdk: ">=2.15.0 <3.0.0"
@@ -33,7 +33,7 @@ dependencies:
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.2
+  cupertino_icons: ^1.0.4
 
 dev_dependencies:
   flutter_test:
@@ -44,13 +44,13 @@ dev_dependencies:
   # activated in the `analysis_options.yaml` file located at the root of your
   # package. See that file for information about deactivating specific lint
   # rules and activating additional ones.
-  flutter_lints: ^1.0.0
-  url_launcher: ^6.0.17
-  flutter_linkify: ^5.0.2
-  material_segmented_control: ^3.1.2
-  flutter_material_pickers: ^3.1.2
-  package_info_plus: ^1.3.0
   fluro: ^2.0.3
+  flutter_lints: ^2.0.1
+  flutter_linkify: ^5.0.2
+  flutter_material_pickers: ^3.1.4
+  material_segmented_control: ^4.0.0
+  package_info_plus: ^1.4.2
+  url_launcher: ^6.1.2
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec