diff --git a/src/api/templates/index.html b/src/api/templates/index.html
index 441a14e..8f9ae4c 100644
--- a/src/api/templates/index.html
+++ b/src/api/templates/index.html
@@ -216,13 +216,13 @@ document.addEventListener('DOMContentLoaded', () => {
   <div class="row">
     <div class="col-md-1 d-none d-md-block">
     </div>
-      <div class="col-xs-12 col-md-5 d-none d-md-block">
+      <div class="col col-md-5">
         <div class="content">
 	  <h2>Records</h2>
           <iframe width="100%" height="480" src="https://www.youtube.com/embed/videoseries?si=RdMNZq4hYudlCW37&amp;list=PLVB9xwlHyW_LhxubZ9HL8wzx1mmDNBj0z" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
         </div>
       </div>
-      <div class="col-xs-12 col-md-5 d-none d-md-block">
+      <div class="col col-md-5">
         <div class="content">
           <h2>Digital playlist and stuff</h2>
           <iframe width="100%" height="480" src="https://www.youtube.com/embed/videoseries?si=SPAsQfxoya_Jeurd&amp;list=PLVB9xwlHyW_LWz1KEmhxXhGbypcpcdHM3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
@@ -292,7 +292,7 @@ document.addEventListener('DOMContentLoaded', () => {
 <div class="row">
   <div class="col-xs-12 col-md-1">
   </div>
-  <div class="col-xs-12 col-md-2">
+  <div class="col col-xl-2">
     <div class="content">
       <h2>Media</h2>
         <p><a href='https://youtube.com/@daniel.deflax' target=_blank><img src="static/images/icons8-youtube-96.png"></a></p>
@@ -300,7 +300,7 @@ document.addEventListener('DOMContentLoaded', () => {
         <p><a href='https://soundcloud.com/deflax' target=_blank><img src="static/images/icons8-soundcloud-96.png"></a></p>
     </div>
   </div>
-  <div class="col-xs-12 col-md-2">
+  <div class="col col-xl-2">
     <div class="content">
       <h2>Social</h2>
         <p><a href='https://discord.com/invite/KKGtn6GCE3' target=_blank><img src="static/images/icons8-discord-96.png"></a></p>
@@ -308,7 +308,7 @@ document.addEventListener('DOMContentLoaded', () => {
         <p><a href='https://instagram.com/daniel.deflax' target=_blank><img src="static/images/icons8-instagram-96.png"></a></p>
     </div>
   </div>
-  <div class="col-xs-12 col-md-4">
+  <div class="col col-xl-4">
     <div class="content">
         <h2>Friends</h2>
 	<p><a href='https://jungletrain.net/' target=_blank><img src="static/images/jtlogo.png" height="64"></a></p>
@@ -318,7 +318,7 @@ document.addEventListener('DOMContentLoaded', () => {
 	<p>You! 🙃</p>
     </div>
   </div>
-  <div class="col-xs-12 col-md-3">
+  <div class="col col-xl-3">
     <div class="content">
       <h2>About</h2>
 <pre>
@@ -341,9 +341,9 @@ document.addEventListener('DOMContentLoaded', () => {
     </div>
   </div>
 
-
   <div class="col-xs-12 col-md-1">
   </div>
+
 </div>
 </div>
 </div>