diff --git a/docs/genres/index.html b/docs/genres/index.html
index 11a2b5c..a9d95b2 100644
--- a/docs/genres/index.html
+++ b/docs/genres/index.html
@@ -60,21 +60,51 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">Beverly Hills Cop</h3>
+      <h3 class="subtitle">In Time</h3>
     </header>
-    <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
+    <div>A dystopian future where time is literally money</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
         <span class="numbers">4/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/beverly-hills-cop/">
+        <a class="button" href="/film/reviews/in-time/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Fright Night" />
+    
+      <a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
+        <span hidden>Favorite</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+
+      </a>
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Fright Night</h3>
+    </header>
+    <div>A high school student suspects his next door neighbor is a vampire</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/fright-night/">
           Read review
         </a>
     </div>
@@ -108,21 +138,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">In Time</h3>
+      <h3 class="subtitle">Beverly Hills Cop</h3>
     </header>
-    <div>A dystopian future where time is literally money</div>
+    <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
         <span class="numbers">4/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/in-time/">
+        <a class="button" href="/film/reviews/beverly-hills-cop/">
           Read review
         </a>
     </div>
@@ -154,36 +184,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Fright Night" />
-    
-      <a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
-        <span hidden>Favorite</span>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-
-      </a>
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">Fright Night</h3>
-    </header>
-    <div>A high school student suspects his next door neighbor is a vampire</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/fright-night/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
         </div>
       </section>
     
@@ -268,6 +268,30 @@
         </header>
         <div class="carasol">
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">In Time</h3>
+    </header>
+    <div>A dystopian future where time is literally money</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/in-time/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTY0NDY3MDMxN15BMl5BanBnXkFtZTcwOTM5NzMzOQ@@._V1_SX800.webp alt="Now You See Me" />
@@ -298,30 +322,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">In Time</h3>
-    </header>
-    <div>A dystopian future where time is literally money</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/in-time/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
         </div>
       </section>
     
@@ -362,6 +362,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Now You See Me 2</h3>
+    </header>
+    <div>A group of magicians are coerced into pulling off another heist</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">2/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/now-you-see-me-2/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
@@ -386,6 +410,40 @@
 </div>
 
           
+        </div>
+      </section>
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2>Comedy</h2>
+          <a href="comedy" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
@@ -410,15 +468,29 @@
 </div>
 
           
-        </div>
-      </section>
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
     
-      <section>
-        <header class="cluster spacing:between p1" style="align-items: flex-end;">
-          <h2>Comedy</h2>
-          <a href="comedy" class="button button:large">See more</a>
-        </header>
-        <div class="carasol">
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
+    </header>
+    <div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/kingsman/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
           
             <div class="card">
   <div class="card-image">
@@ -450,54 +522,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">Now You See Me 2</h3>
-    </header>
-    <div>A group of magicians are coerced into pulling off another heist</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">2/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/now-you-see-me-2/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">The French Dispatch</h3>
-    </header>
-    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/the-french-dispatch/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
@@ -522,30 +546,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
-    </header>
-    <div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/kingsman/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
         </div>
       </section>
     
@@ -556,30 +556,6 @@
         </header>
         <div class="carasol">
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">The French Dispatch</h3>
-    </header>
-    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/the-french-dispatch/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
@@ -634,6 +610,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="No Reservations" />
@@ -704,21 +704,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="No Reservations" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">Whisper of the Heart</h3>
+      <h3 class="subtitle">No Reservations</h3>
     </header>
-    <div>A slice of life story about a bookish middle school girl living in Tokyo</div>
+    <div>A NY City chef and her recently adopted niece adapt to their life together</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
-        <span class="numbers">5/5</span>
+        <span class="numbers">3/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/whisper-of-the-heart/">
+        <a class="button" href="/film/reviews/no-reservations/">
           Read review
         </a>
     </div>
@@ -752,21 +752,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="No Reservations" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">No Reservations</h3>
+      <h3 class="subtitle">Whisper of the Heart</h3>
     </header>
-    <div>A NY City chef and her recently adopted niece adapt to their life together</div>
+    <div>A slice of life story about a bookish middle school girl living in Tokyo</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
-        <span class="numbers">3/5</span>
+        <span class="numbers">5/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/no-reservations/">
+        <a class="button" href="/film/reviews/whisper-of-the-heart/">
           Read review
         </a>
     </div>
@@ -784,6 +784,30 @@
         </header>
         <div class="carasol">
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Beverly Hills Cop</h3>
+    </header>
+    <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/beverly-hills-cop/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTY0NDY3MDMxN15BMl5BanBnXkFtZTcwOTM5NzMzOQ@@._V1_SX800.webp alt="Now You See Me" />
@@ -814,30 +838,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">Beverly Hills Cop</h3>
-    </header>
-    <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/beverly-hills-cop/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
         </div>
       </section>
     
diff --git a/docs/review.css b/docs/review.css
index 7ab135e..ef2839a 100644
--- a/docs/review.css
+++ b/docs/review.css
@@ -11,6 +11,7 @@
   flex-direction: column;
   align-items: center;
   gap: 30px;
+  margin-top: 30px;
 }
 
 .review-header h1 {
diff --git a/static/review.css b/static/review.css
index 7ab135e..ef2839a 100644
--- a/static/review.css
+++ b/static/review.css
@@ -11,6 +11,7 @@
   flex-direction: column;
   align-items: center;
   gap: 30px;
+  margin-top: 30px;
 }
 
 .review-header h1 {