diff --git a/app/css/custom.css b/app/css/custom.css
index 1244cd46..c20ebfa0 100644
--- a/app/css/custom.css
+++ b/app/css/custom.css
@@ -10,8 +10,15 @@ body {
   margin-right: 5px;
 }
 
-.card {
-  border-color: #c61931;
+/* Small devices (portrait phones, up to 576px) */
+@media (max-width: 576px) {
+  .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
+  .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; }
+  .row { margin-left: 0rem; margin-right: 0rem; }
+  .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; }
+  .form-group.col-md-6 { margin-left: -0.5rem; }
+  .js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; }
+  h4.mt-3 { margin-left: 0.5rem; }
 }
 
 .sidebar {
@@ -34,7 +41,6 @@ body {
   border-color: #d8224c;
   background-color: #d8224c;
   color: #fff;
-  font-size: 1.2rem;
 }
 
 .card-footer {
@@ -118,11 +124,11 @@ i.fa.fa-bars:hover{
   border-width: 0;
 }
 
-.service-status-running {
+.service-status-up {
   color: green;
 }
 
-.service-status-stopped {
+.service-status-down {
   color: red;
   animation: flash 1s linear infinite;
 }
diff --git a/app/css/hackernews.css b/app/css/hackernews.css
index 17b2b394..1b81b19d 100644
--- a/app/css/hackernews.css
+++ b/app/css/hackernews.css
@@ -38,7 +38,7 @@ h5.card-title {
 
 .card-header .col {
   color: #212529;
-  font-size: 1.1rem;
+  font-size: 1.0rem;
 }
 
 .card-header [class^="fa"] {
@@ -79,6 +79,17 @@ ul.nav-tabs, .nav-tabs .nav-link {
   background-color: #fff;
 }
 
+/* Small devices (portrait phones, up to 576px) */
+@media (max-width: 576px) {
+  .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
+  .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; }
+  .row { margin-left: 0rem; margin-right: 0rem; }
+  .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; }
+  .form-group.col-md-6 { margin-left: -0.5rem; }
+  .js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; }
+  h4.mt-3 { margin-left: 0.5rem; }
+}
+
 .card-body {
   background-color: #f6f6ef;
 }
@@ -130,15 +141,15 @@ ul.nav-tabs, .nav-tabs .nav-link {
   border-width: 0;
 }
 
-i.fas.fa-circle.service-status-running {
+i.fas.fa-circle.service-status-up {
   color: green;
 }
 
-i.fas.fa-circle.service-status-stopped {
+i.fas.fa-circle.service-status-down {
     color: red;
 }
 
-.service-status-stopped {
+.service-status-down {
   animation: flash 1s linear infinite;
 }
 @keyframes flash {
diff --git a/app/css/terminal.css b/app/css/terminal.css
index 3f0b2088..11e8cf89 100644
--- a/app/css/terminal.css
+++ b/app/css/terminal.css
@@ -29,6 +29,17 @@ h5.card-title {
   background-color: #000;
 }
 
+/* Small devices (portait phones, up to 576px) */
+@media (max-width: 576px) {
+  .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
+  .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; }
+  .row { margin-left: 0rem; margin-right: 0rem; }
+  .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; }
+  .form-group.col-md-6 { margin-left: -0.5rem; }
+  .js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; }
+  h4.mt-3 { margin-left: 0.5rem; }
+}
+
 .topbar {
   background-color: #000;
 }
@@ -113,7 +124,6 @@ a:focus, a:hover {
 
 .col {
   color: #000;
-  font-size: 1.2rem;
 }
 
 .card, .card-body {
@@ -341,12 +351,17 @@ tspan, rect {
   border-width: 0;
 }
 
-.service-status-running {
-  color: green;
+span.text.service-status {
+  font-size: 0.75rem;
+  margin-top: 0.2rem;
 }
 
-.service-status-stopped {
-  color: red;
+i.fas.fa-circle.service-status-up {
+  color: #2ee600;
+}
+
+i.fas.fa-circle.service-status-down {
+  color: #2ee600;
   animation: flash 1s linear infinite;
 }
 @keyframes flash {