diff --git a/assets/css/style.css b/assets/css/style.css
index 392e643d..29b2f163 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,38 +1,251 @@
 body, html {
     margin: 0;
     padding: 0;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
+    line-height: 1.6;
+    color: #202122;
+    background-color: #f6f6f6;
 }
-ul { list-style: none; padding-left: 5px; }
-a { color:blue; text-decoration: none;}
+
+* {
+    box-sizing: border-box;
+}
+
+ul { 
+    list-style: none; 
+    padding-left: 0; 
+    margin: 0;
+}
+
+a { 
+    color: #36c; 
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: #447ff5;
+    text-decoration: underline;
+}
+
+header {
+    background-color: #fff;
+    border-bottom: 1px solid #a2a9b1;
+    padding: 1rem 0;
+    text-align: center;
+}
+
+.logo img {
+    max-width: 200px;
+    height: auto;
+}
+
 .bar {
-    background-color: #f9f9fb;
-    padding:15px;
-    border-top: solid 1px #cdcdcd;
-    border-bottom: solid 1px #cdcdcd;
+    background-color: #f8f9fa;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid #a2a9b1;
+}
+
+.bar ul {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 0;
+    padding: 0;
 }
+
+.bar li {
+    margin: 0;
+}
+
 .content {
     max-width: 1440px;
-    margin: auto;
-    grid-gap: 3rem;
+    margin: 2rem auto;
     display: grid;
-    gap: 3rem;
     grid-template-areas: "sidebar main anchors";
-    grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
-    padding-left: 1rem;
-    padding-right: 1rem;
+    grid-template-columns: 250px 1fr 250px;
+    gap: 2rem;
+    padding: 0 1rem;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    overflow: hidden;
 }
