diff --git a/assets/components/ContainerViewer/ContainerLog.vue b/assets/components/ContainerViewer/ContainerLog.vue
index bfec5da0..8303cd4a 100644
--- a/assets/components/ContainerViewer/ContainerLog.vue
+++ b/assets/components/ContainerViewer/ContainerLog.vue
@@ -9,7 +9,7 @@
           v-if="container.state === 'running'"
         />
 
-        <ContainerActionsToolbar @clear="viewer?.clear()" class="mobile-hidden" :container="container" />
+        <ContainerActionsToolbar @clear="viewer?.clear()" class="max-md:hidden" :container="container" />
         <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">
           <mdi:close />
         </a>
diff --git a/assets/components/ContainerViewer/ContainerTitle.vue b/assets/components/ContainerViewer/ContainerTitle.vue
index b66dd440..3dd231ca 100644
--- a/assets/components/ContainerViewer/ContainerTitle.vue
+++ b/assets/components/ContainerViewer/ContainerTitle.vue
@@ -8,7 +8,7 @@
     <div class="inline-flex items-center text-sm">
       <div class="breadcrumbs p-0">
         <ul>
-          <li v-if="config.hosts.length > 1" class="mobile-hidden font-thin">
+          <li v-if="config.hosts.length > 1" class="font-thin max-md:hidden">
             {{ container.hostLabel }}
           </li>
           <li>
@@ -38,7 +38,7 @@
       </div>
     </div>
     <ContainerHealth :health="container.health" v-if="container.health" />
-    <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+    <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
       {{ container.image.replace(/@sha.*/, "") }}
     </Tag>
   </div>
diff --git a/assets/components/GroupedViewer/GroupedLog.vue b/assets/components/GroupedViewer/GroupedLog.vue
index edda08a6..cba9e445 100644
--- a/assets/components/GroupedViewer/GroupedLog.vue
+++ b/assets/components/GroupedViewer/GroupedLog.vue
@@ -8,7 +8,7 @@
           </div>
         </div>
         <MultiContainerStat class="ml-auto" :containers="group.containers" />
-        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
+        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>
     </template>
     <template #default>
diff --git a/assets/components/HostList.vue b/assets/components/HostList.vue
index 582a23ac..a5f3f93a 100644
--- a/assets/components/HostList.vue
+++ b/assets/components/HostList.vue
@@ -23,10 +23,10 @@
             </span>
           </div>
           <ul class="flex flex-row gap-x-2 text-sm md:gap-3">
-            <li class="flex items-center gap-1"><ph:cpu /> {{ host.nCPU }} <span class="mobile-hidden">CPUs</span></li>
+            <li class="flex items-center gap-1"><ph:cpu /> {{ host.nCPU }} <span class="max-md:hidden">CPUs</span></li>
             <li class="flex items-center gap-1">
               <ph:memory /> {{ formatBytes(host.memTotal) }}
-              <span class="mobile-hidden">total</span>
+              <span class="max-md:hidden">total</span>
             </li>
           </ul>
           <ul class="flex flex-row flex-wrap gap-x-2 text-sm md:gap-3">
diff --git a/assets/components/HostViewer/HostLog.vue b/assets/components/HostViewer/HostLog.vue
index 3a5e9c70..78d843b0 100644
--- a/assets/components/HostViewer/HostLog.vue
+++ b/assets/components/HostViewer/HostLog.vue
@@ -7,12 +7,12 @@
           <div class="inline-flex font-mono text-sm">
             <div class="font-semibold">{{ host.name }}</div>
           </div>
-          <Tag class="mobile-hidden font-mono" size="small">
+          <Tag class="font-mono max-md:hidden" size="small">
             {{ $t("label.container", containers.length) }}
           </Tag>
         </div>
         <MultiContainerStat class="ml-auto" :containers="containers" />
-        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
+        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>
     </template>
     <template #default>
diff --git a/assets/components/LogViewer/LogAnalytics.vue b/assets/components/LogViewer/LogAnalytics.vue
index 4fc2823c..564d54ea 100644
--- a/assets/components/LogViewer/LogAnalytics.vue
+++ b/assets/components/LogViewer/LogAnalytics.vue
@@ -1,7 +1,7 @@
 <template>
   <aside>
     <header class="flex items-center gap-4">
-      <h1 class="mobile-hidden text-2xl">{{ container.name }}</h1>
+      <h1 class="text-2xl max-md:hidden">{{ container.name }}</h1>
       <h2 class="text-sm"><DistanceTime :date="container.created" /></h2>
     </header>
 
