From 459b006646fb316b3f3c0e1bc367e51cc9cfda2b Mon Sep 17 00:00:00 2001
From: Johannes Bergslid <johagber@stud.ntnu.no>
Date: Tue, 15 Sep 2026 11:26:13 +0200
Subject: [PATCH 1/8] Created component for favorites page.

Co-authored-by: tobiaheg <tobiaheg@stud.ntnu.no>
---
 .../src/components/FavoritesPage.css          |  0
 .../src/components/FavoritesPage.tsx          | 20 +++++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 webdev-prosjekt1/src/components/FavoritesPage.css
 create mode 100644 webdev-prosjekt1/src/components/FavoritesPage.tsx

diff --git a/webdev-prosjekt1/src/components/FavoritesPage.css b/webdev-prosjekt1/src/components/FavoritesPage.css
new file mode 100644
index 0000000..e69de29
diff --git a/webdev-prosjekt1/src/components/FavoritesPage.tsx b/webdev-prosjekt1/src/components/FavoritesPage.tsx
new file mode 100644
index 0000000..04c5b61
--- /dev/null
+++ b/webdev-prosjekt1/src/components/FavoritesPage.tsx
@@ -0,0 +1,20 @@
+import type { Track } from '../api/types';
+import { TrackCard } from './TrackCard';
+
+type FavoritesPageProps = {
+    favorites: Track[];
+};
+
+export const FavoritesPage = ({favorites}: FavoritesPageProps) => {
+    return (
+        <>
+        <section className="favorite-page-content">
+            <ul className="card-list favorite-list">
+                {favorites.map((favorite) => (
+                    <TrackCard track={favorite}></TrackCard>
+                ))}
+            </ul>
+        </section>
+        </>
+    )
+}
\ No newline at end of file

From 4314db193d2e9f1c28babf0bc677409b7a01b21f Mon Sep 17 00:00:00 2001
From: Johannes Bergslid <johagber@stud.ntnu.no>
Date: Tue, 15 Sep 2026 11:26:13 +0200
Subject: [PATCH 2/8] Created component for favorites page.

Co-authored-by: tobiaheg <tobiaheg@stud.ntnu.no>
---
 .../src/components/FavoritesPage.css          |  0
 .../src/components/FavoritesPage.tsx          | 20 +++++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 webdev-prosjekt1/src/components/FavoritesPage.css
 create mode 100644 webdev-prosjekt1/src/components/FavoritesPage.tsx

diff --git a/webdev-prosjekt1/src/components/FavoritesPage.css b/webdev-prosjekt1/src/components/FavoritesPage.css
new file mode 100644
index 0000000..e69de29
diff --git a/webdev-prosjekt1/src/components/FavoritesPage.tsx b/webdev-prosjekt1/src/components/FavoritesPage.tsx
new file mode 100644
index 0000000..04c5b61
--- /dev/null
+++ b/webdev-prosjekt1/src/components/FavoritesPage.tsx
@@ -0,0 +1,20 @@
+import type { Track } from '../api/types';
+import { TrackCard } from './TrackCard';
+
+type FavoritesPageProps = {
+    favorites: Track[];
+};
+
+export const FavoritesPage = ({favorites}: FavoritesPageProps) => {
+    return (
+        <>
+        <section className="favorite-page-content">
+            <ul className="card-list favorite-list">
+                {favorites.map((favorite) => (
+                    <TrackCard track={favorite}></TrackCard>
+                ))}
+            </ul>
+        </section>
+        </>
+    )
+}
\ No newline at end of file

From dcc6ff65805cd0f1a279880c8bede31c42087d6a Mon Sep 17 00:00:00 2001
From: Johannes Bergslid <johagber@stud.ntnu.no>
Date: Tue, 15 Sep 2026 13:08:14 +0200
Subject: [PATCH 3/8] Merged with main to get latest changes.

---
 webdev-prosjekt1/package-lock.json             | 14 ++++++++++++++
 webdev-prosjekt1/package.json                  |  1 +
 webdev-prosjekt1/src/components/Button.tsx     | 17 +++++++++--------
 .../src/components/FavoritesPage.tsx           |  2 +-
 webdev-prosjekt1/src/components/TrackCard.css  | 18 ++++++++++++++++++
 webdev-prosjekt1/src/components/TrackCard.tsx  |  6 ++++++
 6 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/webdev-prosjekt1/package-lock.json b/webdev-prosjekt1/package-lock.json
