diff --git a/lib/modules/projects/group_and_project_list_tile.dart b/lib/modules/projects/group_and_project_list_tile.dart
new file mode 100644
index 0000000000000000000000000000000000000000..e629dd7406e9c9eb827d63b2f79688e9f3008bc4
--- /dev/null
+++ b/lib/modules/projects/group_and_project_list_tile.dart
@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:jihu_gitlab_app/modules/projects/group_details/group_and_project.dart';
+import 'package:jihu_gitlab_app/modules/projects/group_details/subgroup_page.dart';
+import 'package:jihu_gitlab_app/modules/projects/group_details/subgroups/project/project_issues_page.dart';
+import 'package:jihu_gitlab_app/modules/projects/group_details/subgroups/subgroup_list_model.dart';
+
+class GroupAndProjectListTile extends StatefulWidget {
+  final GroupAndProject data;
+
+  const GroupAndProjectListTile({required this.data, Key? key}) : super(key: key);
+
+  @override
+  State<GroupAndProjectListTile> createState() => _GroupAndProjectListTileState();
+}
+
+class _GroupAndProjectListTileState extends State<GroupAndProjectListTile> {
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () => _onTap(widget.data),
+      child: Container(
+        decoration: const BoxDecoration(
+          color: Colors.white,
+        ),
+        height: 80,
+        padding: const EdgeInsets.only(left: 12, right: 12),
+        child: SizedBox(
+          height: 79,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              Image.asset(
+                widget.data.icon,
+                width: 16,
+                height: 16,
+              ),
+              const SizedBox(width: 12),
+              Expanded(
+                flex: 1,
+                child: Text(
+                  widget.data.name,
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                  style: Theme.of(context).textTheme.titleLarge,
+                ),
+              ),
+              const Icon(
+                Icons.keyboard_arrow_right,
+                color: Colors.grey,
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _onTap(GroupAndProject item) {
+    if (item.type == SubgroupItemType.group || item.type == SubgroupItemType.subgroup) {
+      final params = <String, dynamic>{'groupId': item.id, 'name': item.name, 'relativePath': item.relativePath};
+      Navigator.of(context).pushNamed(SubgroupPage.routeName, arguments: params);
+    } else {
+      final params = <String, dynamic>{'projectId': item.id, 'name': item.name, 'relativePath': item.relativePath, "groupId": item.parentId};
+      Navigator.of(context).pushNamed(ProjectIssuesPage.routeName, arguments: params);
+    }
+  }
+}
diff --git a/lib/modules/projects/group_details/subgroups/subgroup_list_page.dart b/lib/modules/projects/group_details/subgroups/subgroup_list_page.dart
index a50587a263ba3b243bec8ed5ba8a040548efb0f7..68f8d4072f5b87ad3da3286b5fed80fd1c0e45e8 100644
--- a/lib/modules/projects/group_details/subgroups/subgroup_list_page.dart
+++ b/lib/modules/projects/group_details/subgroups/subgroup_list_page.dart
@@ -3,10 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:jihu_gitlab_app/core/dependency_injector.dart';
 import 'package:jihu_gitlab_app/core/load_state.dart';
 import 'package:jihu_gitlab_app/core/widgets/no_data_view.dart';
+import 'package:jihu_gitlab_app/modules/projects/group_and_project_list_tile.dart';
 import 'package:jihu_gitlab_app/modules/projects/group_details/group_and_project.dart';
-import 'package:jihu_gitlab_app/modules/projects/group_details/subgroups/project/project_issues_page.dart';
 
-import '../subgroup_page.dart';
 import 'subgroup_list_model.dart';
 
 class SubgroupListPage extends StatefulWidget {
@@ -54,7 +53,6 @@ class _SubgroupListPageState extends State<SubgroupListPage> {
   }
 
   Widget subgroupListView() {
-    final textTheme = Theme.of(context).textTheme;
     return ValueListenableBuilder<List<GroupAndProject>>(
         valueListenable: _model.notifier,
         builder: (BuildContext context, List<GroupAndProject> data, Widget? child) {
@@ -64,55 +62,9 @@ class _SubgroupListPageState extends State<SubgroupListPage> {
           return ClipRRect(
               borderRadius: BorderRadius.circular(4.0),
               child: ListView.separated(
-                itemCount: data.length,
-                separatorBuilder: (context, index) {
-                  return const Divider(height: .5, indent: 12.0, endIndent: 12.0, color: Color(0xFFDDDDDD));
-                },
-                itemBuilder: (context, index) => InkWell(
-                  onTap: () {
-                    final item = data[index];
-                    if (item.type == SubgroupItemType.group || item.type == SubgroupItemType.subgroup) {
-                      final params = <String, dynamic>{'groupId': item.id, 'name': item.name, 'relativePath': item.relativePath};
-                      Navigator.of(context).pushNamed(SubgroupPage.routeName, arguments: params);
-                    } else {
-                      final params = <String, dynamic>{'projectId': item.id, 'name': item.name, 'relativePath': item.relativePath, "groupId": item.parentId};
-                      Navigator.of(context).pushNamed(ProjectIssuesPage.routeName, arguments: params);
-                    }
-                  },
-                  child: Container(
-                    decoration: const BoxDecoration(
-                      color: Colors.white,
-                    ),
-                    height: 80,
-                    padding: const EdgeInsets.only(left: 12, right: 12),
-                    child: SizedBox(
-                      height: 79,
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.start,
-                        children: [
-                          Image.asset(
-                            data[index].icon,
-                            width: 16,
-                            height: 16,
-                          ),
-                          const SizedBox(width: 12),
-                          Text(
-                            data[index].name,
-                            style: textTheme.titleLarge,
-                          ),
-                          const Spacer(
-                            flex: 1,
-                          ),
-                          const Icon(
-                            Icons.keyboard_arrow_right,
-                            color: Colors.grey,
-                          )
-                        ],
-                      ),
-                    ),
-                  ),
-                ),
-              ));
+                  itemCount: data.length,
+                  separatorBuilder: (context, index) => const Divider(height: .5, indent: 12.0, endIndent: 12.0, color: Color(0xFFDDDDDD)),
+                  itemBuilder: (context, index) => GroupAndProjectListTile(data: data[index])));
         });
   }
 }
diff --git a/lib/modules/projects/groups/projects_groups_page.dart b/lib/modules/projects/groups/projects_groups_page.dart
index cf6b21d73dcf20facab9f1956459d54878516178..a790e7197a7bbc48c4765e10556e3a95244f7e07 100644
--- a/lib/modules/projects/groups/projects_groups_page.dart
+++ b/lib/modules/projects/groups/projects_groups_page.dart
@@ -4,7 +4,7 @@ import 'package:jihu_gitlab_app/core/load_state.dart';
 import 'package:jihu_gitlab_app/core/user_provider.dart';
 import 'package:jihu_gitlab_app/core/widgets/no_data_view.dart';
 import 'package:jihu_gitlab_app/core/widgets/unauthorized_view.dart';
-import 'package:jihu_gitlab_app/modules/projects/group_details//subgroup_page.dart';
+import 'package:jihu_gitlab_app/modules/projects/group_and_project_list_tile.dart';
 import 'package:jihu_gitlab_app/modules/projects/group_details/group_and_project.dart';
 import 'package:provider/provider.dart';
 
@@ -35,7 +35,6 @@ class _ProjectsGroupsPageState extends State<ProjectsGroupsPage> {
   }
 
   Widget groupList() {
-    final textTheme = Theme.of(context).textTheme;
     return ValueListenableBuilder<List<GroupAndProject>>(
       valueListenable: _model.notifier,
       builder: (BuildContext context, List<GroupAndProject> data, Widget? child) {
@@ -45,34 +44,9 @@ class _ProjectsGroupsPageState extends State<ProjectsGroupsPage> {
         return ClipRRect(
           borderRadius: BorderRadius.circular(4.0),
           child: ListView.separated(
-            itemCount: data.length,
-            separatorBuilder: (context, index) {
-              return const Divider(height: .5, indent: 12.0, endIndent: 12.0, color: Color(0xFFDDDDDD));
-            },
-            itemBuilder: (context, index) => InkWell(
-              onTap: () {
-                final params = <String, dynamic>{'groupId': data[index].id, 'name': data[index].name, 'relativePath': data[index].relativePath};
-                Navigator.of(context).pushNamed(SubgroupPage.routeName, arguments: params);
-              },
-              child: Container(
-                decoration: const BoxDecoration(color: Colors.white),
-                height: 80,
-                padding: const EdgeInsets.only(left: 12, right: 12),
-                child: SizedBox(
-                    height: 79,
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      children: [
-                        Image.asset(data[index].icon, width: 16, height: 16),
-                        const SizedBox(width: 12),
-                        Text(data[index].name, maxLines: 2, overflow: TextOverflow.ellipsis, style: textTheme.titleLarge),
-                        const Spacer(flex: 1),
-                        const Icon(Icons.keyboard_arrow_right, color: Colors.grey)
-                      ],
-                    )),
-              ),
-            ),
-          ),
+              itemCount: data.length,
+              separatorBuilder: (context, index) => const Divider(height: .5, indent: 12.0, endIndent: 12.0, color: Color(0xFFDDDDDD)),
+              itemBuilder: (context, index) => GroupAndProjectListTile(data: data[index])),
         );
       },
     );