diff --git a/lib/screens/ge_issues.dart b/lib/screens/ge_issues.dart
index c7ca90a..265b94d 100644
--- a/lib/screens/ge_issues.dart
+++ b/lib/screens/ge_issues.dart
@@ -4,8 +4,8 @@ import 'package:git_touch/models/gitee.dart';
 import 'package:git_touch/scaffolds/list_stateful.dart';
 import 'package:git_touch/widgets/action_entry.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:git_touch/widgets/issue_item.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:provider/provider.dart';
 
 class GeIssuesScreen extends StatelessWidget {
@@ -44,7 +44,7 @@ class GeIssuesScreen extends StatelessWidget {
             ? null
             : Wrap(spacing: 4, runSpacing: 4, children: [
                 for (var label in p.labels!)
-                  MyLabel(name: label.name, cssColor: label.color)
+                  HexColorTag(name: label.name!, color: label.color!)
               ]),
       ),
     );
diff --git a/lib/screens/ge_pulls.dart b/lib/screens/ge_pulls.dart
index e6b1e82..c2af774 100644
--- a/lib/screens/ge_pulls.dart
+++ b/lib/screens/ge_pulls.dart
@@ -3,8 +3,8 @@ import 'package:git_touch/models/auth.dart';
 import 'package:git_touch/models/gitee.dart';
 import 'package:git_touch/scaffolds/list_stateful.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:git_touch/widgets/issue_item.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:provider/provider.dart';
 
 class GePullsScreen extends StatelessWidget {
@@ -39,7 +39,7 @@ class GePullsScreen extends StatelessWidget {
             ? null
             : Wrap(spacing: 4, runSpacing: 4, children: [
                 for (var label in p.labels!)
-                  MyLabel(name: label.name, cssColor: label.color)
+                  HexColorTag(name: label.name!, color: label.color!)
               ]),
       ),
     );
diff --git a/lib/screens/gh_issues.dart b/lib/screens/gh_issues.dart
index cfc8623..5420a4b 100644
--- a/lib/screens/gh_issues.dart
+++ b/lib/screens/gh_issues.dart
@@ -1,5 +1,6 @@
 import 'package:ferry/ferry.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/S.dart';
 import 'package:git_touch/graphql/__generated__/github.data.gql.dart';
 import 'package:git_touch/graphql/__generated__/github.req.gql.dart';
 import 'package:git_touch/graphql/__generated__/github.var.gql.dart';
@@ -7,10 +8,9 @@ import 'package:git_touch/models/auth.dart';
 import 'package:git_touch/scaffolds/list_stateful.dart';
 import 'package:git_touch/widgets/action_entry.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:git_touch/widgets/issue_item.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:provider/provider.dart';