diff --git a/assets/components/LogViewer/LogDetails.vue b/assets/components/LogViewer/LogDetails.vue
index c3a9713e..e238e285 100644
--- a/assets/components/LogViewer/LogDetails.vue
+++ b/assets/components/LogViewer/LogDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <header class="flex items-center gap-4">
     <Tag :data-level="entry.level" class="text-white uppercase" v-if="entry.level">{{ entry.level }}</Tag>
-    <h1 class="mobile-hidden text-lg">
+    <h1 class="text-lg max-md:hidden">
       <DateTime :date="entry.date" />
     </h1>
     <h2 class="text-sm"><DistanceTime :date="entry.date" /> on {{ entry.std }}</h2>
@@ -47,7 +47,7 @@
       <thead class="text-lg">
         <tr>
           <th class="w-60">Field</th>
-          <th class="mobile-hidden">Value</th>
+          <th class="max-md:hidden">Value</th>
           <th class="w-20">
             <input type="checkbox" class="toggle toggle-primary" v-model="toggleAllFields" title="Toggle all" />
           </th>
@@ -58,7 +58,7 @@
           <td class="cursor-move font-mono break-all">
             {{ key.join(".") }}
           </td>
-          <td class="mobile-hidden truncate">
+          <td class="truncate max-md:hidden">
             <code v-html="JSON.stringify(value)"></code>
           </td>
           <td>
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index c731abf0..01d506cb 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
       <!--v-if-->
       <!--v-if-->
       <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
       <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
       <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
@@ -28,7 +28,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
       <!--v-if-->
       <!--v-if-->
       <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
+        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
       </div>
       <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
       <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
@@ -48,7 +48,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
       <!--v-if-->
       <!--v-if-->
       <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
       <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
       <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
diff --git a/assets/components/MultiContainerViewer/MultiContainerLog.vue b/assets/components/MultiContainerViewer/MultiContainerLog.vue
index 44f39453..2b61cce9 100644
--- a/assets/components/MultiContainerViewer/MultiContainerLog.vue
+++ b/assets/components/MultiContainerViewer/MultiContainerLog.vue
@@ -9,7 +9,7 @@
           </div>
         </div>
         <MultiContainerStat class="ml-auto" :containers="containers" />
-        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
+        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>
     </template>
     <template #default>
diff --git a/assets/components/ServiceViewer/ServiceLog.vue b/assets/components/ServiceViewer/ServiceLog.vue
index accaf67c..59a4ea23 100644
--- a/assets/components/ServiceViewer/ServiceLog.vue
+++ b/assets/components/ServiceViewer/ServiceLog.vue
@@ -7,12 +7,12 @@
           <div class="inline-flex font-mono text-sm">
             <div class="font-semibold">{{ service.name }}</div>
           </div>
-          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
             {{ $t("label.container", service.containers.length) }}
           </Tag>
         </div>
         <MultiContainerStat class="ml-auto" :containers="service.containers" />
-        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
+        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>
     </template>
     <template #default>
diff --git a/assets/components/StackViewer/StackLog.vue b/assets/components/StackViewer/StackLog.vue
index 183b93e6..8436d28e 100644
--- a/assets/components/StackViewer/StackLog.vue
+++ b/assets/components/StackViewer/StackLog.vue
@@ -7,15 +7,15 @@
           <div class="inline-flex font-mono text-sm">
             <div class="font-semibold">{{ stack.name }}</div>
           </div>
-          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
             {{ $t("label.container", stack.containers.length) }}
           </Tag>
-          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
             {{ $t("label.serivce", stack.services.length) }}
           </Tag>
         </div>
         <MultiContainerStat class="ml-auto" :containers="stack.containers" />
-        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
+        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>
     </template>
     <template #default>
diff --git a/assets/components/common/DateTime.vue b/assets/components/common/DateTime.vue
index 09806efb..8f41cdbf 100644
--- a/assets/components/common/DateTime.vue
+++ b/assets/components/common/DateTime.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="inline-flex gap-2">
-    <time :datetime="date.toISOString()" class="mobile-hidden">{{ dateStr }}</time>
+    <time :datetime="date.toISOString()" class="max-md:hidden">{{ dateStr }}</time>
     <time :datetime="date.toISOString()">{{ timeStr }}</time>
   </div>
 </template>
diff --git a/assets/main.css b/assets/main.css
index 681e014f..b5d8bce9 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -104,12 +104,6 @@
   }
 }
 
-@utility mobile-hidden {
-  @media (max-width: 768px) {
-    display: none;
-  }
-}
-
 @utility menu-active {
   &,
   &:active {