diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 68bcd02..b48d8b8 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -4,18 +4,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>wordl</title>
-    <link rel="stylesheet" href="/styles-ee33d68e538eb411.css" integrity="sha384&#x2D;VemAqPaskVP87p4noZgkqPXi9J04CRYEjIS2QPGi7Odp6o&#x2B;XdpPGWYbkxwQuac0P"/>
+    <link rel="stylesheet" href="/styles-156da33909a8dcda.css" integrity="sha384&#x2D;OUAnLtgaHRtUJCqGxKaXB&#x2B;08L7WjOJ8noyHNKzUmIF0MVaX8OvQp2nEwcOuWTE2c"/>
     <!-- <link data-trunk href="./assets/favicon.ico" rel="icon" type="image/x-icon"> -->
      
     <link rel="manifest" href="public/manifest.json" />
   
-<link rel="modulepreload" href="/wordl-frontend-f12cb96db58e762c.js" crossorigin=anonymous integrity="sha384-bBxFiVwzR66Z1hv0ruG4aGTidjq8XBRcL0Crsv4fRIK6kj1hmLn4dH0tm6t9qsCH">
-<link rel="preload" href="/wordl-frontend-f12cb96db58e762c_bg.wasm" crossorigin=anonymous integrity="sha384-rH9nswm1hLZCk8ksVMGninp4DCq3b/MGGV6gv4p6gPvfWUVvNswadaIr2RbcyaNS" as="fetch" type="application/wasm"></head>
+<link rel="modulepreload" href="/wordl-frontend-590cf90ac3202d86.js" crossorigin=anonymous integrity="sha384-YfcyUtskzvmk1ZFFoDAlBKcXGliokP+ONHDzdyJ+ackDIvDUSi8e+7NWFKvrIDPt">
+<link rel="preload" href="/wordl-frontend-590cf90ac3202d86_bg.wasm" crossorigin=anonymous integrity="sha384-bhZ9Dih2QagSkTdJkriTyWwvkqvh6kxGpgZQ5Vd85yjQA/yaLz4DDnb3s/nv+SrG" as="fetch" type="application/wasm"></head>
   <body class="bg-black text-white">
   
-<script type="module" nonce="FBx2FAPOfqu3mKchrgJ5jg==">
-import init, * as bindings from '/wordl-frontend-f12cb96db58e762c.js';
-const wasm = await init('/wordl-frontend-f12cb96db58e762c_bg.wasm');
+<script type="module" nonce="/KYzfPoyPTVa0oOSCHhDrQ==">
+import init, * as bindings from '/wordl-frontend-590cf90ac3202d86.js';
+const wasm = await init('/wordl-frontend-590cf90ac3202d86_bg.wasm');
 
 
 window.wasmBindings = bindings;
diff --git a/frontend/dist/public/styles.css b/frontend/dist/public/styles.css
index 8f9f9c2..323225d 100644
--- a/frontend/dist/public/styles.css
+++ b/frontend/dist/public/styles.css
@@ -566,8 +566,8 @@ video {
   order: 9999;
 }
 
