diff --git a/index.html b/index.html
index 14dcba6..167bc05 100644
--- a/index.html
+++ b/index.html
@@ -2,12 +2,13 @@
 <html lang="es">
 <head>
     <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <title>Yew App</title>
-    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
-    <link data-trunk rel="css" href="static/css/styles.css" />
-    <link data-trunk rel="css" href="static/css/normalize.css" />
+    <link href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"
+          rel="stylesheet">
+    <link data-trunk href="static/css/styles.css" rel="css"/>
+    <link data-trunk href="static/css/normalize.css" rel="css"/>
 </head>
 <body>
-<h1>Hola mundo</h1>
 </body>
 </html>
diff --git a/src/components/result_board.rs b/src/components/result_board.rs
index b8e9ee6..d9e971e 100644
--- a/src/components/result_board.rs
+++ b/src/components/result_board.rs
@@ -1,4 +1,4 @@
-use crate::consts::GameResult;
+use crate::consts::{GameResult, MAX_ATTEMPTS};
 use yew::prelude::*;
 use crate::consts::{Attempts, Status};
 
@@ -14,20 +14,26 @@ pub fn ResultBoard(props: &ResultBoardProps) -> Html {
     } = props;
 
     html! {
-        <div class="result-board"> {
+        <div class="result-board">
+            <p>
+                { format!("Palabra encontrada en {}/{} intentos", attempts.fields.len(), MAX_ATTEMPTS) }
+            </p><br/>
+            <p> {
             for attempts.fields.iter().map(|attempt| {
                 html_nested! {
-                    <p class={ "result-board" }> {
+                    <> {
                         for attempt.iter().map(| att| {
                             match att.status {
                                 Status::Found => html_nested! { <> { "🟩" } </> },
-                                Status::Almost => html_nested! { <span>{ "🟨" }</span> },
-                                Status::NotFound => html_nested! { <span>{ "⬜" }</span> }
+                                Status::Almost => html_nested! { <>{ "🟨" }</> },
+                                Status::NotFound => html_nested! { <>{ "⬛" }</> }
+
                             }
                         })
-                    } </p>
+                    } <br/></>
                 }
             })
-        } </div>
+            } </p>
+        </div>
     }
 }
diff --git a/src/hooks/use_board.rs b/src/hooks/use_board.rs
index 5675230..322535c 100644
--- a/src/hooks/use_board.rs
+++ b/src/hooks/use_board.rs
@@ -102,8 +102,7 @@ pub fn use_board() -> UseBoardHandle {
     let current_attempt = use_state(|| "".to_string());
     let attempts: UseStateHandle<Attempts> = use_state(|| Attempts::new());
     let attempt_index = use_mut_ref(|| 0usize);
-    // let answer = use_memo(|_| get_word_of_the_day(), None::<()>);
-    let answer = use_memo(|_| "ABEJA".to_owned(), None::<()>);
+    let answer = use_memo(|_| get_word_of_the_day(), None::<()>);
     let virtual_keyboard = use_state(|| new_empty_virtual_keyboard().into());
     let result = use_state(|| None::<GameResult>);
 
diff --git a/src/main.rs b/src/main.rs
index 9c356c4..0ed597c 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -40,7 +40,10 @@ fn App() -> Html {
 
     html! {
         <>
-            <h1>{ "Worsdle" }</h1>
+            <header>
+                <h1>{ "Worsdle" }</h1>
+            </header>
+            <main>
             <Board
                 attempts={ (*board.attempts).clone() }
                 attempt_index={ *board.attempt_index.borrow() }
@@ -57,6 +60,16 @@ fn App() -> Html {
                     }
                 } </span>
             </div>
+            </main>
+            <footer>
+                <small> {
+                    html_nested! {
+                        <>
+                        { "Hecho por " } <a href={ "https://kirbylife.dev" }> { "kirbylife" } </a>
+                        </>
+                    }
+                } </small>
+            </footer>
         </>
     }
 }
diff --git a/static/css/styles.css b/static/css/styles.css
index 0b2761c..8f84985 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -4,34 +4,40 @@ body > * {
 
 body {
     min-height: 99dvh;
-    margin-left: 150px;
-    margin-right: 150px;
-    display: flex;
-    align-items: center;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    justify-items: center;
+    gap: 5px;
+}
+
+main {
+    padding-left: 20px;
+    padding-right: 20px;
+    display: flex !important;
     flex-direction: column;
+    align-items: center;
+    gap: 10px;
 }
 
 .board {
-    width: 25%;
-    height: 25%;
     display: grid;
+    width: min-content;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     justify-items: center;
-    justify-self: auto;
-    gap: 10px;
+    gap: 5px;
     padding-bottom: 10px;
 }
 
 .board > p {
     display: flex;
-    width: 70px;
-    height: 70px;
+    width: 50px;
+    aspect-ratio: 1/1;
     border: 3px solid #444444;
     border-radius: 10px;
     justify-content: center;
     align-items: center;
     margin: 0;
-    font-size: 40px;
+    font-size: 30px;
 }
 
 .correct {
@@ -69,18 +75,15 @@ body {
 }
 
 .result-board {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    width: fit-content;
-    gap: 2px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
 }
 
-.result-board > span {
+.result-board > p {
     margin: 0;
     font-size: 20px;
-    height: 20px;
-    width: 20px;
-
 }
 
 .keyboard {
@@ -90,6 +93,8 @@ body {
 
 .keyboard > button {
     grid-column: span 2;
+    width: auto;
+    height: 60px;
 }
 
 .keyboard > button.key-big {
