diff --git a/docs/card.css b/docs/card.css
index 57727ed..b4c52b3 100644
--- a/docs/card.css
+++ b/docs/card.css
@@ -23,10 +23,12 @@
 
 .card:hover .card-content {
   flex-basis: 50%;
+  transition-delay: 0ms;
   padding-top: 10px;
 }
 .card:hover .card-image {
   flex-basis: 50%;
+  transition-delay: 0ms;
 }
 
 .card-content {
@@ -35,11 +37,13 @@
   flex-direction: column;
   gap: 10px;
   justify-content: space-between;
-  transition: flex-basis 250ms ease-out;
+  transition: all 250ms ease-out;
+  transition-delay: 250ms;
 }
 
 .card-image {
-  transition: flex-basis 250ms ease-out;
+  transition: all 250ms ease-out;
+  transition-delay: 250ms;
   flex-grow: 1;
   flex-basis: 100%;
   object-fit: cover;
diff --git a/docs/reviews/index.html b/docs/genres/comedy/index.html
similarity index 59%
rename from docs/reviews/index.html
rename to docs/genres/comedy/index.html
index 75b7a41..10afb59 100644
--- a/docs/reviews/index.html
+++ b/docs/genres/comedy/index.html
@@ -1,22 +1,14 @@
 <!DOCTYPE html>
 <html lang="en"><head>
-  <title>Reviews</title>
-  <meta property="og:title" content="Reviews" />
+  <title>Comedy</title>
+  <meta property="og:title" content="Comedy" />
 
-<meta property="og:type" content="article" />
-<meta property="og:description" content=>
+  
+<meta property="og:type" content="website" />
 
-<meta property="og:url" content="https://caalden.github.io/film/reviews/" />
+<meta property="og:url" content="https://caalden.github.io/film/genres/comedy/" />
 
 
-<meta property="og:image:alt" content="Movie Poster for Reviews">
-<meta property="og:article:author" content="Campbell Alden">
-<meta property="og:article:published_time" content="2022-08-28T22:31:36&#43;0900">
-<meta property="twitter:label1" content="Rating">
-<meta property="twitter:data1" content="/5">
-<meta property="twitter:label2" content="Published">
-<meta property="twitter:data2" content="August 22, 2022">
-
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
@@ -42,25 +34,23 @@
 </nav>
 </header>
 <main id="content">
-  <article>
-      <header>
-          <h1>Reviews</h1>
-      </header>
-      
-      
-  </article>
-  <ul>
-  
-  
-      <li>
-          <a href="https://caalden.github.io/film/reviews/no-reservations/">2022-08-28 | No Reservations</a>
-      </li>
-  
-      <li>
-          <a href="https://caalden.github.io/film/reviews/the-french-dispatch/">2022-08-17 | The French Dispatch</a>
-      </li>
-  
-  </ul>
+  <section>
+    <header style="margin-bottom: 30px;">
+      <h1>Comedy</h1>
+    </header>
+
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2></h2>
+          <a href="" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
+        </div>
+      </section>
+    
+  </section>
 
         </main><footer>
   <span></span>
diff --git a/docs/genres/drama/index.html b/docs/genres/drama/index.html
new file mode 100644
index 0000000..f8ce72a
--- /dev/null
+++ b/docs/genres/drama/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+  <title>Drama</title>
+  <meta property="og:title" content="Drama" />
+
+  
+<meta property="og:type" content="website" />
+
+<meta property="og:url" content="https://caalden.github.io/film/genres/drama/" />
+
+
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
+  <link rel="stylesheet" href="/film/style.css">
+  <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
+  <link rel="stylesheet" href="/film/review.css">
+  <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">
+</head>
+<body><header class="header">
+  <h2>CaAlden: <span class="color:accent">Films</span></h2><nav class="navbar">
+  <ul class="navbar-list">
+    <li class="navbar-item button:large">
+      <a href="https://caalden.github.io/film/about" class="button button:large color:invert">about</a>
+    </li>
+    <li class="button:large">
+      <a href="https://caalden.github.io/film/" class="button button:large color:invert">home</a>
+    </li>
+  </ul>
+</nav>
+</header>
+<main id="content">
+  <section>
+    <header style="margin-bottom: 30px;">
+      <h1>Drama</h1>
+    </header>
+
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2></h2>
+          <a href="" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
+        </div>
+      </section>
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2></h2>
+          <a href="" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
+        </div>
+      </section>
+    
+  </section>
+
+        </main><footer>
+  <span></span>
+</footer>
+</body>
+</html>
diff --git a/docs/genres/index.html b/docs/genres/index.html
new file mode 100644
index 0000000..77bff5d
--- /dev/null
+++ b/docs/genres/index.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+  <title>Genres</title>
+  <meta property="og:title" content="Genres" />
+
+  
+<meta property="og:type" content="website" />
+
+<meta property="og:url" content="https://caalden.github.io/film/genres/" />
+
+
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
+  <link rel="stylesheet" href="/film/style.css">
+  <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
+  <link rel="stylesheet" href="/film/review.css">
+  <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">
+</head>
+<body><header class="header">
+  <h2>CaAlden: <span class="color:accent">Films</span></h2><nav class="navbar">
+  <ul class="navbar-list">
+    <li class="navbar-item button:large">
+      <a href="https://caalden.github.io/film/about" class="button button:large color:invert">about</a>
+    </li>
+    <li class="button:large">
+      <a href="https://caalden.github.io/film/" class="button button:large color:invert">home</a>
+    </li>
+  </ul>
+</nav>
+</header>
+<main id="content">
+  <section>
+    <header style="margin-bottom: 30px;">
+      <h1>Genres</h1>
+    </header>
+
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2>Drama</h2>
+          <a href="drama" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
+            <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div style="text-align: justify;">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">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">7.2</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 class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">No Reservations</h3>
+    </header>
+    <div style="text-align: justify;">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">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">6.3</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/no-reservations/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
+        </div>
+      </section>
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2>Romance</h2>
+          <a href="romance" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
+            <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div style="text-align: justify;">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">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">7.2</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 class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">No Reservations</h3>
+    </header>
+    <div style="text-align: justify;">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">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">6.3</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/no-reservations/">
+          Read review
+        </a>
+    </div>
+  </div>
+</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 class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div style="text-align: justify;">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">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">7.2</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
+        </div>
+      </section>
+    
+  </section>
+
+        </main><footer>
+  <span></span>
+</footer>
+</body>
+</html>
diff --git a/docs/genres/romance/index.html b/docs/genres/romance/index.html
new file mode 100644
index 0000000..a93e2d4
--- /dev/null
+++ b/docs/genres/romance/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+  <title>Romance</title>
+  <meta property="og:title" content="Romance" />
+
+  
+<meta property="og:type" content="website" />
+
+<meta property="og:url" content="https://caalden.github.io/film/genres/romance/" />
+
+
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
+  <link rel="stylesheet" href="/film/style.css">
+  <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
+  <link rel="stylesheet" href="/film/review.css">
+  <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">
+</head>
+<body><header class="header">
+  <h2>CaAlden: <span class="color:accent">Films</span></h2><nav class="navbar">
+  <ul class="navbar-list">
+    <li class="navbar-item button:large">
+      <a href="https://caalden.github.io/film/about" class="button button:large color:invert">about</a>
+    </li>
+    <li class="button:large">
+      <a href="https://caalden.github.io/film/" class="button button:large color:invert">home</a>
+    </li>
+  </ul>
+</nav>
+</header>
+<main id="content">
+  <section>
+    <header style="margin-bottom: 30px;">
+      <h1>Romance</h1>
+    </header>
+
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2></h2>
+          <a href="" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
+        </div>
+      </section>
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2></h2>
+          <a href="" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
+        </div>
+      </section>
+    
+  </section>
+
+        </main><footer>
+  <span></span>
+</footer>
+</body>
+</html>
diff --git a/docs/style.css b/docs/style.css
index d56b255..d1b108c 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -90,7 +90,7 @@ main {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: 900px;
+  max-width: 930px;
 }
 
 .title, h1 {
@@ -284,3 +284,10 @@ a:hover {
 .http-header {
   class="home-page-header" margin-top: 10vh;
 }
+
+.carasol {
+  display: flex;
+  overflow: auto;
+  gap: 10px;
+  padding-bottom: 20px;
+}