-.mt-12 {
-  margin-top: 3rem;
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
 .mt-8 {
@@ -582,8 +582,8 @@ video {
   height: 4rem;
 }
 
-.h-4\/6 {
-  height: 66.666667%;
+.h-5\/6 {
+  height: 83.333333%;
 }
 
 .h-screen {
@@ -646,6 +646,11 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .bg-green-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@@ -656,6 +661,11 @@ video {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
diff --git a/frontend/dist/styles-ee33d68e538eb411.css b/frontend/dist/styles-156da33909a8dcda.css
similarity index 98%
rename from frontend/dist/styles-ee33d68e538eb411.css
rename to frontend/dist/styles-156da33909a8dcda.css
index 8f9f9c2..323225d 100644
--- a/frontend/dist/styles-ee33d68e538eb411.css
+++ b/frontend/dist/styles-156da33909a8dcda.css
@@ -566,8 +566,8 @@ video {
   order: 9999;
 }
 
-.mt-12 {
-  margin-top: 3rem;
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
 .mt-8 {
@@ -582,8 +582,8 @@ video {
   height: 4rem;
 }
 
-.h-4\/6 {
-  height: 66.666667%;
+.h-5\/6 {
+  height: 83.333333%;
 }
 
 .h-screen {
@@ -646,6 +646,11 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .bg-green-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@@ -656,6 +661,11 @@ video {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
diff --git a/frontend/dist/wordl-frontend-f12cb96db58e762c.js b/frontend/dist/wordl-frontend-590cf90ac3202d86.js
similarity index 99%
rename from frontend/dist/wordl-frontend-f12cb96db58e762c.js
rename to frontend/dist/wordl-frontend-590cf90ac3202d86.js
index 5a8ff65..ba95fc6 100644
--- a/frontend/dist/wordl-frontend-f12cb96db58e762c.js
+++ b/frontend/dist/wordl-frontend-590cf90ac3202d86.js
@@ -958,16 +958,16 @@ function __wbg_get_imports() {
         const ret = wasm.memory;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper916 = function(arg0, arg1, arg2) {
-        const ret = makeClosure(arg0, arg1, 381, __wbg_adapter_38);
+    imports.wbg.__wbindgen_closure_wrapper919 = function(arg0, arg1, arg2) {
+        const ret = makeClosure(arg0, arg1, 382, __wbg_adapter_38);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper1023 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 408, __wbg_adapter_41);
+    imports.wbg.__wbindgen_closure_wrapper1026 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 409, __wbg_adapter_41);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper1116 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 446, __wbg_adapter_44);
+    imports.wbg.__wbindgen_closure_wrapper1119 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 447, __wbg_adapter_44);
         return addHeapObject(ret);
     };
 
diff --git a/frontend/dist/wordl-frontend-590cf90ac3202d86_bg.wasm b/frontend/dist/wordl-frontend-590cf90ac3202d86_bg.wasm
new file mode 100644
index 0000000..5c50535
Binary files /dev/null and b/frontend/dist/wordl-frontend-590cf90ac3202d86_bg.wasm differ
diff --git a/frontend/dist/wordl-frontend-f12cb96db58e762c_bg.wasm b/frontend/dist/wordl-frontend-f12cb96db58e762c_bg.wasm
deleted file mode 100644
index accbd79..0000000
Binary files a/frontend/dist/wordl-frontend-f12cb96db58e762c_bg.wasm and /dev/null differ
diff --git a/frontend/public/styles.css b/frontend/public/styles.css
index 8f9f9c2..323225d 100644
--- a/frontend/public/styles.css
+++ b/frontend/public/styles.css
@@ -566,8 +566,8 @@ video {
   order: 9999;
 }
 
-.mt-12 {
-  margin-top: 3rem;
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
 .mt-8 {
@@ -582,8 +582,8 @@ video {
   height: 4rem;
 }
 
-.h-4\/6 {
-  height: 66.666667%;
+.h-5\/6 {
+  height: 83.333333%;
 }
 
 .h-screen {
@@ -646,6 +646,11 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .bg-green-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@@ -656,6 +661,11 @@ video {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
diff --git a/frontend/src/pages/home.rs b/frontend/src/pages/home.rs
index 9613e02..6148b98 100644
--- a/frontend/src/pages/home.rs
+++ b/frontend/src/pages/home.rs
@@ -1,13 +1,10 @@
-// use gloo_console::log;
-use tracing::{debug, error, info};
+use tracing::{debug, error};
 use gloo_net::http::Request;
-use serde::{Deserialize, Serialize};
 use web_sys::wasm_bindgen::convert::OptionIntoWasmAbi;
 use web_sys::wasm_bindgen::JsCast;
 use web_sys::HtmlElement;
 use yew::prelude::*;
 use yew::{classes, function_component, Callback, Html};
-// use yew::{FetchTask, Request, Response, FetchService};
 
 use crate::CharStatus;
 
@@ -41,7 +38,7 @@ fn string_to_html(input: &[CharStatus<String>]) -> Html {
         "font-bold",
         "text-lg",
     );
-    html! {
+    html! (
             <ul
                 class={
                     classes!(
@@ -67,7 +64,7 @@ fn string_to_html(input: &[CharStatus<String>]) -> Html {
                         s
                     },
                     CharStatus::NotContained(s) => {
-                        classes.push("bg-gray-700");
+                        classes.push("bg-gray-900");
                         classes.push("border-white");
                         classes.push("border-2");
                         s
@@ -96,35 +93,7 @@ fn string_to_html(input: &[CharStatus<String>]) -> Html {
         }}).collect::<Html>()
         }
         </ul>
-    }
-}
-
-#[derive(Serialize, Deserialize, Debug)]
-struct Word(String);
-
-#[allow(dead_code)]
-fn get_word(handle: UseStateHandle<String>) {
-    use_effect_with((), move |()| {
-        wasm_bindgen_futures::spawn_local(async move {
-            info!("retreiving word");
-            let res = Request::get(NEW_WORD_URI).send().await;
-            debug!(RESULT = format!("{res:?}"));
-            match res {
-                Ok(r) => {
-                    debug!(RESPONSE = format!("{r:?}"));
-                    match r.text().await {
-                        Ok(w) => {
-                            debug!(WORD = &w);
-                            handle.set(w);
-                        }
-                        Err(e) => error!(ERROR = format!("{e:?}"),"failed to get request body"),
-                    }
-                }
-                Err(e) => error!(ERROR = format!("{e:?}"),"failed to retreive word"),
-            }
-        });
-        || ()
-    });
+    )
 }
 
 fn fetch_new_word(
@@ -249,7 +218,7 @@ pub fn Home() -> Html {
         let length = length.clone();
         let word = word.clone();
         let node_refs = node_refs.clone();
-let loading = loading.clone();
+        let loading = loading.clone();
         
         
         Callback::from(move |_e: MouseEvent| {
@@ -271,6 +240,8 @@ let loading = loading.clone();
             let mut new_items = (*submitted_words).clone();
             new_items.push(crate::compare_strings(&word, &values.join("")));
             submitted_words.set(new_items);
+            input_values.set(vec![String::new(); word.len()]);
+            set_focus(0);
             game_over_check.emit(MouseEvent::none());
         })
     };
@@ -295,7 +266,7 @@ let loading = loading.clone();
                         classes!(
                             "flex",
                             "flex-col",
-                            "mt-12",
+                            "mt-6",
                             "items-center",
                             "h-screen",
                         )
@@ -303,7 +274,7 @@ let loading = loading.clone();
                 >
                 // <h1>{(*word).clone()} {" NODE_REFS: "}{node_refs.len()} {" WORD_LEN: "}{*length}</h1>
                 <div
-                    class="h-4/6 flex flex-col"
+                    class="h-5/6 flex flex-col"
                 >
                 <form
                 class="order-last mt-8"
@@ -323,6 +294,56 @@ let loading = loading.clone();
                         if *loading {
                             html!(<p>{"Loading..."}</p>)
                         } 
+                        else if *game_over {
+                            html! (
+                                <div>
+                                <h1>{"WANTED"}</h1>
+                                    <ul
+                                        class={
+                                            classes!(
+                                                "flex",
+                                                "flex-row",
+                                                "gap-4",
+                                                "notranslate",
+                                            )
+                                        }
+                                    >
+                                {
+                                    word.chars().map(|e|{
+                        
+                                        let text = e;
+                                        html!{
+                                       <li
+                                            class={
+                                                classes!(
+                                                    "flex",
+                                                    "items-center"
+                                                )
+                                            }
+                                       >
+                                       <span
+                                       class={
+                                        classes!(
+                                            "bg-gray-700",
+                                            "w-16",
+                                            "h-16",
+                                            "text-center",
+                                            "py-4",
+                                            "font-bold",
+                                            "text-lg",
+                                            "bg-red-200",
+                                        )
+                                       }
+                                   >
+                                       {text}
+                                       </span>
+                                   </li>
+                                }}).collect::<Html>()
+                                }
+                                </ul>
+                                </div>
+                            )
+                        }
                         else if !*game_over {
                             node_refs.iter().enumerate().map(|(index, node_ref)| {
                                 let on_input = {
