diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index 4ea5491..7dba330 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -130,7 +130,7 @@
   $: loadUnits($initialized)
 </script>
 
-<Row>
+<Row cols={{ xs: 2, lg: 4 }}>
   {#if $initq.error}
     <Card body color="danger">{$initq.error.message}</Card>
   {:else if $initq.fetching}
@@ -149,7 +149,7 @@
       <TimeSelection bind:from bind:to />
     </Col>
     <!-- Concurrent Col -->
-    <Col>
+    <Col class="mt-2 mt-lg-0">
       {#if $nodeJobsData.fetching}
         <Spinner />
       {:else if $nodeJobsData.data}
@@ -168,7 +168,7 @@
       {/if}
     </Col>
     <!-- Refresh Col-->
-    <Col>
+    <Col class="mt-2 mt-lg-0">
       <Refresher
         on:refresh={() => {
           const diff = Date.now() - to;
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index 8ff1aef..8894fd9 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -111,7 +111,7 @@
 
 </script>
 
-<Row>
+<Row cols={{ xs: 2, lg: 4 }}>
   {#if $initq.error}
     <Card body color="danger">{$initq.error.message}</Card>
   {:else if $initq.fetching}
@@ -134,7 +134,7 @@
       <TimeSelection bind:from bind:to />
     </Col>
     <!-- Metric Col-->
-    <Col>
+    <Col class="mt-2 mt-lg-0">
       <InputGroup>
         <InputGroupText><Icon name="graph-up" /></InputGroupText>
         <InputGroupText>Metric</InputGroupText>
@@ -148,7 +148,7 @@
       </InputGroup>
     </Col>
     <!-- Refresh Col-->
-    <Col>
+    <Col class="mt-2 mt-lg-0">
       <Refresher
         on:refresh={() => {
           const diff = Date.now() - to;