diff --git a/package-lock.json b/package-lock.json
index aee3ff5..f3f7d3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1389,6 +1390,7 @@
       "integrity": "sha512-WOhQTZ4G8xZ1tjJTvKOpyEVSGgOTvJAfDK3FNFgELyaTpzhdgHVHeqW8V+UJvzF5BT+/B54T/1S2K6gd9c7bbA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1399,6 +1401,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1458,6 +1461,7 @@
       "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.49.0",
         "@typescript-eslint/types": "8.49.0",
@@ -1709,6 +1713,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1814,6 +1819,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2035,6 +2041,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2721,6 +2728,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2782,6 +2790,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
       "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2984,6 +2993,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3070,6 +3080,7 @@
       "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -3191,6 +3202,7 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/App.tsx b/src/App.tsx
index b16f189..3f38986 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,7 +56,21 @@ export default function App() {
 
       <main>
         <div className="shows-grid">
-        {/* TODO - shows.map((show)=>{ return <ShowCard id={show.id} .../> })*/}
+        {
+          shows.map((show) =>{
+            return(
+              <ShowCard
+              key={show.id}
+              artist ={show.artist}
+              stage ={show.stage}
+              day ={show.day}
+              hour = {show.hour}
+              ticketsLeft = {show.ticketsLeft}
+              image = {show.image}
+              />
+            );
+          }
+          )}
         </div>
       </main>
     </div>
diff --git a/src/components/showCard/ShowCard.tsx b/src/components/showCard/ShowCard.tsx
index 7e18a47..bebaa01 100644
--- a/src/components/showCard/ShowCard.tsx
+++ b/src/components/showCard/ShowCard.tsx
@@ -9,64 +9,75 @@ export interface ShowCardProps {
   image: string;
 }
 
-export default function ShowCard(
-  /* TODO 1: Accept props with ShowCardProps type here */
-) {
+export default function ShowCard({artist,
+  stage,
+  day,
+  hour,
+  ticketsLeft,
+  image}: ShowCardProps){
+  const[isInterested,setIsInterested] = useState<boolean>(false);
+
   // TODO 2: Create state called isInterested of type boolean (default false)
   // const [isInterested, setIsInterested] = ...
 
   // TODO 3: Function that toggles true/false in isInterested
-  // function handleToggleInterested() {}
+  function handleToggleInterested() {setIsInterested(!isInterested);}
 
   // TODO 4: Create ticketsStatusText (string):
   // 0 → "SOLD OUT"
   // 1–30 → "Last tickets – hurry up!"
   // >30 → "Tickets available"
-
+let ticketsStatusText:string = "SOLD OUT"; 
+if(ticketsLeft === 0) { ticketsStatusText ="SOLD OUT"}
+else if(ticketsLeft >0 && ticketsLeft <=30) { ticketsStatusText ="Last tickets – hurry up!"}
+else { ticketsStatusText ="Tickets available"};
   // TODO 5: Create text for interest status based on isInterested:
   // false → "You haven't added this show yet"
   // true → "This show is in your interested list 🎟️"
+let isInterestedText:string = "You haven't added this show yet";
+if(isInterested === false){isInterestedText = "You haven't added this show yet"}
+else{ isInterestedText = "This show is in your interested list 🎟️"}
 
   return (
     <article className="show-card">
       <div className="show-image-wrapper">
         {/* TODO 6: Replace placeholder with real <img> from props */}
-        {/* <img src={image} alt={artist} className="show-image" /> */}
-        <div className="show-image-placeholder">Image goes here</div>
+        {<img src={image} alt={artist} className="show-image" />}
       </div>
 
       <header className="show-header">
         <h2 className="show-artist">
           {/* TODO 7: If isInterested → show ⭐ before artist name */}
-          "Artist name here"
+          {isInterested ? "⭐":""}
+          {artist}
         </h2>
         <p className="show-meta">
           {/* TODO 8: Display stage, day, hour from props */}
-          "Stage · Day · Hour"
+          {stage} · {day} · {hour}
         </p>
       </header>
 
       <section className="show-info">
         <p className="tickets-status">
           {/* TODO 9: Display the ticketsStatusText */}
-          "Tickets status text"
+          {ticketsStatusText}
         </p>
 
         <p className="interested-status">
           {/* TODO 10: Display the interestedText */}
-          "Interested status text"
+          {isInterestedText}
         </p>
       </section>
 
       <button
         className="interested-button"
         // TODO 11: Connect onClick to handleToggleInterested function
-      >
+      onClick={handleToggleInterested}>
         {/* TODO 12: Button text:
             false → "Mark as interested"
             true  → "Remove from my list"
         */}
-        "Button text"
+        {isInterested ? "Remove from my list" : "Mark as interested"}
       </button>
     </article>
   );