diff --git a/index.html b/index.html
index 5a45a69..28c20a6 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@ <h2>56 years of concerts, club nights and <a href="https://www.paradiso.nl/en/su
             <li class="top">
                 <img src="./images/doechii.webp" alt="Woman in yellow an green irregularly striped t-shirt holding a white alligator in front of a dark-green background">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Concert</p>
@@ -51,10 +51,28 @@ <h4>In Bitterzoet</h4>
                 <h4>24 October</h4>
             </li>
 
+            <a href="./three-sacred-souls.html" class="top">
+                <li class="top">
+                    <img src="./images/thee-sacred-souls.webp" alt="A picture of three man standing on rocks in front of a sky full of clouds during golden hour.">
+
+                    <div class="gradient"></div>
+                
+                    <section>
+                        <p>Concert</p>
+                        <p>Just confirmed</p>
+                    </section>
+
+                    <h3>Three Sacred Souls</h3>
+
+                    <h4>In Paradiso</h4>
+                    <h4>15 February</h4>
+                </li>
+            </a>
+
             <li class="top">
                 <img src="./images/mall-grab.webp" alt="Tattooed man wearing a baseball cap and black clothes standing in front of a white textured wall">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Club Night</p>
@@ -70,7 +88,7 @@ <h4>7 December</h4>
             <li class="top">
                 <img src="./images/Zonneprijs-foto-homepage.webp" alt="Closeup of a man standing behind a microphone with a red electric guitar in his hands">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Just confirmed</p>
@@ -85,7 +103,7 @@ <h4>3 October</h4>
             <li class="top">
                 <img src="./images/brainwash.webp" alt="Two men sitting on a podium talking in front of an audience amidst red and green lighting and a big screen behind them">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Talk</p>
@@ -101,7 +119,7 @@ <h4>27 October</h4>
             <li class="top">
                 <img src="./images/cmat.webp" alt="The back of a woman in a colorful dress">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Concert</p>
@@ -117,7 +135,7 @@ <h4>5 February</h4>
             <li class="top">
                 <img src="./images/knits-tits.webp" alt="Illustration of two white rounded objects with colorful lines sticking out of them seemingly colliding in front of a mint green background">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Talk</p>
@@ -133,7 +151,7 @@ <h4>9 December</h4>
             <li class="top">
                 <img src="./images/bassline-artist.webp" alt="A man coming into the frame of the camera holding up his right hand and pointing upwards">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Club night</p>
@@ -149,7 +167,7 @@ <h4>27 September</h4>
             <li class="top">
                 <img src="./images/arin-ray.webp" alt="Soft closeup of a braided man with a trimmed facial hair looking downwards, the man is wearing a white shirt covered with crystals and the image has a warm hue to it">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Concert</p>
@@ -165,7 +183,7 @@ <h4>10 October</h4>
             <li class="top">
                 <img src="./images/james-bay.webp" alt="Smiling man with long hair and a brown hat looking away from the camera wearing a denim jacket with striped shirt beneath it sitting in front of a swamp green wall">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Just confirmed</p>
@@ -180,7 +198,7 @@ <h4>27 January</h4>
             <li class="top">
                 <img src="./images/Yevgueni-web.webp" alt="Four middle-aged men sitting outside wearing monochrome clothing, two of them holding an electric guitar in what seems to be a barn">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Just confirmed</p>
@@ -195,7 +213,7 @@ <h4>24 April</h4>
             <li class="top">
                 <img src="./images/ssj-jam-home.webp" alt="Boy in white shirt playing the drums">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
 
                 <h3>Super-Sonic Jam x Skatecafe</h3>
 
@@ -206,7 +224,7 @@ <h4>10 October</h4>
             <li class="top">
                 <img src="./images/arny-margret.webp" alt="Long haired woman with rectangular glasses with her head tilted slightly to the right and some of her hair slightly falling over her eyes">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Concert</p>
@@ -222,7 +240,7 @@ <h4>26 November</h4>
             <li class="top">
                 <img src="./images/porches.webp" alt="Man in blue knitted sweater holding his hands up next to his face, his eyes are closed and his lips are pouched">
 
