diff --git a/src/components/HomeAssistant/HomeAssistant.tsx b/src/components/HomeAssistant/HomeAssistant.tsx
index 472a8a1..8efd805 100644
--- a/src/components/HomeAssistant/HomeAssistant.tsx
+++ b/src/components/HomeAssistant/HomeAssistant.tsx
@@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import { useHomeAssistantStore } from "@/store/homeAssistant";
 
+import style from "./style.module.css";
+
 export default function Timetable() {
     const fetchHomeAssistantData = useHomeAssistantStore(
         (state) => state.fetch,
@@ -21,8 +23,17 @@ export default function Timetable() {
     return (
         <div>
             <h1>Tent</h1>
-            <p>Temperature: {tentTemperature}°C</p>
-            <p>Humidity: {tentHumidity}%</p>
+            <div className={style.cardContainer}>
+                <div className={style.card}>
+                    <h4>Temperature</h4>
+                    <p>{tentTemperature}°C</p>
+                </div>
+
+                <div className={style.card}>
+                    <h4>Humidity</h4>
+                    <p>{tentHumidity}%</p>
+                </div>
+            </div>
         </div>
     );
 }
diff --git a/src/components/HomeAssistant/style.module.css b/src/components/HomeAssistant/style.module.css
new file mode 100644
index 0000000..44f61b0
--- /dev/null
+++ b/src/components/HomeAssistant/style.module.css
@@ -0,0 +1,18 @@
+.cardContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.card {
+    height: 150px;
+    width: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border: 1px solid rgba(220, 220, 220, 0.4);
+    box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
+    border-radius: 10px;
+}