-import 'package:flutter_gen/gen_l10n/S.dart';
 
 class GhIssuesScreen extends StatelessWidget {
   final String owner;
@@ -52,7 +52,7 @@ class GhIssuesScreen extends StatelessWidget {
               ? null
               : Wrap(spacing: 4, runSpacing: 4, children: [
                   for (var label in p.labels!.nodes!)
-                    MyLabel(name: label.name, cssColor: label.color)
+                    HexColorTag(name: label.name, color: label.color)
                 ]),
           url: '/github/$owner/$name/issues/${p.number}',
         );
diff --git a/lib/screens/gh_pulls.dart b/lib/screens/gh_pulls.dart
index 685be2c..f213bbe 100644
--- a/lib/screens/gh_pulls.dart
+++ b/lib/screens/gh_pulls.dart
@@ -1,15 +1,15 @@
 import 'package:ferry/ferry.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/S.dart';
 import 'package:git_touch/graphql/__generated__/github.data.gql.dart';
 import 'package:git_touch/graphql/__generated__/github.req.gql.dart';
 import 'package:git_touch/graphql/__generated__/github.var.gql.dart';
 import 'package:git_touch/models/auth.dart';
 import 'package:git_touch/scaffolds/list_stateful.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:git_touch/widgets/issue_item.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:provider/provider.dart';
-import 'package:flutter_gen/gen_l10n/S.dart';
 
 class GhPullsScreen extends StatelessWidget {
   final String owner;
@@ -48,7 +48,7 @@ class GhPullsScreen extends StatelessWidget {
             ? null
             : Wrap(spacing: 4, runSpacing: 4, children: [
                 for (var label in p.labels!.nodes!)
-                  MyLabel(name: label.name, cssColor: label.color)
+                  HexColorTag(name: label.name, color: label.color)
               ]),
         url: '/github/$owner/$name/pull/${p.number}',
       ),
diff --git a/lib/screens/gh_repo.dart b/lib/screens/gh_repo.dart
index 4d4c4d5..f6fbb6a 100644
--- a/lib/screens/gh_repo.dart
+++ b/lib/screens/gh_repo.dart
@@ -1,29 +1,30 @@
+import 'package:antd_mobile/antd_mobile.dart';
 import 'package:ferry/ferry.dart';
 import 'package:filesize/filesize.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/S.dart';
 import 'package:git_touch/graphql/__generated__/github.data.gql.dart';
 import 'package:git_touch/graphql/__generated__/github.req.gql.dart';
 import 'package:git_touch/graphql/__generated__/github.var.gql.dart';
 import 'package:git_touch/graphql/__generated__/schema.schema.gql.dart';
 import 'package:git_touch/models/auth.dart';
+import 'package:git_touch/models/theme.dart';
 import 'package:git_touch/scaffolds/refresh_stateful.dart';
 import 'package:git_touch/utils/utils.dart';
+import 'package:git_touch/widgets/action_button.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
 import 'package:git_touch/widgets/entry_item.dart';
-import 'package:git_touch/widgets/markdown_view.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:git_touch/widgets/language_bar.dart';
+import 'package:git_touch/widgets/markdown_view.dart';
 import 'package:git_touch/widgets/mutation_button.dart';
 import 'package:git_touch/widgets/repo_header.dart';
 import 'package:git_touch/widgets/table_view.dart';
 import 'package:github/github.dart';
+import 'package:primer/primer.dart';
 import 'package:provider/provider.dart';
-import 'package:git_touch/models/theme.dart';
 import 'package:tuple/tuple.dart';
-import 'package:git_touch/widgets/action_button.dart';
 import 'package:universal_io/io.dart';
-import 'package:flutter_gen/gen_l10n/S.dart';
 
 class GhRepoScreen extends StatelessWidget {
   final String owner;
@@ -79,6 +80,7 @@ class GhRepoScreen extends StatelessWidget {
             });
           };
         }
