diff --git a/src/api/templates/index.html b/src/api/templates/index.html
index 8f9ae4c..00a605f 100644
--- a/src/api/templates/index.html
+++ b/src/api/templates/index.html
@@ -54,9 +54,9 @@
 <div class="content-container bg-dark text-white">
   <div id="stream" class="container-fluid p-3 bg-dark text-white">
     <div class="row">
-      <div class="col-xs-12 col-md-1">
+      <div class="col-md-1 d-none d-md-block">
       </div>
-      <div class="col-xs-12 col-md-10">
+      <div class="col-12 col-md-10">
           <div class="content">
               <video controls crossorigin playsinline poster="static/images/poster.png">
               </video>
@@ -204,7 +204,7 @@ document.addEventListener('DOMContentLoaded', () => {
 </script>
 	</div>
       </div>
-      <div class="col-xs-12 col-md-1">
+      <div class="col-md-1 d-none d-md-block">
       </div>
     </div>
   </div>
@@ -216,13 +216,13 @@ document.addEventListener('DOMContentLoaded', () => {
   <div class="row">
     <div class="col-md-1 d-none d-md-block">
     </div>
-      <div class="col col-md-5">
+      <div class="col-12 col-lg-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 col-md-5">
+      <div class="col-12 col-lg-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>
@@ -239,7 +239,7 @@ document.addEventListener('DOMContentLoaded', () => {
   <div class="row">
     <div class="col-md-1 d-none d-md-block">
     </div>
-    <div class="col-md-10 d-none d-md-block">
+    <div class="col-12 col-lg-10">
       <div class="content">
         <h2>Video Archive</h2>
 	<div class="gallery">
@@ -268,9 +268,9 @@ document.addEventListener('DOMContentLoaded', () => {
 <div class="content-container bg-dark text-white">
   <div id="terminal" class="container-fluid p-3 bg-dark text-white ">
     <div class="row">
-      <div class="col-xs-12 col-md-1 d-none d-md-block">
+      <div class="col-md-1 d-none d-md-block">
       </div>
-      <div class="col-xs-12 col-md-10 d-none d-md-block">
+      <div class="col-12 col-lg-10 d-none d-md-block">
         <div class="content">
           <widgetbot
             server="803220836407443506"
@@ -281,7 +281,7 @@ document.addEventListener('DOMContentLoaded', () => {
           <script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>
         </div>
       </div>
-      <div class="col-xs-12 col-md-1 d-none d-md-block">
+      <div class="col-md-1 d-none d-md-block">
       </div>
     </div>
   </div>
@@ -290,7 +290,7 @@ document.addEventListener('DOMContentLoaded', () => {
 <div class="content-container bg-dark text-white">
 <div id="info" class="container-fluid p-3 bg-dark text-white">
 <div class="row">
-  <div class="col-xs-12 col-md-1">
+  <div class="col-md-1 d-none d-md-block">
   </div>
   <div class="col col-xl-2">
     <div class="content">
@@ -340,10 +340,8 @@ document.addEventListener('DOMContentLoaded', () => {
 <p>Everthying you do is a <a href='https://rareboc.org/' target=_blank>balloon</a></p>
     </div>
   </div>
-
-  <div class="col-xs-12 col-md-1">
+  <div class="col-md-1 d-none d-md-block">
   </div>
-
 </div>
 </div>
 </div>