Merge branch 'development' into enhancement/18-navbar-alignment

.gitea/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -1,6 +1,6 @@
 ---
 name: Bug report
-about: Create a report for something does not work as it should
+about: Erstelle eine Meldung für etwas, das nicht Funktioniert, wie es soll.
 title: ''
 labels: 'Task/Bug'
 assignees: ''
@@ -9,28 +9,27 @@ assignees: ''
 
 # Bug Report  
 
-## Description
-[A clear and concise description of the bug]  
+## Beschreibung
+[Eine klare und prägnante Beschreibung des Bugs]  
 
-## Steps to Reproduce
-1. Step 1  
-2. Step 2  
+## Schritte zur Reproduktion
+1. Schritt 1  
+2. Schritt 2  
 3. ...  
 
-## Expected Behavior
-[What should have happened]  
+## Erwartetes Verhalten
+[Was hätte passieren sollen]  
 
-## Actual Behavior
-[What actually happened]  
+## Tatsächliches Verhalten
+[Was tatsächlich passiert ist]   
 
-## Screenshots/Logs
-[If applicable, add screenshots, error logs, or stack traces]  
+## Screenshots/Protokolle
+[Falls zutreffend, füge Screenshots, Error Logs oder Stack Traces hinzu]   
 
-## Environment
-- OS: [e.g., iOS 18.5, Android 14]  
+## Umgebung
+- Plattform: Android, iOS, Web
+- OS: [z. B. iOS 18.5, Android 14]  
+- Flutter Version: [z.B. 3.35.6]
 
-## Possible Fix (Optional)
-[Any suggestions on how to resolve the issue]  
-
-## Related Issues (Optional)
-[Reference similar issues or PRs]
+## Verwandte Issues
+[Verweisen Sie auf ähnliche Issues oder PRs]

.gitea/ISSUE_TEMPLATE/ENHANCEMENT.md

@@ -9,14 +9,14 @@ assignees: ''
 
 # Enhancement  
 
-## Current Behavior
-[Describe the existing functionality]  
+## Aktuelles Verhalten
+[Beschreibe die bestehende Funktionalität]  
 
-## Limitations/Problems 
-[What are the current shortcomings?]  
+## Einschränkungen/Probleme 
+[Was sind die aktuellen Mängel?]  
 
-## Suggested Improvement  
-[How can this be enhanced? Be specific.]  
+## Vorgeschlagene Verbesserung  
+[Wie kann das Problem bzw. die Einschränkung verbessert werden?]  
 
-## Benefits
-[How will this improve the product?]  
+## Zugehörige Issues
+[Links zu verwandten oder blockierenden Issues]

.gitea/ISSUE_TEMPLATE/FEATURE.md

@@ -1,22 +1,19 @@
 ---
 name: Feature
-about: New feature for the app
+about: Neues Feature für die App
 title: ''
 labels: 'Task\Feature'
 assignees: ''
 
 ---
 
-# 🚀 Feature  
+# Feature  
 
-## Description
-[Detailed explanation of the proposed feature]  
+## Beschreibung
+[Ausführliche Erläuterung der vorgeschlagenen Funktion]  
 
-## Why is this feature needed?
-[Explain the problem or use case this feature would solve]  
+## Vorgeschlagene Lösung
+[Beschreibe, wie die Feature funktionieren soll]  
 
-## Proposed Solution
-[Describe how the feature should work]  
-
-## Related Issues (Optional)
-[Links to related discussions or requests]
+## Zugehörige Issues
+[Links zu verwandten oder blockierenden Issues]

.gitea/PULL_REQUEST_TEMPLATE.md

@@ -1,16 +1,16 @@
-# [PR Title]
+# [PR Titel]
 
-**Related Issue(s):**  
+**Zugehörige Issue(s):**  
 Closes `<issue-no>`
 
-## Description  
-*A clear and concise overview of the changes made. Explain the "why" behind the PR, not just the "what".*  
+## Beschreibung  
+*Eine klare und prägnante Übersicht über die vorgenommenen Änderungen. Erläutere nicht nur das was gemacht wurde, sondern auch warum.*
 
-## Changes Made  
-- [ ] Added new feature X  
-- [ ] Fixed bug in component Y  
-- [ ] Refactored module Z for better performance  
-- [ ] Updated dependencies
+## Änderungen  
+- [ ] Neue Funktion X hinzugefügt
+- [ ] Bug in Komponente Y behoben
+- [ ] Modul Z für bessere Leistung refactored
+- [ ] Dependencies aktualisiert
 
-## Additional Notes  
-*Any extra context, limitations, or decisions that reviewers should know about?*  
+## Zusätzliche Anmerkungen  
+*Gibt es zusätzlichen Kontext, Einschränkungen oder Informationen, die Reviewer wissen sollten?*  

.gitea/workflows/pull_request.yaml

@@ -0,0 +1,57 @@
+name: Pull Request Pipeline
+
+on:
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install jq
+        run: |
+          apt-get update
+          apt-get install -y jq 
+
+      - name: Install Flutter (wget)
+        run: |
+          wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.38.2-stable.tar.xz
+          tar xf flutter_linux_3.38.2-stable.tar.xz
+          # Set Git safe directory for Flutter path
+          git config --global --add safe.directory "$(pwd)/flutter"
+          # Set Flutter path
+          echo "$(pwd)/flutter/bin" >> $GITHUB_PATH
+
+      - name: Get dependencies
+        run: flutter pub get
+
+      - name: Analyze Formatting
+        run: flutter analyze lib test
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: |
+          apt-get update
+          apt-get install -y jq 
+
+      - name: Install Flutter (wget)
+        run: |
+          wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.38.2-stable.tar.xz
+          tar xf flutter_linux_3.38.2-stable.tar.xz
+          # Set Git safe directory for Flutter path
+          git config --global --add safe.directory "$(pwd)/flutter"
+          # Set Flutter path
+          echo "$(pwd)/flutter/bin" >> $GITHUB_PATH
+
+      - name: Get dependencies
+        run: flutter pub get
+
+      - name: Run tests
+        run: flutter test

.gitea/workflows/push.yaml

@@ -0,0 +1,50 @@
+name: Push Pipeline
+
+on:
+  push:
+    branches:
+      - "development"
+      - "main"
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    if: false # Needs bot user
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: |
+          apt-get update
+          apt-get install -y jq 
+
+      - name: Install Flutter (wget)
+        run: |
+          wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.38.2-stable.tar.xz
+          tar xf flutter_linux_3.38.2-stable.tar.xz
+          # Set Git safe directory for Flutter path
+          git config --global --add safe.directory "$(pwd)/flutter"
+          # Set Flutter path
+          echo "$(pwd)/flutter/bin" >> $GITHUB_PATH
+
+      - name: Get & upgrade dependencies
+        run: |
+          flutter pub get
+          flutter pub upgrade --major-versions
+
+      - name: Auto-format
+        run: |
+          dart format lib
+          dart fix --apply lib 
+
+        # Needs credentials, push access and the right files need to be staged
+      - name: Commit Changes
+        run: |
+          git config --global user.name "Gitea Actions"
+          git config --global user.email "actions@gitea.com"
+         git status
+          git add lib/
+          git status
+          git commit -m "Actions: Auto-formatting [skip ci]"
+          git push

lib/core/custom_theme.dart

