lib/presentation/views/main_menu/create_game/choose_ruleset_view.dart

@@ -27,18 +27,61 @@ class _ChooseRulesetViewState extends State<ChooseRulesetView> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return DefaultTabController(
+      length: 2,
+      initialIndex: 0,
+      child: Scaffold(
         backgroundColor: CustomTheme.backgroundColor,
         appBar: AppBar(
           backgroundColor: CustomTheme.backgroundColor,
           scrolledUnderElevation: 0,
           title: const Text(
-          'Choose Group',
+            'Choose Gametype',
             style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
           ),
           centerTitle: true,
         ),
-      body: ListView.builder(
+        body: Column(
+          children: [
+            Container(
+              color: CustomTheme.backgroundColor,
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+              child: TabBar(
+                padding: const EdgeInsets.symmetric(horizontal: 5),
+                // Label Settings
+                labelStyle: const TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                ),
+                labelColor: Colors.white,
+                unselectedLabelStyle: const TextStyle(fontSize: 14),
+                unselectedLabelColor: Colors.white70,
+                // Indicator Settings
+                indicator: CustomTheme.standardBoxDecoration,
+                indicatorSize: TabBarIndicatorSize.tab,
+                indicatorWeight: 1,
+                indicatorPadding: const EdgeInsets.symmetric(
+                  horizontal: 20,
+                  vertical: 0,
+                ),
+                // Divider Settings
+                dividerHeight: 0,
+                tabs: const [
+                  Tab(text: 'Rulesets'),
+                  Tab(text: 'Gametypes'),
+                ],
+              ),
+            ),
+            const Divider(
+              indent: 30,
+              endIndent: 30,
+              thickness: 3,
+              radius: BorderRadius.all(Radius.circular(12)),
+            ),
+            Expanded(
+              child: TabBarView(
+                children: [
+                  ListView.builder(
                     padding: const EdgeInsets.only(bottom: 85),
                     itemCount: widget.rulesets.length,
                     itemBuilder: (BuildContext context, int index) {
@@ -47,10 +90,11 @@ class _ChooseRulesetViewState extends State<ChooseRulesetView> {
                           setState(() {
                             selectedRulesetIndex = index;
                           });
-
                           Future.delayed(const Duration(milliseconds: 500), () {
                             if (!context.mounted) return;
-                Navigator.of(context).pop(widget.rulesets[index].$1);
+                            Navigator.of(
+                              context,
+                            ).pop(widget.rulesets[index].$1);
                           });
                         },
                         title: widget.rulesets[index].$2,
@@ -59,6 +103,18 @@ class _ChooseRulesetViewState extends State<ChooseRulesetView> {
                       );
                     },
                   ),
+                  const Center(
+                    child: Text(
+                      'No gametypes available',
+                      style: TextStyle(color: Colors.white70),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
     );
   }
 }