-                <div id="gradient"></div>
+                <div class="gradient"></div>
                 
                 <section>
                     <p>Just confirmed</p>
@@ -248,7 +266,7 @@ <h3>
                 <li class="top">
                     <img src="./images/aarde-aan-daan.webp" alt="Portrait of two men and two women with crystals on their face looking away from the camera sitting in front of a pink background">
 
-                    <div id="gradient"></div>
+                    <div class="gradient"></div>"
 
                     <h3>Aarde aan Daan</h3>
 
@@ -259,7 +277,7 @@ <h4>Start 19:30</h4>
                 <li class="top">
                     <img src="./images/junglebynight.webp" alt="Group of men and their instruments in front of a dark wall">
 
-                    <div id="gradient"></div>
+                    <div class="gradient"></div>"
                     
                     <section>
                         <p>Sold out</p>
@@ -274,7 +292,7 @@ <h4>Starts 20:30</h4>
                 <li class="top">
                     <img src="./images/sadie.webp" alt="Sepia image of a woman with dark eye-makeup and black hair">
 
-                    <div id="gradient"></div>
+                    <div class="gradient"></div>"
                     
                     <section>
                         <p>Sold out</p>
diff --git a/script.js b/script.js
index 5751298..6a1cefc 100644
--- a/script.js
+++ b/script.js
@@ -1,42 +1 @@
-const carousel = document.getElementById('carousel');
-const items = Array.from(carousel.children);
-const itemWidth = 257; // Width of one item (same as in CSS)
-
-// Clone the first and last items
-const firstItem = items[0].cloneNode(true);
-const lastItem = items[items.length - 1].cloneNode(true);
-
-// Add clones to the beginning and end
-carousel.appendChild(firstItem);
-carousel.insertBefore(lastItem, items[0]);
-
-// Set the initial scroll position to the first real item
-carousel.scrollLeft = itemWidth;
-
-// Function to disable and enable smooth scrolling
-function toggleSmoothScroll(enable) {
-    if (enable) {
-        carousel.style.scrollBehavior = 'smooth';
-    } else {
-        carousel.style.scrollBehavior = 'auto'; // Disables smooth scrolling
-    }
-}
-
-// Add a scroll listener to handle the infinite loop effect
-carousel.addEventListener('scroll', () => {
-    const maxScrollLeft = carousel.scrollWidth - carousel.clientWidth;
-
-    // If the user scrolls to the fake first item, jump to the real last item
-    if (carousel.scrollLeft <= 0) {
-        toggleSmoothScroll(false); // Disable smooth scrolling
-        carousel.scrollLeft = carousel.scrollWidth - (2 * itemWidth); // Jump to real last item instantly
-        toggleSmoothScroll(true);  // Re-enable smooth scrolling
-    }
-
-    // If the user scrolls to the fake last item, jump to the real first item
-    if (carousel.scrollLeft >= maxScrollLeft) {
-        toggleSmoothScroll(false); // Disable smooth scrolling
-        carousel.scrollLeft = itemWidth; // Jump to real first item instantly
-        toggleSmoothScroll(true);  // Re-enable smooth scrolling
-    }
-});
+// IK WEET HET NIET OKE
\ No newline at end of file
diff --git a/style.css b/style.css
index 8dacc78..98b0419 100644
--- a/style.css
+++ b/style.css
@@ -127,7 +127,6 @@ ul {
     display: flex;
     padding: 0;
     margin: 0;
-    transition: transform 0.5s ease;;
 }
 
 li.top {
@@ -136,6 +135,11 @@ li.top {
     height: 320.75px;
     grid-template-rows: 1fr auto auto auto auto;
     scroll-snap-align: center;
+    transition: transform 0.3s ease;
+}
+
+li.top.active {
+    transform: scale(1.1); /* Enlarge the active item */
 }
 
 .top section {
@@ -174,8 +178,8 @@ li.top {
 
 .top img {
     height: 100%;
-    width: fit-content;
-    /* max-width: 20em; */
+    width: auto;
+    object-fit: cover;
     grid-row: 1 / -1;
     grid-column: 1 / -1;
 }
@@ -189,7 +193,12 @@ li.top {
     padding: .3em .8em;
 }
 
-#gradient {
+a.top {
+    color: inherit; /* Inherit color from parent */
+    text-decoration: none; /* Remove underline */
+}
+
+.gradient {
     grid-row: 2 / 6;
     grid-column: 1 / -1;
     background: rgb(0,0,0);
@@ -294,42 +303,63 @@ hr {
 
 /* ARTIST HEADER */
 
+.artist-page {
+    background-color: white;
+    color: black;
+    overflow-x: hidden;
+}
+
+.artist-page img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 .artist-header {
     display: grid;
     height: 400px;
-    width: 375px;
+    width: 100%;
     grid-template-rows: auto auto 80px;
     position: relative; /* Add this to position h1 absolutely */
+    overflow: hidden;
 }
 
 .artist-header img {
     justify-self: center; /* Center the image horizontally */
     align-self: center; /* Center the image vertically */
-    object-fit: cover; /* Fill the section while maintaining aspect ratio */
+    object-fit: cover;
     grid-row: 1 / 4;
+    grid-column: 1 / -1;
     width: 100%; /* Ensure the image stays inside the section */
     height: 100%; /* Ensure the image fills the section */
+    overflow-x: hidden;
+}
+
+.gradient-artist {
+    grid-row: 1 / 4;
+    grid-column: 1 / -1;
+    align-self: end;
+    height: 250px;
+    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,0) 63%);
 }
 
 .artist-page h1 {
+    color: var(--text-color);
     font-family: Helvetica;
     font-weight: 1900;
     font-size: 32.4px;
     margin-left: 15px;
     margin-top: 2px;
-    letter-spacing: -1px;
+    letter-spacing: -.9px;
     grid-row: 3;
     position: absolute; /* Position h1 absolutely */
     width: 100%; /* Ensure h1 spans the full width */
 }
 
 .ticket {
-    margin: 10px;
+    margin: 15px;
     padding: 1em;
     background-color: black;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
 }
 
 .ticket a {
@@ -339,12 +369,31 @@ hr {
     font-family: Paradiso-Bold;
     font-size: 14px;
     text-decoration: none;
+}
+
+.ticket div {
     flex-grow: 1;
+    margin: none;
+    margin: 0;
 }
 
 .ticket img {
-    flex-grow: ;
-    justify-content: ;
     width: 1.5em;
     height: 1.5em;
+}
+
+p.disclaimer {
+    margin: 20px 15px;
+    color: #a5a5a5;
+    font-size: 10px;
+}
+
+.info {
+    margin: 0 0 0 15px;
+}
+
+.info > h3 {
+    font-family: Paradiso-Bold;
+    font-size: 15px;
+    margin-top: -10px;
 }
\ No newline at end of file
diff --git a/three-sacred-souls.html b/three-sacred-souls.html
index bb587d3..1c419ac 100644
--- a/three-sacred-souls.html
+++ b/three-sacred-souls.html
@@ -8,18 +8,20 @@
     <title>Three Sacred Souls</title>
 </head>
 
-<body>
+<body class="artist-page">
 
     <header>
         <a href="index.html"></a>
     </header>
 
-    <main class="artist-page">
+    <main>
 
         <section class="artist-header">
             <h1>Three Sacred Souls</h1>
 
             <img src="./images/thee-sacred-souls-banner.webp" alt="A picture of three man standing on rocks in front of a sky full of clouds during golden hour.">
+
+            <div class="gradient-artist"></div>
         </section>
 
         <section class="ticket">
@@ -34,9 +36,9 @@ <h4>Ticket €34.30</h4>
             </a>
         </section>
 
-        <p>Excluding € 4,00 monthly membership</p>
+        <p class="disclaimer">Excluding € 4,00 monthly membership</p>
 
-        <section>
+        <section class="info">
             <h3>Saturday 15 February 2025</h3>
 
             <h3>In Paradiso - Main Hall</h3>