index d64e3da..4045023 100644
--- a/webdev-prosjekt1/package-lock.json
+++ b/webdev-prosjekt1/package-lock.json
@@ -8,6 +8,7 @@
       "name": "webdev-prosjekt1",
       "version": "0.0.0",
       "dependencies": {
+        "@phosphor-icons/react": "^2.1.10",
         "@tanstack/react-query": "^5.102.8",
         "react": "^19.2.8",
         "react-dom": "^19.2.8"
@@ -525,6 +526,19 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@phosphor-icons/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm-eabi": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.6.tgz",
diff --git a/webdev-prosjekt1/package.json b/webdev-prosjekt1/package.json
index 76c7624..dce5521 100644
--- a/webdev-prosjekt1/package.json
+++ b/webdev-prosjekt1/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-query": "^5.102.8",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
diff --git a/webdev-prosjekt1/src/components/Button.tsx b/webdev-prosjekt1/src/components/Button.tsx
index 3070060..c2d7f3c 100644
--- a/webdev-prosjekt1/src/components/Button.tsx
+++ b/webdev-prosjekt1/src/components/Button.tsx
@@ -1,15 +1,16 @@
 import type { MouseEventHandler, ReactNode } from "react";
-import './Button.css';
+import "./Button.css";
 
 type ButtonProps = {
 	content: ReactNode;
+	className?: string;
 	onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 
-export const Button = ({ content, onClick }: ButtonProps) => {
-	return (
-		<button onClick={onClick}>
-			{content}
-		</button>
-	)
-}
+export const Button = ({ content, className, onClick }: ButtonProps) => {
+  	return (
+  	  	<button className={className} onClick={onClick}>
+  			{content}
+  	  	</button>
+  	);
+};
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/components/FavoritesPage.tsx b/webdev-prosjekt1/src/components/FavoritesPage.tsx
index 04c5b61..0af782d 100644
--- a/webdev-prosjekt1/src/components/FavoritesPage.tsx
+++ b/webdev-prosjekt1/src/components/FavoritesPage.tsx
@@ -11,7 +11,7 @@ export const FavoritesPage = ({favorites}: FavoritesPageProps) => {
         <section className="favorite-page-content">
             <ul className="card-list favorite-list">
                 {favorites.map((favorite) => (
-                    <TrackCard track={favorite}></TrackCard>
+                    <TrackCard track={favorite} onClick={}></TrackCard>
                 ))}
             </ul>
         </section>
diff --git a/webdev-prosjekt1/src/components/TrackCard.css b/webdev-prosjekt1/src/components/TrackCard.css
index 74c9d26..1d9664e 100644
--- a/webdev-prosjekt1/src/components/TrackCard.css
+++ b/webdev-prosjekt1/src/components/TrackCard.css
@@ -1,6 +1,7 @@
 .search-result-card {
     display: flex;
     padding: 0.3rem;
+    position: relative;
 
     width: 100%;
     height: 72px;
@@ -80,3 +81,20 @@
 .duration-display {
     color: var(--primary_color);
 }
+
+.duration-display {
+    color: var(--primary_color);
+}
+
+.fav-button {
+    background: none;
+    border: none;
+    position: absolute;
+    right: 0;
+    top: 5px;
+}
+
+.fav-button:hover {
+    background: none;
+    transform: scale(1.05);
+}
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/components/TrackCard.tsx b/webdev-prosjekt1/src/components/TrackCard.tsx
index d7a6d3c..0b34bfa 100644
--- a/webdev-prosjekt1/src/components/TrackCard.tsx
+++ b/webdev-prosjekt1/src/components/TrackCard.tsx
@@ -1,6 +1,8 @@
 import './TrackCard.css';
 import type { Album, AlbumTrack, Track } from '../api/types';
 import musicwizimage from '../assets/musicwiz.png';
+import { Button } from './Button';
+import { StarIcon } from "@phosphor-icons/react";
 
 type TrackCardProps = {
     track: Track | AlbumTrack;
@@ -36,6 +38,10 @@ export const TrackCard = ({ track, album, onClick }: TrackCardProps) => {
                 <div className='duration-display-container'>
                     <span className='duration-display'>{formatDuration(track.duration_ms)}</span>
                 </div>
+                <Button
+                    content = {<StarIcon size={20} color='#f8f0df'/>}
+                    className="fav-button"
+                />
             </div>
         </li>
     )

From 638931b4fe664cf54c47d4f9a308dc7475285a97 Mon Sep 17 00:00:00 2001
From: Johannes Bergslid <johagber@stud.ntnu.no>
Date: Tue, 15 Sep 2026 17:51:22 +0200
Subject: [PATCH 4/8] Implemented persistent favoriting with a combination of
 useState and localStorage.

---
 webdev-prosjekt1/src/components/FavButton.css | 10 ++++
 webdev-prosjekt1/src/components/FavButton.tsx | 35 ++++++++++++++
 webdev-prosjekt1/src/components/TrackCard.css | 15 +-----
 webdev-prosjekt1/src/components/TrackCard.tsx |  8 +---
 webdev-prosjekt1/src/hooks/useFavorites.tsx   | 47 +++++++++++++++++++
 webdev-prosjekt1/src/main.tsx                 |  5 +-
 6 files changed, 100 insertions(+), 20 deletions(-)
 create mode 100644 webdev-prosjekt1/src/components/FavButton.css
 create mode 100644 webdev-prosjekt1/src/components/FavButton.tsx
 create mode 100644 webdev-prosjekt1/src/hooks/useFavorites.tsx

diff --git a/webdev-prosjekt1/src/components/FavButton.css b/webdev-prosjekt1/src/components/FavButton.css
new file mode 100644
index 0000000..b89e746
--- /dev/null
+++ b/webdev-prosjekt1/src/components/FavButton.css
@@ -0,0 +1,10 @@
+.fav-button {
+    background: none;
+    border: none;
+    padding: 0;
+}
+
+.fav-button:hover {
+    background: none;
+    transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/components/FavButton.tsx b/webdev-prosjekt1/src/components/FavButton.tsx
new file mode 100644
index 0000000..c93e7de
--- /dev/null
+++ b/webdev-prosjekt1/src/components/FavButton.tsx
@@ -0,0 +1,35 @@
+import { Button } from './Button';
+import { StarIcon } from "@phosphor-icons/react";
+import type {AlbumTrack, Track } from '../api/types';
+import { useFavorites } from '../hooks/useFavorites';
+import './FavButton.css';
+
+type FavButtonProps = {
+    track: Track | AlbumTrack;
+};
+
+
+export const FavButton = ({ track }: FavButtonProps) => {
+    const { favorites, addFavorite, removeFavorite } = useFavorites();
+    const isFavorite = favorites.some(
+        favorite => favorite.id === track.id
+    );
+    return(
+        <Button
+            content = {<StarIcon 
+                        size={24} 
+                        color={isFavorite ? "#d4af37" : "#f8f0df"}
+                        weight={isFavorite ? "fill" : "regular"}
+                        />
+                    }
+            className="fav-button"
+            onClick={(event) => {
+                event.stopPropagation();
+
+                isFavorite 
+                ? removeFavorite(track.id) 
+                : addFavorite(track)
+            }}
+        />
+    )
+}
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/components/TrackCard.css b/webdev-prosjekt1/src/components/TrackCard.css
index 1d9664e..ed1867a 100644
--- a/webdev-prosjekt1/src/components/TrackCard.css
+++ b/webdev-prosjekt1/src/components/TrackCard.css
@@ -36,6 +36,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
+    gap: 1rem;
 
     padding: 0.3rem 1rem;
 }
@@ -76,6 +77,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 1rem;
 }
 
 .duration-display {
@@ -85,16 +87,3 @@
 .duration-display {
     color: var(--primary_color);
 }
-
-.fav-button {
-    background: none;
-    border: none;
-    position: absolute;
-    right: 0;
-    top: 5px;
-}
-
-.fav-button:hover {
-    background: none;
-    transform: scale(1.05);
-}
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/components/TrackCard.tsx b/webdev-prosjekt1/src/components/TrackCard.tsx
index 0b34bfa..21cf6ac 100644
--- a/webdev-prosjekt1/src/components/TrackCard.tsx
+++ b/webdev-prosjekt1/src/components/TrackCard.tsx
@@ -1,8 +1,7 @@
 import './TrackCard.css';
 import type { Album, AlbumTrack, Track } from '../api/types';
 import musicwizimage from '../assets/musicwiz.png';
-import { Button } from './Button';
-import { StarIcon } from "@phosphor-icons/react";
+import { FavButton } from './FavButton';
 
 type TrackCardProps = {
     track: Track | AlbumTrack;
@@ -37,11 +36,8 @@ export const TrackCard = ({ track, album, onClick }: TrackCardProps) => {
                 </div>
                 <div className='duration-display-container'>
                     <span className='duration-display'>{formatDuration(track.duration_ms)}</span>
+                    <FavButton track={track}></FavButton>
                 </div>
-                <Button
-                    content = {<StarIcon size={20} color='#f8f0df'/>}
-                    className="fav-button"
-                />
             </div>
         </li>
     )
diff --git a/webdev-prosjekt1/src/hooks/useFavorites.tsx b/webdev-prosjekt1/src/hooks/useFavorites.tsx
new file mode 100644
index 0000000..451edf1
--- /dev/null
+++ b/webdev-prosjekt1/src/hooks/useFavorites.tsx
@@ -0,0 +1,47 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+import type { Track, AlbumTrack } from '../api/types';
+
+type FavoritesContextValue = {
+    favorites: (Track | AlbumTrack)[];
+    addFavorite: (favorite: Track | AlbumTrack) => void;
+    removeFavorite: (id: string) => void;
+};
+
+const FavoritesContext = createContext<FavoritesContextValue | null>(null);
+
+export function FavoritesProvider({ children }: { children: ReactNode }) {
+    const [favorites, setFavorites] = useState<(Track | AlbumTrack)[]>(() => {
+        const stored = localStorage.getItem("favorites");
+        return stored ? JSON.parse(stored) : [];
+    });
+
+    function addFavorite(favorite: Track | AlbumTrack) {
+        setFavorites(prev => {
+            const updated = [...prev, favorite];
+            localStorage.setItem("favorites", JSON.stringify(updated));
+            return updated;
+        });
+    }
+
+    function removeFavorite(id: string) {
+        setFavorites(prev => {
+            const updated = prev.filter(favorite => favorite.id !== id);
+            localStorage.setItem("favorites", JSON.stringify(updated));
+            return updated;
+        });
+    }
+
+    return (
+        <FavoritesContext.Provider value={{ favorites, addFavorite, removeFavorite }}>
+            {children}
+        </FavoritesContext.Provider>
+    );
+}
+
+export function useFavorites() {
+    const context = useContext(FavoritesContext);
+    if (!context) {
+        throw new Error("useFavorites must be used within a FavoritesProvider");
+    }
+    return context;
+}
diff --git a/webdev-prosjekt1/src/main.tsx b/webdev-prosjekt1/src/main.tsx
index e534854..88627d8 100644
--- a/webdev-prosjekt1/src/main.tsx
+++ b/webdev-prosjekt1/src/main.tsx
@@ -4,13 +4,16 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import './index.css'
 import './variables.css'
 import App from './App.tsx'
+import { FavoritesProvider } from './hooks/useFavorites.tsx'
 
 const queryClient = new QueryClient()
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <FavoritesProvider>
+        <App />
+      </FavoritesProvider>
     </QueryClientProvider>
   </StrictMode>,
 )

From 5b0be14f93e89d9f8f22a58fa0cd0577c457cc90 Mon Sep 17 00:00:00 2001
From: Johannes Bergslid <johagber@stud.ntnu.no>
Date: Tue, 15 Sep 2026 18:01:42 +0200
Subject: [PATCH 5/8] Animated favorite button for more visual feedback.

---
 webdev-prosjekt1/src/components/FavButton.css | 11 +++++++++++
 webdev-prosjekt1/src/components/FavButton.tsx |  9 ++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/webdev-prosjekt1/src/components/FavButton.css b/webdev-prosjekt1/src/components/FavButton.css
index b89e746..3e2004d 100644
--- a/webdev-prosjekt1/src/components/FavButton.css
+++ b/webdev-prosjekt1/src/components/FavButton.css
@@ -7,4 +7,15 @@
 .fav-button:hover {
     background: none;
     transform: scale(1.1);
+}
+
+.star-animate {
+    animation: bounce-click 0.4s ease-out;
+}
+
+@keyframes bounce-click {
+    0% { transform: scale(1); }
+    30% { transform: scale(0.85); } /* Squash down on initial click */
+    60% { transform: scale(1.1); }  /* Bounce back up past normal size */
+    100% { transform: scale(1); }  /* Settle back to original size */
 }
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/components/FavButton.tsx b/webdev-prosjekt1/src/components/FavButton.tsx
index c93e7de..ae2034a 100644
--- a/webdev-prosjekt1/src/components/FavButton.tsx
+++ b/webdev-prosjekt1/src/components/FavButton.tsx
@@ -2,6 +2,7 @@ import { Button } from './Button';
 import { StarIcon } from "@phosphor-icons/react";
 import type {AlbumTrack, Track } from '../api/types';
 import { useFavorites } from '../hooks/useFavorites';
+import { useState } from 'react';
 import './FavButton.css';
 
 type FavButtonProps = {
@@ -14,12 +15,16 @@ export const FavButton = ({ track }: FavButtonProps) => {
     const isFavorite = favorites.some(
         favorite => favorite.id === track.id
     );
+    const [isAnimating, setIsAnimating] = useState(false);
+
     return(
         <Button
             content = {<StarIcon 
                         size={24} 
                         color={isFavorite ? "#d4af37" : "#f8f0df"}
                         weight={isFavorite ? "fill" : "regular"}
+                        className={isAnimating ? "star-animate" : ""}
+                        onAnimationEnd={() => setIsAnimating(false)}
                         />
                     }
             className="fav-button"
@@ -28,7 +33,9 @@ export const FavButton = ({ track }: FavButtonProps) => {
 
                 isFavorite 
                 ? removeFavorite(track.id) 
-                : addFavorite(track)
+                : addFavorite(track);
+
+                setIsAnimating(true);
             }}
         />
     )

From b23604269b4ce1d11d31b65d87d0d3a863f80949 Mon Sep 17 00:00:00 2001
From: Johannes Bergslid <johagber@stud.ntnu.no>
Date: Tue, 15 Sep 2026 18:27:21 +0200
Subject: [PATCH 6/8] Created a show favorites page.

---
 webdev-prosjekt1/.claude/launch.json          | 11 +++++
 webdev-prosjekt1/src/App.tsx                  | 10 +++++
 .../src/components/FavoritesPage.css          | 41 ++++++++++++++++++
 .../src/components/FavoritesPage.tsx          | 42 ++++++++++++-------
 webdev-prosjekt1/src/components/Header.css    | 16 +++++++
 webdev-prosjekt1/src/components/Header.tsx    |  1 +
 6 files changed, 107 insertions(+), 14 deletions(-)
 create mode 100644 webdev-prosjekt1/.claude/launch.json

diff --git a/webdev-prosjekt1/.claude/launch.json b/webdev-prosjekt1/.claude/launch.json
new file mode 100644
index 0000000..0a25bec
--- /dev/null
+++ b/webdev-prosjekt1/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "vite-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 5173
+    }
+  ]
+}
diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx
index 65bbf73..0019ca5 100644
--- a/webdev-prosjekt1/src/App.tsx
+++ b/webdev-prosjekt1/src/App.tsx
@@ -7,6 +7,7 @@ import { Searchbar } from './components/Searchbar';
 import { SongDetailPage } from './components/SongDetailPage';
 import { AlbumDetailPage } from './components/AlbumDetailPage';
 import { ArtistDetailPage } from './components/ArtistDetailPage';
+import { FavoritesPage } from './components/FavoritesPage';
 import { Header } from './components/Header';
 import { TrackCard } from './components/TrackCard';
 import { AlbumCard } from './components/AlbumCard';
@@ -38,6 +39,7 @@ function App() {
 	const isSongDetailRoute = currentPath === '/song-detail' || currentPath === '/song-detail/';
 	const isAlbumDetailRoute = currentPath === '/album-detail' || currentPath === '/album-detail/';
 	const isArtistDetailRoute = currentPath === '/artist-detail' || currentPath === '/artist-detail/';
+	const isFavoritesRoute = currentPath === '/favorites' || currentPath === '/favorites/';
 	const dummyAlbumImage = {
 		url: musicWizImage,
 		height: 640,
@@ -122,6 +124,13 @@ function App() {
 		localStorage.setItem('music-wiz-selected-artist', JSON.stringify(artist));
 		navigateTo('/artist-detail');
 	};
+	const handleFavoriteTrackClick = (track: Track | AlbumTrack) => {
+		if ('album' in track) {
+			handleTrackClick(track);
+		} else {
+			handleAlbumTrackClick(track);
+		}
+	};
 	const { data: results, isLoading, isFetching, isError, error } = useQuery({
 		queryKey: ['search', effectiveQuery],
 		queryFn: () => search(effectiveQuery),
@@ -182,6 +191,7 @@ function App() {
 	if (isAlbumDetailRoute) return <AlbumDetailPage album={selectedAlbum ?? dummyAlbum} onTrackClick={handleAlbumTrackClick} />;
 	if (isArtistDetailRoute) return <ArtistDetailPage artist={selectedArtist ?? dummyArtist} />;
 	if (isSongDetailRoute) return <SongDetailPage song={selectedTrack ?? dummySong} />;
+	if (isFavoritesRoute) return <FavoritesPage onTrackClick={handleFavoriteTrackClick} />;
 
 	return (
 		<main className='app-shell'>
diff --git a/webdev-prosjekt1/src/components/FavoritesPage.css b/webdev-prosjekt1/src/components/FavoritesPage.css
index e69de29..813ea4a 100644
--- a/webdev-prosjekt1/src/components/FavoritesPage.css
+++ b/webdev-prosjekt1/src/components/FavoritesPage.css
@@ -0,0 +1,41 @@
+.favorites-page {
+	min-height: 100vh;
+	padding-bottom: 80px;
+	color: var(--text_primary);
+	background: var(--detail_background_gradient);
+}
+
+.favorite-page-content {
+	max-width: 1000px;
+	margin: 0 auto;
+	padding: 56px 48px 0;
+}
+
+.favorite-page-content h1 {
+	margin: 0;
+	font-size: clamp(2rem, 4vw, 3.4rem);
+	line-height: 1;
+}
+
+.favorites-empty {
+	max-width: 660px;
+	margin: 28px 0 0;
+	color: var(--text_secondary);
+	font-size: 1.05rem;
+	line-height: 1.9;
+}
+
+.favorite-list {
+	display: grid;
+	gap: 10px;
+	max-width: 760px;
+	margin: 28px 0 0;
+	padding: 0;
+	list-style: none;
+}
+
+@media (max-width: 900px) {
+	.favorite-page-content {
+		padding: 42px 32px 0;
+	}
+}
diff --git a/webdev-prosjekt1/src/components/FavoritesPage.tsx b/webdev-prosjekt1/src/components/FavoritesPage.tsx
index 0af782d..be19b72 100644
--- a/webdev-prosjekt1/src/components/FavoritesPage.tsx
+++ b/webdev-prosjekt1/src/components/FavoritesPage.tsx
@@ -1,20 +1,34 @@
-import type { Track } from '../api/types';
+import './FavoritesPage.css';
+import '../variables.css';
+import { Header } from './Header';
 import { TrackCard } from './TrackCard';
+import { useFavorites } from '../hooks/useFavorites';
+import type { AlbumTrack, Track } from '../api/types';
 
 type FavoritesPageProps = {
-    favorites: Track[];
+    onTrackClick: (track: Track | AlbumTrack) => void;
 };
 
-export const FavoritesPage = ({favorites}: FavoritesPageProps) => {
+export const FavoritesPage = ({ onTrackClick }: FavoritesPageProps) => {
+    const { favorites } = useFavorites();
+
     return (
-        <>
-        <section className="favorite-page-content">
-            <ul className="card-list favorite-list">
-                {favorites.map((favorite) => (
-                    <TrackCard track={favorite} onClick={}></TrackCard>
-                ))}
-            </ul>
-        </section>
-        </>
-    )
-}
\ No newline at end of file
+        <main className='favorites-page'>
+            <Header />
+
+            <section className='favorite-page-content' aria-labelledby='favorites-title'>
+                <h1 id='favorites-title'>Favorites</h1>
+
+                {favorites.length === 0 ? (
+                    <p className='favorites-empty'>You haven't favorited any tracks yet.</p>
+                ) : (
+                    <ul className='card-list favorite-list'>
+                        {favorites.map((favorite) => (
+                            <TrackCard key={favorite.id} track={favorite} onClick={() => onTrackClick(favorite)} />
+                        ))}
+                    </ul>
+                )}
+            </section>
+        </main>
+    );
+};
diff --git a/webdev-prosjekt1/src/components/Header.css b/webdev-prosjekt1/src/components/Header.css
index 4d88695..2ac84a5 100644
--- a/webdev-prosjekt1/src/components/Header.css
+++ b/webdev-prosjekt1/src/components/Header.css
@@ -1,10 +1,26 @@
 .main-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	max-width: 1240px;
 	margin: 0 auto;
 	padding: 18px 48px 14px;
 	border-bottom: 2px solid var(--border_gold_faint);
 }
 
+.favorites-link {
+	color: var(--primary_color);
+	text-decoration: none;
+	font-size: 14px;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+}
+
+.favorites-link:hover {
+	text-decoration: underline;
+}
+
 .app-title {
 	color: var(--primary_color);
 	text-decoration: none;
diff --git a/webdev-prosjekt1/src/components/Header.tsx b/webdev-prosjekt1/src/components/Header.tsx
index faa2d1a..27895d5 100644
--- a/webdev-prosjekt1/src/components/Header.tsx
+++ b/webdev-prosjekt1/src/components/Header.tsx
@@ -14,6 +14,7 @@ export const Header = () => {
 					<h3 className='header-note'>Your personal music magician</h3>
 				</span>
 			</a>
+			<a className='favorites-link' href='/favorites'>Favorites</a>
 		</header>
 	);
 };
\ No newline at end of file

From 839aa5bfbc06f229c57f063612a46d221f6ae363 Mon Sep 17 00:00:00 2001
From: Kristoffer Fredrik Dahle Melen <kristoffer.fredrik@gmail.com>
Date: Tue, 15 Sep 2026 20:56:37 +0200
Subject: [PATCH 7/8] Updated the Favorites page to include the Music Wiz, and
 minor styling changes.

---
 .../src/components/FavoritesPage.css          | 75 ++++++++++++++++++-
 .../src/components/FavoritesPage.tsx          | 28 ++++---
 2 files changed, 88 insertions(+), 15 deletions(-)

diff --git a/webdev-prosjekt1/src/components/FavoritesPage.css b/webdev-prosjekt1/src/components/FavoritesPage.css
index 813ea4a..0413b89 100644
--- a/webdev-prosjekt1/src/components/FavoritesPage.css
+++ b/webdev-prosjekt1/src/components/FavoritesPage.css
@@ -2,17 +2,28 @@
 	min-height: 100vh;
 	padding-bottom: 80px;
 	color: var(--text_primary);
-	background: var(--detail_background_gradient);
+	background: var(--page_background_gradient);
 }
 
-.favorite-page-content {
-	max-width: 1000px;
+.favorites-layout {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 48px;
+	max-width: 1400px;
+	width: calc(100% - 96px);
 	margin: 0 auto;
+}
+
+.favorite-page-content {
+	flex: 1;
+	min-width: 0;
 	padding: 56px 48px 0;
 }
 
 .favorite-page-content h1 {
 	margin: 0;
+	color: var(--primary_color);
 	font-size: clamp(2rem, 4vw, 3.4rem);
 	line-height: 1;
 }
@@ -28,14 +39,70 @@
 .favorite-list {
 	display: grid;
 	gap: 10px;
-	max-width: 760px;
 	margin: 28px 0 0;
 	padding: 0;
 	list-style: none;
 }
 
+.favorites-art {
+	position: sticky;
+	top: 24px;
+	width: 520px;
+	min-height: 460px;
+	margin: 24px 0 0;
+	display: grid;
+	place-items: center;
+	flex-shrink: 0;
+}
+
+.favorites-art img {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	max-width: 480px;
+	height: auto;
+	object-fit: contain;
+	filter: drop-shadow(0 20px 25px var(--shadow_hero));
+}
+
+@media (max-width: 1100px) {
+	.favorites-layout {
+		flex-direction: column;
+	}
+
+	.favorite-page-content {
+		width: 100%;
+	}
+
+	.favorites-art {
+		position: relative;
+		top: 0;
+		align-self: center;
+	}
+}
+
 @media (max-width: 900px) {
 	.favorite-page-content {
 		padding: 42px 32px 0;
 	}
 }
+
+@media (max-width: 700px) {
+	.favorites-layout {
+		width: calc(100% - 48px);
+	}
+
+	.favorite-page-content {
+		padding: 42px 0 0;
+	}
+
+	.favorites-art {
+		width: 320px;
+		min-height: 380px;
+	}
+
+	.favorites-art img {
+		max-width: 290px;
+	}
+
+}
diff --git a/webdev-prosjekt1/src/components/FavoritesPage.tsx b/webdev-prosjekt1/src/components/FavoritesPage.tsx
index be19b72..4accd37 100644
--- a/webdev-prosjekt1/src/components/FavoritesPage.tsx
+++ b/webdev-prosjekt1/src/components/FavoritesPage.tsx
@@ -4,6 +4,7 @@ import { Header } from './Header';
 import { TrackCard } from './TrackCard';
 import { useFavorites } from '../hooks/useFavorites';
 import type { AlbumTrack, Track } from '../api/types';
+import musicWizImage from '../assets/musicwiz.png';
 
 type FavoritesPageProps = {
     onTrackClick: (track: Track | AlbumTrack) => void;
@@ -16,18 +17,23 @@ export const FavoritesPage = ({ onTrackClick }: FavoritesPageProps) => {
         <main className='favorites-page'>
             <Header />
 
-            <section className='favorite-page-content' aria-labelledby='favorites-title'>
-                <h1 id='favorites-title'>Favorites</h1>
+            <section className='favorites-layout'>
+                <section className='favorite-page-content' aria-labelledby='favorites-title'>
+                    <h1 id='favorites-title'>Favorites</h1>
 
-                {favorites.length === 0 ? (
-                    <p className='favorites-empty'>You haven't favorited any tracks yet.</p>
-                ) : (
-                    <ul className='card-list favorite-list'>
-                        {favorites.map((favorite) => (
-                            <TrackCard key={favorite.id} track={favorite} onClick={() => onTrackClick(favorite)} />
-                        ))}
-                    </ul>
-                )}
+                    {favorites.length === 0 ? (
+                        <p className='favorites-empty'>You haven't favorited any tracks yet.</p>
+                    ) : (
+                        <ul className='card-list favorite-list'>
+                            {favorites.map((favorite) => (
+                                <TrackCard key={favorite.id} track={favorite} onClick={() => onTrackClick(favorite)} />
+                            ))}
+                        </ul>
+                    )}
+                </section>
+                <figure className='favorites-art'>
+                    <img src={musicWizImage} alt='A musical wizard' />
+                </figure>
             </section>
         </main>
     );

From 6715edefdbf1497db1fe83e5634f978ddb5755eb Mon Sep 17 00:00:00 2001
From: Kristoffer Fredrik Dahle Melen <kristoffer.fredrik@gmail.com>
Date: Tue, 15 Sep 2026 21:06:00 +0200
Subject: [PATCH 8/8] Removed file

---
 webdev-prosjekt1/.claude/launch.json | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 webdev-prosjekt1/.claude/launch.json

diff --git a/webdev-prosjekt1/.claude/launch.json b/webdev-prosjekt1/.claude/launch.json
deleted file mode 100644
index 0a25bec..0000000
--- a/webdev-prosjekt1/.claude/launch.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "version": "0.0.1",
-  "configurations": [
-    {
-      "name": "vite-dev",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev"],
-      "port": 5173
-    }
-  ]
-}