diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 74090ad..35092f7 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -34,7 +34,7 @@ jobs:
         run: flutter pub get
         
       - name: build web app
-        run: flutter build web --base-href "/dreambook/"
+        run: flutter build web --base-href "/dreambook/" --wasm
 
       - name: Upload site artifact
         uses: actions/upload-pages-artifact@v1
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2b8f9bf..e4b03cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,10 @@
-## Unreleased
+## 1.2.1+18 - 2024-05-23
 ### Added
 - text widgets
 
+### Changed
+- use wasm build
+
 ## 1.2.0+17 - 2024-03-14
 ### Added
 - text widgets
diff --git a/lib/src/ui/pages/cupertino/action_sheet.dart b/lib/src/ui/pages/cupertino/action_sheet.dart
index 1063a59..5252453 100644
--- a/lib/src/ui/pages/cupertino/action_sheet.dart
+++ b/lib/src/ui/pages/cupertino/action_sheet.dart
@@ -1,14 +1,13 @@
 // ignore_for_file: public_member_api_docs, sort_constructors_first, unused_local_variable
 import 'package:code_builder/code_builder.dart';
 import 'package:dreambook/src/l10n/l10n_helper.dart';
+import 'package:dreambook/src/ui/pages/shared/code_space/code_space.dart';
+import 'package:dreambook/src/ui/pages/shared/shared_code_view.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
-import 'package:dreambook/src/ui/pages/shared/code_space/code_space.dart';
-import 'package:dreambook/src/ui/pages/shared/shared_code_view.dart';
-
 part 'action_sheet.g.dart';
 
 final actionSheetItem = CodeItem(
@@ -58,7 +57,6 @@ class TheCode extends ConsumerWidget {
     final config = ref.watch(configProvider);
     return AutoCode(
       'CupertinoActionSheet',
-      apiUrl: '/flutter/cupertino/CupertinoActionSheet-class.html',
       named: {
         'title': refer("const Text('title')"),
         if (config.showMessage) 'message': refer("const Text('a message')"),
diff --git a/lib/src/ui/pages/material/about.dart b/lib/src/ui/pages/material/about.dart
index 73fb3db..5414be7 100644
--- a/lib/src/ui/pages/material/about.dart
+++ b/lib/src/ui/pages/material/about.dart
@@ -1,6 +1,8 @@
 // ignore_for_file: public_member_api_docs, sort_constructors_first
+import 'package:code_builder/code_builder.dart';
+import 'package:dreambook/src/codes/widgets/widgets.dart';
 import 'package:dreambook/src/l10n/l10n_helper.dart';
-import 'package:dreambook/src/ui/pages/shared/code_space/code_space.dart';
+import 'package:dreambook/src/ui/pages/shared/code_space/code_area.dart';
 import 'package:dreambook/src/ui/pages/shared/shared_code_view.dart';
 import 'package:dreambook/src/ui/pages/shared/tiles/menu_tile.dart';
 import 'package:flutter/material.dart';
@@ -53,8 +55,18 @@ class TheCode extends ConsumerWidget {
   const TheCode({super.key});
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    print(Theme.of(context).primaryColor);
     final config = ref.watch(configProvider);
-    return AutoCode(config.type.rawName);
+    // return AutoCode(config.type.rawName);
+    return CodeArea(codes: [
+      StatefulWidgetX(
+        buildReturn: switch (config.type) {
+          AboutType.listTile => refer('AboutListTile').call([]),
+          AboutType.dialog => refer('AboutDialog').call([]),
+          AboutType.licensePage => refer('LicensePage').call([]),
+        },
+      ),
+    ]);
   }
 }
 
diff --git a/lib/src/ui/pages/material/action_buttons.dart b/lib/src/ui/pages/material/action_buttons.dart
index 295c99a..60b9acf 100644
--- a/lib/src/ui/pages/material/action_buttons.dart
+++ b/lib/src/ui/pages/material/action_buttons.dart
@@ -1,11 +1,14 @@
 // ignore_for_file: public_member_api_docs, sort_constructors_first
+import 'package:code_builder/code_builder.dart';
+import 'package:dreambook/src/codes/widgets/stateless_widget.dart';
 import 'package:dreambook/src/l10n/l10n_helper.dart';
-import 'package:dreambook/src/ui/pages/shared/code_space/code_space.dart';
+import 'package:dreambook/src/ui/pages/shared/code_space/code_area.dart';
 import 'package:dreambook/src/ui/pages/shared/shared_code_view.dart';
 import 'package:dreambook/src/ui/pages/shared/tiles/menu_tile.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
+
 part 'action_buttons.g.dart';
 
 final actionButtonsItem = CodeItem(
@@ -56,7 +59,23 @@ class TheCode extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final config = ref.watch(configProvider);
-    return AutoCode(config.type.rawName);
+    // return AutoCode(config.type.rawName);
+    return CodeArea(codes: [
+      StatelessWidgetX(
+        buildReturn: refer('Scaffold').call([], {
+          'drawer': refer('Drawer').constInstance([]),
+          'endDrawer': refer('Drawer').constInstance([]),
+          'body': refer('Center').call([], {
+            'child': switch (config.type) {
+              ActionButtonType.back => refer('BackButton').call([]),
+              ActionButtonType.close => refer('CloseButton').call([]),
+              ActionButtonType.drawer => refer('DrawerButton').call([]),
+              ActionButtonType.endDrawer => refer('EndDrawerButton').call([]),
+            },
+          }),
+        }),
+      ),
+    ]);
   }
 }
 
@@ -66,12 +85,18 @@ class TheWidget extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final config = ref.watch(configProvider);
     return WidgetWithConfiguration(
-      content: switch (config.type) {
-        ActionButtonType.back => const BackButton(),
-        ActionButtonType.close => const CloseButton(),
-        ActionButtonType.drawer => const DrawerButton(),
-        ActionButtonType.endDrawer => const EndDrawerButton(),
-      },
+      content: Scaffold(
+        drawer: const Drawer(),
+        endDrawer: const Drawer(),
+        body: Center(
+          child: switch (config.type) {
+            ActionButtonType.back => const BackButton(),
+            ActionButtonType.close => const CloseButton(),
+            ActionButtonType.drawer => const DrawerButton(),
+            ActionButtonType.endDrawer => const EndDrawerButton(),
+          },
+        ),
+      ),
       configs: [
         MenuTile(
           title: context.tr.theType,
diff --git a/lib/src/ui/pages/material/divider.dart b/lib/src/ui/pages/material/divider.dart
index 5f41989..fdfea5f 100644
--- a/lib/src/ui/pages/material/divider.dart
+++ b/lib/src/ui/pages/material/divider.dart
@@ -102,7 +102,7 @@ class TheWidget extends ConsumerWidget {
       color: Theme.of(context).colorScheme.primaryContainer,
       child: const SizedBox.square(dimension: 64),
     );
-    final color = Theme.of(context).colorScheme.onBackground;
+    final color = Theme.of(context).colorScheme.onSurface;
     return WidgetWithConfiguration(
       initialFractions: const [0.5, 0.5],
       content: switch (config.axis) {
diff --git a/lib/src/ui/pages/material/switch.dart b/lib/src/ui/pages/material/switch.dart
index 78e9ba7..dd1a4f3 100644
--- a/lib/src/ui/pages/material/switch.dart
+++ b/lib/src/ui/pages/material/switch.dart
@@ -116,12 +116,11 @@ class TheWidget extends ConsumerWidget {
               }
             : null,
         thumbIcon: config.showThumbIcons
-            ? MaterialStateProperty.resolveWith<Icon?>(
-                (Set<MaterialState> states) {
-                if (states.contains(MaterialState.disabled)) {
+            ? WidgetStateProperty.resolveWith<Icon?>((Set<WidgetState> states) {
+                if (states.contains(WidgetState.disabled)) {
                   return const Icon(Icons.close_rounded);
                 }
-                if (states.contains(MaterialState.selected)) {
+                if (states.contains(WidgetState.selected)) {
                   return const Icon(Icons.circle_outlined);
                 }
                 return null;
diff --git a/lib/src/ui/pages/shared/code_space/code_area.dart b/lib/src/ui/pages/shared/code_space/code_area.dart
index d54cfe6..ca00d41 100644
--- a/lib/src/ui/pages/shared/code_space/code_area.dart
+++ b/lib/src/ui/pages/shared/code_space/code_area.dart
@@ -31,7 +31,7 @@ class _CodeAreaState extends ConsumerState<CodeArea> {
   static final _formatter = DartFormatter();
   @override
   Widget build(BuildContext context) {
-    final background = Theme.of(context).colorScheme.background;
+    final background = Theme.of(context).colorScheme.surface;
     final specs = [
       ...widget.imports ?? [Imports.material],
       for (final code in widget.codes)
diff --git a/lib/src/ui/widgets/footer.dart b/lib/src/ui/widgets/footer.dart
index 6ce77fe..27655a0 100644
--- a/lib/src/ui/widgets/footer.dart
+++ b/lib/src/ui/widgets/footer.dart
@@ -17,14 +17,14 @@ class Footer extends StatelessWidget {
             context.tr.releasedMIT,
             style: TextStyle(
               fontSize: 12,
-              color: colorScheme.onBackground.withOpacity(0.8),
+              color: colorScheme.onSurface.withOpacity(0.8),
             ),
           ),
           Text(
             context.tr.copyright(year),
             style: TextStyle(
               fontSize: 12,
-              color: colorScheme.onBackground.withOpacity(0.8),
+              color: colorScheme.onSurface.withOpacity(0.8),
             ),
           ),
         ],
diff --git a/pubspec.lock b/pubspec.lock
index c270cf6..d254312 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -101,10 +101,10 @@ packages:
     dependency: "direct dev"
     description:
       name: build_runner
-      sha256: "581bacf68f89ec8792f5e5a0b2c4decd1c948e97ce659dc783688c8a88fbec21"
+      sha256: "1414d6d733a85d8ad2f1dfcb3ea7945759e35a123cb99ccfac75d0758f75edfa"
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "2.4.8"
+    version: "2.4.10"
   build_runner_core:
     dependency: transitive
     description:
@@ -249,14 +249,6 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.0.0"
-  fake_async:
-    dependency: transitive
-    description:
-      name: fake_async
-      sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78"
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "1.3.1"
   ffi:
     dependency: transitive
     description:
@@ -290,10 +282,10 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      sha256: e2a421b7e59244faef694ba7b30562e489c2b489866e505074eb005cd7060db7
+      sha256: "3f41d009ba7172d5ff9be5f6e6e6abb4300e263aab8866d2a0842ed2a70f8f0c"
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "3.0.1"
+    version: "4.0.0"
   flutter_localizations:
     dependency: "direct main"
     description: flutter
@@ -307,11 +299,6 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.5.1"
-  flutter_test:
-    dependency: "direct dev"
-    description: flutter
-    source: sdk
-    version: "0.0.0"
   flutter_web_plugins:
     dependency: transitive
     description: flutter
@@ -345,18 +332,18 @@ packages:
     dependency: "direct main"
     description:
       name: go_router
-      sha256: "7ecb2f391edbca5473db591b48555a8912dde60edd0fb3013bd6743033b2d3f8"
+      sha256: "6ad5662b014c06c20fa46ab78715c96b2222a7fe4f87bf77e0289592c2539e86"
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "13.2.1"
+    version: "14.1.3"
   go_router_builder:
     dependency: "direct dev"
     description:
       name: go_router_builder
-      sha256: f84449079eb1f09f59344fbbb8cdc6a6349d8973a83746a57953bd4130d852b6
+      sha256: "51eca134e77d84c78a5297242ed45dc6988c66531a97cb4bf49d149e8f60d809"
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "2.4.1"
+    version: "2.7.0"
   graphs:
     dependency: transitive
     description:
@@ -437,38 +424,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "3.0.2"
-  leak_tracker:
-    dependency: transitive
-    description:
-      name: leak_tracker
-      sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "10.0.4"
-  leak_tracker_flutter_testing:
-    dependency: transitive
-    description:
-      name: leak_tracker_flutter_testing
-      sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "3.0.3"
-  leak_tracker_testing:
-    dependency: transitive
-    description:
-      name: leak_tracker_testing
-      sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "3.0.1"
   lints:
     dependency: transitive
     description:
       name: lints
-      sha256: cbf8d4b858bb0134ef3ef87841abdf8d63bfc255c266b7bf6b39daa1085c4290
+      sha256: "976c774dd944a42e83e2467f4cc670daef7eed6295b10b36ae8c85bcbf828235"
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "3.0.0"
+    version: "4.0.0"
   logging:
     dependency: transitive
     description:
@@ -641,10 +604,10 @@ packages:
     dependency: "direct main"
     description:
       name: shared_preferences
-      sha256: "81429e4481e1ccfb51ede496e916348668fd0921627779233bd24cc3ff6abd02"
+      sha256: d3bbe5553a986e83980916ded2f0b435ef2e1893dfaa29d5a7a790d0eca12180
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "2.2.2"
+    version: "2.2.3"
   shared_preferences_android:
     dependency: transitive
     description:
@@ -839,10 +802,10 @@ packages:
     dependency: "direct main"
     description:
       name: url_launcher
-      sha256: "0ecc004c62fd3ed36a2ffcbe0dd9700aee63bd7532d0b642a488b1ec310f492e"
+      sha256: "6ce1e04375be4eed30548f10a315826fd933c1e493206eab82eed01f438c8d2e"
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "6.2.5"
+    version: "6.2.6"
   url_launcher_android:
     dependency: transitive
     description:
@@ -988,5 +951,5 @@ packages:
     source: hosted
     version: "2.2.0"
 sdks:
-  dart: ">=3.4.0-282.1.beta <4.0.0"
+  dart: ">=3.4.0 <4.0.0"
   flutter: ">=3.22.0-0.1.pre"
diff --git a/pubspec.yaml b/pubspec.yaml
index 4dfdfe7..35fe45d 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 1.2.0+17
+version: 1.2.1+18
 
 environment:
   sdk: '>=3.3.0 <4.0.0'
@@ -35,7 +35,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.6
-  go_router: ^13.2.1
+  go_router: ^14.1.3
   flutter_riverpod: ^2.5.1
   riverpod_annotation: ^2.3.5
   devtools_app_shared: ^0.1.1
@@ -46,22 +46,20 @@ dependencies:
       ref: develop
   code_builder: ^4.10.0
   dart_style: ^2.3.6
-  url_launcher: ^6.2.5
-  shared_preferences: ^2.2.2
+  url_launcher: ^6.2.6
+  shared_preferences: ^2.2.3
   flutter_localizations:
     sdk: flutter
   intl: ^0.19.0
   adaptive_breakpoints: ^0.1.7
   collection: ^1.18.0
   recase: ^4.1.0
-  web: ^0.4.2
+  web: ^0.4.1
 
 dev_dependencies:
-  flutter_test:
-    sdk: flutter
-  flutter_lints: ^3.0.1
-  go_router_builder: ^2.4.1
-  build_runner: ^2.4.8
+  flutter_lints: ^4.0.0
+  go_router_builder: ^2.7.0
+  build_runner: ^2.4.10
   riverpod_generator: ^2.4.0
   grinder: ^0.9.5
 
diff --git a/web/manifest.json b/web/manifest.json
index 99fda86..ce6a4ed 100644
--- a/web/manifest.json
+++ b/web/manifest.json
@@ -3,10 +3,11 @@
     "short_name": "dreambook",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#0175C2",
-    "theme_color": "#0175C2",
-    "description": "A new Flutter project.",
+    "background_color": "#0e1416",
+    "theme_color": "#0e1416",
+    "description": "A flutter guide book",
     "orientation": "portrait-primary",
+    "categories": ["flutter", "guidebook", "wasm"],
     "prefer_related_applications": false,
     "icons": [
         {