diff --git a/ProjectSourceCode/src/resources/css/scoreboard-header/game-card.css b/ProjectSourceCode/src/resources/css/scoreboard-header/game-card.css
index 4321300..ae4b851 100644
--- a/ProjectSourceCode/src/resources/css/scoreboard-header/game-card.css
+++ b/ProjectSourceCode/src/resources/css/scoreboard-header/game-card.css
@@ -1,18 +1,32 @@
 #game-card {
     display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
     border: 1px solid #ccc;
-    padding: 20px;
+    padding: 10px;
     margin: 10px 2px; /* Remove horizontal margin */
     min-height: 100px;
-    min-width: 150px;
+    min-width: 250px;
     box-sizing: border-box;
 }
 
+/* Add these styles to your existing CSS file or create a new one */
+.card-body {
+    display: flex;
+}
+
 .left-side {
     width: 70%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
+}
+
+.team {
+    display: flex;
+    align-items: center;
+}
+
+.team p {
+    margin: 5px;
 }
 
 .right-side {
@@ -22,10 +36,8 @@
     align-items: center;
 }
 
-.team {
+.score p {
+    margin: 0;
     text-align: center;
 }
 
-.score {
-    text-align: center;
-}
diff --git a/ProjectSourceCode/src/views/partials/scoreboard-header/game-card.hbs b/ProjectSourceCode/src/views/partials/scoreboard-header/game-card.hbs
index c8ce5fb..37275d9 100644
--- a/ProjectSourceCode/src/views/partials/scoreboard-header/game-card.hbs
+++ b/ProjectSourceCode/src/views/partials/scoreboard-header/game-card.hbs
@@ -1,29 +1,25 @@
-<!-- _score-card.hbs -->
-
 <div class="card" id="game-card">
     <div class="card-body">
 
         <!-- Left side (70%) -->
-        <div class="left-side" style="width: 70%; display: flex; flex-direction: column; justify-content: center;">
-            <!-- Team 1 Name -->
-            <div class="team" style="text-align: center;">
-                <p>team 1</p>
-                {{team1.name}}
-                <p>0</p>
+        <div class="left-side">
+            <!-- Team 1 Name with Score -->
+            <div class="team">
+                <p id="team-name">Arsenal</p> <!-- {{team1.name}} -->
+                <p id="team-score">0</p>
             </div>
-            <!-- Team 2 Name -->
-            <div class="team" style="text-align: center;">
-                <p>team 2</p>
-                {{team2.name}}
-                <p>1</p>
+            <!-- Team 2 Name with Score -->
+            <div class="team">
+                <p id="team-name">Liverpool</p> <!-- {{team2.name}} -->
+                <p id="team-score">1</p>
             </div>
         </div>
 
         <!-- Right side (30%) -->
-        <div class="right-side" style="width: 30%; display: flex; justify-content: center; align-items: center;">
+        <div class="right-side">
             <!-- Time -->
             <div class="score" style="text-align: center;">
-                {{time}}
+                <p id="time">94'</p>
             </div>
         </div>
 
diff --git a/ProjectSourceCode/src/views/partials/scoreboard-header/scoreboard-header.hbs b/ProjectSourceCode/src/views/partials/scoreboard-header/scoreboard-header.hbs
index 9e92d1f..a3d6118 100644
--- a/ProjectSourceCode/src/views/partials/scoreboard-header/scoreboard-header.hbs
+++ b/ProjectSourceCode/src/views/partials/scoreboard-header/scoreboard-header.hbs
@@ -1,6 +1,7 @@
  <div class="scoreboard-container" id="scoreboard">
     <div class="scoreboard-league-container">
         
+        <!-- Insert a game card -->
         {{> scoreboard-header/game-card}}
 
     </div>