diff --git a/default.css b/default.css
index 90107a7..cf6e7eb 100644
--- a/default.css
+++ b/default.css
@@ -22,6 +22,7 @@ body {
     padding: 8px;
     line-height: 21px;
     display: inline-block;
+    text-align: right;
 }
 
 #top {
@@ -34,9 +35,19 @@ body {
 }
 
 #main {
+    margin: 0px 120px;
+    display: flex;
     /*background: #1e2030;*/
 }
 
+.canvas {
+    width: 780px;
+    height: 600px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
 .cardStats {
     font-size: 18px;
 }
diff --git a/index.html b/index.html
index a399945..b1eb112 100644
--- a/index.html
+++ b/index.html
@@ -7,20 +7,22 @@
 </head>
 <body>
     <div id="navigation">
+        <p class="navItem" style="text-align: left; flex-grow: 1;">Trianta</p>
         <a class="navItem" href="https://www.github.com/trimutex">GitHub</a>
         <a class="navItem" href="https://lab.trianta.dev/Trianta">Projects</a>
-        <p class="navItem" style="text-align: right; flex-grow: 1;">Trianta</p>
     </div>
     <div id="main">
         <div class="card">
             <h2 class="cardTop">Pong</h2>
-            <canvas width="750" height="585" id="pong"></canvas>
-            <script src="public/pong.js"></script>
-            <div id="gameover" hidden="true">
-                <h1>Game Over</h1>      
-            </div>
-            <div id="restart" hidden="true">
-                <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
+            <div class="canvas">
+                <canvas width="750" height="585" id="pong"></canvas>
+                <script src="public/pong.js"></script>
+                <div id="gameover" hidden="true">
+                    <h1>Game Over</h1>      
+                </div>
+                <div id="restart" hidden="true">
+                    <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
+                </div>
             </div>
             <p class="cardStats">Left Paddle Height: <span id="leftPaddle"></span></p>
             <p class="cardStats">Right Paddle Height: <span id="rightPaddle"></span></p>
@@ -28,8 +30,10 @@
         </div>
         <div class="card">
             <h2 class="cardTop">Snake</h2>
-            <canvas width="625" height="375" id="snake"></canvas>
-            <script src="public/snake.js"></script>
+            <div class="canvas">
+                <canvas width="625" height="375" id="snake"></canvas>
+                <script src="public/snake.js"></script>
+            </div>
             <p class="cardStats">Snake Head Location: <span id="snakeHead"></span></p>
             <p class="cardStats">Food Location: <span id="snakeFood"></span></p>
             <a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
