src/App.css

@@ -3,5 +3,5 @@
     max-width: 1280px;
     margin: 0 auto;
     padding: 0;
-    text-align: center;
+    text-align: left;
 }

src/components/Dashboard/Dashboard.tsx

@@ -10,13 +10,24 @@ export default function Dashboard() {
         <div className={style.dashboard}>
             <div className={style.cardWrapper}>
                 <div className={style.card}>
-                    <Timetable />
+                    <div className={style.cardHeader}>🕐 Timetable</div>
+                    <div className={style.cardContent}>
+                        <Timetable />
+                    </div>
                 </div>
                 <div className={style.card}>
-                    <Flatastic />
+                    <div className={style.cardHeaderInactive}>🧹 Flatastic</div>
+                    <div className={style.cardContent}>
+                        <Flatastic />
+                    </div>
                 </div>
                 <div className={style.card}>
-                    <HomeAssistant />
+                    <div className={style.cardHeaderInactive}>
+                        🏠 HomeAssistant [Tent]
+                    </div>
+                    <div className={style.cardContent}>
+                        <HomeAssistant />
+                    </div>
                 </div>
             </div>
 

src/components/Dashboard/style.module.css

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    background-color: #007c7d;
 }
 
 .cardWrapper {
@@ -14,12 +15,37 @@
 }
 
 .card {
-    border-radius: 10px;
+    flex-direction: column;
+    justify-content: flex-start;
+    background-color: #c0c0c0;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
+}
+
+.cardContent {
     padding: 1px 100px 30px 100px;
-    border: 1px solid rgba(220, 220, 220, 0.4);
-    box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
+}
+
+.cardHeader {
+  height: 30px;
+  color: white;
+  background-color: #000082;
+  text-align: left;
+  padding-left: 5px;
+  font-weight: bold;
+}
+
+.cardHeaderInactive {
+  height: 30px;
+  color: #c0c0c0;
+  background-color: #808080;
+  text-align: left;
+  padding-left: 5px;
+  font-weight: bold;
 }
 
 .footer {
-    background-color: rgba(220, 220, 220, 0.5);
+    background-color: #c0c0c0;
 }

src/components/DepartureList/style.module.css

@@ -2,11 +2,12 @@
     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;
     padding: 0 10px 20px 10px;
     margin-bottom: 20px;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
 }
 
 .departureLists {

src/components/Flatastic/style.module.css

@@ -3,16 +3,18 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  border-radius: 10px;
+
   gap: 10px;
   padding: 10px 0;
 }
 
 .chore {
   padding: 5px 10px;
-  border: 1px solid rgba(220, 220, 220, 0.4);
-  box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
   text-align: left;
+  border-top: 2px solid white;
+  border-left: 2px solid white;
+  border-bottom: 2px solid #828282;
+  border-right: 2px solid #828282;
 }
 
 .userName {

src/components/Footer/Footer.tsx

@@ -8,9 +8,23 @@ export default function Footer() {
 
     return (
         <div className={style.container}>
-            <div className={style.info}>BREAKING</div>
-            <div className={style.marquee}>
-                <Marquee>{pasta}</Marquee>
+            <div className={style.taskbar}>
+                <div className={style.startButton}>
+                    <img className={style.startIcon} src="resources/weed.png" />
+                    Start
+                </div>
+                <span className={style.divider}></span>
+                <div className={style.windows}>
+                    <span className={style.window}>🕐 Timetable</span>
+                    <span className={style.window}>🧹 Flatastic</span>
+                    <span className={style.window}>🏠 HomeAssistant</span>
+                </div>
+            </div>
+            <div className={style.newsticker}>
+                <div className={style.info}>BREAKING</div>
+                <div className={style.marquee}>
+                    <Marquee>{pasta}</Marquee>
+                </div>
             </div>
         </div>
     );

src/components/Footer/style.module.css

@@ -1,17 +1,77 @@
 .container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 20px;
+}
+
+.taskbar {
+    font-weight: bold;
+    height: 35px;
+    display: flex;
+    flex-direction: row;
+    text-align: left;
+}
+
+.startButton {
+    display: inline-flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100px;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
+}
+
+.startIcon {
+    height: 30px;
+}
+
+.divider {
+    margin: auto 8px;
+    width: 4px;
+    height: 25px;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
+}
+
+.windows {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+}
+
+.window {
+    min-width: 150px;
+    padding-left: 10px;
+    display: inline-flex;
+    align-items: center;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
+}
+
+.newsticker {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
 }
 
 .info {
-  background-color: red;
-  color: white;
-  font-weight: bold;
-  padding: 5px;
+    background-color: red;
+    color: white;
+    font-weight: bold;
+    padding: 5px;
 }
 
 .marquee {
-
 }

src/components/HomeAssistant/HomeAssistant.tsx

@@ -22,7 +22,6 @@ export default function Timetable() {
 
     return (
         <div>
-            <h1>Tent</h1>
             <div className={style.cardContainer}>
                 <div className={style.card}>
                     <h4>Temperature</h4>

src/components/HomeAssistant/style.module.css

@@ -1,7 +1,8 @@
 .cardContainer {
+    padding-top: 20px;
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     gap: 20px;
 }
@@ -12,7 +13,9 @@
     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;
+    text-align: center;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
 }

src/components/Timetable/Timetable.tsx

@@ -19,7 +19,7 @@ export default function Timetable() {
 
     return (
         <div className={style.wrapper}>
-            <h1>Timetable 🚉</h1>
+            <h1>Departures</h1>
             <DepartureList departures={pStreet.departureList} name="P-Street" />
             <DepartureList departures={hStreet.departureList} name="H-Street" />
         </div>