diff --git a/frontend/src/main.rs b/frontend/src/main.rs
index 855b7bb..08af73f 100644
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -173,7 +173,7 @@ async fn add_book(record: BookUI) -> Result<reqwasm::http::Response, reqwasm::Er
     let resp = Request::post(&url).body(serde_wasm_bindgen::to_value(&serde_json::to_string(&record).unwrap()).unwrap()).header("content-type","application/json").send().await?;
     Ok(resp)
 }
-
+/*
 async fn add_books_isbns(isbns: String) -> Result<reqwasm::http::Response,  reqwasm::Error> {
     let backend_url : &'static str = dotenv!("BACKEND_URL");
     //env::var("BACKEND_URL").expect("BACKEND_URL is not set in .env file");
@@ -182,7 +182,7 @@ async fn add_books_isbns(isbns: String) -> Result<reqwasm::http::Response,  reqw
     println!("Adding multiple books\n");
     Ok(resp)
 }
-
+*/
 
 async fn update_book(record: BookUI) -> Result<reqwasm::http::Response, reqwasm::Error> {
     let backend_url : &'static str = dotenv!("BACKEND_URL");
@@ -357,7 +357,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                         on:input=toggle_editmode,
                         bind:checked=editchecked
                     )
-                    div(class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[5px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"){}
+                    div(class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[10px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"){}
                     //p(class="ml-3 text-sm font-medium"){"EDIT"}
                     }
                     }
@@ -400,15 +400,19 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                 } }
                 else {
                     view!{cx,
-                    div(class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"){(format!(" {} ", *app_state.selectedusername.get()))}
+                    div(class="bg-gray-300 text-gray-800 font-bold rounded inline-flex items-center px-2"){(format!(" Test {} ", *app_state.selectedusername.get()))}
                     }
                 })
 }
 
-        div(class="w-2/5 flex mb-2"){
+        div(class="w-4/5 flex mb-2"){
 
 
-               (if *app_state.userid.get() != 0 {
+        (if *app_state.editmode.get() == true {
+              view!{ cx,
+
+            div(class="w-1/2 flex"){
+              (if *app_state.userid.get() != 0 {
                 view!{ cx,
                 button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
                 div(class="min-w-40 inline-flex"){
@@ -421,14 +425,9 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                 }} else {
                 view!{cx, ""}
                 })
-
-        }
-
-
-        (if *app_state.editmode.get() == true {
-              view!{ cx,
-            div(class="w-2/5 flex mb-2"){
-            button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-circle-plus") }
+                }
+            div(class="w-1/2 flex"){
+            button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-circle-plus") span(class="inline-block"){"Add" }}
             //button(on:click=click_addbook) { "+ Add New" }
             //input(ref=input_ref3,
             //    class="new-todo",
@@ -443,20 +442,28 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                     bind:value=value,
                     on:keyup=handle_submit,
                 )}
-                /*
-            input(ref=input_ref,
-                class="new-todo",
-                placeholder="Search internet (openlibrary)",
-                bind:value=value,
-                on:keyup=handle_submit,
-            )*/
-
             }
-        }} else {
-            view!{cx, ""}
-        })
 
-            div(){
+        }} else {
+            view!{cx,
+            (if *app_state.userid.get() != 0 {
+                view!{ cx,
+                button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
+                div(class="min-w-40 inline-flex"){
+                input(ref=input_ref2,
+                    class = "inline-flex h-full m-0 p-1 w-full",
+                    placeholder="🔍 Search",
+                    bind:value=value2,
+                    on:keyup=handle_submit_seachall,
+                )}
+                }} else {
+                view!{cx, ""}
+                })
+                }
+        })
+        }
+
+            div(class="grow flex mb-2 gap-x-1 ml-auto") {
             PageBar{}
             }
         }
@@ -651,9 +658,10 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
 
     let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::<Vec<_>>());
     view! {cx,
-        p {
                 (if *app_state.openlibrary.get() == false &&  *app_state.editmode.get() == false {
               view!{ cx,
+                      div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
+
                 ul {
             Keyed(
              iterable=docs,
@@ -662,9 +670,11 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
              },
               key =|x| x.id )
               }
+             }
              }
                 } else if *app_state.openlibrary.get() == false &&  *app_state.editmode.get() == true {
               view!{ cx,
+                      div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
                 ul {
             Keyed(
              iterable=docs,
@@ -673,6 +683,7 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
              },
               key =|x| x.id )
               }
+             }
              }
                 } else {
                     view!{cx, ""}
@@ -685,7 +696,7 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
                 }} else {
                 view!{ cx, ""}
                 })
