diff --git a/ui/src/app/page.js b/ui/src/app/page.js
index 83ee007..eafd075 100644
--- a/ui/src/app/page.js
+++ b/ui/src/app/page.js
@@ -1,6 +1,4 @@
-import axios from "axios";
 import CounterDisplay from "@/components/CounterDisplay";
-import CounterCard from "@/components/Card";
 
 /**
  * @typedef {Object} CounterApiResponse
@@ -73,13 +71,11 @@ const Home = async () => {
   const data = await fetchCounter();
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex"></div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+    <main className="flex min-h-screen flex-col items-center justify-center p-5">
+      <div className="z-10 max-w-5xl w-full flex flex-col items-center justify-center font-mono text-sm lg:flex"></div>
+      <div className="flex flex-col items-center justify-center">
         <CounterDisplay currentValue={data.currentValue} error={data.error} />
       </div>
-      <div>{/* <CounterCard /> */}</div>
     </main>
   );
 };
diff --git a/ui/src/components/Card/index.jsx b/ui/src/components/Card/index.jsx
deleted file mode 100644
index 96ebb35..0000000
--- a/ui/src/components/Card/index.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-
-const CounterCard = ({ currentValue, error }) => {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card Description</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>Card Content</p>
-      </CardContent>
-      <CardFooter>
-        <p>Card Footer</p>
-      </CardFooter>
-    </Card>
-  );
-};
-
-export default CounterCard;
diff --git a/ui/src/components/CounterDisplay/index.jsx b/ui/src/components/CounterDisplay/index.jsx
index 7629d63..8885934 100644
--- a/ui/src/components/CounterDisplay/index.jsx
+++ b/ui/src/components/CounterDisplay/index.jsx
@@ -2,14 +2,15 @@
 
 const CounterDisplay = ({ currentValue, error }) => {
   return (
-    <div>
+    <div className="flex items-center justify-center h-full text-center">
       {error ? (
         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
           {error}
         </h1>
       ) : (
         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-          Current streak: {currentValue} days 🔥
+          Current streak:
+          <br /> {currentValue} days 🔥
         </h1>
       )}
     </div>