diff --git a/forui/lib/src/widgets/card/card_content.dart b/forui/lib/src/widgets/card/card_content.dart
index 730ba9afa..0d4868149 100644
--- a/forui/lib/src/widgets/card/card_content.dart
+++ b/forui/lib/src/widgets/card/card_content.dart
@@ -91,7 +91,7 @@ final class FCardContentStyle with Diagnosticable {
 
   /// Creates a [FCardContentStyle] that inherits its properties from [colorScheme] and [typography].
   FCardContentStyle.inherit({required FColorScheme colorScheme, required FTypography typography})
-      : titleTextStyle = typography.base.copyWith(
+      : titleTextStyle = typography.xl2.copyWith(
           fontWeight: FontWeight.w600,
           color: colorScheme.foreground,
         ),
diff --git a/forui/test/golden/card/zinc-dark-raw-card-content.png b/forui/test/golden/card/zinc-dark-raw-card-content.png
index f99f52a6a..ed8fdaedc 100644
Binary files a/forui/test/golden/card/zinc-dark-raw-card-content.png and b/forui/test/golden/card/zinc-dark-raw-card-content.png differ
diff --git a/forui/test/golden/card/zinc-dark-text-card-content.png b/forui/test/golden/card/zinc-dark-text-card-content.png
index f99f52a6a..ed8fdaedc 100644
Binary files a/forui/test/golden/card/zinc-dark-text-card-content.png and b/forui/test/golden/card/zinc-dark-text-card-content.png differ
diff --git a/forui/test/golden/card/zinc-light-raw-card-content.png b/forui/test/golden/card/zinc-light-raw-card-content.png
index ce4276640..8c9c85c57 100644
Binary files a/forui/test/golden/card/zinc-light-raw-card-content.png and b/forui/test/golden/card/zinc-light-raw-card-content.png differ
diff --git a/forui/test/golden/card/zinc-light-text-card-content.png b/forui/test/golden/card/zinc-light-text-card-content.png
index ce4276640..8c9c85c57 100644
Binary files a/forui/test/golden/card/zinc-light-text-card-content.png and b/forui/test/golden/card/zinc-light-text-card-content.png differ
diff --git a/forui/test/golden/tabs/zinc-dark-tab.png b/forui/test/golden/tabs/zinc-dark-tab.png
index f71e2b5e8..bd59b88d7 100644
Binary files a/forui/test/golden/tabs/zinc-dark-tab.png and b/forui/test/golden/tabs/zinc-dark-tab.png differ
diff --git a/forui/test/golden/tabs/zinc-light-tab.png b/forui/test/golden/tabs/zinc-light-tab.png
index 1e3a1f32f..5444b898d 100644
Binary files a/forui/test/golden/tabs/zinc-light-tab.png and b/forui/test/golden/tabs/zinc-light-tab.png differ
diff --git a/forui/test/src/theme/typography_test.dart b/forui/test/src/theme/typography_test.dart
index a878abe42..59fd84183 100644
--- a/forui/test/src/theme/typography_test.dart
+++ b/forui/test/src/theme/typography_test.dart
@@ -71,18 +71,21 @@ void main() {
         typography = FTypography.inherit(colorScheme: colorScheme);
 
         expect(typography.defaultFontFamily, 'packages/forui/Inter');
-        expect(typography.xs, TextStyle(color: colorScheme.foreground, fontSize: 12, height: 1));
-        expect(typography.sm, TextStyle(color: colorScheme.foreground, fontSize: 14, height: 1.25));
-        expect(typography.base, TextStyle(color: colorScheme.foreground, fontSize: 16, height: 1.5));
-        expect(typography.lg, TextStyle(color: colorScheme.foreground, fontSize: 18, height: 1.75));
-        expect(typography.xl, TextStyle(color: colorScheme.foreground, fontSize: 20, height: 1.75));
-        expect(typography.xl2, TextStyle(color: colorScheme.foreground, fontSize: 22, height: 2));
-        expect(typography.xl3, TextStyle(color: colorScheme.foreground, fontSize: 30, height: 2.25));
-        expect(typography.xl4, TextStyle(color: colorScheme.foreground, fontSize: 36, height: 2.5));
-        expect(typography.xl5, TextStyle(color: colorScheme.foreground, fontSize: 48, height: 1));
-        expect(typography.xl6, TextStyle(color: colorScheme.foreground, fontSize: 60, height: 1));
-        expect(typography.xl7, TextStyle(color: colorScheme.foreground, fontSize: 72, height: 1));
-        expect(typography.xl8, TextStyle(color: colorScheme.foreground, fontSize: 96, height: 1));
+        expect(
+            typography.xs,
+            TextStyle(
+                color: colorScheme.foreground, fontFamily: typography.defaultFontFamily, fontSize: 12, height: 1,));
+        expect(typography.sm, TextStyle(color: colorScheme.foreground, fontFamily: typography.defaultFontFamily,fontSize: 14, height: 1.25,));
+        expect(typography.base, TextStyle(color: colorScheme.foreground, fontFamily: typography.defaultFontFamily,fontSize: 16, height: 1.5));
+        expect(typography.lg, TextStyle(color: colorScheme.foreground, fontFamily: typography.defaultFontFamily, fontSize: 18, height: 1.75));
+        expect(typography.xl, TextStyle(color: colorScheme.foreground, fontFamily: typography.defaultFontFamily,fontSize: 20, height: 1.75));
+        expect(typography.xl2, TextStyle(color: colorScheme.foreground, fontFamily: typography.defaultFontFamily,fontSize: 22, height: 2));
+        expect(typography.xl3, TextStyle(color: colorScheme.foreground,fontFamily: typography.defaultFontFamily, fontSize: 30, height: 2.25));
+        expect(typography.xl4, TextStyle(color: colorScheme.foreground,fontFamily: typography.defaultFontFamily, fontSize: 36, height: 2.5));
+        expect(typography.xl5, TextStyle(color: colorScheme.foreground,fontFamily: typography.defaultFontFamily, fontSize: 48, height: 1));
+        expect(typography.xl6, TextStyle(color: colorScheme.foreground,fontFamily: typography.defaultFontFamily, fontSize: 60, height: 1));
+        expect(typography.xl7, TextStyle(color: colorScheme.foreground,fontFamily: typography.defaultFontFamily, fontSize: 72, height: 1));
+        expect(typography.xl8, TextStyle(color: colorScheme.foreground, fontFamily: typography.defaultFontFamily,fontSize: 96, height: 1));
       });
 
       test(
diff --git a/samples/lib/main.dart b/samples/lib/main.dart
index 115fe923c..4f5e7cbf9 100644
--- a/samples/lib/main.dart
+++ b/samples/lib/main.dart
@@ -62,6 +62,10 @@ class _AppRouter extends $_AppRouter {
       path: '/header',
       page: HeaderRoute.page,
     ),
+    AutoRoute(
+      path: '/tabs',
+      page: TabsRoute.page,
+    ),
     AutoRoute(
       path: '/text-field',
       page: TextFieldRoute.page,
diff --git a/samples/lib/main.gr.dart b/samples/lib/main.gr.dart
index dba4def44..0f1650d17 100644
--- a/samples/lib/main.gr.dart
+++ b/samples/lib/main.gr.dart
@@ -8,7 +8,7 @@
 // coverage:ignore-file
 
 // ignore_for_file: no_leading_underscores_for_library_prefixes
-import 'package:auto_route/auto_route.dart' as _i10;
+import 'package:auto_route/auto_route.dart' as _i11;
 import 'package:forui_samples/main.dart' as _i5;
 import 'package:forui_samples/widgets/badge.dart' as _i1;
 import 'package:forui_samples/widgets/button.dart' as _i2;
@@ -17,13 +17,14 @@ import 'package:forui_samples/widgets/dialog.dart' as _i4;
 import 'package:forui_samples/widgets/header.dart' as _i6;
 import 'package:forui_samples/widgets/separator.dart' as _i7;
 import 'package:forui_samples/widgets/switch.dart' as _i8;
-import 'package:forui_samples/widgets/text_field.dart' as _i9;
+import 'package:forui_samples/widgets/tabs.dart' as _i9;
+import 'package:forui_samples/widgets/text_field.dart' as _i10;
 
-abstract class $_AppRouter extends _i10.RootStackRouter {
+abstract class $_AppRouter extends _i11.RootStackRouter {
   $_AppRouter({super.navigatorKey});
 
   @override
-  final Map<String, _i10.PageFactory> pagesMap = {
+  final Map<String, _i11.PageFactory> pagesMap = {
     BadgeRoute.name: (routeData) {
       final queryParams = routeData.queryParams;
       final args = routeData.argsAs<BadgeRouteArgs>(
@@ -37,7 +38,7 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                   'primary',
                 ),
               ));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i1.BadgePage(
           theme: args.theme,
@@ -58,7 +59,7 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                   'primary',
                 ),
               ));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i2.ButtonIconPage(
           theme: args.theme,
@@ -83,7 +84,7 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                   'Button',
                 ),
               ));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i2.ButtonTextPage(
           theme: args.theme,
@@ -100,7 +101,7 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                 'theme',
                 'zinc-light',
               )));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i3.CardPage(theme: args.theme),
       );
