diff --git a/static/asteroid.css b/static/asteroid.css
index 01fc2df..88de3b8 100644
--- a/static/asteroid.css
+++ b/static/asteroid.css
@@ -8,7 +8,7 @@ body{
     color: #00ffff;
     margin: 0;
     padding: 20px;
-    box-sizing: boder-box;
+    box-sizing: border-box;
 }
 
 body .container{
@@ -393,6 +393,7 @@ body .playlist-input{
     color: #00ffff;
     border: 1px solid #2a3441;
     font-family: Courier New, monospace;
+    box-sizing: border-box;
 }
 
 body .playlist-list{
@@ -1011,4 +1012,17 @@ body .stat-card .stat-label{
     color: #ccc;
     font-size: 0.875rem;
     margin-top: 0.5rem;
+}
+
+@media (max-width: 576px){
+    body .playlist-controls{
+        display: block;
+    }
+    body .playlist-controls >*{
+        width: 100%;
+    }
+    body .playlist-controls button{
+        margin-left: 0;
+        margin-right: 0;
+    }
 }
\ No newline at end of file
diff --git a/static/asteroid.lass b/static/asteroid.lass
index 07af9c5..81e6a07 100644
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@@ -12,7 +12,7 @@
     :color "#00ffff"
     :margin 0
     :padding "20px"
-    :box-sizing "boder-box"
+    :box-sizing "border-box"
 
     (.container
      :max-width "1200px"
@@ -315,7 +315,8 @@
      :background "#0a0a0a"
      :color "#00ffff"
      :border "1px solid #2a3441"
-     :font-family "Courier New, monospace")
+     :font-family "Courier New, monospace"
+     :box-sizing "border-box")
 
     (.playlist-list
      :border "1px solid #2a3441"
@@ -811,4 +812,14 @@
     ;;  :text-align center)
 
   ) ;; Close main body block
+
+  ;; media queries for reponsiveness
+  (:media "(max-width: 576px)"
+          (body
+           (.playlist-controls
+            :display block
+            ;;:width "100%"
+            (>* :width "100%")
+            (button :margin-left 0
+                    :margin-right 0))))
 ) ;; End of let block