diff --git a/lib/app_scaffold.dart b/lib/app_scaffold.dart
new file mode 100644
index 0000000..1de4b3f
--- /dev/null
+++ b/lib/app_scaffold.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:pactus_gui_widgetbook/src/core/theme/app_theme.dart';
+
+/// ## [AppScaffold] Class Documentation
+///
+/// The `AppScaffold` class is a custom widget that serves as a basic
+/// container for wrapping other widgets in a consistent layout structure.
+///
+/// ### Usage:
+///
+/// `AppScaffold` provides a basic structure for
+/// the UI by settingthe background color
+/// of the scaffold and wrapping the child widget passed to it.
+///
+/// ### Properties:
+///
+/// - **[child]** (Widget):
+///   - A required child widget that will be displayed inside the scaffold.
+///   - The `child` widget is passed down as a parameter to the `AppScaffold`
+///   constructor and is rendered within the container.
+///
+/// ### Methods:
+///
+/// - **[build(BuildContext context)]**:
+///   - Builds the widget tree by applying the scaffold background color
+///   and placing the `child` widget inside the container.
+///
+
+class AppScaffold extends StatelessWidget {
+  const AppScaffold({
+    super.key,
+    required this.child,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: AppTheme.of(context).scaffoldBackgroundColor,
+      child: child,
+    );
+  }
+}
diff --git a/lib/main.dart b/lib/main.dart
index 8e94089..8115f4a 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,125 +1,99 @@
 import 'package:flutter/material.dart';
+import 'package:pactus_gui_widgetbook/app_scaffold.dart';
+import 'package:pactus_gui_widgetbook/src/core/theme/app_theme.dart';
+import 'package:pactus_gui_widgetbook/src/core/theme/app_theme_data.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
-void main() {
-  runApp(const MyApp());
-}
-
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  // This widget is the root of your application.
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        // This is the theme of your application.
-        //
-        // TRY THIS: Try running your application with "flutter run". You'll see
-        // the application has a purple toolbar. Then, without quitting the app,
-        // try changing the seedColor in the colorScheme below to Colors.green
-        // and then invoke "hot reload" (save your changes or press the "hot
-        // reload" button in a Flutter-supported IDE, or press "r" if you used
-        // the command line to start the app).
-        //
-        // Notice that the counter didn't reset back to zero; the application
-        // state is not lost during the reload. To reset the state, use hot
-        // restart instead.
-        //
-        // This works for code too, not just values: Most code changes can be
-        // tested with just a hot reload.
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
-        useMaterial3: true,
-      ),
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
-    );
-  }
-}
-
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key, required this.title});
+import 'main.directories.g.dart';
 
-  // This widget is the home page of your application. It is stateful, meaning
-  // that it has a State object (defined below) that contains fields that affect
-  // how it looks.
-
-  // This class is the configuration for the state. It holds the values (in this
-  // case the title) provided by the parent (in this case the App widget) and
-  // used by the build method of the State. Fields in a Widget subclass are
-  // always marked "final".
-
-  final String title;
-
-  @override
-  State<MyHomePage> createState() => _MyHomePageState();
+void main() {
+  runApp(const WidgetBookApp());
 }
 
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
+/// ## [WidgetBookApp] Class Documentation
+///
+/// The `WidgetBookApp` class is the main entry point for
+/// the Widgetbook application.
+/// It defines the Widgetbook configuration, including the devices,
+/// themes, and addons used for visualizing and testing widgets.
+///
+/// ### Usage:
+///
+/// The `WidgetBookApp` sets up a Widgetbook environment with
+/// predefined themes, devices, and alignment options.
+/// It enables developers to test their widgets in different
+/// contexts and layouts.
+///
+/// ### Addons:
+///
+/// - **[DeviceFrameAddon]**:
+///   - Includes a list of devices for testing widgets.
+///   - **Devices**:
+///     - `Devices.ios.iPhone13`: Simulates an iPhone 13 device.
+///     - `Devices.windows.laptop`: Simulates a standard laptop.
+///     - `Devices.windows.wideMonitor`: Simulates a widescreen monitor.
+///
+/// - **[AlignmentAddon]**:
+///   - Allows testing widget alignment within the parent container.
+///
+/// - **[ThemeAddon]**:
+///   - Provides two themes for testing:
+///     - **Light Theme**: Uses `AppThemeData.lightTheme()` for a
+///     bright interface.
+///     - **Dark Theme**: Uses `AppThemeData.darkTheme()` for a
+///     darker interface.
+///   - Includes a custom theme builder that wraps widgets with
+///   `AppTheme` and `AppScaffold`.
+///
+/// ### Properties:
+///
+/// - **[directories]**:
+///   - Dynamically generated list of widget directories.
+///   - Facilitates organizing and testing widgets within Widgetbook.
+///
 
