diff --git a/index.html b/index.html
index 1a0969c..503e1c4 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,8 @@
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
   <!-- Importing local CSS file -->
   <link href="./style.css" rel="stylesheet">
+  <!-- Importing local JS file -->
+  <script src="main.js" defer></script>
 </head>
 
 <body>
@@ -21,6 +23,12 @@
     <h1>ChatVenture</h1>
     <p>Hello PLAYER! Welcome to the text adventure game where the story is made up by GPT :)</p>
   </header>
+
+  <div class="genres">
+    <button class="genre" data-genre="horror">👻</button>
+    <button class="genre" data-genre="spy film">🕵🏻‍</button>
+    <button class="genre" data-genre="marvel superheros">🦸🏻</button>
+  </div>
 </body>
 
 </html>
diff --git a/main.js b/main.js
index e69de29..67b0f50 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,9 @@
+const init = () => {
+  const genres = document.querySelectorAll('.genre');
+  genres.forEach((button) => button.addEventListener(
+    'click',
+    () => alert(`You selected the genre: ${button.dataset.genre}`))
+  )
+}
+
+init()
diff --git a/style.css b/style.css
index 1902de4..ffdf0ce 100644
--- a/style.css
+++ b/style.css
@@ -28,3 +28,27 @@ header {
   color: #e9f45b;
   padding: 32px;
 }
+
+.genres {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  justify-content: center;
+  gap: 10px;
+}
+
+.genre {
+  background-color: transparent;
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  font-size: 40px;
+  text-align: center;
+  line-height: 2.4;
+  border: 4px solid #a1d2ff;
+  cursor: pointer;
+}
+
+.genre:hover {
+  background-color: rgba(255,255,255,0.7);
+  border: 4px solid #f1c82d;
+}
