diff --git a/frontend/src/main.rs b/frontend/src/main.rs
index 08af73f..8e5acaa 100644
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -660,9 +660,9 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
     view! {cx,
                 (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") {
+                      div(class="grid gap-2 grid-cols-1 md:grid-cols-4") {
+
 
-                ul {
             Keyed(
              iterable=docs,
              view=|cx, x| view! { cx,
@@ -671,11 +671,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 {
+                      div(class="grid grid-cols-1 md:grid-cols-4 gap-2 ") {
+
             Keyed(
              iterable=docs,
              view=|cx, x| view! { cx,
@@ -684,7 +684,7 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
               key =|x| x.id )
               }
              }
-             }
+
                 } else {
                     view!{cx, ""}
                 }
@@ -709,9 +709,11 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     let bookdisplay_div = bookitem.bookitem.clone();
     let loctitle = bookitem.bookitem.clone().title.clone();
     let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap_or(vec!["".to_string()]).join(", ");
-    let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
+    let mut locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
     let locloc = bookitem.bookitem.clone().location.unwrap_or("".to_string());
-
+    if locdesc.clone().len() > 200 {
+        locdesc = format!("{:.200}...",locdesc.clone())
+    }
     //let locref = create_rc_signal(false);
 
     let coverurl = bookdisplay.clone().cover.clone().unwrap_or("None".to_string());
@@ -754,33 +756,32 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
         app_state.displayingbook.set(bookdisplay_div.clone());
     };
     view! { cx,
-         div(class="column px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded"){
-                div(class="card"){
+         div(class="column px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded  m-3"){
 
-                    div(class="card-buttons"){
+                    div(class="card-buttons flex 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_display){ i(class="fa-solid fa-circle-info") }
                     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_update){ i(class="fa-solid fa-pen-to-square") }
                     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_delete){ i(class="fa-solid fa-trash") }
                 }
     div(class="card-main",on:click=handle_display_div){
-    img(src=coverurl,width="100")
+    img(class="float-right m-1",src=coverurl,width="100")
 
-    div(class="card-title"){
+    div(class="card-title font-bold text-lg"){
     (format!("{}",loctitle))
     }
-    div(class="card-authors"){
+    div(class="card-authors text-lg"){
     (format!("{}",locauthors))
     }
     div(class="card-desc"){
     (format!("{}",locloc))
     br{}br{}
-    (format!("{}",locdesc))
+    (format!("{}",locdesc.clone()))
+
     }
     }
 
 
 
-    }
     }
 
     }
@@ -793,8 +794,11 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     let bookdisplay_div = bookitem.bookitem.clone();
     let loctitle = bookitem.bookitem.clone().title.clone();
     let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap_or(vec!["".to_string()]).join(", ");
-    let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
+    let mut locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
     let locloc = bookitem.bookitem.clone().location.unwrap_or("".to_string());
+    if locdesc.clone().len() > 200 {
+        locdesc = format!("{:.200}...",locdesc.clone())
+    }
 
     let coverurl = bookdisplay.clone().cover.clone().unwrap_or("None".to_string());
      let handle_display = move |_| {
@@ -810,7 +814,7 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
         app_state.displayingbook.set(bookdisplay_div.clone());
     };
     view! { cx,
-         div(class="px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded"){
+         div(class="col-span-1 px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded m-3"){
 
 
                     div(class="card-buttons"){
@@ -819,19 +823,19 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
 
                 }
     div(class="card-main", on:click=handle_display_div){
-    img(src=coverurl,width="100")
+    img(class="float-right m-1",src=coverurl,width="100")
 
-    div(class="card-title"){
+    div(class="card-title font-bold text-lg"){
     (format!("{}",loctitle))
     }
-    div(class="card-authors"){
+    div(class="card-authors text-lg"){
     (format!("{}",locauthors))
     }
 
     div(class="card-desc"){
     (format!("{}",locloc))
     br{}br{}
-    (format!("{}",locdesc))
+    (format!("{:.100}...",locdesc.clone()))
     }
     }
 
@@ -859,7 +863,7 @@ async fn ListOL<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() == true {
                 view!{ cx,
                      div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
@@ -876,7 +880,6 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
                 view!{cx,""}
             }
             )
-        }
     }
 }
 
@@ -903,24 +906,23 @@ pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
         app_state.addingbook.set(book_div.clone());
     };
     view! { cx,
-        div(class="column"){
-                div(class="card-openlibrary px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded",on:click=handle_add_div){
+                div(class="column px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded  m-3",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"){
-    img(src=coverurl,width="100")
+    img(class="float-right m-1",src=coverurl,width="100")
 
-    div(class="card-title"){
+    div(class="card-title font-bold text-lg"){
     (format!("{}",loctitle))
     }
-    div(class="card-authors"){
+    div(class="card-authors text-lg"){
     (format!("{}",locauthors))
     }
     //div(class="card-image"){
     //}
     }
     }
-        }
+
     }
 }