diff --git a/components/CardDetail.tsx b/components/CardDetail.tsx
index 97f8b2e..436a663 100644
--- a/components/CardDetail.tsx
+++ b/components/CardDetail.tsx
@@ -1,20 +1,28 @@
 import React from 'react';
+import dynamic from 'next/dynamic';
+
+import Gauge from './Gauge';
 import { getPerfColorClass, getLCPColorClass, getFIDColorClass, getCLSColorClass } from '../utils/getColorClass';
 
-const CardDetail = ({ data, title }): React.ReactElement => {
+const ChartTimeline = dynamic(() => import('./ChartTimeline'), { ssr: false });
+
+const CardDetail = ({ data, allData }): React.ReactElement => {
   return (
-    <div className="mt-4 p-4 bg-white shadow overflow-hidden rounded-lg">
-      <div className="flex justify-center space-between">
-        <div className="text-gray-600 my-2 mr-2 text-center">
-          <small className="text-sm font-bold">{title}</small>
-          <div className={`text-6xl font-bold capitalize ${getPerfColorClass(data.perf)}`}>
-            {(data.perf * 100).toFixed(0)}
+    <>
+      <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="p-2 bg-white shadow overflow-hidden rounded-lg">
+          <div className="flex justify-center items-center">
+            <Gauge score={data.perf} variant="large" />
           </div>
         </div>
+
+        <div className="p-2 bg-white shadow overflow-hidden rounded-lg">
+          <ChartTimeline data={allData} title="Performance Score" dataKey="perf" />
+        </div>
       </div>
 
-      <div className="flex justify-center space-between my-2">
-        <div className="w-20 my-2 mr-4 text-center">
+      <div className="mt-4 grid grid-cols-3 gap-4">
+        <div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
           <small className="text-xs text-gray-600 italic">(Loading)</small>
           <h3 className="text-3xl text-blue-500 font-bold">LCP</h3>
           <div className="text-center">
@@ -24,7 +32,7 @@ const CardDetail = ({ data, title }): React.ReactElement => {
             <small className="text-lg font-bold text-gray-600 ml-1">s</small>
           </div>
         </div>
-        <div className="w-20 my-2 mr-4 text-center">
+        <div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
           <small className="text-xs text-gray-600 italic">(Interactivity)</small>
           <h3 className="text-3xl text-blue-500 font-bold">FID</h3>
           <div className="text-center">
@@ -34,7 +42,7 @@ const CardDetail = ({ data, title }): React.ReactElement => {
             <small className="text-lg font-bold text-gray-600 ml-1">ms</small>
           </div>
         </div>
-        <div className="w-20 my-2 mr-4 text-center">
+        <div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
           <small className="text-xs text-gray-600 italic">(Stability)</small>
           <h3 className="text-3xl text-blue-500 font-bold">CLS</h3>
           <div className={`text-3xl text-gray-600 font-bold capitalize ${getCLSColorClass(data.cls)}`}>
@@ -43,22 +51,22 @@ const CardDetail = ({ data, title }): React.ReactElement => {
         </div>
       </div>
 
-      <div className="flex justify-center space-between my-2">
-        <div className="w-20 my-2 mr-4 text-center">
+      <div className="mt-4 grid grid-cols-3 gap-4">
+        <div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
           <small className="text-sm text-blue-500 font-bold">TBT</small>
           <div className="text-center">
             <span className={`text-3xl text-gray-600 font-bold capitalize`}>{(data.tbt / 1000).toFixed(2)}</span>
             <small className="text-lg font-bold text-gray-600 ml-1">s</small>
           </div>
         </div>
-        <div className="w-20 my-2 mr-4 text-center">
+        <div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
           <small className="text-sm text-blue-500 font-bold">FCP</small>
           <div className="text-center">
             <span className={`text-3xl text-gray-600 font-bold capitalize`}>{(data.fcp / 1000).toFixed(2)}</span>
             <small className="text-lg font-bold text-gray-600 ml-1">s</small>
           </div>
         </div>
-        <div className="w-20 my-2 mr-4 text-center">
+        <div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
           <small className="text-sm text-blue-500 font-bold">TTI</small>
           <div className="text-center">
             <span className={`text-3xl text-gray-600 font-bold capitalize`}>{(data.tti / 1000).toFixed(2)}</span>
@@ -66,7 +74,7 @@ const CardDetail = ({ data, title }): React.ReactElement => {
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/components/ChartTimeline.tsx b/components/ChartTimeline.tsx
index 5cf7e90..34f8647 100644
--- a/components/ChartTimeline.tsx
+++ b/components/ChartTimeline.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import Chart from 'react-apexcharts';
 
-const ChartTimeline = ({ data, title }): React.ReactElement => {
+const ChartTimeline = ({ data, title, dataKey }): React.ReactElement => {
   const series = [
     {
       name: 'Mobile',
       data: data.map((item) => {
         return {
           x: item.date,
-          y: parseInt((item.m.perf * 100).toFixed(0), 10),
+          y: parseInt((item.m[dataKey] * 100).toFixed(0), 10),
         };
       }),
     },
@@ -17,7 +17,7 @@ const ChartTimeline = ({ data, title }): React.ReactElement => {
       data: data.map((item) => {
         return {
           x: item.date,
-          y: parseInt((item.d.perf * 100).toFixed(0), 10),
+          y: parseInt((item.d[dataKey] * 100).toFixed(0), 10),
         };
       }),
     },
@@ -49,10 +49,10 @@ const ChartTimeline = ({ data, title }): React.ReactElement => {
   };
 
   return (
-    <div className="mt-4 p-4 bg-white shadow overflow-hidden rounded-lg">
-      <div>{title}</div>
+    <>
+      <div className="text-gray-600">{title}</div>
       <Chart options={options} series={series} width="100%" />
-    </div>
+    </>
   );
 };
 
diff --git a/css/index.css b/css/index.css
index 5e36f2a..62f98f6 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,63 +1,71 @@
+
+:root {
+  --fast: #0cce6b;
+  --avg: #ffa400;
+  --slow: #ff4e42;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 .lh-gauge__wrapper {
-	margin: '24px 0 12px 0';
-	position: 'relative';
-	display: 'flex';
-	align-items: 'center';
-	flex-direction: 'column';
-	text-decoration: 'none';
-	padding: '8px';
-	contain: 'content';
-	will-change: 'opacity';
-};
+  margin: 24px 0 12px 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-decoration: none;
+  padding: 8px;
+  contain: content;
+  will-change: opacity;
+}
+
 
 .lh-gauge__text {
-	font-size: '20px';
-	line-height: 1;
-	color: '#000';
-	text-align: 'center';
-	margin-top: '10px';
-};
+  font-size: 20px;
+  line-height: 1;
+  color: #000;
+  text-align: center;
+  margin-top: 10px;
+}
 
 .is--fast {
-	color: '#0cce6b';
-	fill: '#0cce6b';
-	stroke: '#0cce6b';
+  color: var(--fast);
+  fill: var(--fast);
+  stroke: var(--fast);
 }
 
 .is--avg {
-	color: '#ffa400';
-	fill: '#ffa400';
-	stroke: '#ffa400';
+  color: var(--avg);
+  fill: var(--avg);
+  stroke: var(--avg);
 }
 
 .is--slow {
-	color: '#ff4e42';
-	fill: '#ff4e42';
-	stroke: '#ff4e42';
+  color: var(--slow);
+  fill: var(--slow);
+  stroke: var(--slow);
 }
 
 .svg-circle {
-	opacity: 0.1;
-	stroke-width: 8;
-};
+  opacity: 0.1;
+  stroke-width: 8;
+}
 
 .svg-circle__arc {
-	fill: 'none';
-	stroke-width: 8;
-};
+  fill: none;
+  stroke-width: 8;
+}
 
 .stroke--slow {
-	stroke: '#ff4e42';
-};
+  stroke: var(--slow);
+}
 
 .stroke--avg {
-	stroke: '#ffa400';
-};
+  stroke: var(--avg);
+}
 
 .stroke--fast {
-	stroke: '#0cce6b';
-};
+  stroke: var(--fast);
+}
diff --git a/pages/[id].tsx b/pages/[id].tsx
index edf0259..34d7568 100644
--- a/pages/[id].tsx
+++ b/pages/[id].tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { GetStaticProps, GetStaticPaths } from 'next';
-import dynamic from 'next/dynamic';
 
 import Layout from '../components/Layout';
 import DesktopIcon from '../components/Icons/Desktop';
@@ -11,8 +10,6 @@ import reports from '../reports/output';
 import dataEcommerce from '../constants/ecommerce';
 import { EcommerceItem } from '../types';
 
-const ChartTimeline = dynamic(() => import('../components/ChartTimeline'), { ssr: false });
-
 const DetailPage = ({ data, allData, logo, lastUpdate }): React.ReactElement => {
   const [showDevice, setShowDevice] = useState('desktop');
 
@@ -51,11 +48,7 @@ const DetailPage = ({ data, allData, logo, lastUpdate }): React.ReactElement =>
         </div>
       </div>
 
-      <CardDetail
-        data={showDevice === 'desktop' ? data.d : data.m}
-        title={showDevice === 'desktop' ? 'Desktop' : 'Mobile'}
-      />
-      <ChartTimeline data={allData} title="Performance Score" />
+      <CardDetail data={showDevice === 'desktop' ? data.d : data.m} allData={allData} />
     </Layout>
   );
 };