diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..c50ff38
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-merlot
\ No newline at end of file
diff --git a/index.html b/index.html
index bf51bfc..757863a 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,33 @@
 </head>
 
 <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>
 
diff --git a/style.css b/style.css
index e31018b..1783f42 100644
--- a/style.css
+++ b/style.css
@@ -2,3 +2,27 @@
   margin-left : 80px;
   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 rgb(223, 115, 115);
+  text-align: center;
+}
+
+.score{
+  font-size:3em;
+  margin: 0px;
+}
\ No newline at end of file