-  void _incrementCounter() {
-    setState(() {
-      // This call to setState tells the Flutter framework that something has
-      // changed in this State, which causes it to rerun the build method below
-      // so that the display can reflect the updated values. If we changed
-      // _counter without calling setState(), then the build method would not be
-      // called again, and so nothing would appear to happen.
-      _counter++;
-    });
-  }
+@widgetbook.App()
+class WidgetBookApp extends StatelessWidget {
+  const WidgetBookApp({super.key});
 
   @override
   Widget build(BuildContext context) {
-    // This method is rerun every time setState is called, for instance as done
-    // by the _incrementCounter method above.
-    //
-    // The Flutter framework has been optimized to make rerunning build methods
-    // fast, so that you can just rebuild anything that needs updating rather
-    // than having to individually change instances of widgets.
-    return Scaffold(
-      appBar: AppBar(
-        // TRY THIS: Try changing the color here to a specific color (to
-        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
-        // change color while the other colors stay the same.
-        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        // Here we take the value from the MyHomePage object that was created by
-        // the App.build method, and use it to set our appbar title.
-        title: Text(widget.title),
-      ),
-      body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
-        child: Column(
-          // Column is also a layout widget. It takes a list of children and
-          // arranges them vertically. By default, it sizes itself to fit its
-          // children horizontally, and tries to be as tall as its parent.
-          //
-          // Column has various properties to control how it sizes itself and
-          // how it positions its children. Here we use mainAxisAlignment to
-          // center the children vertically; the main axis here is the vertical
-          // axis because Columns are vertical (the cross axis would be
-          // horizontal).
-          //
-          // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
-          // action in the IDE, or press "p" in the console), to see the
-          // wireframe for each widget.
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headlineMedium,
+    return Widgetbook(
+      appBuilder: (context, child) {
+        return child;
+      },
+      addons: [
+        DeviceFrameAddon(
+          devices: [
+            Devices.ios.iPhone13,
+            Devices.windows.laptop,
+            Devices.windows.wideMonitor,
+          ],
+        ),
+        AlignmentAddon(),
+        ThemeAddon(
+          themes: [
+            WidgetbookTheme(
+              name: 'Light',
+              data: AppThemeData.lightTheme(),
             ),
+            WidgetbookTheme(
+              name: 'Dark',
+              data: AppThemeData.darkTheme(),
+            )
           ],
+          themeBuilder: (context, data, child) {
+            return AppTheme(
+              themeData: data,
+              child: AppScaffold(child: child),
+            );
+          },
         ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
-      ), // This trailing comma makes auto-formatting nicer for build methods.
+      ],
+      // The [directories] variable does not exist yet,
+      // it will be generated in the next step
+      directories: directories,
     );
   }
 }
diff --git a/lib/main.directories.g.dart b/lib/main.directories.g.dart
new file mode 100644
index 0000000..8960795
--- /dev/null
+++ b/lib/main.directories.g.dart
@@ -0,0 +1,39 @@
+// coverage:ignore-file
+// ignore_for_file: type=lint
+// ignore_for_file: unused_import, prefer_relative_imports, directives_ordering
+
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+// **************************************************************************
+// AppGenerator
+// **************************************************************************
+
+// ignore_for_file: no_leading_underscores_for_library_prefixes
+import 'package:pactus_gui_widgetbook/src/features/widgets/custom_button/custom_button_usecase.dart'
+    as _i2;
+import 'package:widgetbook/widgetbook.dart' as _i1;
+
+final directories = <_i1.WidgetbookNode>[
+  _i1.WidgetbookFolder(
+    name: 'features',
+    children: [
+      _i1.WidgetbookFolder(
+        name: 'widgets',
+        children: [
+          _i1.WidgetbookFolder(
+            name: 'custom_button',
+            children: [
+              _i1.WidgetbookLeafComponent(
+                name: 'CustomButtonWidget',
+                useCase: _i1.WidgetbookUseCase(
+                  name: 'Custom Button with Knobs',
+                  builder: _i2.customButtonWidgetUseCase,
+                ),
+              )
+            ],
+          )
+        ],
+      )
+    ],
+  )
+];
diff --git a/lib/src/core/enum/button_icon_state_enum.dart b/lib/src/core/enum/button_icon_state_enum.dart
new file mode 100644
index 0000000..1e0423c
--- /dev/null
+++ b/lib/src/core/enum/button_icon_state_enum.dart
@@ -0,0 +1,4 @@
+enum ButtonIconState {
+  withIcon,
+  withoutIcon,
+}
diff --git a/lib/src/core/pallets/on_surface_pallet.dart b/lib/src/core/pallets/on_surface_pallet.dart
new file mode 100644
index 0000000..ac7a798
--- /dev/null
+++ b/lib/src/core/pallets/on_surface_pallet.dart
@@ -0,0 +1,166 @@
+import 'package:fluent_ui/fluent_ui.dart';
+
+/// ## [OnSurfacePallet] Class Documentation
+///
+/// The `OnSurfacePallet` class is a `ThemeExtension` that defines a palette of
+/// colors used for surface-related
+/// elements in both light and dark themes. It allows for dynamic theming and
+/// seamless transitions
+/// between themes using `lerp` for interpolation.
+///
+/// ### Usage:
+///
+/// The `OnSurfacePallet` class provides a structured way to define multiple
+/// color shades for on-surface elements,
+/// making it easy to customize and switch between light and dark themes.
+///
+/// ### Properties:
+///
+/// - **[onSurface4]** (Color?):
+///   - Represents the darkest shade of the on-surface palette.
+///   - Typically used for the most prominent text or UI elements.
+///
+/// - **[onSurface3]** (Color?):
+///   - A slightly lighter shade compared to `onSurface4`.
+///   - Suitable for secondary text or less prominent elements.
+///
+/// - **[onSurface2]** (Color?):
+///   - A mid-tone shade for on-surface elements.
+///   - Useful for borders, icons, or supporting text.
+///
+/// - **[onSurface1]** (Color?):
+///   - A lighter shade compared to `onSurface2`.
+///   - Commonly used for subtle UI elements or backgrounds.
+///
+/// - **[onSurface0]** (Color?):
+///   - The lightest shade of the palette.
+///   - Typically used for backgrounds or less emphasized elements.
+///
+/// ### Methods:
+///
+/// - **[copyWith]**:
+///   - Creates a new `OnSurfacePallet` instance with updated properties while
+///   preserving the existing values for non-specified fields.
+///
+/// - **[lerp]**:
+///   - Interpolates between two `OnSurfacePallet` instances.
+///   - Useful for animating theme transitions.
+///
+/// - **[getByIndex(int index)]**:
+///   - Retrieves a color from the palette based on its index.
+///   - Index range: 0 (lightest) to 4 (darkest).
+///   - Throws an exception if an invalid index is provided.
+///
+/// - **[toString]**:
+///   - Returns a string representation of the `OnSurfacePallet`
+///   instance for debugging purposes.
+///
+/// ### Static Properties:
+///
+/// - **[light]**:
+///   - Predefined `OnSurfacePallet` for the light theme.
+///   - Colors are configured based on Figma specifications,
+///   starting from black at 100% to 3% opacity.
+///
+/// - **[dark]**:
+///   - Predefined `OnSurfacePallet` for the dark theme.
+///   - Inverts the shades of the light theme to accommodate dark mode.
+///
+
+class OnSurfacePallet extends ThemeExtension<OnSurfacePallet> {
+  const OnSurfacePallet({
+    required this.onSurface4,
+    required this.onSurface3,
+    required this.onSurface2,
+    required this.onSurface1,
+    required this.onSurface0,
+  });
+
+  final Color? onSurface4;
+  final Color? onSurface3;
+  final Color? onSurface2;
+  final Color? onSurface1;
+  final Color? onSurface0;
+
+  @override
+  OnSurfacePallet copyWith({
+    Color? onSurface4,
+    Color? onSurface3,
+    Color? onSurface2,
+    Color? onSurface1,
+    Color? onSurface0,
+  }) {
+    return OnSurfacePallet(
+      onSurface4: onSurface4 ?? this.onSurface4,
+      onSurface3: onSurface3 ?? this.onSurface3,
+      onSurface2: onSurface2 ?? this.onSurface2,
+      onSurface1: onSurface1 ?? this.onSurface1,
+      onSurface0: onSurface0 ?? this.onSurface0,
+    );
+  }
+
+  // Controls how the properties change on theme changes
+  @override
+  OnSurfacePallet lerp(ThemeExtension<OnSurfacePallet>? other, double t) {
+    if (other is! OnSurfacePallet) {
+      return this;
+    }
+    return OnSurfacePallet(
+      onSurface4: Color.lerp(onSurface4, other.onSurface4, t),
+      onSurface3: Color.lerp(onSurface3, other.onSurface3, t),
+      onSurface2: Color.lerp(onSurface2, other.onSurface2, t),
+      onSurface1: Color.lerp(onSurface1, other.onSurface1, t),
+      onSurface0: Color.lerp(onSurface0, other.onSurface0, t),
+    );
+  }
+
+  // Controls how it displays when the instance is being passed
+  // to the `print()` method.
+  @override
+  String toString() => 'OnSurfacePallet('
+      'onSurface4: $onSurface4, '
+      'onSurface3: $onSurface3, '
+      'onSurface2: $onSurface2, '
+      'onSurface1: $onSurface1, '
+      'onSurface0: $onSurface0, '
+      ')';
+
+  Color? getByIndex(int index) {
+    switch (index) {
+      case 4:
+        return onSurface4;
+      case 3:
+        return onSurface3;
+      case 2:
+        return onSurface2;
+      case 1:
+        return onSurface1;
+      case 0:
+        return onSurface0;
+      default:
+        throw Exception('Invalid OnSurfacePallet color index');
+    }
+  }
+
+  // the light theme
+  static const light = OnSurfacePallet(
+    onSurface4: Color(0xff222222),
+    //FIGMA: Black 100
+    onSurface3: Color(0xff7A7A7A),
+    //FIGMA: Black 60
+    onSurface2: Color(0xffBDBDBD),
+    //FIGMA: Black 30
+    onSurface1: Color(0xffE9E9E9),
+    //FIGMA: Black 10
+    onSurface0: Color(0xffF8F8F8), //FIGMA: Black 03
+  );
+
+  // the dark theme
+  static const dark = OnSurfacePallet(
+    onSurface4: Color(0xffF8F8F8),
+    onSurface3: Color(0xffE9E9E9),
+    onSurface2: Color(0xffBDBDBD),
+    onSurface1: Color(0xff7A7A7A),
+    onSurface0: Color(0xff222222),
+  );
+}
diff --git a/lib/src/core/pallets/surface_pallet.dart b/lib/src/core/pallets/surface_pallet.dart
new file mode 100644
index 0000000..eb9d7a6
--- /dev/null
+++ b/lib/src/core/pallets/surface_pallet.dart
@@ -0,0 +1,130 @@
+import 'package:fluent_ui/fluent_ui.dart';
+
+/// ## [SurfacePallet] Class Documentation
+///
+/// The `SurfacePallet` class is a `ThemeExtension` that defines a palette of
+/// colors used for surface-related
+/// elements in both light and dark themes. It allows for dynamic theming and
+/// seamless transitions
+/// between themes using `lerp` for interpolation.
+///
+/// ### Usage:
+///
+/// The `SurfacePallet` class provides a structured way to define multiple
+/// color shades for surfaces,
+/// making it easy to customize and switch between light and dark themes.
+///
+/// ### Properties:
+///
+/// - **[surface3]** (Color?):
+///   - Represents the brightest or most prominent surface color.
+///   - Typically used for primary backgrounds or containers.
+///
+/// - **[surface2]** (Color?):
+///   - A slightly dimmer surface color compared to `surface3`.
+///   - Suitable for secondary containers or less prominent surfaces.
+///
+/// - **[surface1]** (Color?):
+///   - The dimmest surface color in the palette.
+///   - Commonly used for overlays or subtle background accents.
+///
+/// ### Methods:
+///
+/// - **[copyWith]**:
+///   - Creates a new `SurfacePallet` instance with updated properties
+///   while preserving the existing values for non-specified fields.
+///
+/// - **[lerp]**:
+///   - Interpolates between two `SurfacePallet` instances.
+///   - Useful for animating theme transitions.
+///
+/// - **[getByIndex(int index)]**:
+///   - Retrieves a color from the palette based on its index.
+///   - Index range: 1 (dimmest) to 3 (brightest).
+///   - Throws an exception if an invalid index is provided.
+///
+/// - **[toString]**:
+///   - Returns a string representation of the `SurfacePallet` instance for
+///   debugging purposes.
+///
+/// ### Static Properties:
+///
+/// - **[light]**:
+///   - Predefined `SurfacePallet` for the light theme.
+///   - Colors are configured based on Figma specifications, starting from
+///   fully opaque white to 30% opacity.
+///
+/// - **[dark]**:
+///   - Predefined `SurfacePallet` for the dark theme.
+///   - Inverts the shades of the light theme to accommodate dark mode.
+///
+
+class SurfacePallet extends ThemeExtension<SurfacePallet> {
+  const SurfacePallet({
+    required this.surface3,
+    required this.surface2,
+    required this.surface1,
+  });
+
+  final Color? surface3;
+  final Color? surface2;
+  final Color? surface1;
+
+  @override
+  SurfacePallet copyWith({Color? surface3, Color? surface2, Color? surface1}) {
+    return SurfacePallet(
+      surface3: surface3 ?? this.surface3,
+      surface2: surface2 ?? this.surface2,
+      surface1: surface1 ?? this.surface1,
+    );
+  }
+
+  // Controls how the properties change on theme changes
+  @override
+  SurfacePallet lerp(ThemeExtension<SurfacePallet>? other, double t) {
+    if (other is! SurfacePallet) {
+      return this;
+    }
+    return SurfacePallet(
+      surface3: Color.lerp(surface3, other.surface3, t),
+      surface2: Color.lerp(surface2, other.surface2, t),
+      surface1: Color.lerp(surface1, other.surface1, t),
+    );
+  }
+
+  // Controls how it displays when the instance is being passed
+  // to the `print()` method.
+  @override
+  String toString() => 'SurfacePallet('
+      'surface3: $surface3, '
+      'surface2: $surface2, '
+      'surface1: $surface1, '
+      ')';
+
+  Color? getByIndex(int index) {
+    switch (index) {
+      case 3:
+        return surface3;
+      case 2:
+        return surface2;
+      case 1:
+        return surface1;
+      default:
+        throw Exception('Invalid SurfacePallet color index');
+    }
+  }
+
+  // the light theme
+  static const light = SurfacePallet(
+    surface3: Color(0xffffffff), // FIGMA: White 100
+    surface2: Color.fromRGBO(255, 255, 255, 0.7), // FIGMA: White 70
+    surface1: Color.fromRGBO(255, 255, 255, 0.3), // FIGMA: White 30
+  );
+
+  // the dark theme
+  static const dark = SurfacePallet(
+    surface3: Color(0xff222222),
+    surface2: Color.fromRGBO(35, 35, 35, 0.7),
+    surface1: Color.fromRGBO(35, 35, 35, 0.3),
+  );
+}
diff --git a/lib/src/core/text_styles/inter_text_styles.dart b/lib/src/core/text_styles/inter_text_styles.dart
new file mode 100644
index 0000000..18ccd79
--- /dev/null
+++ b/lib/src/core/text_styles/inter_text_styles.dart
@@ -0,0 +1,439 @@
+import 'package:flutter/material.dart' show FontWeight, TextStyle;
+
+/// ## [InterTextStyles] Class Documentation
+///
+/// The `InterTextStyles` class provides a set of predefined text styles
+/// designed for use throughout the application.
+/// These styles are based on the Inter font family, with multiple weight
+/// variants to ensure consistent typography.
+///
+/// ### Overview:
+/// - Font families: Inter-Thin, Inter-ExtraLight, Inter-Light, Inter-Regular,
+/// Inter-Medium, Inter-SemiBold, Inter-Bold, Inter-ExtraBold.
+/// - Each style specifies font size, weight, and line height for consistent
+/// vertical spacing.
+///
+/// ### Text Styles:
+///
+/// - **Caption:**
+///   - Font: Inter-Light (300 weight)
+///   - Size: 10px
+///   - Line Height: 1.6 (16px/10px)
+///   - Usage: Small descriptive text or captions.
+///
+/// - **Body:**
+///   - Font: Inter-Regular (400 weight)
+///   - Size: 14px
+///   - Line Height: 1.43 (20px/14px)
+///   - Usage: Default body text for content.
+///
+/// - **Subtitle:**
+///   - Font: Inter-Medium (500 weight)
+///   - Size: 16px
+///   - Line Height: 1.5 (24px/16px)
+///   - Usage: Subheadings or emphasized text.
+///
+/// - **Title:**
+///   - Font: Inter-SemiBold (600 weight)
+///   - Size: 20px
+///   - Line Height: 1.4 (28px/20px)
+///   - Usage: Section titles or prominent labels.
+///
+/// - **Title Large:**
+///   - Font: Inter-SemiBold (600 weight)
+///   - Size: 24px
+///   - Line Height: 1.33 (32px/24px)
+///   - Usage: Larger section headings or important text.
+///
+/// - **Display:**
+///   - Font: Inter-SemiBold (600 weight)
+///   - Size: 30px
+///   - Line Height: 1.47 (44px/30px)
+///   - Usage: Highlighted or primary display text.
+///
+/// - **Body Large:**
+///   - Font: Inter-Bold (700 weight)
+///   - Size: 36px
+///   - Line Height: 1.33 (48px/36px)
+///   - Usage: Prominent content or primary display.
+///
+/// - **Body Strong:**
+///   - Font: Inter-Bold (700 weight)
+///   - Size: 14px
+///   - Line Height: 1.43 (20px/14px)
+///   - Usage: Strong emphasis on body text.
+///
+/// ### Properties:
+/// - Text styles include specific font families, sizes, weights, and line
+/// heights.
+/// - The `height` property ensures consistent vertical spacing relative to
+/// font size.
+///
+/// ### Example Usage:
+///
+/// ```dart
+/// Text(
+///   'This is a caption',
+///   style: InterTextStyles.caption, // Apply the caption style
+/// );
+/// ```
+///
+/// ### Notes:
+/// - The `InterTextStyles` class is a centralized resource for typography,
+/// ensuring design consistency.
+/// - The font family "Inter" must be included in the project for these styles
+/// to render correctly.
+
+class InterTextStyles {
+  InterTextStyles._();
+
+  // Font family constants based on the specified weights
+  static const interThin = 'Inter-Thin';
+  static const interExtraLight = 'Inter-ExtraLight';
+  static const interLight = 'Inter-Light';
+  static const interRegular = 'Inter-Regular';
+  static const interMedium = 'Inter-Medium';
+  static const interSemiBold = 'Inter-SemiBold';
+  static const interBold = 'Inter-Bold';
+  static const interExtraBold = 'Inter-ExtraBold';
+
+// Caption/light
+  static const TextStyle caption = TextStyle(
+    fontFamily: interLight, // font-family: InterLight;
+    fontSize: 10, // font-size: 10px;
+    fontWeight: FontWeight.w300, // font-weight: 300 (Light);
+    height: 1.6, // line-height: 16px (16px line-height / 10px font-size = 1.6);
+  );
+
+// Body/regular
+  static const TextStyle body = TextStyle(
+    fontFamily: interRegular, // font-family: InterRegular;
+    fontSize: 14, // font-size: 14px;
+    fontWeight: FontWeight.w400, // font-weight: 400 (Regular);
+    height: 1.43, // line-height: 20px (20px line-height / 14px font-size =
+    // 1.43);
+  );
+
+// Subtitle/medium
+  static const TextStyle subtitle = TextStyle(
+    fontFamily: interMedium, // font-family: InterMedium;
+    fontSize: 16, // font-size: 16px;
+    fontWeight: FontWeight.w500, // font-weight: 500 (Medium);
+    height: 1.5, // line-height: 24px (24px line-height / 16px font-size = 1.5);
+  );
+
+// Title/semi-bold
+  static const TextStyle title = TextStyle(
+    fontFamily: interSemiBold, // font-family: InterSemiBold;
+    fontSize: 20, // font-size: 20px;
+    fontWeight: FontWeight.w600, // font-weight: 600 (SemiBold);
+    height: 1.4, // line-height: 28px (28px line-height /
+    // 20px font-size = 1.4);
+  );
+
+// TitleLarge/semi-bold
+  static const TextStyle titleLarge = TextStyle(
+    fontFamily: interSemiBold, // font-family: InterSemiBold;
+    fontSize: 24, // font-size: 24px;
+    fontWeight: FontWeight.w600, // font-weight: 600 (SemiBold);
+    height:
+        1.33, // line-height: 32px (32px line-height / 24px font-size = 1.33);
+  );
+
+// Display/semi-bold
+  static const TextStyle display = TextStyle(
+    fontFamily: interSemiBold, // font-family: InterSemiBold;
+    fontSize: 30, // font-size: 30px;
+    fontWeight: FontWeight.w600, // font-weight: 600 (SemiBold);
+    height:
+        1.47, // line-height: 44px (44px line-height / 30px font-size = 1.47);
+  );
+
+// BodyLarge/bold
+  static const TextStyle bodyLarge = TextStyle(
+    fontFamily: interBold, // font-family: InterBold;
+    fontSize: 36, // font-size: 36px;
+    fontWeight: FontWeight.w700, // font-weight: 700 (Bold);
+    height:
+        1.33, // line-height: 48px (48px line-height / 36px font-size = 1.33);
+  );
+
+// BodyStrong/bold
+  static const TextStyle bodyStrong = TextStyle(
+    fontFamily: interBold, // font-family: InterBold;
+    fontSize: 14, // font-size: 14px;
+    fontWeight: FontWeight.w700, // font-weight: 700 (Bold);
+    height:
+        1.43, // line-height: 20px (20px line-height / 14px font-size = 1.43);
+  );
+}
+
+/// -----------------------------------------
+/// Text Style Documentation
+/// -----------------------------------------
+///
+/// Style #1:
+/// - Weight: 200
+/// - Size: 4px
+/// - Line-Height: 10px (2.5)
+/// - Name: extraLight4
+/// - Category: Caption (Small Text)
+///
+/// Style #2:
+/// - Weight: 200
+/// - Size: 6px
+/// - Line-Height: 16px (2.67)
+/// - Name: extraLight6
+/// - Category: Caption (Small Text)
+///
+/// Style #3:
+/// - Weight: 200
+/// - Size: 14px
+/// - Line-Height: 28px (2)
+/// - Name: extraLight14
+/// - Category: Body (Default)
+///
+/// Style #4:
+/// - Weight: 200
+/// - Size: 15px
+/// - Line-Height: 24px (1.6)
+/// - Name: extraLight15
+/// - Category: Body (Default)
+///
+/// Style #5:
+/// - Weight: 200
+/// - Size: 30px
+/// - Line-Height: 44px (1.47)
+/// - Name: extraLight30
+/// - Category: Title (Large)
+///
+/// Style #6:
+/// - Weight: 300
+/// - Size: 9px
+/// - Line-Height: 15px (1.67)
+/// - Name: light9
+/// - Category: Caption (Small Text)
+///
+/// Style #7:
+/// - Weight: 300
+/// - Size: 10px
+/// - Line-Height: 20px (2)
+/// - Name: light10
+/// - Category: Overline (Small All Caps)
+///
+/// Style #8:
+/// - Weight: 300
+/// - Size: 14px
+/// - Line-Height: 20px (1.43)
+/// - Name: light14
+/// - Category: Body (Default)
+///
+/// Style #9:
+/// - Weight: 300
+/// - Size: 15px
+/// - Line-Height: 24px (1.6)
+/// - Name: light15
+/// - Category: Body (Default)
+///
+/// Style #10:
+/// - Weight: 300
+/// - Size: 18px
+/// - Line-Height: 24px (1.33)
+/// - Name: light18
+/// - Category: Subheading
+///
+/// Style #11:
+/// - Weight: 400
+/// - Size: 8px
+/// - Line-Height: 20px (2.5)
+/// - Name: regular8
+/// - Category: Caption (Small Text)
+///
+/// Style #12:
+/// - Weight: 400
+/// - Size: 10px
+/// - Line-Height: 20px (2)
+/// - Name: regular10H2
+/// - Category: Overline (Small All Caps)
+///
+/// Style #13:
+/// - Weight: 400
+/// - Size: 10px
+/// - Line-Height: 16px (1.6)
+/// - Name: regular10H1
+/// - Category: Body (Default)
+///
+/// Style #14:
+/// - Weight: 400
+/// - Size: 11px
+/// - Line-Height: 18px (1.64)
+/// - Name: regular11H1
+/// - Category: Subheading
+///
+/// Style #15:
+/// - Weight: 400
+/// - Size: 11px
+/// - Line-Height: 20px (1.82)
+/// - Name: regular11H2
+/// - Category: Subheading
+///
+/// Style #16:
+/// - Weight: 400
+/// - Size: 12px
+/// - Line-Height: 20px (1.67)
+/// - Name: regular12H2
+/// - Category: Subheading
+///
+/// Style #17:
+/// - Weight: 400
+/// - Size: 12px
+/// - Line-Height: 16px (1.33)
+/// - Name: regular12H1
+/// - Category: Body (Default)
+///
+/// Style #18:
+/// - Weight: 400
+/// - Size: 13px
+/// - Line-Height: 25px (1.92)
+/// - Name: regular13H3
+/// - Category: Subheading
+///
+/// Style #19:
+/// - Weight: 400
+/// - Size: 14px
+/// - Line-Height: 20px (1.43)
+/// - Name: regular14H1
+/// - Category: Body (Default)
+///
+/// Style #20:
+/// - Weight: 400
+/// - Size: 14px
+/// - Line-Height: 28px (2)
+/// - Name: regular14H2
+/// - Category: Body (Default)
+///
+/// Style #21:
+/// - Weight: 500
+/// - Size: 11px
+/// - Line-Height: 20px (1.82)
+/// - Name: medium11
+/// - Category: Subheading
+///
+/// Style #22:
+/// - Weight: 500
+/// - Size: 12px
+/// - Line-Height: 20px (1.67)
+/// - Name: medium12H2
+/// - Category: Subheading
+///
+/// Style #23:
+/// - Weight: 500
+/// - Size: 12px
+/// - Line-Height: 17px (1.42)
+/// - Name: medium12H1
+/// - Category: Body (Default)
+///
+/// Style #24:
+/// - Weight: 500
+/// - Size: 13px
+/// - Line-Height: 16px (1.23)
+/// - Name: medium13
+/// - Category: Subheading
+///
+/// Style #25:
+/// - Weight: 500
+/// - Size: 14px
+/// - Line-Height: 20px (1.43)
+/// - Name: medium14
+/// - Category: Body (Default)
+///
+/// Style #26:
+/// - Weight: 600
+/// - Size: 7px
+/// - Line-Height: 20px (2.86)
+/// - Name: semiBold7
+/// - Category: Caption (Small Text)
+///
+/// Style #27:
+/// - Weight: 600
+/// - Size: 10px
+/// - Line-Height: 20px (2)
+/// - Name: semiBold10
+/// - Category: Overline (Small All Caps)
+///
+/// Style #28:
+/// - Weight: 600
+/// - Size: 14px
+/// - Line-Height: 16px (1.14)
+/// - Name: semiBold14H1
+/// - Category: Body (Default)
+///
+/// Style #29:
+/// - Weight: 600
+/// - Size: 14px
+/// - Line-Height: 24px (1.71)
+/// - Name: semiBold14H2
+/// - Category: Subheading
+///
+/// Style #30:
+/// - Weight: 600
+/// - Size: 14px
+/// - Line-Height: 28px (2)
+/// - Name: semiBold14H2
+/// - Category: Subheading
+///
+/// Style #31:
+/// - Weight: 600
+/// - Size: 14px
+/// - Line-Height: 20px (1.43)
+/// - Name: semiBold14H1
+/// - Category: Body (Default)
+///
+/// Style #32:
+/// - Weight: 600
+/// - Size: 16px
+/// - Line-Height: 24px (1.5)
+/// - Name: semiBold16
+/// - Category: Subheading
+///
+/// Style #33:
+/// - Weight: 600
+/// - Size: 24px
+/// - Line-Height: 32px (1.33)
+/// - Name: semiBold24
+/// - Category: Heading (Medium)
+///
+/// Style #34:
+/// - Weight: 700
+/// - Size: 9px
+/// - Line-Height: 20px (2.22)
+/// - Name: bold9
+/// - Category: Caption (Small Text)
+///
+/// Style #35:
+/// - Weight: 700
+/// - Size: 10px
+/// - Line-Height: 20px (2)
+/// - Name: bold10
+/// - Category: Overline (Small All Caps)
+///
+/// Style #36:
+/// - Weight: 700
+/// - Size: 12px
+/// - Line-Height: 20px (1.67)
+/// - Name: bold12
+/// - Category: Subheading
+///
+/// Style #37:
+/// - Weight: 700
+/// - Size: 13px
+/// - Line-Height: 16px (1.23)
+/// - Name: bold13
+/// - Category: Subheading
+///
+/// Style #38:
+/// - Weight: 700
+/// - Size: 14px
+/// - Line-Height: 28px (2)
+/// - Name: bold14
+/// - Category: Body (Default)
diff --git a/lib/src/core/theme/app_theme.dart b/lib/src/core/theme/app_theme.dart
new file mode 100644
index 0000000..28c6b2a
--- /dev/null
+++ b/lib/src/core/theme/app_theme.dart
@@ -0,0 +1,41 @@
+import 'package:fluent_ui/fluent_ui.dart';
+
+/// ## [AppTheme] Class Documentation
+///
+/// The `AppTheme` class is an `InheritedWidget` used to manage and provide a consistent theme
+/// throughout the application. It leverages the `FluentThemeData` for styling and is designed
+/// to make theme changes accessible across the widget tree.
+///
+/// ### Usage:
+///
+/// The `AppTheme` wraps the application's widget tree and provides access to the theme via
+/// the static `of` method. Widgets can use this method to retrieve the current theme configuration.
+///
+/// ### Properties:
+///
+/// - **[themeData]**:
+///   - Type: `FluentThemeData`
+///   - The theme data applied across the app.
+///   - Passed as a required parameter to the constructor.
+///
+
+class AppTheme extends InheritedWidget {
+  final FluentThemeData themeData;
+
+  const AppTheme({
+    required this.themeData,
+    required super.child,
+    super.key,
+  });
+
+  static FluentThemeData of(BuildContext context) {
+    final scope =
+        context.dependOnInheritedWidgetOfExactType<AppTheme>()!.themeData;
+    return scope;
+  }
+
+  @override
+  bool updateShouldNotify(AppTheme oldWidget) {
+    return themeData != oldWidget.themeData;
+  }
+}
diff --git a/lib/src/core/theme/app_theme_data.dart b/lib/src/core/theme/app_theme_data.dart
new file mode 100644
index 0000000..4caa939
--- /dev/null
+++ b/lib/src/core/theme/app_theme_data.dart
@@ -0,0 +1,80 @@
+import 'package:fluent_ui/fluent_ui.dart';
+import 'package:pactus_gui_widgetbook/src/core/pallets/on_surface_pallet.dart';
+import 'package:pactus_gui_widgetbook/src/core/pallets/surface_pallet.dart';
+import 'package:pactus_gui_widgetbook/src/core/text_styles/inter_text_styles.dart';
+
+/// ## [AppThemeData] Class Documentation
+///
+/// The `AppThemeData` class provides a centralized definition of
+/// the application's themes and typography.
+/// It is designed to support both light and dark modes and uses
+/// `FluentThemeData` for configuration.
+///
+/// ### Usage:
+///
+/// This class offers methods and properties to retrieve predefined
+/// themes and typography for the application.
+/// It also supports custom theme extensions through the use of
+/// `ThemeExtension`.
+///
+/// ### Properties:
+///
+/// - **[lightExtensions]**:
+///   - A collection of `ThemeExtension` objects for the light theme.
+///   - Includes `SurfacePallet.light` and `OnSurfacePallet.light`.
+///
+/// - **[darkExtensions]**:
+///   - A collection of `ThemeExtension` objects for the dark theme.
+///   - Includes `SurfacePallet.dark` and `OnSurfacePallet.dark`.
+///
+/// - **[typography]**:
+///   - An instance of `Typography` defining text styles for various use cases.
+///   - Includes properties like `subtitle`, `title`, `bodyStrong`,
+///   `caption`, `body`, and more.
+///   - Uses `InterTextStyles` for text style definitions.
+///
+/// ### Methods:
+///
+/// - **[lightTheme()]**:
+///   - Returns a `FluentThemeData` instance configured for light mode.
+///   - Includes light extensions and typography.
+///
+/// - **[darkTheme()]**:
+///   - Returns a `FluentThemeData` instance configured for dark mode.
+///   - Includes dark extensions and typography.
+///
+
+class AppThemeData {
+  static const Iterable<ThemeExtension<dynamic>> lightExtensions = [
+    SurfacePallet.light,
+    OnSurfacePallet.light,
+  ];
+
+  static const Iterable<ThemeExtension<dynamic>> darkExtensions = [
+    SurfacePallet.dark,
+    OnSurfacePallet.dark,
+  ];
+
+  static FluentThemeData lightTheme() => FluentThemeData(
+        brightness: Brightness.light,
+        typography: typography,
+        extensions: lightExtensions,
+      );
+
+  static FluentThemeData darkTheme() => FluentThemeData(
+        brightness: Brightness.dark,
+        typography: typography,
+        extensions: darkExtensions,
+      );
+
+  static Typography typography = const Typography.raw(
+    subtitle: InterTextStyles.subtitle,
+    title: InterTextStyles.title,
+    bodyStrong: InterTextStyles.bodyStrong,
+    caption: InterTextStyles.caption,
+    body: InterTextStyles.body,
+    bodyLarge: InterTextStyles.bodyLarge,
+    display: InterTextStyles.display,
+    titleLarge: InterTextStyles.titleLarge,
+  );
+}
diff --git a/lib/src/features/widgets/custom_button/custom_button_usecase.dart b/lib/src/features/widgets/custom_button/custom_button_usecase.dart
new file mode 100644
index 0000000..a8786de
--- /dev/null
+++ b/lib/src/features/widgets/custom_button/custom_button_usecase.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:pactus_gui_widgetbook/src/core/enum/button_icon_state_enum.dart';
+import 'package:pactus_gui_widgetbook/src/features/widgets/custom_button/custom_button_widget.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart';
+
+@UseCase(name: 'Custom Button with Knobs', type: CustomButtonWidget)
+Widget customButtonWidgetUseCase(BuildContext context) {
+  // Knob for button size
+  final size = context.knobs.double.slider(
+    label: 'Button Size',
+    initialValue: 48.0,
+    min: 24.0,
+    max: 100.0,
+    description: 'Set the size of the button.',
+  );
+
+  // Knob for button color
+  final color = context.knobs.color(
+    label: 'Button Color',
+    initialValue: Colors.blue,
+    description: 'Set the color of the button.',
+  );
+
+  // Knob for button icon state
+  final iconStateString = context.knobs.string(
+    label: 'Icon State',
+    initialValue: 'withIcon',
+    description:
+        'Choose whether the button has an icon or not. Use "withIcon" or "withoutIcon".',
+  );
+
+  // Map string to ButtonIconState enum
+  final iconState = iconStateString == 'withIcon'
+      ? ButtonIconState.withIcon
+      : ButtonIconState.withoutIcon;
+
+  return CustomButtonWidget(
+    size: size,
+    color: color,
+    iconState: iconState,
+  );
+}
diff --git a/lib/src/features/widgets/custom_button/custom_button_widget.dart b/lib/src/features/widgets/custom_button/custom_button_widget.dart
new file mode 100644
index 0000000..b97e4ba
--- /dev/null
+++ b/lib/src/features/widgets/custom_button/custom_button_widget.dart
@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:pactus_gui_widgetbook/src/core/enum/button_icon_state_enum.dart';
+
+class CustomButtonWidget extends StatelessWidget {
+  final double size;
+  final Color color;
+  final ButtonIconState iconState;
+
+  const CustomButtonWidget({
+    super.key,
+    this.size = 48.0,
+    this.color = Colors.blue,
+    this.iconState = ButtonIconState.withIcon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          ElevatedButton(
+            style: ElevatedButton.styleFrom(
+              backgroundColor: color,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(12),
+              ),
+            ),
+            onPressed: () {
+              // Action on button press
+              ScaffoldMessenger.of(context).showSnackBar(
+                const SnackBar(content: Text('Button Pressed!')),
+              );
+            },
+            child: iconState == ButtonIconState.withIcon
+                ? Icon(
+                    Icons.check,
+                    size: size / 2,
+                    color: Colors.white,
+                  )
+                : null,
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
index 6bf0cbc..f26b21e 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -6,7 +6,7 @@ packages:
     description:
       name: _fe_analyzer_shared
       sha256: f256b0c0ba6c7577c15e2e4e114755640a875e885099367bf6e012b19314c834
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "72.0.0"
   _macros:
@@ -19,7 +19,7 @@ packages:
     description:
       name: accessibility_tools
       sha256: b49df78d786610d642f16787a84da737bcc4dd18533a9cb41cb35eb5ceee5e4c
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.3.0"
   analyzer:
@@ -27,7 +27,7 @@ packages:
     description:
       name: analyzer
       sha256: b652861553cd3990d8ed361f7979dc6d7053a9ac8843fa73820ab68ce5410139
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "6.7.0"
   args:
@@ -35,7 +35,7 @@ packages:
     description:
       name: args
       sha256: bf9f5caeea8d8fe6721a9c358dd8a5c1947b27f1cfaa18b39c301273594919e6
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.6.0"
   async:
@@ -43,7 +43,7 @@ packages:
     description:
       name: async
       sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.11.0"
   boolean_selector:
@@ -51,7 +51,7 @@ packages:
     description:
       name: boolean_selector
       sha256: "6cfb5af12253eaf2b368f07bacc5a80d1301a071c73360d746b7f2e32d762c66"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.1"
   build:
@@ -59,7 +59,7 @@ packages:
     description:
       name: build
       sha256: "80184af8b6cb3e5c1c4ec6d8544d27711700bc3e6d2efad04238c7b5290889f0"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.1"
   build_config:
@@ -67,7 +67,7 @@ packages:
     description:
       name: build_config
       sha256: bf80fcfb46a29945b423bd9aad884590fb1dc69b330a4d4700cac476af1708d1
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
   build_daemon:
@@ -75,7 +75,7 @@ packages:
     description:
       name: build_daemon
       sha256: "79b2aef6ac2ed00046867ed354c88778c9c0f029df8a20fe10b5436826721ef9"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "4.0.2"
   build_resolvers:
@@ -83,7 +83,7 @@ packages:
     description:
       name: build_resolvers
       sha256: "339086358431fa15d7eca8b6a36e5d783728cf025e559b834f4609a1fcfb7b0a"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.2"
   build_runner:
@@ -91,7 +91,7 @@ packages:
     description:
       name: build_runner
       sha256: "028819cfb90051c6b5440c7e574d1896f8037e3c96cf17aaeb054c9311cfbf4d"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.13"
   build_runner_core:
@@ -99,7 +99,7 @@ packages:
     description:
       name: build_runner_core
       sha256: f8126682b87a7282a339b871298cc12009cb67109cfa1614d6436fb0289193e0
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "7.3.2"
   built_collection:
@@ -107,7 +107,7 @@ packages:
     description:
       name: built_collection
       sha256: "376e3dd27b51ea877c28d525560790aee2e6fbb5f20e2f85d5081027d94e2100"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "5.1.1"
   built_value:
@@ -115,7 +115,7 @@ packages:
     description:
       name: built_value
       sha256: "28a712df2576b63c6c005c465989a348604960c0958d28be5303ba9baa841ac2"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "8.9.3"
   characters:
@@ -123,7 +123,7 @@ packages:
     description:
       name: characters
       sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
   checked_yaml:
@@ -131,7 +131,7 @@ packages:
     description:
       name: checked_yaml
       sha256: feb6bed21949061731a7a75fc5d2aa727cf160b91af9a3e464c5e3a32e28b5ff
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.0.3"
   clock:
@@ -139,7 +139,7 @@ packages:
     description:
       name: clock
       sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
   code_builder:
@@ -147,7 +147,7 @@ packages:
     description:
       name: code_builder
       sha256: "0ec10bf4a89e4c613960bf1e8b42c64127021740fb21640c29c909826a5eea3e"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "4.10.1"
   collection:
@@ -155,7 +155,7 @@ packages:
     description:
       name: collection
       sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.18.0"
   color:
@@ -163,7 +163,7 @@ packages:
     description:
       name: color
       sha256: ddcdf1b3badd7008233f5acffaf20ca9f5dc2cd0172b75f68f24526a5f5725cb
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.0.0"
   convert:
@@ -171,7 +171,7 @@ packages:
     description:
       name: convert
       sha256: b30acd5944035672bc15c6b7a8b47d773e41e2f17de064350988c5d02adb1c68
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.1.2"
   crypto:
@@ -179,7 +179,7 @@ packages:
     description:
       name: crypto
       sha256: "1e445881f28f22d6140f181e07737b22f1e099a5e1ff94b0af2f9e4a463f4855"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.0.6"
   cupertino_icons:
@@ -187,7 +187,7 @@ packages:
     description:
       name: cupertino_icons
       sha256: ba631d1c7f7bef6b729a622b7b752645a2d076dba9976925b8f25725a30e1ee6
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.8"
   dart_style:
@@ -195,7 +195,7 @@ packages:
     description:
       name: dart_style
       sha256: "7856d364b589d1f08986e140938578ed36ed948581fbc3bc9aef1805039ac5ab"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.3.7"
   dartx:
@@ -203,7 +203,7 @@ packages:
     description:
       name: dartx
       sha256: "8b25435617027257d43e6508b5fe061012880ddfdaa75a71d607c3de2a13d244"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.2.0"
   device_frame:
@@ -211,7 +211,7 @@ packages:
     description:
       name: device_frame
       sha256: d031a06f5d6f4750009672db98a5aa1536aa4a231713852469ce394779a23d75
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.2.0"
   easy_localization:
@@ -219,7 +219,7 @@ packages:
     description:
       name: easy_localization
       sha256: fa59bcdbbb911a764aa6acf96bbb6fa7a5cf8234354fc45ec1a43a0349ef0201
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.0.7"
   easy_logger:
@@ -227,7 +227,7 @@ packages:
     description:
       name: easy_logger
       sha256: c764a6e024846f33405a2342caf91c62e357c24b02c04dbc712ef232bf30ffb7
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "0.0.2"
   fake_async:
@@ -235,7 +235,7 @@ packages:
     description:
       name: fake_async
       sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.3.1"
   ffi:
@@ -243,7 +243,7 @@ packages:
     description:
       name: ffi
       sha256: "16ed7b077ef01ad6170a3d0c57caa4a112a38d7a2ed5602e0aca9ca6f3d98da6"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.3"
   file:
@@ -251,7 +251,7 @@ packages:
     description:
       name: file
       sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "7.0.1"
   fixnum:
@@ -259,9 +259,17 @@ packages:
     description:
       name: fixnum
       sha256: b6dc7065e46c974bc7c5f143080a6764ec7a4be6da1285ececdc37be96de53be
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  fluent_ui:
+    dependency: "direct main"
+    description:
+      name: fluent_ui
+      sha256: e7804bf3bbb3ecf9e77d5498181dc36375f5ca736ccfb3862fea17c50050eb89
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.9.2"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -272,7 +280,7 @@ packages:
     description:
       name: flutter_gen_core
       sha256: "46ecf0e317413dd065547887c43f93f55e9653e83eb98dc13dd07d40dd225325"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "5.8.0"
   flutter_gen_runner:
@@ -280,7 +288,7 @@ packages:
     description:
       name: flutter_gen_runner
       sha256: "77f0a02fc30d9fcf2549fe874eb3fde091435724904bcbb1af60aa40cbfab1f4"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "5.8.0"
   flutter_lints:
@@ -288,7 +296,7 @@ packages:
     description:
       name: flutter_lints
       sha256: "3f41d009ba7172d5ff9be5f6e6e6abb4300e263aab8866d2a0842ed2a70f8f0c"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "4.0.0"
   flutter_localizations:
@@ -311,7 +319,7 @@ packages:
     description:
       name: freezed_annotation
       sha256: c2e2d632dd9b8a2b7751117abcfc2b4888ecfe181bd9fca7170d9ef02e595fe2
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.4"
   frontend_server_client:
@@ -319,7 +327,7 @@ packages:
     description:
       name: frontend_server_client
       sha256: f64a0333a82f30b0cca061bc3d143813a486dc086b574bfb233b7c1372427694
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "4.0.0"
   glob:
@@ -327,7 +335,7 @@ packages:
     description:
       name: glob
       sha256: "0e7014b3b7d4dac1ca4d6114f82bf1782ee86745b9b42a92c9289c23d8a0ab63"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
   graphs:
@@ -335,7 +343,7 @@ packages:
     description:
       name: graphs
       sha256: "741bbf84165310a68ff28fe9e727332eef1407342fca52759cb21ad8177bb8d0"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.3.2"
   hashcodes:
@@ -343,7 +351,7 @@ packages:
     description:
       name: hashcodes
       sha256: "80f9410a5b3c8e110c4b7604546034749259f5d6dcca63e0d3c17c9258f1a651"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
   http_multi_server:
@@ -351,7 +359,7 @@ packages:
     description:
       name: http_multi_server
       sha256: aa6199f908078bb1c5efb8d8638d4ae191aac11b311132c3ef48ce352fb52ef8
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.2.2"
   http_parser:
@@ -359,7 +367,7 @@ packages:
     description:
       name: http_parser
       sha256: "2aa08ce0341cc9b354a498388e30986515406668dbcc4f7c950c3e715496693b"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "4.0.2"
   image_size_getter:
@@ -367,7 +375,7 @@ packages:
     description:
       name: image_size_getter
       sha256: "0511799498340b70993d2dfb34b55a2247b5b801d75a6cdd4543acfcafdb12b0"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.2.0"
   inspector:
@@ -375,7 +383,7 @@ packages:
     description:
       name: inspector
       sha256: "40ba0ac1c819c85139bfec9d1e283804581a8985c91f19d00e93212cf29226b1"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.0"
   intl:
@@ -383,7 +391,7 @@ packages:
     description:
       name: intl
       sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "0.19.0"
   io:
@@ -391,7 +399,7 @@ packages:
     description:
       name: io
       sha256: dfd5a80599cf0165756e3181807ed3e77daf6dd4137caaad72d0b7931597650b
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.5"
   js:
@@ -399,7 +407,7 @@ packages:
     description:
       name: js
       sha256: c1b2e9b5ea78c45e1a0788d29606ba27dc5f71f019f32ca5140f61ef071838cf
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "0.7.1"
   json_annotation:
@@ -407,7 +415,7 @@ packages:
     description:
       name: json_annotation
       sha256: "1ce844379ca14835a50d2f019a3099f419082cfdd231cd86a142af94dd5c6bb1"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "4.9.0"
   leak_tracker:
@@ -415,7 +423,7 @@ packages:
     description:
       name: leak_tracker
       sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "10.0.5"
   leak_tracker_flutter_testing:
@@ -423,7 +431,7 @@ packages:
     description:
       name: leak_tracker_flutter_testing
       sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.0.5"
   leak_tracker_testing:
@@ -431,7 +439,7 @@ packages:
     description:
       name: leak_tracker_testing
       sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.0.1"
   lints:
@@ -439,7 +447,7 @@ packages:
     description:
       name: lints
       sha256: "976c774dd944a42e83e2467f4cc670daef7eed6295b10b36ae8c85bcbf828235"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "4.0.0"
   logging:
@@ -447,7 +455,7 @@ packages:
     description:
       name: logging
       sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
   macros:
@@ -455,7 +463,7 @@ packages:
     description:
       name: macros
       sha256: "0acaed5d6b7eab89f63350bccd82119e6c602df0f391260d0e32b5e23db79536"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "0.1.2-main.4"
   matcher:
@@ -463,7 +471,7 @@ packages:
     description:
       name: matcher
       sha256: d2323aa2060500f906aa31a895b4030b6da3ebdcc5619d14ce1aada65cd161cb
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "0.12.16+1"
   material_color_utilities:
@@ -471,15 +479,23 @@ packages:
     description:
       name: material_color_utilities
       sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "0.11.1"
+  math_expressions:
+    dependency: transitive
+    description:
+      name: math_expressions
+      sha256: e32d803d758ace61cc6c4bdfed1226ff60a6a23646b35685670d28b5616139f8
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.6.0"
   meta:
     dependency: transitive
     description:
       name: meta
       sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.15.0"
   mime:
@@ -487,7 +503,7 @@ packages:
     description:
       name: mime
       sha256: "41a20518f0cb1256669420fdba0cd90d21561e560ac240f26ef8322e45bb7ed6"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
   mocktail:
@@ -495,7 +511,7 @@ packages:
     description:
       name: mocktail
       sha256: "890df3f9688106f25755f26b1c60589a92b3ab91a22b8b224947ad041bf172d8"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
   nested:
@@ -503,7 +519,7 @@ packages:
     description:
       name: nested
       sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.0"
   package_config:
@@ -511,7 +527,7 @@ packages:
     description:
       name: package_config
       sha256: "92d4488434b520a62570293fbd33bb556c7d49230791c1b4bbd973baf6d2dc67"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.1"
   path:
@@ -519,7 +535,7 @@ packages:
     description:
       name: path
       sha256: "087ce49c3f0dc39180befefc60fdb4acd8f8620e5682fe2476afd0b3688bb4af"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.9.0"
   path_parsing:
@@ -527,7 +543,7 @@ packages:
     description:
       name: path_parsing
       sha256: "883402936929eac138ee0a45da5b0f2c80f89913e6dc3bf77eb65b84b409c6ca"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.0"
   path_provider_linux:
@@ -535,7 +551,7 @@ packages:
     description:
       name: path_provider_linux
       sha256: f7a1fe3a634fe7734c8d3f2766ad746ae2a2884abe22e241a8b301bf5cac3279
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.2.1"
   path_provider_platform_interface:
@@ -543,7 +559,7 @@ packages:
     description:
       name: path_provider_platform_interface
       sha256: "88f5779f72ba699763fa3a3b06aa4bf6de76c8e5de842cf6f29e2e06476c2334"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
   path_provider_windows:
@@ -551,7 +567,7 @@ packages:
     description:
       name: path_provider_windows
       sha256: bd6f00dbd873bfb70d0761682da2b3a2c2fccc2b9e84c495821639601d81afe7
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.3.0"
   petitparser:
@@ -559,7 +575,7 @@ packages:
     description:
       name: petitparser
       sha256: c15605cd28af66339f8eb6fbe0e541bfe2d1b72d5825efc6598f3e0a31b9ad27
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "6.0.2"
   platform:
@@ -567,7 +583,7 @@ packages:
     description:
       name: platform
       sha256: "5d6b1b0036a5f331ebc77c850ebc8506cbc1e9416c27e59b439f917a902a4984"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.1.6"
   plugin_platform_interface:
@@ -575,7 +591,7 @@ packages:
     description:
       name: plugin_platform_interface
       sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.8"
   pool:
@@ -583,7 +599,7 @@ packages:
     description:
       name: pool
       sha256: "20fe868b6314b322ea036ba325e6fc0711a22948856475e2c2b6306e8ab39c2a"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.5.1"
   pub_semver:
@@ -591,7 +607,7 @@ packages:
     description:
       name: pub_semver
       sha256: "7b3cfbf654f3edd0c6298ecd5be782ce997ddf0e00531b9464b55245185bbbbd"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.5"
   pubspec_parse:
@@ -599,23 +615,39 @@ packages:
     description:
       name: pubspec_parse
       sha256: "81876843eb50dc2e1e5b151792c9a985c5ed2536914115ed04e9c8528f6647b0"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  recase:
+    dependency: transitive
+    description:
+      name: recase
+      sha256: e4eb4ec2dcdee52dcf99cb4ceabaffc631d7424ee55e56f280bc039737f89213
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.0"
   resizable_widget:
     dependency: transitive
     description:
       name: resizable_widget
       sha256: db2919754b93f386b9b3fb15e9f48f6c9d6d41f00a24397629133c99df86606a
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.5"
+  scroll_pos:
+    dependency: transitive
+    description:
+      name: scroll_pos
+      sha256: cebf602b2dd939de6832bb902ffefb574608d1b84f420b82b381a4007d3c1e1b
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.0"
   shared_preferences:
     dependency: transitive
     description:
       name: shared_preferences
       sha256: a752ce92ea7540fc35a0d19722816e04d0e72828a4200e83a98cf1a1eb524c9a
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.3.5"
   shared_preferences_android:
@@ -623,7 +655,7 @@ packages:
     description:
       name: shared_preferences_android
       sha256: "02a7d8a9ef346c9af715811b01fbd8e27845ad2c41148eefd31321471b41863d"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.0"
   shared_preferences_foundation:
@@ -631,7 +663,7 @@ packages:
     description:
       name: shared_preferences_foundation
       sha256: "6a52cfcdaeac77cad8c97b539ff688ccfc458c007b4db12be584fbe5c0e49e03"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.5.4"
   shared_preferences_linux:
@@ -639,7 +671,7 @@ packages:
     description:
       name: shared_preferences_linux
       sha256: "580abfd40f415611503cae30adf626e6656dfb2f0cee8f465ece7b6defb40f2f"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.1"
   shared_preferences_platform_interface:
@@ -647,7 +679,7 @@ packages:
     description:
       name: shared_preferences_platform_interface
       sha256: "57cbf196c486bc2cf1f02b85784932c6094376284b3ad5779d1b1c6c6a816b80"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.1"
   shared_preferences_web:
@@ -655,7 +687,7 @@ packages:
     description:
       name: shared_preferences_web
       sha256: d2ca4132d3946fec2184261726b355836a82c33d7d5b67af32692aff18a4684e
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.2"
   shared_preferences_windows:
@@ -663,7 +695,7 @@ packages:
     description:
       name: shared_preferences_windows
       sha256: "94ef0f72b2d71bc3e700e025db3710911bd51a71cefb65cc609dd0d9a982e3c1"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.4.1"
   shelf:
@@ -671,7 +703,7 @@ packages:
     description:
       name: shelf
       sha256: ad29c505aee705f41a4d8963641f91ac4cee3c8fad5947e033390a7bd8180fa4
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.4.1"
   shelf_web_socket:
@@ -679,7 +711,7 @@ packages:
     description:
       name: shelf_web_socket
       sha256: cc36c297b52866d203dbf9332263c94becc2fe0ceaa9681d07b6ef9807023b67
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.0.1"
   sky_engine:
@@ -692,7 +724,7 @@ packages:
     description:
       name: source_gen
       sha256: "14658ba5f669685cd3d63701d01b31ea748310f7ab854e471962670abcf57832"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.5.0"
   source_span:
@@ -700,7 +732,7 @@ packages:
     description:
       name: source_span
       sha256: "53e943d4206a5e30df338fd4c6e7a077e02254531b138a15aec3bd143c1a8b3c"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.10.0"
   stack_trace:
@@ -708,7 +740,7 @@ packages:
     description:
       name: stack_trace
       sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.11.1"
   stream_channel:
@@ -716,7 +748,7 @@ packages:
     description:
       name: stream_channel
       sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
   stream_transform:
@@ -724,7 +756,7 @@ packages:
     description:
       name: stream_transform
       sha256: ad47125e588cfd37a9a7f86c7d6356dde8dfe89d071d293f80ca9e9273a33871
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.1"
   string_scanner:
@@ -732,7 +764,7 @@ packages:
     description:
       name: string_scanner
       sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.2.0"
   term_glyph:
@@ -740,7 +772,7 @@ packages:
     description:
       name: term_glyph
       sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.2.1"
   test_api:
@@ -748,7 +780,7 @@ packages:
     description:
       name: test_api
       sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "0.7.2"
   time:
@@ -756,7 +788,7 @@ packages:
     description:
       name: time
       sha256: "370572cf5d1e58adcb3e354c47515da3f7469dac3a95b447117e728e7be6f461"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.5"
   timing:
@@ -764,7 +796,7 @@ packages:
     description:
       name: timing
       sha256: "62ee18aca144e4a9f29d212f5a4c6a053be252b895ab14b5821996cff4ed90fe"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.2"
   typed_data:
@@ -772,7 +804,7 @@ packages:
     description:
       name: typed_data
       sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
   vector_graphics_codec:
@@ -780,7 +812,7 @@ packages:
     description:
       name: vector_graphics_codec
       sha256: "2430b973a4ca3c4dbc9999b62b8c719a160100dcbae5c819bae0cacce32c9cdb"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.12"
   vector_graphics_compiler:
@@ -788,7 +820,7 @@ packages:
     description:
       name: vector_graphics_compiler
       sha256: "1b4b9e706a10294258727674a340ae0d6e64a7231980f9f9a3d12e4b42407aad"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.16"
   vector_math:
@@ -796,7 +828,7 @@ packages:
     description:
       name: vector_math
       sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "2.1.4"
   vm_service:
@@ -804,7 +836,7 @@ packages:
     description:
       name: vm_service
       sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "14.2.5"
   watcher:
@@ -812,7 +844,7 @@ packages:
     description:
       name: watcher
       sha256: "69da27e49efa56a15f8afe8f4438c4ec02eff0a117df1b22ea4aad194fe1c104"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
   web:
@@ -820,7 +852,7 @@ packages:
     description:
       name: web
       sha256: cd3543bd5798f6ad290ea73d210f423502e71900302dde696f8bff84bf89a1cb
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.0"
   web_socket:
@@ -828,7 +860,7 @@ packages:
     description:
       name: web_socket
       sha256: "3c12d96c0c9a4eec095246debcea7b86c0324f22df69893d538fcc6f1b8cce83"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "0.1.6"
   web_socket_channel:
@@ -836,7 +868,7 @@ packages:
     description:
       name: web_socket_channel
       sha256: "9f187088ed104edd8662ca07af4b124465893caf063ba29758f97af57e61da8f"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.0.1"
   widgetbook:
@@ -844,7 +876,7 @@ packages:
     description:
       name: widgetbook
       sha256: f1aec6e13bc30a0b0fd1e1db1533b01caa0946fc6f0caf0412c3aba9de7ec4db
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.10.1"
   widgetbook_annotation:
@@ -852,7 +884,7 @@ packages:
     description:
       name: widgetbook_annotation
       sha256: "08570e3568275c4c283cdf78409c125f86c96c9b4f94f0a390d6a163349e9934"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.2.0"
   widgetbook_generator:
@@ -860,7 +892,7 @@ packages:
     description:
       name: widgetbook_generator
       sha256: d664ba02805c37ef4bf2a061493a6ec254b40f0d14c5546311566226d71845a2
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.9.1"
   xdg_directories:
@@ -868,7 +900,7 @@ packages:
     description:
       name: xdg_directories
       sha256: "7a3f37b05d989967cdddcbb571f1ea834867ae2faa29725fd085180e0883aa15"
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.0"
   xml:
@@ -876,7 +908,7 @@ packages:
     description:
       name: xml
       sha256: b015a8ad1c488f66851d762d3090a21c600e479dc75e68328c52774040cf9226
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "6.5.0"
   yaml:
@@ -884,7 +916,7 @@ packages:
     description:
       name: yaml
       sha256: b9da305ac7c39faa3f030eccd175340f968459dae4af175130b3fc47e40d76ce
-      url: "https://pub.flutter-io.cn"
+      url: "https://pub.dev"
     source: hosted
     version: "3.1.3"
 sdks:
diff --git a/pubspec.yaml b/pubspec.yaml
index cf7dbde..1645c6f 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -10,6 +10,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  fluent_ui: ^4.9.2
   cupertino_icons: ^1.0.8
   easy_localization: ^3.0.7
   mocktail: ^1.0.4
diff --git a/test/widget_test.dart b/test/widget_test.dart
index a5c987b..6a9e5b5 100644
--- a/test/widget_test.dart
+++ b/test/widget_test.dart
@@ -1,30 +1,30 @@
-// This is a basic Flutter widget test.
+// // This is a basic Flutter widget test.
+// //
+// // To perform an interaction with a widget in your test, use the WidgetTester
+// // utility in the flutter_test package. For example, you can send tap and scroll
+// // gestures. You can also use WidgetTester to find child widgets in the widget
+// // tree, read text, and verify that the values of widget properties are correct.
 //
-// To perform an interaction with a widget in your test, use the WidgetTester
-// utility in the flutter_test package. For example, you can send tap and scroll
-// gestures. You can also use WidgetTester to find child widgets in the widget
-// tree, read text, and verify that the values of widget properties are correct.
-
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:pactus_gui_widgetbook/main.dart';
-
-void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
-    // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
-
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
-
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
-    await tester.pump();
-
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
-  });
-}
+// import 'package:flutter/material.dart';
+// import 'package:flutter_test/flutter_test.dart';
+//
+// import 'package:pactus_gui_widgetbook/main.dart';
+//
+// void main() {
+//   testWidgets('Counter increments smoke test', (WidgetTester tester) async {
+//     // Build our app and trigger a frame.
+//     await tester.pumpWidget(const MyApp());
+//
+//     // Verify that our counter starts at 0.
+//     expect(find.text('0'), findsOneWidget);
+//     expect(find.text('1'), findsNothing);
+//
+//     // Tap the '+' icon and trigger a frame.
+//     await tester.tap(find.byIcon(Icons.add));
+//     await tester.pump();
+//
+//     // Verify that our counter has incremented.
+//     expect(find.text('0'), findsNothing);
+//     expect(find.text('1'), findsOneWidget);
+//   });
+// }