@@ -5,6 +5,7 @@ class CustomTheme {
   static Color secondaryColor = const Color(0xFFAFA2FF);
   static Color backgroundColor = const Color(0xFF0B0B0B);
   static Color boxColor = const Color(0xFF101010);
+  static Color onBoxColor = const Color(0xFF181818);
   static Color boxBorder = const Color(0xFF272727);
 
   static AppBarTheme appBarTheme = AppBarTheme(

lib/core/enums.dart

@@ -0,0 +1,2 @@
+/// Button types used for styling the [CustomWidthButton]
+enum ButtonType { primary, secondary, tertiary }

lib/data/dao/game_dao.dart

@@ -2,6 +2,8 @@ import 'package:drift/drift.dart';
 import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/db/tables/game_table.dart';
 import 'package:game_tracker/data/dto/game.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/data/dto/player.dart';
 
 part 'game_dao.g.dart';
 
@@ -13,14 +15,67 @@ class GameDao extends DatabaseAccessor<AppDatabase> with _$GameDaoMixin {
   Future<List<Game>> getAllGames() async {
     final query = select(gameTable);
     final result = await query.get();
-    return result.map((row) => Game(id: row.id, name: row.name)).toList();
+    return result
+        .map(
+          (row) => Game(id: row.id, name: row.name, createdAt: row.createdAt),
+        )
+        .toList();
   }
 
-  /// Retrieves a [Game] by its [id].
-  Future<Game> getGameById(String id) async {
-    final query = select(gameTable)..where((g) => g.id.equals(id));
+  /// Retrieves a [Game] by its [gameId].
+  Future<Game> getGameById({required String gameId}) async {
+    final query = select(gameTable)..where((g) => g.id.equals(gameId));
     final result = await query.getSingle();
-    return Game(id: result.id, name: result.name);
+
+    List<Player>? players;
+    if (await db.playerGameDao.gameHasPlayers(gameId: gameId)) {
+      players = await db.playerGameDao.getPlayersByGameId(gameId: gameId);
+    }
+    Group? group;
+    if (await db.groupGameDao.hasGameGroup(gameId: gameId)) {
+      group = await db.groupGameDao.getGroupByGameId(gameId: gameId);
+    }
+
+    return Game(
+      id: result.id,
+      name: result.name,
+      players: players,
+      group: group,
+      winner: result.winnerId,
+      createdAt: result.createdAt,
+    );
+  }
+
+  /// Adds a new [Game] to the database.
+  /// Also adds associated players and group if they exist.
+  Future<void> addGame({required Game game}) async {
+    await db.transaction(() async {
+      for (final p in game.players ?? []) {
+        await db.playerDao.addPlayer(player: p);
+        await db.playerGameDao.addPlayerToGame(gameId: game.id, playerId: p.id);
+      }
+      if (game.group != null) {
+        await db.groupDao.addGroup(group: game.group!);
+        await db.groupGameDao.addGroupToGame(game.id, game.group!.id);
+      }
+      await into(gameTable).insert(
+        GameTableCompanion.insert(
+          id: game.id,
+          name: game.name,
+          winnerId: game.winner,
+          createdAt: game.createdAt,
+        ),
+        mode: InsertMode.insertOrReplace,
+      );
+    });
+  }
+
+  /// Deletes the game with the given [gameId] from the database.
+  /// Returns `true` if more than 0 rows were affected, otherwise `false`.
+  Future<bool> deleteGame({required String gameId}) async {
+    final query = delete(gameTable)..where((g) => g.id.equals(gameId));
+    final rowsAffected = await query.go();
+    return rowsAffected > 0;
   }
 
   /// Retrieves the number of games in the database.
@@ -31,4 +86,12 @@ class GameDao extends DatabaseAccessor<AppDatabase> with _$GameDaoMixin {
             .getSingle();
     return count ?? 0;
   }
+
+  /// Checks if a game with the given [gameId] exists in the database.
+  /// Returns `true` if the game exists, otherwise `false`.
+  Future<bool> gameExists({required String gameId}) async {
+    final query = select(gameTable)..where((g) => g.id.equals(gameId));
+    final result = await query.getSingleOrNull();
+    return result != null;
+  }
 }

lib/data/dao/game_dao.g.dart

@@ -4,5 +4,6 @@ part of 'game_dao.dart';
 
 // ignore_for_file: type=lint
 mixin _$GameDaoMixin on DatabaseAccessor<AppDatabase> {
+  $PlayerTableTable get playerTable => attachedDatabase.playerTable;
   $GameTableTable get gameTable => attachedDatabase.gameTable;
 }

lib/data/dao/group_dao.dart

@@ -14,44 +14,88 @@ class GroupDao extends DatabaseAccessor<AppDatabase> with _$GroupDaoMixin {
   Future<List<Group>> getAllGroups() async {
     final query = select(groupTable);
     final result = await query.get();
-    return result
-        .map((row) => Group(id: row.id, name: row.name, members: []))
-        .toList();
+    return Future.wait(
+      result.map((groupData) async {
+        final members = await db.playerGroupDao.getPlayersOfGroupById(
+          groupId: groupData.id,
+        );
+        return Group(
+          id: groupData.id,
+          name: groupData.name,
+          members: members,
+          createdAt: groupData.createdAt,
+        );
+      }),
+    );
   }
 
-  /// Retrieves a [Group] by its [id], including its members.
-  Future<Group> getGroupById(String id) async {
-    final query = select(groupTable)..where((g) => g.id.equals(id));
+  /// Retrieves a [Group] by its [groupId], including its members.
+  Future<Group> getGroupById({required String groupId}) async {
+    final query = select(groupTable)..where((g) => g.id.equals(groupId));
     final result = await query.getSingle();
 
-    List<Player> members = [];
+    List<Player> members = await db.playerGroupDao.getPlayersOfGroupById(
+      groupId: groupId,
+    );
 
-    members = await db.playerGroupDao.getPlayersOfGroupById(id);
-
-    return Group(id: result.id, name: result.name, members: members);
+    return Group(
+      id: result.id,
+      name: result.name,
+      members: members,
+      createdAt: result.createdAt,
+    );
   }
 
   /// Adds a new group with the given [id] and [name] to the database.
-  /// Returns `true` if more than 0 rows were affected, otherwise `false`.
-  Future<void> addGroup(String id, String name) async {
-    await into(
-      groupTable,
-    ).insert(GroupTableCompanion.insert(id: id, name: name));
+  /// This method also adds the group's members to the [PlayerGroupTable].
+  Future<bool> addGroup({required Group group}) async {
+    if (!await groupExists(groupId: group.id)) {
+      await db.transaction(() async {
+        await into(groupTable).insert(
+          GroupTableCompanion.insert(
+            id: group.id,
+            name: group.name,
+            createdAt: group.createdAt,
+          ),
+        );
+        await db.batch(
+          (b) => b.insertAll(
+            db.playerGroupTable,
+            group.members
+                .map(
+                  (member) => PlayerGroupTableCompanion.insert(
+                    playerId: member.id,
+                    groupId: group.id,
+                  ),
+                )
+                .toList(),
+          ),
+        );
+        await Future.wait(
+          group.members.map((player) => db.playerDao.addPlayer(player: player)),
+        );
+      });
+      return true;
+    }
+    return false;
   }
 
   /// Deletes the group with the given [id] from the database.
   /// Returns `true` if more than 0 rows were affected, otherwise `false`.
-  Future<bool> deleteGroup(String id) async {
-    final query = (delete(groupTable)..where((g) => g.id.equals(id)));
+  Future<bool> deleteGroup({required String groupId}) async {
+    final query = (delete(groupTable)..where((g) => g.id.equals(groupId)));
     final rowsAffected = await query.go();
     return rowsAffected > 0;
   }
 
   /// Updates the name of the group with the given [id] to [newName].
   /// Returns `true` if more than 0 rows were affected, otherwise `false`.
-  Future<bool> updateGroupname(String id, String newName) async {
+  Future<bool> updateGroupname({
+    required String groupId,
+    required String newName,
+  }) async {
     final rowsAffected =
-        await (update(groupTable)..where((g) => g.id.equals(id))).write(
+        await (update(groupTable)..where((g) => g.id.equals(groupId))).write(
           GroupTableCompanion(name: Value(newName)),
         );
     return rowsAffected > 0;
@@ -65,4 +109,12 @@ class GroupDao extends DatabaseAccessor<AppDatabase> with _$GroupDaoMixin {
             .getSingle();
     return count ?? 0;
   }
+
+  /// Checks if a group with the given [groupId] exists in the database.
+  /// Returns `true` if the group exists, `false` otherwise.
+  Future<bool> groupExists({required String groupId}) async {
+    final query = select(groupTable)..where((g) => g.id.equals(groupId));
+    final result = await query.getSingleOrNull();
+    return result != null;
+  }
 }

lib/data/dao/group_game_dao.dart

@@ -0,0 +1,42 @@
+import 'package:drift/drift.dart';
+import 'package:game_tracker/data/db/database.dart';
+import 'package:game_tracker/data/db/tables/group_game_table.dart';
+import 'package:game_tracker/data/dto/group.dart';
+
+part 'group_game_dao.g.dart';
+
+@DriftAccessor(tables: [GroupGameTable])
+class GroupGameDao extends DatabaseAccessor<AppDatabase>
+    with _$GroupGameDaoMixin {
+  GroupGameDao(super.db);
+
+  /// Checks if there is a group associated with the given [gameId].
+  /// Returns `true` if there is a group, otherwise `false`.
+  Future<bool> hasGameGroup({required String gameId}) async {
+    final count =
+        await (selectOnly(groupGameTable)
+              ..where(groupGameTable.gameId.equals(gameId))
+              ..addColumns([groupGameTable.groupId.count()]))
+            .map((row) => row.read(groupGameTable.groupId.count()))
+            .getSingle();
+    return (count ?? 0) > 0;
+  }
+
+  /// Retrieves the [Group] associated with the given [gameId].
+  Future<Group> getGroupByGameId({required String gameId}) async {
+    final result = await (select(
+      groupGameTable,
+    )..where((g) => g.gameId.equals(gameId))).getSingle();
+
+    final group = await db.groupDao.getGroupById(groupId: result.groupId);
+    return group;
+  }
+
+  /// Associates a group with a game by inserting a record into the
+  /// [GroupGameTable].
+  Future<void> addGroupToGame(String gameId, String groupId) async {
+    await into(
+      groupGameTable,
+    ).insert(GroupGameTableCompanion.insert(groupId: groupId, gameId: gameId));
+  }
+}

lib/data/dao/group_game_dao.g.dart

@@ -0,0 +1,11 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'group_game_dao.dart';
+
+// ignore_for_file: type=lint
+mixin _$GroupGameDaoMixin on DatabaseAccessor<AppDatabase> {
+  $GroupTableTable get groupTable => attachedDatabase.groupTable;
+  $PlayerTableTable get playerTable => attachedDatabase.playerTable;
+  $GameTableTable get gameTable => attachedDatabase.gameTable;
+  $GroupGameTableTable get groupGameTable => attachedDatabase.groupGameTable;
+}

lib/data/dao/player_dao.dart

@@ -13,43 +13,73 @@ class PlayerDao extends DatabaseAccessor<AppDatabase> with _$PlayerDaoMixin {
   Future<List<Player>> getAllPlayers() async {
     final query = select(playerTable);
     final result = await query.get();
-    return result.map((row) => Player(id: row.id, name: row.name)).toList();
+    return result
+        .map(
+          (row) => Player(id: row.id, name: row.name, createdAt: row.createdAt),
+        )
+        .toList();
   }
 
   /// Retrieves a [Player] by their [id].
-  Future<Player> getPlayerById(String id) async {
-    final query = select(playerTable)..where((p) => p.id.equals(id));
+  Future<Player> getPlayerById({required String playerId}) async {
+    final query = select(playerTable)..where((p) => p.id.equals(playerId));
     final result = await query.getSingle();
-    return Player(id: result.id, name: result.name);
+    return Player(
+      id: result.id,
+      name: result.name,
+      createdAt: result.createdAt,
+    );
   }
 
   /// Adds a new [player] to the database.
-  Future<void> addPlayer(Player player) async {
-    await into(
-      playerTable,
-    ).insert(PlayerTableCompanion.insert(id: player.id, name: player.name));
+  /// If a player with the same ID already exists, updates their name to
+  /// the new one.
+  Future<bool> addPlayer({required Player player}) async {
+    if (!await playerExists(playerId: player.id)) {
+      await into(playerTable).insert(
+        PlayerTableCompanion.insert(
+          id: player.id,
+          name: player.name,
+          createdAt: player.createdAt,
+        ),
+      );
+      return true;
+    }
+    return false;
   }
 
   /// Deletes the player with the given [id] from the database.
   /// Returns `true` if the player was deleted, `false` if the player did not exist.
-  Future<bool> deletePlayer(String id) async {
-    final query = delete(playerTable)..where((p) => p.id.equals(id));
+  Future<bool> deletePlayer({required String playerId}) async {
+    final query = delete(playerTable)..where((p) => p.id.equals(playerId));
     final rowsAffected = await query.go();
     return rowsAffected > 0;
   }
 
   /// Checks if a player with the given [id] exists in the database.
   /// Returns `true` if the player exists, `false` otherwise.
-  Future<bool> playerExists(String id) async {
-    final query = select(playerTable)..where((p) => p.id.equals(id));
+  Future<bool> playerExists({required String playerId}) async {
+    final query = select(playerTable)..where((p) => p.id.equals(playerId));
     final result = await query.getSingleOrNull();
     return result != null;
   }
 
-  /// Updates the name of the player with the given [id] to [newName].
-  Future<void> updatePlayername(String id, String newName) async {
-    await (update(playerTable)..where((p) => p.id.equals(id))).write(
+  /// Updates the name of the player with the given [playerId] to [newName].
+  Future<void> updatePlayername({
+    required String playerId,
+    required String newName,
+  }) async {
+    await (update(playerTable)..where((p) => p.id.equals(playerId))).write(
       PlayerTableCompanion(name: Value(newName)),
     );
   }
+
+  /// Retrieves the total count of players in the database.
+  Future<int> getPlayerCount() async {
+    final count =
+        await (selectOnly(playerTable)..addColumns([playerTable.id.count()]))
+            .map((row) => row.read(playerTable.id.count()))
+            .getSingle();
+    return count ?? 0;
+  }
 }

lib/data/dao/player_game_dao.dart

@@ -0,0 +1,51 @@
+import 'package:drift/drift.dart';
+import 'package:game_tracker/data/db/database.dart';
+import 'package:game_tracker/data/db/tables/player_game_table.dart';
+import 'package:game_tracker/data/dto/player.dart';
+
+part 'player_game_dao.g.dart';
+
+@DriftAccessor(tables: [PlayerGameTable])
+class PlayerGameDao extends DatabaseAccessor<AppDatabase>
+    with _$PlayerGameDaoMixin {
+  PlayerGameDao(super.db);
+
+  /// Checks if there are any players associated with the given [gameId].
+  /// Returns `true` if there are players, otherwise `false`.
+  Future<bool> gameHasPlayers({required String gameId}) async {
+    final count =
+        await (selectOnly(playerGameTable)
+              ..where(playerGameTable.gameId.equals(gameId))
+              ..addColumns([playerGameTable.playerId.count()]))
+            .map((row) => row.read(playerGameTable.playerId.count()))
+            .getSingle();
+    return (count ?? 0) > 0;
+  }
+
+  /// Retrieves a list of [Player]s associated with the given [gameId].
+  /// Returns an empty list if no players are found.
+  Future<List<Player>> getPlayersByGameId({required String gameId}) async {
+    final result = await (select(
+      playerGameTable,
+    )..where((p) => p.gameId.equals(gameId))).get();
+
+    if (result.isEmpty) return <Player>[];
+
+    final futures = result.map(
+      (row) => db.playerDao.getPlayerById(playerId: row.playerId),
+    );
+    final players = await Future.wait(futures);
+    return players.whereType<Player>().toList();
+  }
+
+  /// Associates a player with a game by inserting a record into the
+  /// [PlayerGameTable].
+  Future<void> addPlayerToGame({
+    required String gameId,
+    required String playerId,
+  }) async {
+    await into(playerGameTable).insert(
+      PlayerGameTableCompanion.insert(playerId: playerId, gameId: gameId),
+    );
+  }
+}

lib/data/dao/player_game_dao.g.dart

@@ -0,0 +1,10 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'player_game_dao.dart';
+
+// ignore_for_file: type=lint
+mixin _$PlayerGameDaoMixin on DatabaseAccessor<AppDatabase> {
+  $PlayerTableTable get playerTable => attachedDatabase.playerTable;
+  $GameTableTable get gameTable => attachedDatabase.gameTable;
+  $PlayerGameTableTable get playerGameTable => attachedDatabase.playerGameTable;
+}

lib/data/dao/player_group_dao.dart

@@ -11,34 +11,65 @@ class PlayerGroupDao extends DatabaseAccessor<AppDatabase>
   PlayerGroupDao(super.db);
 
   /// Retrieves all players belonging to a specific group by [groupId].
-  Future<List<Player>> getPlayersOfGroupById(String groupId) async {
+  Future<List<Player>> getPlayersOfGroupById({required String groupId}) async {
     final query = select(playerGroupTable)
       ..where((pG) => pG.groupId.equals(groupId));
     final result = await query.get();
 
-    List<Player> groupMembers = [];
+    List<Player> groupMembers = List.empty(growable: true);
 
     for (var entry in result) {
-      final player = await db.playerDao.getPlayerById(entry.userId);
+      final player = await db.playerDao.getPlayerById(playerId: entry.playerId);
       groupMembers.add(player);
     }
 
     return groupMembers;
   }
 
-  /// Removes a player from a group based on [userId] and [groupId].
+  /// Removes a player from a group based on [playerId] and [groupId].
   /// Returns `true` if more than 0 rows were affected, otherwise `false`.
-  Future<bool> removePlayerFromGroup(String userId, String groupId) async {
+  Future<bool> removePlayerFromGroup({
+    required String playerId,
+    required String groupId,
+  }) async {
     final query = delete(playerGroupTable)
-      ..where((p) => p.userId.equals(userId) & p.groupId.equals(groupId));
+      ..where((p) => p.playerId.equals(playerId) & p.groupId.equals(groupId));
     final rowsAffected = await query.go();
     return rowsAffected > 0;
   }
 
-  /// Adds a player to a group with the given [userId] and [groupId].
-  Future<void> addPlayerToGroup(String userId, String groupId) async {
+  /// Adds a [player] to a group with the given [groupId].
+  /// If the player is already in the group, no action is taken.
+  /// If the player does not exist in the player table, they are added.
+  /// Returns `true` if the player was added, otherwise `false`.
+  Future<bool> addPlayerToGroup({
+    required Player player,
+    required String groupId,
+  }) async {
+    if (await isPlayerInGroup(playerId: player.id, groupId: groupId)) {
+      return false;
+    }
+
+    if (await db.playerDao.playerExists(playerId: player.id) == false) {
+      db.playerDao.addPlayer(player: player);
+    }
+
     await into(playerGroupTable).insert(
-      PlayerGroupTableCompanion.insert(userId: userId, groupId: groupId),
+      PlayerGroupTableCompanion.insert(playerId: player.id, groupId: groupId),
     );
+
+    return true;
+  }
+
+  /// Checks if a player with [playerId] is in the group with [groupId].
+  /// Returns `true` if the player is in the group, otherwise `false`.
+  Future<bool> isPlayerInGroup({
+    required String playerId,
+    required String groupId,
+  }) async {
+    final query = select(playerGroupTable)
+      ..where((p) => p.playerId.equals(playerId) & p.groupId.equals(groupId));
+    final result = await query.getSingleOrNull();
+    return result != null;
   }
 }

lib/data/db/database.dart

@@ -2,10 +2,14 @@ import 'package:drift/drift.dart';
 import 'package:drift_flutter/drift_flutter.dart';
 import 'package:game_tracker/data/dao/game_dao.dart';
 import 'package:game_tracker/data/dao/group_dao.dart';
+import 'package:game_tracker/data/dao/group_game_dao.dart';
 import 'package:game_tracker/data/dao/player_dao.dart';
+import 'package:game_tracker/data/dao/player_game_dao.dart';
 import 'package:game_tracker/data/dao/player_group_dao.dart';
 import 'package:game_tracker/data/db/tables/game_table.dart';
+import 'package:game_tracker/data/db/tables/group_game_table.dart';
 import 'package:game_tracker/data/db/tables/group_table.dart';
+import 'package:game_tracker/data/db/tables/player_game_table.dart';
 import 'package:game_tracker/data/db/tables/player_group_table.dart';
 import 'package:game_tracker/data/db/tables/player_table.dart';
 import 'package:path_provider/path_provider.dart';
@@ -13,8 +17,22 @@ import 'package:path_provider/path_provider.dart';
 part 'database.g.dart';
 
 @DriftDatabase(
-  tables: [PlayerTable, GroupTable, PlayerGroupTable, GameTable],
-  daos: [GroupDao, PlayerDao, PlayerGroupDao, GameDao],
+  tables: [
+    PlayerTable,
+    GroupTable,
+    GameTable,
+    PlayerGroupTable,
+    PlayerGameTable,
+    GroupGameTable,
+  ],
+  daos: [
+    PlayerDao,
+    GroupDao,
+    GameDao,
+    PlayerGroupDao,
+    PlayerGameDao,
+    GroupGameDao,
+  ],
 )
 class AppDatabase extends _$AppDatabase {
   AppDatabase([QueryExecutor? executor]) : super(executor ?? _openConnection());

lib/data/db/tables/game_table.dart

@@ -1,8 +1,12 @@
 import 'package:drift/drift.dart';
+import 'package:game_tracker/data/db/tables/player_table.dart';
 
 class GameTable extends Table {
   TextColumn get id => text()();
   TextColumn get name => text()();
+  TextColumn get winnerId =>
+      text().references(PlayerTable, #id, onDelete: KeyAction.cascade)();
+  DateTimeColumn get createdAt => dateTime()();
 
   @override
   Set<Column<Object>> get primaryKey => {id};

lib/data/db/tables/group_game_table.dart

@@ -0,0 +1,13 @@
+import 'package:drift/drift.dart';
+import 'package:game_tracker/data/db/tables/game_table.dart';
+import 'package:game_tracker/data/db/tables/group_table.dart';
+
+class GroupGameTable extends Table {
+  TextColumn get groupId =>
+      text().references(GroupTable, #id, onDelete: KeyAction.cascade)();
+  TextColumn get gameId =>
+      text().references(GameTable, #id, onDelete: KeyAction.cascade)();
+
+  @override
+  Set<Column<Object>> get primaryKey => {groupId, gameId};
+}

lib/data/db/tables/group_table.dart

@@ -3,6 +3,7 @@ import 'package:drift/drift.dart';
 class GroupTable extends Table {
   TextColumn get id => text()();
   TextColumn get name => text()();
+  DateTimeColumn get createdAt => dateTime()();
 
   @override
   Set<Column<Object>> get primaryKey => {id};

lib/data/db/tables/player_game_table.dart

@@ -0,0 +1,13 @@
+import 'package:drift/drift.dart';
+import 'package:game_tracker/data/db/tables/game_table.dart';
+import 'package:game_tracker/data/db/tables/player_table.dart';
+
+class PlayerGameTable extends Table {
+  TextColumn get playerId =>
+      text().references(PlayerTable, #id, onDelete: KeyAction.cascade)();
+  TextColumn get gameId =>
+      text().references(GameTable, #id, onDelete: KeyAction.cascade)();
+
+  @override
+  Set<Column<Object>> get primaryKey => {playerId, gameId};
+}

lib/data/db/tables/player_group_table.dart

@@ -3,9 +3,11 @@ import 'package:game_tracker/data/db/tables/group_table.dart';
 import 'package:game_tracker/data/db/tables/player_table.dart';
 
 class PlayerGroupTable extends Table {
-  TextColumn get userId => text().references(PlayerTable, #id)();
-  TextColumn get groupId => text().references(GroupTable, #id)();
+  TextColumn get playerId =>
+      text().references(PlayerTable, #id, onDelete: KeyAction.cascade)();
+  TextColumn get groupId =>
+      text().references(GroupTable, #id, onDelete: KeyAction.cascade)();
 
   @override
-  Set<Column<Object>> get primaryKey => {userId, groupId};
+  Set<Column<Object>> get primaryKey => {playerId, groupId};
 }

lib/data/db/tables/player_table.dart

@@ -3,6 +3,7 @@ import 'package:drift/drift.dart';
 class PlayerTable extends Table {
   TextColumn get id => text()();
   TextColumn get name => text()();
+  DateTimeColumn get createdAt => dateTime()();
 
   @override
   Set<Column<Object>> get primaryKey => {id};

lib/data/dto/game.dart

@@ -1,6 +1,28 @@
+import 'package:clock/clock.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/data/dto/player.dart';
+import 'package:uuid/uuid.dart';
+
 class Game {
   final String id;
   final String name;
+  final List<Player>? players;
+  final Group? group;
+  final String winner;
+  final DateTime createdAt;
 
-  Game({required this.id, required this.name});
+  Game({
+    String? id,
+    DateTime? createdAt,
+    required this.name,
+    this.players,
+    this.group,
+    this.winner = '',
+  }) : id = id ?? const Uuid().v4(),
+       createdAt = createdAt ?? clock.now();
+
+  @override
+  String toString() {
+    return 'Game{\n\tid: $id,\n\tname: $name,\n\tplayers: $players,\n\tgroup: $group,\n\twinner: $winner\n}';
+  }
 }

lib/data/dto/group.dart

@@ -1,9 +1,23 @@
+import 'package:clock/clock.dart';
 import 'package:game_tracker/data/dto/player.dart';
+import 'package:uuid/uuid.dart';
 
 class Group {
   final String id;
   final String name;
   final List<Player> members;
+  final DateTime createdAt;
 
-  Group({required this.id, required this.name, required this.members});
+  Group({
+    String? id,
+    DateTime? createdAt,
+    required this.name,
+    required this.members,
+  }) : id = id ?? const Uuid().v4(),
+       createdAt = createdAt ?? clock.now();
+
+  @override
+  String toString() {
+    return 'Group{id: $id, name: $name,members: $members}';
+  }
 }

lib/data/dto/player.dart

@@ -1,6 +1,17 @@
+import 'package:clock/clock.dart';
+import 'package:uuid/uuid.dart';
+
 class Player {
   final String id;
   final String name;
+  final DateTime createdAt;
 
-  Player({required this.id, required this.name});
+  Player({String? id, DateTime? createdAt, required this.name})
+    : id = id ?? const Uuid().v4(),
+      createdAt = createdAt ?? clock.now();
+
+  @override
+  String toString() {
+    return 'Player{id: $id,name: $name}';
+  }
 }

lib/main.dart

@@ -8,14 +8,14 @@ void main() {
   runApp(
     Provider<AppDatabase>(
       create: (context) => AppDatabase(),
-      child: const MyApp(),
+      child: const GameTracker(),
       dispose: (context, db) => db.close(),
     ),
   );
 }
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
+class GameTracker extends StatelessWidget {
+  const GameTracker({super.key});
 
   @override
   Widget build(BuildContext context) {

lib/presentation/views/main_menu/create_group_view.dart

@@ -0,0 +1,309 @@
+import 'package:flutter/material.dart' hide ButtonStyle;
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/core/enums.dart';
+import 'package:game_tracker/data/db/database.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/data/dto/player.dart';
+import 'package:game_tracker/presentation/widgets/buttons/custom_width_button.dart';
+import 'package:game_tracker/presentation/widgets/custom_search_bar.dart';
+import 'package:game_tracker/presentation/widgets/text_input_field.dart';
+import 'package:game_tracker/presentation/widgets/tiles/text_icon_list_tile.dart';
+import 'package:game_tracker/presentation/widgets/tiles/text_icon_tile.dart';
+import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
+import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+
+class CreateGroupView extends StatefulWidget {
+  const CreateGroupView({super.key});
+
+  @override
+  State<CreateGroupView> createState() => _CreateGroupViewState();
+}
+
+class _CreateGroupViewState extends State<CreateGroupView> {
+  List<Player> selectedPlayers = [];
+  List<Player> suggestedPlayers = [];
+  List<Player> allPlayers = [];
+  late final AppDatabase db;
+  late Future<List<Player>> _allPlayersFuture;
+  late final List<Player> skeletonData = List.filled(
+    7,
+    Player(name: 'Player 0'),
+  );
+  final _groupNameController = TextEditingController();
+  final _searchBarController = TextEditingController();
+
+  @override
+  void initState() {
+    super.initState();
+    db = Provider.of<AppDatabase>(context, listen: false);
+    _allPlayersFuture = db.playerDao.getAllPlayers();
+    _allPlayersFuture.then((loadedPlayers) {
+      setState(() {
+        loadedPlayers.sort((a, b) => a.name.compareTo(b.name));
+        allPlayers = [...loadedPlayers];
+        suggestedPlayers = [...loadedPlayers];
+      });
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Scaffold(
+        backgroundColor: CustomTheme.backgroundColor,
+        appBar: AppBar(
+          backgroundColor: CustomTheme.backgroundColor,
+          scrolledUnderElevation: 0,
+          title: const Text(
+            'Create new group',
+            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+          ),
+          centerTitle: true,
+        ),
+        body: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Container(
+              margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+              child: TextInputField(
+                controller: _groupNameController,
+                hintText: 'Group name',
+                onChanged: (value) {
+                  setState(() {});
+                },
+              ),
+            ),
+            Expanded(
+              child: Container(
+                margin: const EdgeInsets.symmetric(
+                  horizontal: 12,
+                  vertical: 10,
+                ),
+                padding: const EdgeInsets.symmetric(
+                  vertical: 10,
+                  horizontal: 10,
+                ),
+                decoration: BoxDecoration(
+                  color: CustomTheme.boxColor,
+                  border: Border.all(color: CustomTheme.boxBorder),
+                  borderRadius: BorderRadius.circular(12),
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    CustomSearchBar(
+                      controller: _searchBarController,
+                      constraints: const BoxConstraints(
+                        maxHeight: 45,
+                        minHeight: 45,
+                      ),
+                      hintText: 'Search for players',
+                      onChanged: (value) {
+                        setState(() {
+                          if (value.isEmpty) {
+                            suggestedPlayers = allPlayers.where((player) {
+                              return !selectedPlayers.contains(player);
+                            }).toList();
+                          } else {
+                            suggestedPlayers = allPlayers.where((player) {
+                              final bool nameMatches = player.name
+                                  .toLowerCase()
+                                  .contains(value.toLowerCase());
+                              final bool isNotSelected = !selectedPlayers
+                                  .contains(player);
+                              return nameMatches && isNotSelected;
+                            }).toList();
+                          }
+                        });
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    Text(
+                      'Ausgewählte Spieler: (${selectedPlayers.length})',
+                      style: const TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    Wrap(
+                      alignment: WrapAlignment.start,
+                      crossAxisAlignment: WrapCrossAlignment.start,
+                      spacing: 8.0,
+                      runSpacing: 8.0,
+                      children: <Widget>[
+                        for (var player in selectedPlayers)
+                          TextIconTile(
+                            text: player.name,
+                            onIconTap: () {
+                              setState(() {
+                                final currentSearch = _searchBarController.text
+                                    .toLowerCase();
+                                selectedPlayers.remove(player);
+                                if (currentSearch.isEmpty ||
+                                    player.name.toLowerCase().contains(
+                                      currentSearch,
+                                    )) {
+                                  suggestedPlayers.add(player);
+                                  suggestedPlayers.sort(
+                                    (a, b) => a.name.compareTo(b.name),
+                                  );
+                                }
+                              });
+                            },
+                          ),
+                      ],
+                    ),
+                    const SizedBox(height: 10),
+                    const Text(
+                      'Alle Spieler:',
+                      style: TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    FutureBuilder(
+                      future: _allPlayersFuture,
+                      builder:
+                          (
+                            BuildContext context,
+                            AsyncSnapshot<List<Player>> snapshot,
+                          ) {
+                            if (snapshot.hasError) {
+                              return const Center(
+                                child: TopCenteredMessage(
+                                  icon: Icons.report,
+                                  title: 'Error',
+                                  message: 'Player data couldn\'t\nbe loaded.',
+                                ),
+                              );
+                            }
+                            if (snapshot.connectionState ==
+                                    ConnectionState.done &&
+                                (!snapshot.hasData ||
+                                    snapshot.data!.isEmpty ||
+                                    (selectedPlayers.isEmpty &&
+                                        allPlayers.isEmpty))) {
+                              return const Center(
+                                child: TopCenteredMessage(
+                                  icon: Icons.info,
+                                  title: 'Info',
+                                  message: 'No players created yet.',
+                                ),
+                              );
+                            }
+                            final bool isLoading =
+                                snapshot.connectionState ==
+                                ConnectionState.waiting;
+                            return Expanded(
+                              child: Skeletonizer(
+                                effect: PulseEffect(
+                                  from: Colors.grey[800]!,
+                                  to: Colors.grey[600]!,
+                                  duration: const Duration(milliseconds: 800),
+                                ),
+                                enabled: isLoading,
+                                enableSwitchAnimation: true,
+                                switchAnimationConfig:
+                                    const SwitchAnimationConfig(
+                                      duration: Duration(milliseconds: 200),
+                                      switchInCurve: Curves.linear,
+                                      switchOutCurve: Curves.linear,
+                                      transitionBuilder: AnimatedSwitcher
+                                          .defaultTransitionBuilder,
+                                      layoutBuilder:
+                                          AnimatedSwitcher.defaultLayoutBuilder,
+                                    ),
+                                child:
+                                    (suggestedPlayers.isEmpty &&
+                                        allPlayers.isNotEmpty)
+                                    ? TopCenteredMessage(
+                                        icon: Icons.info,
+                                        title: 'Info',
+                                        message:
+                                            (selectedPlayers.length ==
+                                                allPlayers.length)
+                                            ? 'No more players to add.'
+                                            : 'No players found with that name.',
+                                      )
+                                    : ListView.builder(
+                                        itemCount: suggestedPlayers.length,
+                                        itemBuilder:
+                                            (BuildContext context, int index) {
+                                              return TextIconListTile(
+                                                text: suggestedPlayers[index]
+                                                    .name,
+                                                onPressed: () {
+                                                  setState(() {
+                                                    if (!selectedPlayers.contains(
+                                                      suggestedPlayers[index],
+                                                    )) {
+                                                      selectedPlayers.add(
+                                                        suggestedPlayers[index],
+                                                      );
+                                                      selectedPlayers.sort(
+                                                        (a, b) => a.name
+                                                            .compareTo(b.name),
+                                                      );
+                                                      suggestedPlayers.remove(
+                                                        suggestedPlayers[index],
+                                                      );
+                                                    }
+                                                  });
+                                                },
+                                              );
+                                            },
+                                      ),
+                              ),
+                            );
+                          },
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            CustomWidthButton(
+              text: 'Create group',
+              sizeRelativeToWidth: 0.95,
+              buttonType: ButtonType.primary,
+              onPressed:
+                  (_groupNameController.text.isEmpty || selectedPlayers.isEmpty)
+                  ? null
+                  : () async {
+                      bool success = await db.groupDao.addGroup(
+                        group: Group(
+                          name: _groupNameController.text,
+                          members: selectedPlayers,
+                        ),
+                      );
+                      if (!context.mounted) return;
+                      if (success) {
+                        _groupNameController.clear();
+                        _searchBarController.clear();
+                        selectedPlayers.clear();
+                        Navigator.pop(context);
+                      } else {
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          SnackBar(
+                            backgroundColor: CustomTheme.boxColor,
+                            content: const Center(
+                              child: Text(
+                                'Error while creating group, please try again',
+                                style: TextStyle(color: Colors.white),
+                              ),
+                            ),
+                          ),
+                        );
+                      }
+                      setState(() {});
+                    },
+            ),
+            const SizedBox(height: 20),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/views/main_menu/game_history_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/presentation/widgets/tiles/double_row_info_tile.dart';
 import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
-import 'package:game_tracker/presentation/widgets/double_row_info_tile.dart';
 
 class GameHistoryView extends StatefulWidget {
   const GameHistoryView({super.key});
@@ -134,16 +134,16 @@ class _GameHistoryViewState extends State<GameHistoryView> {
         children: [
           Column(
             children: [
-              Container(margin: EdgeInsets.only(bottom: 75)),
+              Container(margin: const EdgeInsets.only(bottom: 75)),
               Expanded(
                 child: gameHistoryListView(allGameData, suggestedGameData),
               ),
             ],
           ),
           Container(
-            margin: EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
+            margin: const EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
             child: SearchBar(
-              leading: Icon(Icons.search),
+              leading: const Icon(Icons.search),
               onChanged: (value) {
                 if (value.isEmpty) {
                   setState(() {
@@ -178,18 +178,26 @@ class _GameHistoryViewState extends State<GameHistoryView> {
 
 Widget gameHistoryListView(allGameData, suggestedGameData) {
   if (suggestedGameData.isEmpty && allGameData.isEmpty) {
-    return TopCenteredMessage("Keine Spiele erstellt");
+    return const TopCenteredMessage(
+      icon: Icons.info,
+      title: 'Info',
+      message: 'Keine Spiele erstellt',
+    );
   } else if (suggestedGameData.isEmpty) {
-    return TopCenteredMessage("Kein Spiel mit den Suchparametern gefunden.");
+    return const TopCenteredMessage(
+      icon: Icons.search,
+      title: 'Info',
+      message: 'Kein Spiel mit den Suchparametern gefunden.',
+    );
   }
   return ListView.builder(
     itemCount: suggestedGameData.length,
     itemBuilder: (context, index) {
       final currentGame = suggestedGameData[index];
       return doubleRowInfoTile(
-        currentGame['game'] + ": ",
+        currentGame['game'] + ': ',
         currentGame['title'],
-        currentGame['players'].toString() + " Spieler",
+        "${currentGame['players']} Spieler",
         currentGame['group'],
         currentGame['date'],
       );

lib/presentation/views/main_menu/groups_view.dart

@@ -1,10 +1,129 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/data/db/database.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/data/dto/player.dart';
+import 'package:game_tracker/presentation/views/main_menu/create_group_view.dart';
+import 'package:game_tracker/presentation/widgets/buttons/custom_width_button.dart';
+import 'package:game_tracker/presentation/widgets/tiles/group_tile.dart';
+import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
+import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
-class GroupsView extends StatelessWidget {
+class GroupsView extends StatefulWidget {
   const GroupsView({super.key});
 
+  @override
+  State<GroupsView> createState() => _GroupsViewState();
+}
+
+class _GroupsViewState extends State<GroupsView> {
+  late Future<List<Group>> _allGroupsFuture;
+  late final AppDatabase db;
+
+  final player = Player(name: 'Skeleton Player');
+  late final List<Group> skeletonData = List.filled(
+    7,
+    Group(
+      name: 'Skeleton Game',
+      members: [player, player, player, player, player, player],
+    ),
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    db = Provider.of<AppDatabase>(context, listen: false);
+    _allGroupsFuture = db.groupDao.getAllGroups();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return const Center(child: Text('Groups View'));
+    return Scaffold(
+      backgroundColor: CustomTheme.backgroundColor,
+      body: Stack(
+        alignment: Alignment.center,
+        children: [
+          FutureBuilder<List<Group>>(
+            future: _allGroupsFuture,
+            builder:
+                (BuildContext context, AsyncSnapshot<List<Group>> snapshot) {
+                  if (snapshot.hasError) {
+                    return const Center(
+                      child: TopCenteredMessage(
+                        icon: Icons.report,
+                        title: 'Error',
+                        message: 'Group data couldn\'t\nbe loaded.',
+                      ),
+                    );
+                  }
+                  if (snapshot.connectionState == ConnectionState.done &&
+                      (!snapshot.hasData || snapshot.data!.isEmpty)) {
+                    return const Center(
+                      child: TopCenteredMessage(
+                        icon: Icons.info,
+                        title: 'Info',
+                        message: 'No groups created yet.',
+                      ),
+                    );
+                  }
+                  final bool isLoading =
+                      snapshot.connectionState == ConnectionState.waiting;
+                  final List<Group> groups = isLoading
+                      ? skeletonData
+                      : (snapshot.data ?? []);
+                  return Skeletonizer(
+                    effect: PulseEffect(
+                      from: Colors.grey[800]!,
+                      to: Colors.grey[600]!,
+                      duration: const Duration(milliseconds: 800),
+                    ),
+                    enabled: isLoading,
+                    enableSwitchAnimation: true,
+                    switchAnimationConfig: const SwitchAnimationConfig(
+                      duration: Duration(milliseconds: 200),
+                      switchInCurve: Curves.linear,
+                      switchOutCurve: Curves.linear,
+                      transitionBuilder:
+                          AnimatedSwitcher.defaultTransitionBuilder,
+                      layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
+                    ),
+                    child: ListView.builder(
+                      padding: const EdgeInsets.only(bottom: 85),
+                      itemCount: groups.length + 1,
+                      itemBuilder: (BuildContext context, int index) {
+                        if (index == groups.length) {
+                          return const SizedBox(height: 60);
+                        }
+                        return GroupTile(group: groups[index]);
+                      },
+                    ),
+                  );
+                },
+          ),
+
+          Positioned(
+            bottom: 80,
+            child: CustomWidthButton(
+              text: 'Create Group',
+              sizeRelativeToWidth: 0.90,
+              onPressed: () async {
+                await Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                    builder: (context) {
+                      return const CreateGroupView();
+                    },
+                  ),
+                );
+                setState(() {
+                  _allGroupsFuture = db.groupDao.getAllGroups();
+                });
+              },
+            ),
+          ),
+        ],
+      ),
+    );
   }
 }

lib/presentation/views/main_menu/home_view.dart

@@ -1,10 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/data/db/database.dart';
-import 'package:game_tracker/presentation/widgets/game_tile.dart';
-import 'package:game_tracker/presentation/widgets/quick_create_button.dart';
+import 'package:game_tracker/presentation/widgets/buttons/quick_create_button.dart';
+import 'package:game_tracker/presentation/widgets/tiles/game_tile.dart';
 import 'package:game_tracker/presentation/widgets/tiles/info_tile.dart';
 import 'package:game_tracker/presentation/widgets/tiles/quick_info_tile.dart';
 import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class HomeView extends StatefulWidget {
   const HomeView({super.key});
@@ -16,6 +17,7 @@ class HomeView extends StatefulWidget {
 class _HomeViewState extends State<HomeView> {
   late Future<int> _gameCountFuture;
   late Future<int> _groupCountFuture;
+  bool isLoading = true;
 
   @override
   initState() {
@@ -23,120 +25,165 @@ class _HomeViewState extends State<HomeView> {
     final db = Provider.of<AppDatabase>(context, listen: false);
     _gameCountFuture = db.gameDao.getGameCount();
     _groupCountFuture = db.groupDao.getGroupCount();
+
+    Future.wait([_gameCountFuture, _groupCountFuture]).then((_) async {
+      await Future.delayed(const Duration(milliseconds: 50));
+      if (mounted) {
+        setState(() {
+          isLoading = false;
+        });
+      }
+    });
   }
 
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(
       builder: (BuildContext context, BoxConstraints constraints) {
-        return SingleChildScrollView(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: [
-              Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  FutureBuilder<int>(
-                    future: _gameCountFuture,
-                    builder: (context, snapshot) {
-                      final int count = (snapshot.hasData) ? snapshot.data! : 0;
-                      return QuickInfoTile(
-                        width: constraints.maxWidth * 0.45,
-                        height: constraints.maxHeight * 0.15,
-                        title: 'Games',
-                        icon: Icons.groups_rounded,
-                        value: count,
-                      );
-                    },
-                  ),
-                  SizedBox(width: constraints.maxWidth * 0.05),
-                  FutureBuilder<int>(
-                    future: _groupCountFuture,
-                    builder: (context, snapshot) {
-                      final int count =
-                          (snapshot.connectionState == ConnectionState.done &&
-                              snapshot.hasData)
-                          ? snapshot.data!
-                          : 0;
-                      return QuickInfoTile(
-                        width: constraints.maxWidth * 0.45,
-                        height: constraints.maxHeight * 0.15,
-                        title: 'Groups',
-                        icon: Icons.groups_rounded,
-                        value: count,
-                      );
-                    },
-                  ),
-                ],
-              ),
-              Padding(
-                padding: const EdgeInsets.symmetric(vertical: 16.0),
-                child: InfoTile(
-                  width: constraints.maxWidth * 0.95,
-                  title: 'Recent Games',
-                  icon: Icons.timer,
-                  content: const Padding(
-                    padding: EdgeInsets.symmetric(horizontal: 40.0),
-                    child: Column(
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        GameTile(
-                          gameTitle: 'Gamenight',
-                          gameType: 'Cabo',
-                          ruleset: 'Lowest Points',
-                          players: '5 Players',
-                          winner: 'Leonard',
-                        ),
-                        Padding(
-                          padding: EdgeInsets.symmetric(vertical: 8.0),
-                          child: Divider(),
-                        ),
-                        GameTile(
-                          gameTitle: 'Schoolbreak',
-                          gameType: 'Uno',
-                          ruleset: 'Highest Points',
-                          players: 'The Gang',
-                          winner: 'Lina',
-                        ),
-                        SizedBox(height: 8),
-                      ],
-                    ),
-                  ),
-                ),
-              ),
-              InfoTile(
-                width: constraints.maxWidth * 0.95,
-                title: 'Quick Create',
-                icon: Icons.add_box_rounded,
-                content: Column(
-                  spacing: 8,
+        return Skeletonizer(
+          effect: PulseEffect(
+            from: Colors.grey[800]!,
+            to: Colors.grey[600]!,
+            duration: const Duration(milliseconds: 800),
+          ),
+          enabled: isLoading,
+          enableSwitchAnimation: true,
+          switchAnimationConfig: const SwitchAnimationConfig(
+            duration: Duration(milliseconds: 200),
+            switchInCurve: Curves.linear,
+            switchOutCurve: Curves.linear,
+            transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
+            layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                      children: [
-                        QuickCreateButton(text: 'Category 1', onPressed: () {}),
-                        QuickCreateButton(text: 'Category 2', onPressed: () {}),
-                      ],
+                    FutureBuilder<int>(
+                      future: _gameCountFuture,
+                      builder: (context, snapshot) {
+                        final int count = (snapshot.hasData)
+                            ? snapshot.data!
+                            : 0;
+                        return QuickInfoTile(
+                          width: constraints.maxWidth * 0.45,
+                          height: constraints.maxHeight * 0.15,
+                          title: 'Games',
+                          icon: Icons.groups_rounded,
+                          value: count,
+                        );
+                      },
                     ),
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                      children: [
-                        QuickCreateButton(text: 'Category 3', onPressed: () {}),
-                        QuickCreateButton(text: 'Category 4', onPressed: () {}),
-                      ],
-                    ),
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                      children: [
-                        QuickCreateButton(text: 'Category 5', onPressed: () {}),
-                        QuickCreateButton(text: 'Category 6', onPressed: () {}),
-                      ],
+                    SizedBox(width: constraints.maxWidth * 0.05),
+                    FutureBuilder<int>(
+                      future: _groupCountFuture,
+                      builder: (context, snapshot) {
+                        final int count =
+                            (snapshot.connectionState == ConnectionState.done &&
+                                snapshot.hasData)
+                            ? snapshot.data!
+                            : 0;
+                        return QuickInfoTile(
+                          width: constraints.maxWidth * 0.45,
+                          height: constraints.maxHeight * 0.15,
+                          title: 'Groups',
+                          icon: Icons.groups_rounded,
+                          value: count,
+                        );
+                      },
                     ),
                   ],
                 ),
-              ),
-            ],
+                Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 16.0),
+                  child: InfoTile(
+                    width: constraints.maxWidth * 0.95,
+                    title: 'Recent Games',
+                    icon: Icons.timer,
+                    content: const Padding(
+                      padding: EdgeInsets.symmetric(horizontal: 40.0),
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          GameTile(
+                            gameTitle: 'Gamenight',
+                            gameType: 'Cabo',
+                            ruleset: 'Lowest Points',
+                            players: '5 Players',
+                            winner: 'Leonard',
+                          ),
+                          Padding(
+                            padding: EdgeInsets.symmetric(vertical: 8.0),
+                            child: Divider(),
+                          ),
+                          GameTile(
+                            gameTitle: 'Schoolbreak',
+                            gameType: 'Uno',
+                            ruleset: 'Highest Points',
+                            players: 'The Gang',
+                            winner: 'Lina',
+                          ),
+                          SizedBox(height: 8),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+                InfoTile(
+                  width: constraints.maxWidth * 0.95,
+                  title: 'Quick Create',
+                  icon: Icons.add_box_rounded,
+                  content: Column(
+                    spacing: 8,
+                    children: [
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: [
+                          QuickCreateButton(
+                            text: 'Category 1',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 2',
+                            onPressed: () {},
+                          ),
+                        ],
+                      ),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: [
+                          QuickCreateButton(
+                            text: 'Category 3',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 4',
+                            onPressed: () {},
+                          ),
+                        ],
+                      ),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: [
+                          QuickCreateButton(
+                            text: 'Category 5',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 6',
+                            onPressed: () {},
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
           ),
         );
       },

lib/presentation/widgets/buttons/custom_width_button.dart

@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/core/enums.dart';
+
+class CustomWidthButton extends StatelessWidget {
+  const CustomWidthButton({
+    super.key,
+    required this.text,
+    this.buttonType = ButtonType.primary,
+    required this.sizeRelativeToWidth,
+    this.onPressed,
+  });
+
+  final String text;
+  final double sizeRelativeToWidth;
+  final VoidCallback? onPressed;
+  final ButtonType buttonType;
+
+  @override
+  Widget build(BuildContext context) {
+    final Color buttonBackgroundColor;
+    final Color disabledBackgroundColor;
+    final Color borderSideColor;
+    final Color textcolor;
+    final Color disabledTextColor;
+
+    if (buttonType == ButtonType.primary) {
+      textcolor = Colors.white;
+      disabledTextColor = Color.lerp(textcolor, Colors.black, 0.5)!;
+      buttonBackgroundColor = CustomTheme.primaryColor;
+      disabledBackgroundColor = Color.lerp(
+        buttonBackgroundColor,
+        Colors.black,
+        0.5,
+      )!;
+
+      return ElevatedButton(
+        onPressed: onPressed,
+        style: ElevatedButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
+          disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
+          minimumSize: Size(
+            MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
+            60,
+          ),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
+        ),
+      );
+    } else if (buttonType == ButtonType.secondary) {
+      textcolor = CustomTheme.primaryColor;
+      disabledTextColor = Color.lerp(textcolor, Colors.black, 0.5)!;
+      buttonBackgroundColor = Colors.transparent;
+      disabledBackgroundColor = Colors.transparent;
+      borderSideColor = onPressed != null
+          ? CustomTheme.primaryColor
+          : Color.lerp(CustomTheme.primaryColor, Colors.black, 0.5)!;
+
+      return OutlinedButton(
+        onPressed: onPressed,
+        style: OutlinedButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
+          disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
+          minimumSize: Size(
+            MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
+            60,
+          ),
+          side: BorderSide(color: borderSideColor, width: 2),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
+        ),
+      );
+    } else {
+      textcolor = CustomTheme.primaryColor;
+      disabledTextColor = Color.lerp(
+        CustomTheme.primaryColor,
+        Colors.black,
+        0.5,
+      )!;
+      buttonBackgroundColor = Colors.transparent;
+      disabledBackgroundColor = Colors.transparent;
+
+      return TextButton(
+        onPressed: onPressed,
+        style: TextButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
+          disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
+          minimumSize: Size(
+            MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
+            60,
+          ),
+          side: const BorderSide(style: BorderStyle.none),
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
+        ),
+      );
+    }
+  }
+}

lib/presentation/widgets/custom_search_bar.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class CustomSearchBar extends StatelessWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final ValueChanged<String>? onChanged;
+  final BoxConstraints? constraints;
+
+  const CustomSearchBar({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    this.onChanged,
+    this.constraints,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SearchBar(
+      controller: controller,
+      constraints:
+          constraints ?? const BoxConstraints(maxHeight: 45, minHeight: 45),
+      hintText: hintText,
+      onChanged: onChanged,
+      hintStyle: WidgetStateProperty.all(const TextStyle(fontSize: 16)),
+      leading: const Icon(Icons.search),
+      backgroundColor: WidgetStateProperty.all(CustomTheme.boxColor),
+      side: WidgetStateProperty.all(BorderSide(color: CustomTheme.boxBorder)),
+      shape: WidgetStateProperty.all(
+        RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      ),
+      elevation: WidgetStateProperty.all(0),
+    );
+  }
+}

lib/presentation/widgets/text_input_field.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class TextInputField extends StatelessWidget {
+  final TextEditingController controller;
+  final ValueChanged<String>? onChanged;
+  final String hintText;
+
+  const TextInputField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    this.onChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      controller: controller,
+      onChanged: onChanged,
+      decoration: InputDecoration(
+        filled: true,
+        fillColor: CustomTheme.boxColor,
+        hintText: hintText,
+        hintStyle: const TextStyle(fontSize: 18),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(12)),
+          borderSide: BorderSide(color: CustomTheme.boxBorder),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(12)),
+          borderSide: BorderSide(color: CustomTheme.boxBorder),
+        ),
+        floatingLabelBehavior: FloatingLabelBehavior.never,
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/double_row_info_tile.dart

@@ -9,8 +9,8 @@ Widget doubleRowInfoTile(
   String titleLowerRight,
 ) {
   return Container(
-    margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
-    padding: EdgeInsets.all(10),
+    margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+    padding: const EdgeInsets.all(10),
     decoration: BoxDecoration(
       borderRadius: BorderRadius.circular(20),
       color: CustomTheme.secondaryColor,
@@ -22,18 +22,18 @@ Widget doubleRowInfoTile(
             Expanded(
               flex: 10,
               child: Text(
-                "$titleOneUpperLeft $titleTwoUpperLeft",
-                style: TextStyle(fontSize: 20),
+                '$titleOneUpperLeft $titleTwoUpperLeft',
+                style: const TextStyle(fontSize: 20),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 1,
               ),
             ),
-            Spacer(),
+            const Spacer(),
             Expanded(
               flex: 3,
               child: Text(
-                "$titleUpperRight",
-                style: TextStyle(fontSize: 20),
+                titleUpperRight,
+                style: const TextStyle(fontSize: 20),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 1,
                 textAlign: TextAlign.end,
@@ -46,18 +46,18 @@ Widget doubleRowInfoTile(
             Expanded(
               flex: 10,
               child: Text(
-                "$titleLowerLeft",
-                style: TextStyle(fontSize: 20),
+                titleLowerLeft,
+                style: const TextStyle(fontSize: 20),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 1,
               ),
             ),
-            Spacer(),
+            const Spacer(),
             Expanded(
               flex: 4,
               child: Text(
-                "$titleLowerRight",
-                style: TextStyle(fontSize: 20),
+                titleLowerRight,
+                style: const TextStyle(fontSize: 20),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 1,
                 textAlign: TextAlign.end,

lib/presentation/widgets/tiles/game_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class GameTile extends StatefulWidget {
   final String gameTitle;
@@ -48,9 +49,11 @@ class _GameTileState extends State<GameTile> {
             borderRadius: BorderRadius.circular(4),
             color: CustomTheme.primaryColor,
           ),
-          child: Text(
-            widget.ruleset,
-            style: const TextStyle(fontWeight: FontWeight.bold),
+          child: Skeleton.ignore(
+            child: Text(
+              widget.ruleset,
+              style: const TextStyle(fontWeight: FontWeight.bold),
+            ),
           ),
         ),
         Center(
@@ -68,19 +71,21 @@ class _GameTileState extends State<GameTile> {
               borderRadius: BorderRadius.circular(4),
               color: Colors.yellow.shade300,
             ),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                const Icon(Icons.emoji_events, color: Colors.black, size: 20),
-                Text(
-                  widget.winner,
-                  textAlign: TextAlign.center,
-                  style: const TextStyle(
-                    fontWeight: FontWeight.bold,
-                    color: Colors.black87,
+            child: Skeleton.ignore(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const Icon(Icons.emoji_events, color: Colors.black, size: 20),
+                  Text(
+                    widget.winner,
+                    textAlign: TextAlign.center,
+                    style: const TextStyle(
+                      fontWeight: FontWeight.bold,
+                      color: Colors.black87,
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
             ),
           ),
         ),

lib/presentation/widgets/tiles/group_tile.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/presentation/widgets/tiles/text_icon_tile.dart';
+
+class GroupTile extends StatelessWidget {
+  const GroupTile({super.key, required this.group});
+
+  final Group group;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+      decoration: BoxDecoration(
+        color: CustomTheme.boxColor,
+        border: Border.all(color: CustomTheme.boxBorder),
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Flexible(
+                child: Text(
+                  group.name,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 18,
+                  ),
+                ),
+              ),
+              Row(
+                children: [
+                  Text(
+                    '${group.members.length}',
+                    style: const TextStyle(
+                      fontWeight: FontWeight.w900,
+                      fontSize: 18,
+                    ),
+                  ),
+                  const SizedBox(width: 3),
+                  const Icon(Icons.group, size: 22),
+                ],
+              ),
+            ],
+          ),
+          const SizedBox(height: 5),
+          Wrap(
+            alignment: WrapAlignment.start,
+            crossAxisAlignment: WrapCrossAlignment.start,
+            spacing: 12.0,
+            runSpacing: 8.0,
+            children: <Widget>[
+              for (var member in group.members)
+                TextIconTile(text: member.name, iconEnabled: false),
+            ],
+          ),
+          const SizedBox(height: 2.5),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/text_icon_list_tile.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class TextIconListTile extends StatelessWidget {
+  final String text;
+  final VoidCallback? onPressed;
+  final bool iconEnabled;
+
+  const TextIconListTile({
+    super.key,
+    required this.text,
+    this.onPressed,
+    this.iconEnabled = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
+      padding: const EdgeInsets.symmetric(horizontal: 15),
+      decoration: BoxDecoration(
+        color: CustomTheme.boxColor,
+        border: Border.all(color: CustomTheme.boxBorder),
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          Flexible(
+            child: Container(
+              padding: const EdgeInsets.symmetric(vertical: 12.5),
+              child: Text(
+                text,
+                overflow: TextOverflow.ellipsis,
+                style: const TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+            ),
+          ),
+          if (iconEnabled)
+            GestureDetector(
+              onTap: onPressed,
+              child: const Icon(Icons.add, size: 20),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/text_icon_tile.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class TextIconTile extends StatelessWidget {
+  final String text;
+  final bool iconEnabled;
+  final VoidCallback? onIconTap;
+
+  const TextIconTile({
+    super.key,
+    required this.text,
+    this.onIconTap,
+    this.iconEnabled = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(5),
+      decoration: BoxDecoration(
+        color: CustomTheme.onBoxColor,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (iconEnabled) const SizedBox(width: 3),
+          Flexible(
+            child: Text(
+              text,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            ),
+          ),
+          if (iconEnabled) ...<Widget>[
+            const SizedBox(width: 3),
+            GestureDetector(
+              onTap: onIconTap,
+              child: const Icon(Icons.close, size: 20),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/top_centered_message.dart

@@ -1,14 +1,39 @@
 import 'package:flutter/material.dart';
 
-Widget TopCenteredMessage(String message) {
-  return Container(
-    padding: EdgeInsets.only(top: 100),
-    margin: EdgeInsets.only(left: 10, right: 10),
-    alignment: Alignment.topCenter,
-    child: Text(
-      "$message",
-      style: TextStyle(fontSize: 20),
-      textAlign: TextAlign.center,
-    ),
-  );
+class TopCenteredMessage extends StatelessWidget {
+  const TopCenteredMessage({
+    super.key,
+    required this.icon,
+    required this.title,
+    required this.message,
+  });
+
+  final String title;
+  final String message;
+  final IconData icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(top: 100),
+      margin: const EdgeInsets.symmetric(horizontal: 10),
+      alignment: Alignment.topCenter,
+      child: Column(
+        children: [
+          Icon(icon, size: 45),
+          const SizedBox(height: 10),
+          Text(
+            title,
+            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            textAlign: TextAlign.center,
+          ),
+          Text(
+            message,
+            style: const TextStyle(fontSize: 16),
+            textAlign: TextAlign.center,
+          ),
+        ],
+      ),
+    );
+  }
 }

pubspec.yaml

@@ -18,6 +18,9 @@ dependencies:
   drift_flutter: ^0.2.4
   path_provider: ^2.1.5
   provider: ^6.1.5
+  skeletonizer: ^2.1.0+1
+  uuid: ^4.5.2
+  clock: ^1.1.2
 
 dev_dependencies:
   flutter_test:

test/db_tests/game_test.dart

@@ -0,0 +1,116 @@
+import 'package:clock/clock.dart';
+import 'package:drift/drift.dart';
+import 'package:drift/native.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:game_tracker/data/db/database.dart';
+import 'package:game_tracker/data/dto/game.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/data/dto/player.dart';
+
+void main() {
+  late AppDatabase database;
+  late Player player1;
+  late Player player2;
+  late Player player3;
+  late Player player4;
+  late Player player5;
+  late Group testgroup;
+  late Game testgame;
+  final fixedDate = DateTime(2025, 19, 11, 00, 11, 23);
+  final fakeClock = Clock(() => fixedDate);
+
+  setUp(() {
+    database = AppDatabase(
+      DatabaseConnection(
+        NativeDatabase.memory(),
+        // Recommended for widget tests to avoid test errors.
+        closeStreamsSynchronously: true,
+      ),
+    );
+
+    withClock(fakeClock, () {
+      player1 = Player(name: 'Alice');
+      player2 = Player(name: 'Bob');
+      player3 = Player(name: 'Charlie');
+      player4 = Player(name: 'Diana');
+      player5 = Player(name: 'Eve');
+      testgroup = Group(
+        name: 'Test Group',
+        members: [player1, player2, player3],
+      );
+      testgame = Game(
+        name: 'Test Game',
+        group: testgroup,
+        players: [player4, player5],
+      );
+    });
+  });
+  tearDown(() async {
+    await database.close();
+  });
+
+  group('game tests', () {
+    test('game is added correctly', () async {
+      await database.gameDao.addGame(game: testgame);
+
+      final result = await database.gameDao.getGameById(gameId: testgame.id);
+
+      expect(result.id, testgame.id);
+      expect(result.name, testgame.name);
+      expect(result.winner, testgame.winner);
+      expect(result.createdAt, testgame.createdAt);
+
+      if (result.group != null) {
+        expect(result.group!.members.length, testgroup.members.length);
+
+        for (int i = 0; i < testgroup.members.length; i++) {
+          expect(result.group!.members[i].id, testgroup.members[i].id);
+          expect(result.group!.members[i].name, testgroup.members[i].name);
+        }
+      } else {
+        fail('Group is null');
+      }
+      if (result.players != null) {
+        expect(result.players!.length, testgame.players!.length);
+
+        for (int i = 0; i < testgame.players!.length; i++) {
+          expect(result.players![i].id, testgame.players![i].id);
+          expect(result.players![i].name, testgame.players![i].name);
+          expect(result.players![i].createdAt, testgame.players![i].createdAt);
+        }
+      } else {
+        fail('Players is null');
+      }
+    });
+
+    test('game is deleted correctly', () async {
+      await database.gameDao.addGame(game: testgame);
+
+      final gameDeleted = await database.gameDao.deleteGame(
+        gameId: testgame.id,
+      );
+      expect(gameDeleted, true);
+
+      final gameExists = await database.gameDao.gameExists(gameId: testgame.id);
+      expect(gameExists, false);
+    });
+
+    test('get game count works correctly', () async {
+      final initialCount = await database.gameDao.getGameCount();
+      expect(initialCount, 0);
+
+      await database.gameDao.addGame(game: testgame);
+
+      final gameAdded = await database.gameDao.getGameCount();
+      expect(gameAdded, 1);
+
+      final gameRemoved = await database.gameDao.deleteGame(
+        gameId: testgame.id,
+      );
+      expect(gameRemoved, true);
+
+      final finalCount = await database.gameDao.getGameCount();
+      expect(finalCount, 0);
+    });
+  });
+}

test/db_tests/group_test.dart

@@ -0,0 +1,188 @@
+import 'package:clock/clock.dart';
+import 'package:drift/drift.dart';
+import 'package:drift/native.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:game_tracker/data/db/database.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/data/dto/player.dart';
+
+void main() {
+  late AppDatabase database;
+  late Player player1;
+  late Player player2;
+  late Player player3;
+  late Player player4;
+  late Group testgroup;
+  late Group testgroup2;
+  final fixedDate = DateTime(2025, 19, 11, 00, 11, 23);
+  final fakeClock = Clock(() => fixedDate);
+
+  setUp(() {
+    database = AppDatabase(
+      DatabaseConnection(
+        NativeDatabase.memory(),
+        // Recommended for widget tests to avoid test errors.
+        closeStreamsSynchronously: true,
+      ),
+    );
+
+    withClock(fakeClock, () {
+      player1 = Player(name: 'Alice');
+      player2 = Player(name: 'Bob');
+      player3 = Player(name: 'Charlie');
+      player4 = Player(name: 'Diana');
+      testgroup = Group(
+        name: 'Test Group',
+        members: [player1, player2, player3],
+      );
+      testgroup2 = Group(
+        id: 'gr2',
+        name: 'Second Group',
+        members: [player2, player3, player4],
+      );
+    });
+  });
+  tearDown(() async {
+    await database.close();
+  });
+  group('group tests', () {
+    test('all groups get fetched correctly', () async {
+      await database.groupDao.addGroup(group: testgroup);
+      await database.groupDao.addGroup(group: testgroup2);
+
+      final allGroups = await database.groupDao.getAllGroups();
+      expect(allGroups.length, 2);
+
+      final fetchedGroup1 = allGroups.firstWhere((g) => g.id == testgroup.id);
+      expect(fetchedGroup1.name, testgroup.name);
+      expect(fetchedGroup1.members.length, testgroup.members.length);
+      expect(fetchedGroup1.members.elementAt(0).id, player1.id);
+      expect(fetchedGroup1.members.elementAt(0).createdAt, player1.createdAt);
+
+      final fetchedGroup2 = allGroups.firstWhere((g) => g.id == testgroup2.id);
+      expect(fetchedGroup2.name, testgroup2.name);
+      expect(fetchedGroup2.members.length, testgroup2.members.length);
+      expect(fetchedGroup2.members.elementAt(0).id, player2.id);
+      expect(fetchedGroup2.members.elementAt(0).createdAt, player2.createdAt);
+    });
+
+    test('group and group members gets added correctly', () async {
+      await database.groupDao.addGroup(group: testgroup);
+
+      final result = await database.groupDao.getGroupById(
+        groupId: testgroup.id,
+      );
+
+      expect(result.id, testgroup.id);
+      expect(result.name, testgroup.name);
+      expect(result.createdAt, testgroup.createdAt);
+
+      expect(result.members.length, testgroup.members.length);
+      for (int i = 0; i < testgroup.members.length; i++) {
+        expect(result.members[i].id, testgroup.members[i].id);
+        expect(result.members[i].name, testgroup.members[i].name);
+        expect(result.members[i].createdAt, testgroup.members[i].createdAt);
+      }
+    });
+
+    test('group gets deleted correctly', () async {
+      await database.groupDao.addGroup(group: testgroup);
+
+      final groupDeleted = await database.groupDao.deleteGroup(
+        groupId: testgroup.id,
+      );
+      expect(groupDeleted, true);
+
+      final groupExists = await database.groupDao.groupExists(
+        groupId: testgroup.id,
+      );
+      expect(groupExists, false);
+    });
+
+    test('group name gets updated correcly ', () async {
+      await database.groupDao.addGroup(group: testgroup);
+
+      const newGroupName = 'new group name';
+
+      await database.groupDao.updateGroupname(
+        groupId: testgroup.id,
+        newName: newGroupName,
+      );
+
+      final result = await database.groupDao.getGroupById(
+        groupId: testgroup.id,
+      );
+      expect(result.name, newGroupName);
+    });
+
+    test('Adding player to group works correctly', () async {
+      await database.groupDao.addGroup(group: testgroup);
+
+      await database.playerGroupDao.addPlayerToGroup(
+        player: player4,
+        groupId: testgroup.id,
+      );
+
+      final playerAdded = await database.playerGroupDao.isPlayerInGroup(
+        playerId: player4.id,
+        groupId: testgroup.id,
+      );
+
+      expect(playerAdded, true);
+
+      final playerNotAdded = !await database.playerGroupDao.isPlayerInGroup(
+        playerId: '',
+        groupId: testgroup.id,
+      );
+
+      expect(playerNotAdded, true);
+
+      final result = await database.groupDao.getGroupById(
+        groupId: testgroup.id,
+      );
+      expect(result.members.length, testgroup.members.length + 1);
+
+      final addedPlayer = result.members.firstWhere((p) => p.id == player4.id);
+      expect(addedPlayer.name, player4.name);
+      expect(addedPlayer.createdAt, player4.createdAt);
+    });
+
+    test('Removing player from group works correctly', () async {
+      await database.groupDao.addGroup(group: testgroup);
+
+      final playerToRemove = testgroup.members[0];
+
+      final removed = await database.playerGroupDao.removePlayerFromGroup(
+        playerId: playerToRemove.id,
+        groupId: testgroup.id,
+      );
+      expect(removed, true);
+
+      final result = await database.groupDao.getGroupById(
+        groupId: testgroup.id,
+      );
+      expect(result.members.length, testgroup.members.length - 1);
+
+      final playerExists = result.members.any((p) => p.id == playerToRemove.id);
+      expect(playerExists, false);
+    });
+
+    test('get group count works correctly', () async {
+      final initialCount = await database.groupDao.getGroupCount();
+      expect(initialCount, 0);
+
+      await database.groupDao.addGroup(group: testgroup);
+
+      final groupAdded = await database.groupDao.getGroupCount();
+      expect(groupAdded, 1);
+
+      final groupRemoved = await database.groupDao.deleteGroup(
+        groupId: testgroup.id,
+      );
+      expect(groupRemoved, true);
+
+      final finalCount = await database.groupDao.getGroupCount();
+      expect(finalCount, 0);
+    });
+  });
+}

test/db_tests/player_test.dart

@@ -0,0 +1,112 @@
+import 'package:clock/clock.dart';
+import 'package:drift/drift.dart';
+import 'package:drift/native.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:game_tracker/data/db/database.dart';
+import 'package:game_tracker/data/dto/player.dart';
+
+void main() {
+  late AppDatabase database;
+  late Player testPlayer;
+  late Player testPlayer2;
+  final fixedDate = DateTime(2025, 19, 11, 00, 11, 23);
+  final fakeClock = Clock(() => fixedDate);
+
+  setUp(() {
+    database = AppDatabase(
+      DatabaseConnection(
+        NativeDatabase.memory(),
+        // Recommended for widget tests to avoid test errors.
+        closeStreamsSynchronously: true,
+      ),
+    );
+
+    withClock(fakeClock, () {
+      testPlayer = Player(name: 'Test Player');
+      testPlayer2 = Player(name: 'Second Group');
+    });
+  });
+  tearDown(() async {
+    await database.close();
+  });
+
+  group('player tests', () {
+    test('all players get fetched correctly', () async {
+      await database.playerDao.addPlayer(player: testPlayer);
+      await database.playerDao.addPlayer(player: testPlayer2);
+
+      final allPlayers = await database.playerDao.getAllPlayers();
+      expect(allPlayers.length, 2);
+
+      final fetchedPlayer1 = allPlayers.firstWhere(
+        (g) => g.id == testPlayer.id,
+      );
+      expect(fetchedPlayer1.name, testPlayer.name);
+      expect(fetchedPlayer1.createdAt, testPlayer.createdAt);
+
+      final fetchedPlayer2 = allPlayers.firstWhere(
+        (g) => g.id == testPlayer2.id,
+      );
+      expect(fetchedPlayer2.name, testPlayer2.name);
+      expect(fetchedPlayer2.createdAt, testPlayer2.createdAt);
+    });
+
+    test('players get inserted correcly ', () async {
+      await database.playerDao.addPlayer(player: testPlayer);
+      final result = await database.playerDao.getPlayerById(
+        playerId: testPlayer.id,
+      );
+
+      expect(result.id, testPlayer.id);
+      expect(result.name, testPlayer.name);
+      expect(result.createdAt, testPlayer.createdAt);
+    });
+
+    test('players get deleted correcly ', () async {
+      await database.playerDao.addPlayer(player: testPlayer);
+      final playerDeleted = await database.playerDao.deletePlayer(
+        playerId: testPlayer.id,
+      );
+      expect(playerDeleted, true);
+
+      final playerExists = await database.playerDao.playerExists(
+        playerId: testPlayer.id,
+      );
+      expect(playerExists, false);
+    });
+
+    test('player name gets updated correcly ', () async {
+      await database.playerDao.addPlayer(player: testPlayer);
+
+      const newPlayerName = 'new player name';
+
+      await database.playerDao.updatePlayername(
+        playerId: testPlayer.id,
+        newName: newPlayerName,
+      );
+
+      final result = await database.playerDao.getPlayerById(
+        playerId: testPlayer.id,
+      );
+      expect(result.name, newPlayerName);
+    });
+
+    test('get player count works correctly', () async {
+      final initialCount = await database.playerDao.getPlayerCount();
+      expect(initialCount, 0);
+
+      await database.playerDao.addPlayer(player: testPlayer);
+
+      final playerAdded = await database.playerDao.getPlayerCount();
+      expect(playerAdded, 1);
+
+      final playerRemoved = await database.playerDao.deletePlayer(
+        playerId: testPlayer.id,
+      );
+      expect(playerRemoved, true);
+
+      final finalCount = await database.playerDao.getPlayerCount();
+      expect(finalCount, 0);
+    });
+  });
+}

test/widget_test.dart

@@ -1,30 +0,0 @@
-// 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.
-
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:game_tracker/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);
-  });
-}