diff --git a/package-lock.json b/package-lock.json
index c06388b..5f36910 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,6 +60,7 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -886,6 +887,7 @@
       "integrity": "sha512-YJ7EqCstVTzIr0fMr7qul/977en+pQHrfmuKIo6Zr9i75Be21dr3MovcfvGtyvi2HAUrRerWps5sMO9I7WaxDw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -896,6 +898,7 @@
       "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -955,6 +958,7 @@
       "integrity": "sha512-zYvrmj9Yxd63UGaXw+kdt6A0F0s0qveJyuatIM77bYC2DE4pgmg7a50u8LR7PRtXd0x+h+Tl3eXabGm06SWd3Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.70.0",
         "@typescript-eslint/types": "8.70.0",
@@ -1189,6 +1193,7 @@
       "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1279,6 +1284,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.11.23",
         "caniuse-lite": "^1.0.30001810",
@@ -1437,6 +1443,7 @@
       "integrity": "sha512-NPXn6r5zl4uET1DAVPaOwzX3rut4c0wcmw3dWJAfOsTM5+TogXo0DDjz8pwm/hL8cyVNpHqeK4JpN0NjnyFFNw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "workspaces": [
         "packages/*"
       ],
@@ -1892,6 +1899,7 @@
       "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@keyv/serialize": "^1.1.1"
       }
@@ -2339,6 +2347,7 @@
       "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2436,6 +2445,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz",
       "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2584,6 +2594,7 @@
       "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -2670,6 +2681,7 @@
       "integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.7",
@@ -2794,6 +2806,7 @@
       "integrity": "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/App.css b/src/App.css
index a4bc79d..a0846ca 100644
--- a/src/App.css
+++ b/src/App.css
@@ -181,3 +181,23 @@
     border-right-color: var(--border);
   }
 }
+
+.list-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #bcebff;
+  color: #000000;
+  padding: 10px;
+  border-radius: 15px;
+  width: 80%;
+  margin-right: 5px;
+  border: 1px solid #000000;
+}
+
+@media (max-width: 512px) {
+  .list-item {
+    flex-direction: column;
+    height: auto;
+  }
+}
diff --git a/src/components/listItem.tsx b/src/components/listItem.tsx
index 352c3c8..38105d9 100644
--- a/src/components/listItem.tsx
+++ b/src/components/listItem.tsx
@@ -1,27 +1,25 @@
+import "../App.css"
+import StarButton from "./starButton"
+
 type cityWeather = {
-  name?: string
+  name: string
   temperature?: number
   precipitation?: number
-  nextDays?: { time: string; temperature: number | undefined }[]
+  nextDays?: { time: string; temperature?: number; precipitation?: number }[]
 }
 
 const listItem = ({ city: item }: { city: cityWeather }) => {
   return (
-    <li
-      key={item.name}
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        backgroundColor: "#bcebff",
-        color: "#000000",
-        padding: "10px",
-        borderRadius: "15px",
-        width: "80%",
-        marginRight: "5px",
-      }}
-    >
-      <span style={{ display: "flex" }}>
+    <li key={item.name} className="list-item">
+      <span
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          gap: "10px",
+          alignItems: "center",
+        }}
+      >
+        <StarButton cityName={item.name} />
         {item.name}:
         <span>
           {typeof item.precipitation === "number" && item.precipitation > 0.6
@@ -35,9 +33,19 @@ const listItem = ({ city: item }: { city: cityWeather }) => {
         </p>
       </span>
 
-      <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          gap: "10px",
+          alignSelf: "end",
+        }}
+      >
         {item.nextDays?.map((day) => (
-          <span key={day.time} style={{ color: "#ff3232" }}>
+          <span key={day.time} style={{ color: "#ff3232", marginRight: "8px" }}>
+            {typeof day.precipitation === "number" && day.precipitation > 0.6
+              ? "🌧️"
+              : "⛅"}
             {typeof day.temperature === "number"
               ? `${day.temperature.toFixed()}°`
               : "—"}
diff --git a/src/components/location-list.tsx b/src/components/location-list.tsx
index 0b5f007..b0a8586 100644
--- a/src/components/location-list.tsx
+++ b/src/components/location-list.tsx
@@ -35,6 +35,7 @@ const getNextDays = (data?: WeatherApiResponse) => {
     })
     .map((entry) => ({
       time: entry.time,
+      precipitation: entry.data.next_6_hours?.details?.precipitation_amount,
       temperature: entry.data.instant.details?.air_temperature,
     }))
 
diff --git a/src/components/starButton.tsx b/src/components/starButton.tsx
new file mode 100644
index 0000000..7831590
--- /dev/null
+++ b/src/components/starButton.tsx
@@ -0,0 +1,21 @@
+import { useAppStorage } from "../hooks/useStorage"
+
+const StarButton = ({ cityName }: { cityName: string }) => {
+  const { storage, toggleStarredLocation } = useAppStorage()
+
+  const handleClick = () => {
+    toggleStarredLocation(cityName)
+  }
+
+  return (
+    <button onClick={handleClick}>
+      {storage.starredLocations.includes(cityName) ? (
+        <span style={{ color: "#ffee00" }}>⭐</span>
+      ) : (
+        <span style={{ color: "#000000" }}>☆</span>
+      )}
+    </button>
+  )
+}
+
+export default StarButton
diff --git a/src/hooks/fetchWeather/types.ts b/src/hooks/fetchWeather/types.ts
index 74b5b75..4699941 100644
--- a/src/hooks/fetchWeather/types.ts
+++ b/src/hooks/fetchWeather/types.ts
@@ -176,7 +176,7 @@ export type METJSONForecast = {
 }
 
 export type City = {
-  name?: string
+  name: string
   lat: number
   lon: number
   alt?: number
diff --git a/src/index.css b/src/index.css
index d028fa2..8d5f416 100644
--- a/src/index.css
+++ b/src/index.css
@@ -94,3 +94,9 @@ ul {
   list-style-type: none; /* Removes the dots */
   padding: 0; /* Removes default left indentation */
 }
+
+button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}