diff --git a/index.html b/index.html
index 9a400d1..494d9bb 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TV Show Project | My Name (My GitHub username)</title>
-    <link href="style.css" rel="stylesheet" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-  </head>
 
-  <body>
-    <div id="root">
-    </div>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TV Show Project | Hasan Demiroz (hasandemiroz) </title>
+  <link href="style.css" rel="stylesheet" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+</head>
 
-    <!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
-    <script src="episodes.js"></script>
+<body>
+  <div id="root">
+    <h1>TV Show Project</h1>
+  </div>
 
-    <!-- Loads YOUR javascript code -->
-    <script src="script.js"></script>
-  </body>
-</html>
+  <!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
+  <script src="episodes.js"></script>
+
+  <!-- Loads YOUR javascript code -->
+  <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
index 87a7de8..099ab23 100644
--- a/script.js
+++ b/script.js
@@ -6,7 +6,59 @@ function setup() {
 
 function makePageForEpisodes(episodeList) {
   const rootElem = document.getElementById("root");
-  rootElem.textContent = `Got ${episodeList.length} episode(s)`;
+// rootElem.textContent = `Got ${episodeList.length} episode(s)`;
+
+  
+  const episodesContainer = document.createElement('div');
+  episodesContainer.id = 'episodes-container';
+  rootElem.appendChild(episodesContainer);
+
+  function pad(num) {
+    return num.toString().padStart(2, '0');
+  }
+
+  episodeList.forEach(episode => {
+    const card = document.createElement('div');
+    card.id = 'episode-card';
+
+    const episodeCode = `S${pad(episode.season)}E${pad(episode.number)}`;
+    
+    const name = document.createElement('h2');
+    name.textContent = episode.name;
+
+    const img = document.createElement('img');
+    img.src = episode.image?.medium || '';
+    img.alt = episode.name;
+
+    const season = document.createElement('p');
+    season.id = 'episode-code';
+    season.textContent = episodeCode;
+
+    const summary = document.createElement('div');
+    summary.id = 'episode-summary';
+    summary.innerHTML = episode.summary || '';
+
+    const link = document.createElement('a');
+    link.href = episode.url;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    link.textContent = 'View on TVMaze';
+
+    card.appendChild(name);
+    card.appendChild(season);
+    card.appendChild(img);
+    card.appendChild(summary);
+    card.appendChild(link);
+
+    episodesContainer.appendChild(card);
+    
+  });
+
+
+  const credit = document.createElement('p');
+  credit.innerHTML = `Data originally from <a href="https://tvmaze.com/" target="_blank" rel="noopener noreferrer">TVMaze.com</a>`;
+  rootElem.appendChild(credit);
+
 }
 
 window.onload = setup;
diff --git a/style.css b/style.css
index 77cb8d4..5fee39d 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,61 @@
-#root {
-  color: red;
+body{
+  background-color: #BDDDE4;
 }
+#episodes-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+#episode-card {
+  border: 1px solid white;
+  border-radius: 5px;
+  padding: 1rem;
+  flex: 0 1 calc(33.333% - 2rem);
+  width: 300px; 
+  text-align: center;
+  box-sizing: border-box;
+  background: white;
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#episode-card img {
+  width: 100%; 
+  height: auto; 
+}
+
+#episode-card h2 {
+  font-size: 1.2rem;
+  border: 1px solid black;
+  border-radius: 4px; 
+  width: 100%;
+  padding: 0.5rem 0;
+}
+
+#episode-code {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+#episode-card a {
+  display: inline-block;
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  background: #0077cc;
+  color: white;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+#root > p {
+  text-align: center;
+  font-size: 1rem;
+  margin: 1rem 0;
+  width: 100%;
+}
\ No newline at end of file