@@ -118,7 +119,7 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                   false,
                 ),
               ));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i4.DialogPage(
           theme: args.theme,
@@ -127,7 +128,7 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
       );
     },
     EmptyRoute.name: (routeData) {
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i5.EmptyPage(),
       );
@@ -140,7 +141,7 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                 'theme',
                 'zinc-light',
               )));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i6.HeaderPage(theme: args.theme),
       );
@@ -153,7 +154,7 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                 'theme',
                 'zinc-light',
               )));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i7.SeparatorPage(theme: args.theme),
       );
@@ -166,11 +167,24 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                 'theme',
                 'zinc-light',
               )));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
         child: _i8.SwitchPage(theme: args.theme),
       );
     },
+    TabsRoute.name: (routeData) {
+      final queryParams = routeData.queryParams;
+      final args = routeData.argsAs<TabsRouteArgs>(
+          orElse: () => TabsRouteArgs(
+                  theme: queryParams.getString(
+                'theme',
+                'zinc-light',
+              )));
+      return _i11.AutoRoutePage<dynamic>(
+        routeData: routeData,
+        child: _i9.TabsPage(theme: args.theme),
+      );
+    },
     TextFieldRoute.name: (routeData) {
       final queryParams = routeData.queryParams;
       final args = routeData.argsAs<TextFieldRouteArgs>(
@@ -184,9 +198,9 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
                   false,
                 ),
               ));