-.footer {
-    min-height: 100px;
-    border-top: solid 1px #cdcdcd;
+
+.sidebar {
+    grid-area: sidebar;
+    background-color: #f8f9fa;
+    padding: 1.5rem;
+    border-right: 1px solid #eaecf0;
 }
-.anchors {
-    border-left: solid 1px #cdcdcd;
-    padding-left: 15px;
+
+.sidebar h2 {
+    color: #54595d;
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #eaecf0;
+    padding-bottom: 0.5rem;
 }
-.sidebar {
-    border-right: solid 1px #cdcdcd;
+
+.sidebar ul {
+    list-style: none;
+    padding: 0;
+}
+
+.sidebar li {
+    margin-bottom: 0.5rem;
+}
+
+.sidebar a {
+    color: #36c;
+    font-size: 0.9rem;
+    display: block;
+    padding: 0.25rem 0;
+}
+
+.main {
+    grid-area: main;
+    padding: 2rem;
+    background-color: #fff;
 }
+
+.main h1 {
+    color: #000;
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #a2a9b1;
+    padding-bottom: 0.5rem;
+}
+
+.main h2 {
+    color: #000;
+    font-size: 1.5rem;
+    margin: 2rem 0 1rem 0;
+    border-bottom: 1px solid #eaecf0;
+    padding-bottom: 0.25rem;
+}
+
+.main h3 {
+    color: #54595d;
+    font-size: 1.2rem;
+    margin: 1.5rem 0 0.5rem 0;
+}
+
+.main p {
+    margin-bottom: 1rem;
+    text-align: justify;
+}
+
+.main ul {
+    margin: 1rem 0;
+    padding-left: 2rem;
+}
+
+.main li {
+    margin-bottom: 0.5rem;
+    list-style-type: disc;
+}
+
 figure {
     text-align: center;
+    margin: 2rem 0;
+    background-color: #f8f9fa;
+    padding: 1rem;
+    border-radius: 4px;
+}
+
+figure img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+}
+
+figcaption {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: #54595d;
+    font-style: italic;
+}
+
+.anchors {
+    grid-area: anchors;
+    background-color: #f8f9fa;
+    padding: 1.5rem;
+    border-left: 1px solid #eaecf0;
+}
+
+.anchors h2 {
+    color: #54595d;
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #eaecf0;
+    padding-bottom: 0.5rem;
+}
+
+.anchors ul {
+    list-style: none;
+    padding: 0;
+}
+
+.anchors li {
+    margin-bottom: 0.5rem;
+}
+
+.anchors a {
+    color: #36c;
+    font-size: 0.9rem;
+    display: block;
+    padding: 0.25rem 0;
+}
+
+.footer {
+    background-color: #f8f9fa;
+    border-top: 1px solid #a2a9b1;
+    padding: 1rem 2rem;
+    text-align: center;
+    color: #54595d;
+    font-size: 0.9rem;
+}
+
+.footer p {
+    margin: 0.5rem 0;
+}
+
+@media (max-width: 1200px) {
+    .content {
+        grid-template-columns: 200px 1fr 200px;
+        gap: 1rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .content {
+        grid-template-areas: 
+            "main"
+            "sidebar"
+            "anchors";
+        grid-template-columns: 1fr;
+        gap: 1rem;
+        margin: 1rem;
+    }
+    
+    .sidebar, .anchors {
+        border: none;
+        border-top: 1px solid #eaecf0;
+    }
+    
+    .bar ul {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    
+    .main {
+        padding: 1rem;
+    }
+    
+    .main h1 {
+        font-size: 2rem;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 6068141f..3c4f9b44 100644
--- a/index.html
+++ b/index.html
@@ -4,41 +4,98 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Página Principal</title>
+    <title>Game of Thrones - Wikipédia, a enciclopédia livre</title>
     <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
-
-    <div>   
+    <header>
         <div class="logo">
-            <img src="assets/images/logo.png" width="200"/>
+            <img src="assets/images/logo.png" width="200" alt="Logo da Wikipédia"/>
         </div>
-    </div>
+    </header>
 
-    <div class="bar"></div>
+    <nav class="bar">
+        <ul>
+            <li><a href="#">Página principal</a></li>
+            <li><a href="#">Conteúdo destacado</a></li>
+            <li><a href="#">Eventos atuais</a></li>
+            <li><a href="#">Esplanada</a></li>
+            <li><a href="#">Página aleatória</a></li>
+            <li><a href="#">Colaborar</a></li>
+        </ul>
+    </nav>
 
-    <div class="content">
-        <div class="sidebar">
-            <h2>Título</h2>
+    <main class="content">
+        <aside class="sidebar">
+            <h2>Navegação</h2>
             <ul>
-                <li><a href="#">Links</a></li>
+                <li><a href="#sinopse">Sinopse</a></li>
+                <li><a href="#personagens">Personagens</a></li>
+                <li><a href="#casas">Casas Nobres</a></li>
+                <li><a href="#produção">Produção</a></li>
+                <li><a href="#recepção">Recepção</a></li>
+                <li><a href="#legado">Legado</a></li>
             </ul>
-        </div>
+        </aside>
 
-        <div class="main">
+        <article class="main">
+            <h1>Game of Thrones</h1>
             
-        </div>
+            <figure>
+                <img src="assets/images/game-of-thrones.png" alt="Banner da série Game of Thrones" width="600"/>
+                <figcaption>Banner promocional da série Game of Thrones</figcaption>
+            </figure>
 
-        <div class="anchors">
-            <h2>Neste Artigo</h2>
+            <p><strong>Game of Thrones</strong> é uma série de televisão norte-americana criada por David Benioff e D. B. Weiss, baseada na série de livros <em>A Song of Ice and Fire</em> de George R. R. Martin. A série foi exibida pela HBO de 17 de abril de 2011 a 19 de maio de 2019, totalizando 73 episódios distribuídos em oito temporadas.</p>
+
+            <h2 id="sinopse">Sinopse</h2>
+            <p>A série se passa em Westeros, um continente fictício onde sete reinos disputam o Trono de Ferro. A história gira em torno de várias famílias nobres que lutam pelo controle do reino, enquanto uma antiga ameaça sobrenatural se aproxima do norte.</p>
+
+            <h2 id="personagens">Personagens Principais</h2>
             <ul>
-                <li><a href="#">Âncoras</a></li>
+                <li><strong>Jon Snow</strong> - Bastardo da Casa Stark</li>
+                <li><strong>Daenerys Targaryen</strong> - A Mãe dos Dragões</li>
+                <li><strong>Tyrion Lannister</strong> - O Anão</li>
+                <li><strong>Arya Stark</strong> - A Garota Sem Rosto</li>
+                <li><strong>Cersei Lannister</strong> - Rainha Regente</li>
             </ul>
-        </div>
-    </div>
 
-    <div class="footer">
+            <h2 id="casas">Casas Nobres</h2>
+            <h3>Casa Stark</h3>
+            <p>Os Stark governam o Norte de Winterfell. Seu lema é "O Inverno Está Chegando".</p>
+            
+            <h3>Casa Lannister</h3>
+            <p>Os Lannister controlam as Terras Ocidentais de Rochedo Casterly. Seu lema é "Ouça Me Rugir".</p>
+            
+            <h3>Casa Targaryen</h3>
+            <p>Antiga casa real que governou Westeros por 300 anos. Seu lema é "Fogo e Sangue".</p>
+
+            <h2 id="produção">Produção</h2>
+            <p>A série foi filmada em diversos locais ao redor do mundo, incluindo Irlanda do Norte, Croácia, Islândia, Marrocos e Espanha. Com um orçamento estimado de 15 milhões de dólares por episódio, Game of Thrones se tornou uma das séries mais caras já produzidas.</p>
+
+            <h2 id="recepção">Recepção</h2>
+            <p>Game of Thrones recebeu aclamação da crítica e do público, ganhando 59 Prêmios Emmy, incluindo Melhor Série Dramática em 2015, 2016 e 2018. A série também quebrou recordes de audiência e se tornou um fenômeno cultural global.</p>
+
+            <h2 id="legado">Legado</h2>
+            <p>A série revolucionou a televisão com sua narrativa complexa, produção de alta qualidade e disposição de matar personagens principais. Seu sucesso abriu caminho para outras séries de fantasia épica na televisão.</p>
+        </article>
+
+        <aside class="anchors">
+            <h2>Neste Artigo</h2>
+            <ul>
+                <li><a href="#sinopse">Sinopse</a></li>
+                <li><a href="#personagens">Personagens</a></li>
+                <li><a href="#casas">Casas Nobres</a></li>
+                <li><a href="#produção">Produção</a></li>
+                <li><a href="#recepção">Recepção</a></li>
+                <li><a href="#legado">Legado</a></li>
+            </ul>
+        </aside>
+    </main>
 
-    </div>
+    <footer class="footer">
+        <p>Esta página foi editada pela última vez às 15:30 de 15 de dezembro de 2024.</p>
+        <p>O conteúdo está disponível sob a licença Creative Commons Attribution-ShareAlike.</p>
+    </footer>
 </body>
 </html>
\ No newline at end of file