+
         final readmeData = MarkdownViewData(
           context,
           md: readmeFactory('application/vnd.github.v3.raw'),
@@ -93,7 +95,8 @@ class GhRepoScreen extends StatelessWidget {
           title: AppLocalizations.of(context)!.repositoryActions,
           items: [
             ActionItem(
-              text: '${AppLocalizations.of(context)!.projects}(${repo.projects.totalCount})',
+              text:
+                  '${AppLocalizations.of(context)!.projects}(${repo.projects.totalCount})',
               url: repo.projectsUrl,
             ),
             ...ActionItem.getUrlActions(repo.url),
@@ -192,14 +195,15 @@ class GhRepoScreen extends StatelessWidget {
                   Wrap(
                     spacing: 4,
                     runSpacing: 4,
-                    children: repo.repositoryTopics.nodes!.map((node) {
-                      return MyLabel(
-                        name: node.topic.name,
-                        // color: Colors.blue.shade50,
-                        color: theme.palette.grayBackground,
-                        textColor: theme.palette.primary,
-                      );
-                    }).toList(),
+                    children: [
+                      for (final node in repo.repositoryTopics.nodes!)
+                        AntTag(
+                          color: PrimerColors.blue500,
+                          fill: AntTagFill.outline,
+                          round: true,
+                          child: Text(node.topic.name),
+                        )
+                    ],
                   )
               ],
             ),
@@ -274,7 +278,8 @@ class GhRepoScreen extends StatelessWidget {
                     TableViewItem(
                       leftIconData: Octicons.git_branch,
                       text: Text(AppLocalizations.of(context)!.branches),
-                      rightWidget: Text('${ref.name} • ${numberFormat.format(repo.refs!.totalCount)}'),
+                      rightWidget: Text(
+                          '${ref.name} • ${numberFormat.format(repo.refs!.totalCount)}'),
                       onTap: () async {
                         final refs = repo.refs!.nodes!;
                         if (refs.length < 2) return;
diff --git a/lib/screens/gl_issues.dart b/lib/screens/gl_issues.dart
index b1dd567..6772393 100644
--- a/lib/screens/gl_issues.dart
+++ b/lib/screens/gl_issues.dart
@@ -1,13 +1,13 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/S.dart';
 import 'package:git_touch/models/auth.dart';
 import 'package:git_touch/models/gitlab.dart';
 import 'package:git_touch/scaffolds/list_stateful.dart';
 import 'package:git_touch/widgets/action_entry.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:git_touch/widgets/issue_item.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:provider/provider.dart';
-import 'package:flutter_gen/gen_l10n/S.dart';
 
 class GlIssuesScreen extends StatelessWidget {
   final String id;
@@ -45,7 +45,7 @@ class GlIssuesScreen extends StatelessWidget {
             ? null
             : Wrap(spacing: 4, runSpacing: 4, children: [
                 for (var label in p.labels!)
-                  MyLabel(name: label, cssColor: '#428BCA')
+                  HexColorTag(name: label, color: '#428BCA')
               ]),
         url: '/gitlab/projects/${p.projectId}/issues/${p.iid}',
       ),
diff --git a/lib/screens/gl_merge_requests.dart b/lib/screens/gl_merge_requests.dart
index 3f48e71..052c373 100644
--- a/lib/screens/gl_merge_requests.dart
+++ b/lib/screens/gl_merge_requests.dart
@@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/S.dart';
 import 'package:git_touch/models/auth.dart';
 import 'package:git_touch/models/gitlab.dart';
 import 'package:git_touch/scaffolds/list_stateful.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:git_touch/widgets/issue_item.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:provider/provider.dart';
-import 'package:flutter_gen/gen_l10n/S.dart';
 
 class GlMergeRequestsScreen extends StatelessWidget {
   final String id;
@@ -40,7 +40,7 @@ class GlMergeRequestsScreen extends StatelessWidget {
             ? null
             : Wrap(spacing: 4, runSpacing: 4, children: [
                 for (var label in p.labels!)
-                  MyLabel(name: label, cssColor: '#428BCA')
+                  HexColorTag(name: label, color: '#428BCA')
               ]),
         // url: '/gitlab/projects/${p.projectId}/merge_requests/${p.iid}',
         url: '$prefix/merge_requests/${p.iid}', // TODO:
diff --git a/lib/screens/go_issues.dart b/lib/screens/go_issues.dart
index 5d9b83b..c19f7d1 100644
--- a/lib/screens/go_issues.dart
+++ b/lib/screens/go_issues.dart
@@ -5,8 +5,8 @@ import 'package:git_touch/models/gogs.dart';
 import 'package:git_touch/scaffolds/list_stateful.dart';
 import 'package:git_touch/widgets/action_entry.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:git_touch/widgets/issue_item.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:provider/provider.dart';
 
 class GoIssuesScreen extends StatelessWidget {
@@ -54,7 +54,7 @@ class GoIssuesScreen extends StatelessWidget {
                 ? null
                 : Wrap(spacing: 4, runSpacing: 4, children: [
                     for (var label in p.labels!)
-                      MyLabel(name: label.name, cssColor: label.color)
+                      HexColorTag(name: label.name!, color: label.color!)
                   ]),
       ),
     );
diff --git a/lib/screens/gt_issues.dart b/lib/screens/gt_issues.dart
index 6eeeb7a..41bcc68 100644
--- a/lib/screens/gt_issues.dart
+++ b/lib/screens/gt_issues.dart
@@ -5,8 +5,8 @@ import 'package:git_touch/models/gitea.dart';
 import 'package:git_touch/scaffolds/list_stateful.dart';
 import 'package:git_touch/widgets/action_entry.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:git_touch/widgets/issue_item.dart';
-import 'package:git_touch/widgets/label.dart';
 import 'package:provider/provider.dart';
 
 class GtIssuesScreen extends StatelessWidget {
@@ -54,7 +54,7 @@ class GtIssuesScreen extends StatelessWidget {
                 ? null
                 : Wrap(spacing: 4, runSpacing: 4, children: [
                     for (var label in p.labels!)
-                      MyLabel(name: label.name, cssColor: label.color)
+                      HexColorTag(name: label.name!, color: label.color!)
                   ]),
       ),
     );
diff --git a/lib/widgets/hex_color_tag.dart b/lib/widgets/hex_color_tag.dart
new file mode 100644
index 0000000..fe57734
--- /dev/null
+++ b/lib/widgets/hex_color_tag.dart
@@ -0,0 +1,23 @@
+import 'package:antd_mobile/antd_mobile.dart';
+import 'package:flutter/material.dart';
+import 'package:git_touch/utils/utils.dart';
+
+class HexColorTag extends StatelessWidget {
+  final String name;
+  final String color;
+
+  const HexColorTag({
+    super.key,
+    required this.name,
+    required this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return AntTag(
+      round: true,
+      color: convertColor(color),
+      child: Text(name),
+    );
+  }
+}
diff --git a/lib/widgets/label.dart b/lib/widgets/label.dart
deleted file mode 100644
index deb7dc0..0000000
--- a/lib/widgets/label.dart
+++ /dev/null
@@ -1,36 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:git_touch/utils/utils.dart';
-
-class MyLabel extends StatelessWidget {
-  final String? name;
-  final Color? color;
-  final String? cssColor;
-  final Color? textColor;
-
-  const MyLabel({
-    required this.name,
-    this.color,
-    this.cssColor,
-    this.textColor,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final finalColor = color ?? convertColor(cssColor);
-    return Container(
-      padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 6),
-      decoration: BoxDecoration(
-        color: finalColor,
-        borderRadius: const BorderRadius.all(Radius.circular(4)),
-      ),
-      child: Text(
-        name!,
-        style: TextStyle(
-          fontSize: 13,
-          color: textColor ?? getFontColorByBrightness(finalColor),
-          // fontWeight: FontWeight.w600,
-        ),
-      ),
-    );
-  }
-}
diff --git a/lib/widgets/timeline_item.dart b/lib/widgets/timeline_item.dart
index 0d7187c..5107ef7 100644
--- a/lib/widgets/timeline_item.dart
+++ b/lib/widgets/timeline_item.dart
@@ -1,13 +1,15 @@
 import 'dart:core';
+
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/S.dart';
 import 'package:git_touch/graphql/__generated__/github.data.gql.dart';
 import 'package:git_touch/graphql/__generated__/schema.schema.gql.dart';
 import 'package:git_touch/models/theme.dart';
-import 'package:git_touch/widgets/label.dart';
+import 'package:git_touch/widgets/hex_color_tag.dart';
 import 'package:provider/provider.dart';
+
 import '../utils/utils.dart';
 import 'comment_item.dart';
-import 'package:flutter_gen/gen_l10n/S.dart';
 
 TextSpan createUserSpan(BuildContext context, String? login) {
   return createLinkSpan(context, login, '/github/$login');
@@ -202,7 +204,7 @@ class TimelineItem extends StatelessWidget {
           textSpan: TextSpan(children: [
             TextSpan(text: ' ${AppLocalizations.of(context)!.added} '),
             WidgetSpan(
-                child: MyLabel(name: p.label.name, cssColor: p.label.color)),
+                child: HexColorTag(name: p.label.name, color: p.label.color)),
             TextSpan(text: ' ${AppLocalizations.of(context)!.label}'),
           ]),
         );
@@ -214,7 +216,7 @@ class TimelineItem extends StatelessWidget {
           textSpan: TextSpan(children: [
             TextSpan(text: ' ${AppLocalizations.of(context)!.removed} '),
             WidgetSpan(
-                child: MyLabel(name: p.label.name, cssColor: p.label.color)),
+                child: HexColorTag(name: p.label.name, color: p.label.color)),
             TextSpan(text: ' ${AppLocalizations.of(context)!.label}'),
           ]),
         );
diff --git a/pubspec.lock b/pubspec.lock
index 12ac7fc..bd115bb 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -15,6 +15,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.7.0"
+  antd_mobile:
+    dependency: "direct main"
+    description:
+      path: "../ant-design-mobile-flutter"
+      relative: true
+    source: path
+    version: "0.0.1"
   args:
     dependency: transitive
     description:
@@ -1147,5 +1154,5 @@ packages:
     source: hosted
     version: "3.1.1"
 sdks:
-  dart: ">=2.17.5 <3.0.0"
+  dart: ">=2.17.6 <3.0.0"
   flutter: ">=3.0.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index e18f52c..a627415 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -67,6 +67,8 @@ dependencies:
   pub_semver:
   google_fonts:
   go_router:
+  antd_mobile:
+    path: ../ant-design-mobile-flutter
 
 dev_dependencies:
   flutter_test: