diff --git a/_includes/panel.html b/_includes/panel.html
new file mode 100644
index 00000000..f9e77415
--- /dev/null
+++ b/_includes/panel.html
@@ -0,0 +1,14 @@
+<div class="col-xl-4 col-lg-6 col-md-12 mb-2">
+    <div class="card card-{{include.color}}">
+        {% if include.color == "warning" %}
+        <div class="card-header text-dark bg-{{include.color}}">
+        {% else %}
+        <div class="card-header text-white bg-{{include.color}}">
+        {% endif %}
+        <h3 class="h5">{{include.title}}</h3>
+        </div>
+        <div class="card-body">
+            {{include.body}}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/index.html b/index.html
index 04d430d6..da895569 100644
--- a/index.html
+++ b/index.html
@@ -90,48 +90,38 @@ layout: default
 
 <!-- Chart of Five Eyes, Nine Eyes, and Fourteen Eyes -->
 <div class="row">
-    <div class="col-sm-4">
-        <div class="panel panel-danger">
-            <div class="panel-heading">
-                <h3 class="panel-title">Five Eyes</h3>
-            </div>
-            <div class="panel-body">
-                1. Australia <div class="float-right"><span class="flag-icon flag-icon-au"></span></div>
-                <br /> 2. Canada <div class="float-right"><span class="flag-icon flag-icon-ca"></span></div>
-                <br /> 3. New Zealand <div class="float-right"><span class="flag-icon flag-icon-nz"></span></div>
-                <br /> 4. United Kingdom <div class="float-right"><span class="flag-icon flag-icon-gb"></span></div>
-                <br /> 5. United States of America <div class="float-right"><span class="flag-icon flag-icon-us"></span></div>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-4">
-        <div class="panel panel-warning">
-            <div class="panel-heading">
-                <h3 class="panel-title">Nine Eyes</h3>
-            </div>
-            <div class="panel-body">
-                6. Denmark <div class="float-right"><span class="flag-icon flag-icon-dk"></span></div>
-                <br /> 7. France <div class="float-right"><span class="flag-icon flag-icon-fr"></span></div>
-                <br /> 8. Netherlands <div class="float-right"><span class="flag-icon flag-icon-nl"></span></div>
-                <br /> 9. Norway <div class="float-right"><span class="flag-icon flag-icon-no"></span></div>
-                <br /><br />
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Fourteen Eyes</h3>
-            </div>
-            <div class="panel-body">
-                10. Belgium <div class="float-right"><span class="flag-icon flag-icon-be"></span></div>
-                <br /> 11. Germany <div class="float-right"><span class="flag-icon flag-icon-de"></span></div>
-                <br /> 12. Italy <div class="float-right"><span class="flag-icon flag-icon-it"></span></div>
-                <br /> 13. Spain <div class="float-right"><span class="flag-icon flag-icon-es"></span></div>
-                <br /> 14. Sweden <div class="float-right"><span class="flag-icon flag-icon-se"></span></div>
-            </div>
-        </div>
-    </div>
+    {% include panel.html color="danger"
+    title="Five Eyes"
+    body='
+        1. Australia <div class="float-right"><span class="flag-icon flag-icon-au"></span></div>
+        <br /> 2. Canada <div class="float-right"><span class="flag-icon flag-icon-ca"></span></div>
+        <br /> 3. New Zealand <div class="float-right"><span class="flag-icon flag-icon-nz"></span></div>
+        <br /> 4. United Kingdom <div class="float-right"><span class="flag-icon flag-icon-gb"></span></div>
+        <br /> 5. United States of America <div class="float-right"><span class="flag-icon flag-icon-us"></span></div>
+    '
+    %}
+
+    {% include panel.html color="warning"
+    title="Nine Eyes"
+    body='
+        6. Denmark <div class="float-right"><span class="flag-icon flag-icon-dk"></span></div>
+        <br /> 7. France <div class="float-right"><span class="flag-icon flag-icon-fr"></span></div>
+        <br /> 8. Netherlands <div class="float-right"><span class="flag-icon flag-icon-nl"></span></div>
+        <br /> 9. Norway <div class="float-right"><span class="flag-icon flag-icon-no"></span></div>
+        <br /><br />
+    '
+    %}
+
+    {% include panel.html color="secondary"
+    title="Fourteen Eyes"
+    body='
+        10. Belgium <div class="float-right"><span class="flag-icon flag-icon-be"></span></div>
+        <br /> 11. Germany <div class="float-right"><span class="flag-icon flag-icon-de"></span></div>
+        <br /> 12. Italy <div class="float-right"><span class="flag-icon flag-icon-it"></span></div>
+        <br /> 13. Spain <div class="float-right"><span class="flag-icon flag-icon-es"></span></div>
+        <br /> 14. Sweden <div class="float-right"><span class="flag-icon flag-icon-se"></span></div>
+    '
+    %}
 </div>
 <!-- end Chart of Five Eyes, Nine Eyes, and Fourteen Eyes -->