diff --git a/views/all-anime.ejs b/views/all-anime.ejs
index 06473e8..d9215f1 100644
--- a/views/all-anime.ejs
+++ b/views/all-anime.ejs
@@ -16,7 +16,7 @@
             <tr>
               <td><%= anime.judul %></td>
               <td>
-                <a href="/anime/<%= anime.slug %>" class="btn btn-primary btn-sm">View</a>
+                <a href="/anime/<%= anime.slug %>" class="btn btn-dark btn-sm">View</a>
               </td>
             </tr>
           <% }) %>
@@ -91,7 +91,7 @@
       const tdAction = document.createElement('td');
       const viewLink = document.createElement('a');
       viewLink.href = `/anime/${result.slug}`;
-      viewLink.className = 'btn btn-primary btn-sm';
+      viewLink.className = 'btn btn-dark btn-sm';
       viewLink.textContent = 'View';
       tdAction.appendChild(viewLink);
       tr.appendChild(tdAction);
diff --git a/views/detail.ejs b/views/detail.ejs
index f2d2278..ad5c245 100644
--- a/views/detail.ejs
+++ b/views/detail.ejs
@@ -18,7 +18,7 @@
       <p><strong>Genres:</strong>
         <ul>
           <% anime.genres.forEach(genre => { %>
-            <li><a href="/genres/<%= genre.slug %>"><%= genre.judul %></a></li>
+            <li><a style="color: black;" href="/genres/<%= genre.slug %>"><%= genre.judul %></a></li>
           <% }) %>
         </ul>
       </p>
@@ -41,7 +41,7 @@
             <td><%= episode.judul %></td>
             <td><%= episode.tanggalRilis %></td>
             <td>
-              <button type="submit" name="slug" value="<%= episode.slug %>" class="btn btn-primary btn-sm">View</button>
+              <button type="submit" name="slug" value="<%= episode.slug %>" class="btn btn-dark btn-sm">View</button>
             </td>
           </tr>
         <% }) %>
diff --git a/views/episode.ejs b/views/episode.ejs
index 87336fd..0a480fe 100644
--- a/views/episode.ejs
+++ b/views/episode.ejs
@@ -22,12 +22,12 @@
       </div>
       <div class="d-flex justify-content-between mb-4">
         <% if (episode.episodeSebelumnya) { %>
-          <a href="/episode?slug=<%= episode.episodeSebelumnya.slug %>" class="btn btn-primary">Previous Episode</a>
+          <a href="/episode?slug=<%= episode.episodeSebelumnya.slug %>" class="btn btn-dark">Previous Episode</a>
         <% } else { %>
           <span class="btn btn-secondary disabled">Previous Episode</span>
         <% } %>
         <% if (episode.episodeSelanjutnya) { %>
-          <a href="/episode?slug=<%= episode.episodeSelanjutnya.slug %>" class="btn btn-primary">Next Episode</a>
+          <a href="/episode?slug=<%= episode.episodeSelanjutnya.slug %>" class="btn btn-dark">Next Episode</a>
         <% } else { %>
           <span class="btn btn-secondary disabled">Next Episode</span>
         <% } %>
@@ -49,7 +49,7 @@
               <td>
                 <ul>
                   <% quality.urls.forEach(url => { %>
-                    <li><a href="<%= url.url %>" target="_blank"><%= url.judul %></a></li>
+                    <li><a href="<%= url.url %>" target="_blank" style="color: black;"><%= url.judul %></a></li>
                   <% }) %>
                 </ul>
               </td>
diff --git a/views/genre-anime.ejs b/views/genre-anime.ejs
index cb92cca..f058324 100644
--- a/views/genre-anime.ejs
+++ b/views/genre-anime.ejs
@@ -32,7 +32,7 @@
             </td>
             <td><%= anime.jumlahEpisode %></td>
             <td>
-              <a href="/anime/<%= anime.slug %>" class="btn btn-primary btn-sm">View</a>
+              <a href="/anime/<%= anime.slug %>" class="btn btn-dark btn-sm">View</a>
             </td>
           </tr>
         <% }) %>
diff --git a/views/genres.ejs b/views/genres.ejs
index 4776fad..550b16f 100644
--- a/views/genres.ejs
+++ b/views/genres.ejs
@@ -1,17 +1,26 @@
 <%- include('partials/header', { title: 'Genres - ZANNIME' }) %>
 <div class="container">
   <h1 class="mt-4">Genres</h1>
-  <ul class="list-group">
+  <!-- Genres Grid -->
+  <div class="row">
     <% genres.forEach(genre => { %>
-      <li class="list-group-item">
-        <a href="/genres/<%= genre.slug %>"><%= genre.judul %></a>
-      </li>
+      <div class="col-md-4 col-lg-3 mb-4 genre-card">
+        <div class="card h-100 shadow-sm border-0 bg-black">
+          <div class="card-body text-center">
+            <h5 class="card-title">
+              <a href="/genres/<%= genre.slug %>" class="text-white text-decoration-none">
+                <%= genre.judul %>
+              </a>
+            </h5>
+          </div>
+        </div>
+      </div>
     <% }) %>
-  </ul>
+  </div>
 </div>
-<br>
+
 <%- include('partials/footer') %>
 <!-- Bootstrap JS -->
 <script src="/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/views/index.ejs b/views/index.ejs
index df15dfd..77de267 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -22,7 +22,7 @@
             <td><%= anime.tanggalRilisTerbaru %></td>
             <td><%= anime.episodeTerbaru %></td>
             <td>
-              <a href="/anime/<%= anime.slug %>" class="btn btn-primary btn-sm">View</a>
+              <a href="/anime/<%= anime.slug %>" class="btn btn-dark btn-sm">View</a>
             </td>
           </tr>
         <% }) %>
diff --git a/views/schedule.ejs b/views/schedule.ejs
index 9e0884a..a472bf2 100644
--- a/views/schedule.ejs
+++ b/views/schedule.ejs
@@ -7,7 +7,7 @@
         <h2 class="card-title"><%= day.hari %></h2>
         <p class="card-text">
           <% day.anime.forEach((anime, index) => { %>
-            <a href="/anime/<%= anime.slug %>" class="badge bg-primary me-1 text-decoration-none"><%= anime.judul %></a><% if (index < day.anime.length - 1) { %>, <% } %>
+            <a href="/anime/<%= anime.slug %>" class="badge bg-dark me-1 text-decoration-none"><%= anime.judul %></a><% if (index < day.anime.length - 1) { %>, <% } %>
           <% }) %>
         </p>
       </div>