diff --git a/components/common/NoData.module.css b/components/common/NoData.module.css
index 82f9c3ee..518fa488 100644
--- a/components/common/NoData.module.css
+++ b/components/common/NoData.module.css
@@ -1,8 +1,11 @@
 .container {
   color: var(--gray500);
   font-size: var(--font-size-normal);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
 }
diff --git a/components/layout/GridLayout.module.css b/components/layout/GridLayout.module.css
index f17c195e..675fce16 100644
--- a/components/layout/GridLayout.module.css
+++ b/components/layout/GridLayout.module.css
@@ -35,6 +35,6 @@
   .row > .col {
     border-top: 1px solid var(--gray300);
     border-left: 0;
-    padding: 0;
+    padding: 20px 0;
   }
 }
diff --git a/components/metrics/DataTable.module.css b/components/metrics/DataTable.module.css
index b8b203c4..b21b92b9 100644
--- a/components/metrics/DataTable.module.css
+++ b/components/metrics/DataTable.module.css
@@ -1,14 +1,15 @@
 .table {
   position: relative;
+  height: 100%;
   font-size: var(--font-size-small);
-  display: flex;
-  flex-direction: column;
-  flex: 1;
+  display: grid;
+  grid-template-rows: fit-content(100%) auto;
   overflow: hidden;
 }
 
 .body {
   position: relative;
+  height: 100%;
   overflow: auto;
 }
 
diff --git a/components/metrics/MetricsTable.module.css b/components/metrics/MetricsTable.module.css
index e93f536e..d3a70866 100644
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@@ -1,6 +1,7 @@
 .container {
   position: relative;
   min-height: 430px;
+  height: 100%;
   font-size: var(--font-size-small);
   display: flex;
   flex-direction: column;
diff --git a/components/metrics/RealtimeLog.js b/components/metrics/RealtimeLog.js
index 63add268..b5e7a65b 100644
--- a/components/metrics/RealtimeLog.js
+++ b/components/metrics/RealtimeLog.js
@@ -176,9 +176,11 @@ export default function RealtimeLog({ data, websites, websiteId }) {
       </div>
       <div className={styles.body}>
         {logs?.length === 0 && <NoData />}
-        <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
-          {Row}
-        </FixedSizeList>
+        {logs?.length > 0 && (
+          <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
+            {Row}
+          </FixedSizeList>
+        )}
       </div>
     </div>
   );
diff --git a/components/metrics/RealtimeLog.module.css b/components/metrics/RealtimeLog.module.css
index 6fb09a64..7c07d017 100644
--- a/components/metrics/RealtimeLog.module.css
+++ b/components/metrics/RealtimeLog.module.css
@@ -1,6 +1,9 @@
 .table {
   font-size: var(--font-size-xsmall);
   overflow: hidden;
+  height: 100%;
+  display: grid;
+  grid-template-rows: fit-content(100%) fit-content(100%) auto;
 }
 
 .header {
@@ -21,6 +24,7 @@
 
 .body {
   overflow: auto;
+  height: 100%;
 }
 
 .icon {