diff --git a/app/static/css/index.css b/app/static/css/index.css
index 63a27ae..3e6d017 100644
--- a/app/static/css/index.css
+++ b/app/static/css/index.css
@@ -68,24 +68,35 @@ nav a:hover {
 
 /* Container styles */
 .container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
+    margin: 0;
     text-align: center;
+    font-size: 1.75rem;
+}
+
+.text {
     width: 500px;
 }
 
-.container h1 {
+.text h1 {
     margin-bottom: 0;
 }
 
-.container p {
+.text p {
     margin: 2rem 0 3rem 0;
 }
 
+/* Icon styles */
+
 .icons {
+    width: 100%;
+}
+
+.icon {
     margin: 0 1rem;
     height: 50px;
     width: 50px;
@@ -94,12 +105,12 @@ nav a:hover {
 
 /* Icons media query for mobile */
 @media only screen and (max-width: 600px) {
-    .icons {
+    .icon {
         margin: 0 0.5rem;
     }
 }
 
-.icons:hover {
+.icon:hover {
     cursor: pointer;
     opacity: 0.6;
     transition: opacity 0.25s ease-in-out;
@@ -108,16 +119,16 @@ nav a:hover {
 
 /* Continer media query for mobile */
 @media only screen and (max-width: 600px) {
-    .container {
+    .text {
         font-size: 1.5rem;
         width: 300px;
     }
 
-    .container p {
+    .text p {
         margin: 1rem 0 2rem 0;
     }
 
-    .icons {
+    .icon {
         height: 40px;
         width: 40px;
     }
diff --git a/app/templates/index.html b/app/templates/index.html
index 03bf2c5..f97509f 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -29,14 +29,18 @@
     </nav>
 
     <div class="container">
-        <h1>Hello, I'm Parker</h1>
-        <p>A student with a strong passion for technology and privacy.</p>
+        <div class="text">
+            <h1>Hello, I'm Parker</h1>
+            <p>A student with a strong passion for technology and privacy.</p>
+        </div>
 
-        <a href="mailto:contact@pkrm.dev" target="_blank"><img class="icons" src="{{ url_for('static', filename='mail.png') }}" alt="Mail Logo"></a>
-        <a href="https://github.com/packetparker" target="_blank"><img class="icons" src="{{ url_for('static', filename='github.png') }}" alt="GitHub Logo"></a>
-        <a href="https://www.linkedin.com/in/parker-m/" target="_blank"><img class="icons" src="{{ url_for('static', filename='linkedin.png') }}" alt="LinkedIn Logo"></a>
-        <a href="xmpp:contact@pkrm.dev" target="_blank"><img class="icons" src="{{ url_for('static', filename='xmpp.png') }}" alt="XMPP Logo"></a>
-        <a href="/pgp" target="_blank"><img class="icons" src="{{ url_for('static', filename='gnupg.png') }}" alt="GnuPG Logo"></a>
+        <div class="icons">
+            <a href="mailto:contact@pkrm.dev" target="_blank"><img class="icon" src="{{ url_for('static', filename='mail.png') }}" alt="Mail Logo"></a>
+            <a href="https://github.com/packetparker" target="_blank"><img class="icon" src="{{ url_for('static', filename='github.png') }}" alt="GitHub Logo"></a>
+            <a href="https://www.linkedin.com/in/parker-m/" target="_blank"><img class="icon" src="{{ url_for('static', filename='linkedin.png') }}" alt="LinkedIn Logo"></a>
+            <a href="xmpp:contact@pkrm.dev" target="_blank"><img class="icon" src="{{ url_for('static', filename='xmpp.png') }}" alt="XMPP Logo"></a>
+            <a href="/pgp" target="_blank"><img class="icon" src="{{ url_for('static', filename='gnupg.png') }}" alt="GnuPG Logo"></a>
+        </div>
     </div>
 
     <footer>PGP Fingerprint: FD5C 7FFF 860B 6E97 7049 E27E 505E D36F C12B 5D5E</footer>