-        }
+
     }
 }
 
@@ -743,7 +754,7 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
         app_state.displayingbook.set(bookdisplay_div.clone());
     };
     view! { cx,
-         div(class="column"){
+         div(class="column px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded"){
                 div(class="card"){
 
                     div(class="card-buttons"){
@@ -799,8 +810,8 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
         app_state.displayingbook.set(bookdisplay_div.clone());
     };
     view! { cx,
-         div(class="column"){
-                div(class="card"){
+         div(class="px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded"){
+
 
                     div(class="card-buttons"){
 
@@ -825,7 +836,7 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     }
 
 
-    }
+
     }
 
     }
@@ -851,7 +862,7 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
         p {
             (if *app_state.openlibrary.get() == true {
                 view!{ cx,
-                     div(class="row") {
+                     div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
             Keyed(
              iterable=docs,
              view=move |cx, x| view! { cx,
@@ -893,7 +904,7 @@ pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     };
     view! { cx,
         div(class="column"){
-                div(class="card-openlibrary",on:click=handle_add_div){
+                div(class="card-openlibrary px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded",on:click=handle_add_div){
                     button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500  rounded inline-flex items-center", on:click=handle_add){ i(class="fa-solid fa-plus") }
 
        div(class="card-main"){
@@ -1073,80 +1084,85 @@ info!("Adding book");
 (if *app_state.adding.get() == true || *app_state.updating.get() == true {
                 view!{ cx,
         div(class="modal-content"){
-                div(class="input-buttons"){
-                button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "Add/Update book to DB" }
+                div(class="input-buttons flex gap-x-3"){
+                button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "Add/Update" }
                   button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_cancel){ "Cancel" }
                   }
         p {
-                div(class="input-field"){
+         div(class="flex flex-wrap w-full"){
+
+            div(class="grid grid-cols-1 md:grid-cols-3 lg:grid=cols-4 gap-x-4"){
+
+                div(class="input-field grid grid-row-2"){
                 label{"Title"}
                 textarea(bind:value=inp_title, placeholder="Title" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"OpenLib Key"}
                     textarea(bind:value=inp_olkey, placeholder="OpenLibrary Key"  )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Editions"}
                         textarea(bind:value=inp_editioncount, placeholder="Number of editions" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Publish year"}
                         textarea(bind:value=inp_publishyear, placeholder="First publish year" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Pages"}
                         textarea(bind:value=inp_medianpage, placeholder="Page count" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"GoodreadID"}
                         textarea(bind:value=inp_goodread, placeholder="GoodRead ID" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Description"}
                         textarea(bind:value=inp_desc, placeholder="Description" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Cover"}
                         textarea(bind:value=inp_cover, placeholder="Cover URL" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Location"}
                         textarea(bind:value=inp_location, placeholder="Location" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Rating"}
                         textarea(bind:value=inp_rating, placeholder="Rating (/10)" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Comments"}
                         textarea(bind:value=inp_comments, placeholder="Comments" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Authors"}
                         textarea(bind:value=inp_author, placeholder="Authors")
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Persons"}
                         textarea(bind:value=inp_person, placeholder="Persons" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Places"}
                         textarea(bind:value=inp_place, placeholder="Places" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Subjects"}
                         textarea(bind:value=inp_subject, placeholder="Subjects" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"Times"}
                         textarea(bind:value=inp_time, placeholder="Times" )
                 }
-                div(class="input-field"){
+                div(class="input-field grid grid-row-2"){
                 label{"ISBNs"}
                         textarea(bind:value=inp_isbn, placeholder="ISBNs" )
                 }
-
+            }
+            }
 
         }
             }
@@ -1262,7 +1278,7 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
         div(class="modal-content"){
 
         div(class="more-info"){
-                div(class="more-info-buttons"){
+                div(class="more-info-buttons gap-x-3"){
 
                 button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500  rounded inline-flex items-center", on:click=handle_close){ i(class="fa-solid fa-xmark") }
                 (if *app_state.editmode.get() == true  {
@@ -1272,43 +1288,67 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
                 view!{cx, ""}
                 })
                 }
-                img(src=coverurl.get(),width="200")
-                label{"Title: "}
-                (format!("{}",dtitle.get()))
-                br{}
-                label{"Authors: "}
-                (format!("{}",dauthors.get()))
-                br{}
-                label{"Location: "}
-                (format!("{}",dlocation.get()))
-                br{}
-                label{"Editions: "}
-                (format!("{}",deditions.get()))
-                br{}
-                label{"Publish Year: "}
-                (format!("{}",dpubyr.get()))
-                br{}
-                label{"Page Count: "}
-                (format!("{}",dpages.get()))
-                br{}
-                label{"Openlibrary Link: "}
-                a(href=dollink.get().clone()){(format!("{}",dollink.get()))}
-                br{}
-                label{"GoodReads Link: "}
-                a(href=dgoodread.get().clone()){(format!("{}",dgoodread.get()))}
-                br{}
-                label{"ISBN: "}
-                (format!("{}",disbn.get()))
-                br{}
-                label{"Description: "}
+                div(class="flex flex-wrap w-full"){
+
+                div(class="flex w-4/5"){
+                    div(class="grid grid-cols-4 md:grid-cols-4 gap-x-3"){
+                    label(class="font-bold col-start-1"){"Title: "}
+                    p(class="col-span-3"){
+                    (format!("{}",dtitle.get()))
+                    }
+                    label(class="font-bold col-start-1"){"Authors: "}
+                    p(class="col-span-3"){
+                    (format!("{}",dauthors.get()))
+                    }
+                    label(class="font-bold col-start-1"){"Location: "}
+                    p(class="col-span-3"){
+                    (format!("{}",dlocation.get()))
+                    }
+                    label(class="font-bold col-start-1"){"Editions: "}
+                    p(class="col-span-3"){
+                    (format!("{}",deditions.get()))
+                    }
+                    label(class="font-bold col-start-1"){"Publish Year: "}
+                    p(class="col-span-3"){
+                    (format!("{}",dpubyr.get()))
+                    }
+                    label(class="font-bold col-start-1"){"Page Count: "}
+                    p(class="col-span-3"){
+                    (format!("{}",dpages.get()))
+                    }
+                    label(class="font-bold col-start-1"){"Openlibrary Link: "}
+                    p(class="col-span-3 text-blue-800"){
+                    a(href=dollink.get().clone()){(format!("{}",dollink.get()))}
+                    }
+                    label(class="font-bold col-start-1"){"GoodReads Link: "}
+                    p(class="col-span-3 text-blue-800"){
+                    a(href=dgoodread.get().clone()){(format!("{}",dgoodread.get()))}
+                    }
+                    label(class="font-bold col-start-1"){"ISBN: "}
+                    p(class="col-span-3"){
+                    (format!("{}",disbn.get()))
+                    }
+                    label(class="font-bold col-start-1"){"Comments: "}
+                    p(class="col-span-3"){
+                    (format!("{}",dcomments.get()))
+                    }
+                    }
+                }
+                div(class="flex w-1/5"){
+                    img(class="float-right m-1",src=coverurl.get(),width="200")
+                }
+
+                div(class="grid grid-cols-5 md:grid-cols-5 gap-x-3"){
+                label(class="font-bold col-start-1"){"Description: "}
+                p(class="col-span-4"){
                 (format!("{}",ddesc.get()))
-                br{}
-                label{"Comments: "}
-                (format!("{}",dcomments.get()))
-                br{}
-                label{"Tags: "}
+                }
+                label(class="font-bold col-start-1"){"Tags: "}
+                p(class="col-span-4 italic"){
                 (format!("{}",dtags.get()))
-                br{}
+                }
+                }
+                }
             }
     }
     }}
@@ -1361,31 +1401,34 @@ async fn PageBar<G: Html>(cx: Scope<'_>) -> View<G> {
         }
     };
     view! {cx,
-       div(class="w-1/10 flex mb-2 gap-x-1") {
        (if (*app_state.openlibrary.get() == false || *app_state.internalsearch.get() == true) && !app_state.books.get().is_empty() {
                 view!{ cx,
-                div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center"){
+                div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center w-max"){
                 i(class="fa-solid fa-file") span(class="hidden md:block-inline"){p{"#"}}
-                input(type="number", ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input [appearance:textfield] mx-1 my-0 p-1 min-w-30 w-30")
-                label(class="block-inline"){(format!(" / {}",*app_state.maxpage.get()))}
+                input(type="number", ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input [appearance:textfield] mx-1 my-0 px-1 min-w-30 w-30 max-w-40", size="1")
+                div(class="flex-inline"){(format!(" / {}",*app_state.maxpage.get()))}
                 }
                 (if *app_state.pagenum.get()>1 {
-                view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_sub){ "-" }}
+                view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold px-4 rounded inline-flex items-center", on:click=handle_sub){ "-" }}
                 } else {
                 view!{cx,""}
                 })
                 (if *app_state.pagenum.get()<*app_state.maxpage.get() {
-                view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "+" }}
+                view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold px-4 rounded inline-flex items-center", on:click=handle_add){ "+" }}
                 } else {
                 view!{cx,""}
                 })
                 }
         }else {
-                view!{cx,""}
+                view!{cx,
+                div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center w-max"){
+                ("Zero Pages")
+                }
+                }
             })
-        }
 
-        }
+
+    }
 }
 
 
@@ -1521,24 +1564,28 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
     };
 
     view! {cx,
-        div(class="modal-box", ref=node_ref, on:click=handle_click_close, closable="true"){
+        div(class="modal-box mt-100", ref=node_ref, on:click=handle_click_close, closable="true"){
 
        (if *app_state.userscreen.get() == true {
                 view!{cx,
-        div(class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"){
+        div(class="mt-100 bg-white shadow-md rounded px-8 pt-8 pb-8 m-4"){
                 label{"Username : "}
                 input(ref=input_refU,bind:value=userval, placeholder="Username", class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400")
                 br{}
                 label{"Password : "}
                 input(ref=input_refP,bind:value=passval,type="password", placeholder="*****",
                 on:keyup=handle_submit_login, class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400")
-                br{}
+                br{}br{}
+                div(class="w-full flex gap-1"){
                 button( class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 inline-flex items-center  border-b-4  border-blue-700 hover:border-blue-500 w-full",on:click=handle_login){ "LOGIN" }
-                br{}
+
                 button( class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 inline-flex items-center  border-b-4  border-blue-700 hover:border-blue-500 w-full",on:click=handle_register){ "REGISTER" }
+                }
                 br{}
-                button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500  rounded inline-flex items-center", on:click=handle_close){ i(class="fa-solid fa-xmark") }
-                br{}
+                div(class="w-full flex flex-col gap-1 items-center"){
+                button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-1/3 gap-x-1", on:click=handle_close){ i(class="fa-solid fa-xmark") span(class="inline-flex"){"CLOSE"} }
+                }
+
                 (if *app_state.warningmsg.get() != "".to_string() {
                     view!{cx, (*app_state.warningmsg.get())}
                 } else {