diff --git a/webpage/templates/webpage/index.html b/webpage/templates/webpage/index.html
index 1d37e46..df100c8 100644
--- a/webpage/templates/webpage/index.html
+++ b/webpage/templates/webpage/index.html
@@ -4,12 +4,14 @@
 {% load webpage_extras %}
 {% load news_extras %}
 {% block content %}
-    <div class="container">
-        <h1 class="display-1 text-center p-2">{% projects_metadata 'title' %}</h1>
-        <h2 class="display-4 text-center p-2">{% projects_metadata 'subtitle' %}</h2>
-        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
-            <a href="{% url 'shapes:browse_shapes' %}" type="button" class="btn btn-primary btn-lg px-4 gap-3">Explore it</a>
-            <a href="api-docs/" type="button" class="btn btn-primary btn-lg px-4">Use it (API)</a>
-          </div>
+<div class="px-4 py-5 my-5 text-center">
+    <h1 class="display-2">{% projects_metadata 'title' %}</h1>
+    <div class="col-lg-6 mx-auto">
+      <p class="lead mb-4">{% projects_metadata 'subtitle' %}</p>
+      <div class="d-grid gap-2 d-md-flex justify-content-md-center">
+        <a href="{% url 'shapes:browse_shapes' %}" type="button" class="btn btn-primary btn-lg px-4 me-md-2">Explore it</a>
+        <a href="api-docs/" type="button" class="btn btn-outline-secondary btn-lg px-4">Use it (API)</a>
+      </div>
     </div>
+  </div>
 {% endblock %}