-      return _i10.AutoRoutePage<dynamic>(
+      return _i11.AutoRoutePage<dynamic>(
         routeData: routeData,
-        child: _i9.TextFieldPage(
+        child: _i10.TextFieldPage(
           theme: args.theme,
           enabled: args.enabled,
         ),
@@ -197,11 +211,11 @@ abstract class $_AppRouter extends _i10.RootStackRouter {
 
 /// generated route for
 /// [_i1.BadgePage]
-class BadgeRoute extends _i10.PageRouteInfo<BadgeRouteArgs> {
+class BadgeRoute extends _i11.PageRouteInfo<BadgeRouteArgs> {
   BadgeRoute({
     String theme = 'zinc-light',
     String style = 'primary',
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           BadgeRoute.name,
           args: BadgeRouteArgs(
@@ -217,8 +231,8 @@ class BadgeRoute extends _i10.PageRouteInfo<BadgeRouteArgs> {
 
   static const String name = 'BadgeRoute';
 
-  static const _i10.PageInfo<BadgeRouteArgs> page =
-      _i10.PageInfo<BadgeRouteArgs>(name);
+  static const _i11.PageInfo<BadgeRouteArgs> page =
+      _i11.PageInfo<BadgeRouteArgs>(name);
 }
 
 class BadgeRouteArgs {
@@ -239,11 +253,11 @@ class BadgeRouteArgs {
 
 /// generated route for
 /// [_i2.ButtonIconPage]
-class ButtonIconRoute extends _i10.PageRouteInfo<ButtonIconRouteArgs> {
+class ButtonIconRoute extends _i11.PageRouteInfo<ButtonIconRouteArgs> {
   ButtonIconRoute({
     String theme = 'zinc-light',
     String variant = 'primary',
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           ButtonIconRoute.name,
           args: ButtonIconRouteArgs(
@@ -259,8 +273,8 @@ class ButtonIconRoute extends _i10.PageRouteInfo<ButtonIconRouteArgs> {
 
   static const String name = 'ButtonIconRoute';
 
-  static const _i10.PageInfo<ButtonIconRouteArgs> page =
-      _i10.PageInfo<ButtonIconRouteArgs>(name);
+  static const _i11.PageInfo<ButtonIconRouteArgs> page =
+      _i11.PageInfo<ButtonIconRouteArgs>(name);
 }
 
 class ButtonIconRouteArgs {
@@ -281,12 +295,12 @@ class ButtonIconRouteArgs {
 
 /// generated route for
 /// [_i2.ButtonTextPage]
-class ButtonTextRoute extends _i10.PageRouteInfo<ButtonTextRouteArgs> {
+class ButtonTextRoute extends _i11.PageRouteInfo<ButtonTextRouteArgs> {
   ButtonTextRoute({
     String theme = 'zinc-light',
     String variant = 'primary',
     String label = 'Button',
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           ButtonTextRoute.name,
           args: ButtonTextRouteArgs(
@@ -304,8 +318,8 @@ class ButtonTextRoute extends _i10.PageRouteInfo<ButtonTextRouteArgs> {
 
   static const String name = 'ButtonTextRoute';
 
-  static const _i10.PageInfo<ButtonTextRouteArgs> page =
-      _i10.PageInfo<ButtonTextRouteArgs>(name);
+  static const _i11.PageInfo<ButtonTextRouteArgs> page =
+      _i11.PageInfo<ButtonTextRouteArgs>(name);
 }
 
 class ButtonTextRouteArgs {
@@ -329,10 +343,10 @@ class ButtonTextRouteArgs {
 
 /// generated route for
 /// [_i3.CardPage]
-class CardRoute extends _i10.PageRouteInfo<CardRouteArgs> {
+class CardRoute extends _i11.PageRouteInfo<CardRouteArgs> {
   CardRoute({
     String theme = 'zinc-light',
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           CardRoute.name,
           args: CardRouteArgs(theme: theme),
@@ -342,8 +356,8 @@ class CardRoute extends _i10.PageRouteInfo<CardRouteArgs> {
 
   static const String name = 'CardRoute';
 
-  static const _i10.PageInfo<CardRouteArgs> page =
-      _i10.PageInfo<CardRouteArgs>(name);
+  static const _i11.PageInfo<CardRouteArgs> page =
+      _i11.PageInfo<CardRouteArgs>(name);
 }
 
 class CardRouteArgs {
@@ -359,11 +373,11 @@ class CardRouteArgs {
 
 /// generated route for
 /// [_i4.DialogPage]
-class DialogRoute extends _i10.PageRouteInfo<DialogRouteArgs> {
+class DialogRoute extends _i11.PageRouteInfo<DialogRouteArgs> {
   DialogRoute({
     String theme = 'zinc-light',
     bool vertical = false,
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           DialogRoute.name,
           args: DialogRouteArgs(
@@ -379,8 +393,8 @@ class DialogRoute extends _i10.PageRouteInfo<DialogRouteArgs> {
 
   static const String name = 'DialogRoute';
 
-  static const _i10.PageInfo<DialogRouteArgs> page =
-      _i10.PageInfo<DialogRouteArgs>(name);
+  static const _i11.PageInfo<DialogRouteArgs> page =
+      _i11.PageInfo<DialogRouteArgs>(name);
 }
 
 class DialogRouteArgs {
@@ -401,8 +415,8 @@ class DialogRouteArgs {
 
 /// generated route for
 /// [_i5.EmptyPage]
-class EmptyRoute extends _i10.PageRouteInfo<void> {
-  const EmptyRoute({List<_i10.PageRouteInfo>? children})
+class EmptyRoute extends _i11.PageRouteInfo<void> {
+  const EmptyRoute({List<_i11.PageRouteInfo>? children})
       : super(
           EmptyRoute.name,
           initialChildren: children,
@@ -410,15 +424,15 @@ class EmptyRoute extends _i10.PageRouteInfo<void> {
 
   static const String name = 'EmptyRoute';
 
-  static const _i10.PageInfo<void> page = _i10.PageInfo<void>(name);
+  static const _i11.PageInfo<void> page = _i11.PageInfo<void>(name);
 }
 
 /// generated route for
 /// [_i6.HeaderPage]
-class HeaderRoute extends _i10.PageRouteInfo<HeaderRouteArgs> {
+class HeaderRoute extends _i11.PageRouteInfo<HeaderRouteArgs> {
   HeaderRoute({
     String theme = 'zinc-light',
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           HeaderRoute.name,
           args: HeaderRouteArgs(theme: theme),
@@ -428,8 +442,8 @@ class HeaderRoute extends _i10.PageRouteInfo<HeaderRouteArgs> {
 
   static const String name = 'HeaderRoute';
 
-  static const _i10.PageInfo<HeaderRouteArgs> page =
-      _i10.PageInfo<HeaderRouteArgs>(name);
+  static const _i11.PageInfo<HeaderRouteArgs> page =
+      _i11.PageInfo<HeaderRouteArgs>(name);
 }
 
 class HeaderRouteArgs {
@@ -445,10 +459,10 @@ class HeaderRouteArgs {
 
 /// generated route for
 /// [_i7.SeparatorPage]
-class SeparatorRoute extends _i10.PageRouteInfo<SeparatorRouteArgs> {
+class SeparatorRoute extends _i11.PageRouteInfo<SeparatorRouteArgs> {
   SeparatorRoute({
     String theme = 'zinc-light',
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           SeparatorRoute.name,
           args: SeparatorRouteArgs(theme: theme),
@@ -458,8 +472,8 @@ class SeparatorRoute extends _i10.PageRouteInfo<SeparatorRouteArgs> {
 
   static const String name = 'SeparatorRoute';
 
-  static const _i10.PageInfo<SeparatorRouteArgs> page =
-      _i10.PageInfo<SeparatorRouteArgs>(name);
+  static const _i11.PageInfo<SeparatorRouteArgs> page =
+      _i11.PageInfo<SeparatorRouteArgs>(name);
 }
 
 class SeparatorRouteArgs {
@@ -475,10 +489,10 @@ class SeparatorRouteArgs {
 
 /// generated route for
 /// [_i8.SwitchPage]
-class SwitchRoute extends _i10.PageRouteInfo<SwitchRouteArgs> {
+class SwitchRoute extends _i11.PageRouteInfo<SwitchRouteArgs> {
   SwitchRoute({
     String theme = 'zinc-light',
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           SwitchRoute.name,
           args: SwitchRouteArgs(theme: theme),
@@ -488,8 +502,8 @@ class SwitchRoute extends _i10.PageRouteInfo<SwitchRouteArgs> {
 
   static const String name = 'SwitchRoute';
 
-  static const _i10.PageInfo<SwitchRouteArgs> page =
-      _i10.PageInfo<SwitchRouteArgs>(name);
+  static const _i11.PageInfo<SwitchRouteArgs> page =
+      _i11.PageInfo<SwitchRouteArgs>(name);
 }
 
 class SwitchRouteArgs {
@@ -504,12 +518,42 @@ class SwitchRouteArgs {
 }
 
 /// generated route for
-/// [_i9.TextFieldPage]
-class TextFieldRoute extends _i10.PageRouteInfo<TextFieldRouteArgs> {
+/// [_i9.TabsPage]
+class TabsRoute extends _i11.PageRouteInfo<TabsRouteArgs> {
+  TabsRoute({
+    String theme = 'zinc-light',
+    List<_i11.PageRouteInfo>? children,
+  }) : super(
+          TabsRoute.name,
+          args: TabsRouteArgs(theme: theme),
+          rawQueryParams: {'theme': theme},
+          initialChildren: children,
+        );
+
+  static const String name = 'TabsRoute';
+
+  static const _i11.PageInfo<TabsRouteArgs> page =
+      _i11.PageInfo<TabsRouteArgs>(name);
+}
+
+class TabsRouteArgs {
+  const TabsRouteArgs({this.theme = 'zinc-light'});
+
+  final String theme;
+
+  @override
+  String toString() {
+    return 'TabsRouteArgs{theme: $theme}';
+  }
+}
+
+/// generated route for
+/// [_i10.TextFieldPage]
+class TextFieldRoute extends _i11.PageRouteInfo<TextFieldRouteArgs> {
   TextFieldRoute({
     String theme = 'zinc-light',
     bool enabled = false,
-    List<_i10.PageRouteInfo>? children,
+    List<_i11.PageRouteInfo>? children,
   }) : super(
           TextFieldRoute.name,
           args: TextFieldRouteArgs(
@@ -525,8 +569,8 @@ class TextFieldRoute extends _i10.PageRouteInfo<TextFieldRouteArgs> {
 
   static const String name = 'TextFieldRoute';
 
-  static const _i10.PageInfo<TextFieldRouteArgs> page =
-      _i10.PageInfo<TextFieldRouteArgs>(name);
+  static const _i11.PageInfo<TextFieldRouteArgs> page =
+      _i11.PageInfo<TextFieldRouteArgs>(name);
 }
 
 class TextFieldRouteArgs {
diff --git a/samples/lib/widgets/tabs.dart b/samples/lib/widgets/tabs.dart
new file mode 100644
index 000000000..9b890b202
--- /dev/null
+++ b/samples/lib/widgets/tabs.dart
@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:forui/forui.dart';
+
+import 'package:forui_samples/sample_scaffold.dart';
+
+@RoutePage()
+class TabsPage extends SampleScaffold {
+  TabsPage({
+    @queryParam super.theme,
+  });
+
+  @override
+  Widget child(BuildContext context) => Padding(
+        padding: const EdgeInsets.all(16),
+        child: FTabs(
+          tabs: [
+            FTabEntry(
+              label: 'Account',
+              content: FCard(
+                title: 'Account',
+                subtitle: 'Make changes to your account here. Click save when you are done.',
+                child: Padding(
+                  padding: const EdgeInsets.only(top: 12),
+                  child: Column(
+                    children: [
+                      const FTextField(
+                        label: 'Name',
+                        hint: 'John Renalo',
+                      ),
+                      const SizedBox(height: 10),
+                      const FTextField(
+                        label: 'Email',
+                        hint: 'john@doe.com',
+                      ),
+                      Padding(
+                        padding: const EdgeInsets.only(top: 24, bottom: 16),
+                        child: FButton(
+                          label: 'Save',
+                          onPress: () {},
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            FTabEntry(
+              label: 'Password',
+              content: FCard(
+                title: 'Password',
+                subtitle: 'Change your password here. After saving, you will be logged out.',
+                child: Padding(
+                  padding: const EdgeInsets.only(top: 12),
+                  child: Column(
+                    children: [
+                      const FTextField(label: 'Current password'),
+                      const SizedBox(height: 10),
+                      const FTextField(label: 'New password'),
+                      Padding(
+                        padding: const EdgeInsets.only(top: 24, bottom: 16),
+                        child: FButton(
+                          label: 'Save',
+                          onPress: () {},
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      );
+}