diff --git a/index.html b/index.html
index bf51bfc..3a6a0f3 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Super Wars</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-    
-    <footer class="footer">Made with <img src="/images/Vector.svg"> by ProGrad</footer>
-</body>
+    <link rel="stylesheet" href="style.css" />
+  </head>
 
-</html>
+  <body>
+    <div class="container">
+      <div class="heros">
+        <div>
+          <img src="./images/super-1.png" alt="Spiderman" />
+          <p>Spiderman</p>
+          <p class="score">12</p>
+        </div>
+        <div>
+          <img src="./images/super-3.png" alt="Wonder Women" />
+          <p>Wonder Women</p>
+          <p class="score">30</p>
+        </div>
+      </div>
+      <div class="score">5 - 0</div>
+      <div class="villians">
+        <div>
+          <img src="./images/super-2.png" alt="Captain America" />
+          <p>Captain America</p>
+          <p class="score">50</p>
+        </div>
+        <div>
+          <img src="./images/super-4.png" alt="Gem Women" />
+          <p>Gem Women</p>
+          <p class="score">12</p>
+        </div>
+      </div>
+    </div>
+    <footer class="footer">
+      Made with <img src="./images/Vector.svg" /> by ProGrad
+    </footer>
+  </body>
+</html> 
diff --git a/style.css b/style.css
index e31018b..483bb45 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,30 @@
 .footer{
-  margin-left : 80px;
+  margin-left : 120px;
+  margin-top: 20px;
   font-size : 18px;
 }
+
+.container{
+  margin-top: 1em;
+  display: grid;
+  grid-template-columns: 1fr .5fr 1fr;
+  justify-items:center;
+}
+
+.heros, .villians{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 1.5em;
+}
+
+.heros > div, .villians > div{
+  border-radius: 10px;
+  box-shadow: .5px .5px 5px 1px #555;
+  text-align: center;
+}
+
+.score{
+  font-size:3em;
+  margin: 0px;
+}
+ 
