diff --git a/frontend/src/vues/GameDetails.vue b/frontend/src/vues/GameDetails.vue
index 14a1911..497c2c6 100644
--- a/frontend/src/vues/GameDetails.vue
+++ b/frontend/src/vues/GameDetails.vue
@@ -1,32 +1,53 @@
 <template>
-  <div>
+  <div class="game-title-box">
     <h1>#{{ game.id }} - {{ game.title }}</h1>
   </div>
-  <div>
+  <div class="gm-title-box">
     <h2>GameMaster: {{ game.gamemaster }}</h2>
   </div>
-  <div>
-    <h3>Payout</h3>
-    <div>{{ game.payoutEB }} eb</div>
-    <div>{{ game.payoutIP }} IP</div>
-    <div>{{ game.payoutLoot }}</div>
-  </div>
+  <div class="container">
+    <div class="d-flex flex-row justify-space-evenly">
+      <div class="result-box">
+        <h3>Payout</h3>
+        <div>{{ game.payoutEB }} eb</div>
+        <div>{{ game.payoutIP }} IP</div>
+        <div>{{ game.payoutLoot }}</div>
+      </div>
 
-  <div>
-    <h3>Picks</h3>
-    <div v-for="pick in picks">
-      {{ pick.characterName }}
-    </div>
-  </div>
+      <div class="result-box">
+        <h3>Picks</h3>
+        <div v-for="pick in picks">
+          {{ pick.characterName }}
+        </div>
+      </div>
 
-  <div>
-    <h3>Apps</h3>
-    <div v-for="app in apps">
-      {{ app.characterName }}
+      <div class="result-box">
+        <h3>Apps</h3>
+        <div v-for="app in apps">
+          {{ app.characterName }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
+<style>
+.game-title-box {
+  margin-top: 25px;
+  margin-left: 20px;
+}
+
+.gm-title-box {
+  margin-top: 5px;
+  margin-left: 20px;
+}
+
+.result-box {
+  margin: 10px;
+  margin-top: 40px;
+}
+</style>
+
 <script setup lang="ts">
 import { watch, ref } from 'vue'
 import { useRoute } from 'vue-router'