diff --git a/backend/api/src/lib.rs b/backend/api/src/lib.rs
index 6b97f1d..cd64af1 100644
--- a/backend/api/src/lib.rs
+++ b/backend/api/src/lib.rs
@@ -795,10 +795,11 @@ println!("Updating book");
 
     dotenvy::dotenv().ok();
     let images_dir = env::var("IMAGES_DIR").expect("IMAGES_DIR is not set in .env file");
+    let backend_url = env::var("BACKEND_URL").expect("BACKEND_URL is not set in .env file");
 
 let mut cover = doc_sent.cover.clone();
 if !doc_sent.cover.is_none() {
-    if doc_sent.cover.clone().unwrap().contains("vinodjam") {
+    if doc_sent.cover.clone().unwrap().contains(&backend_url) {
         cover = Some(doc_sent.cover.clone().unwrap().split("/").last().unwrap().to_string());
     } else {
         let img_bytes = reqwest::get(cover.unwrap()).await.unwrap().bytes().await.unwrap();
diff --git a/frontend/css/index.css b/frontend/css/index.css
index bbc7816..97208d8 100644
--- a/frontend/css/index.css
+++ b/frontend/css/index.css
@@ -16,15 +16,25 @@ body {
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
 }
 
+.modal-box[popup-display="false"] {
+  display: none; /* Hidden by default */
+}
+
+.modal-box[popup-display="true"] {
+  display: flex; /* Hidden by default */
+}
 /* Modal Content/Box */
 .modal-content {
-  margin: 15% auto; /* 15% from the top and centered */
+  margin: 10% auto; /* 15% from the top and centered */
   padding: 20px;
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */
+  height: 80%;
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
 }
 
 /* Float three header columns side by side */
@@ -56,6 +66,9 @@ body {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
   padding: 16px;
   text-align: center;
+  height: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   background-color: #f1f1f1;
 }
 
diff --git a/frontend/src/main.rs b/frontend/src/main.rs
index 6c3c350..ffaa12c 100644
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -371,7 +371,7 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     let bookupdate = bookitem.bookitem.clone();
     let bookdisplay = bookitem.bookitem.clone();
     let loctitle = bookitem.bookitem.clone().title.clone();
-    let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap().join(", ");
+    let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap_or(vec!["".to_string()]).join(", ");
     let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
 
 
@@ -392,11 +392,15 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
      let handle_display = move |_| {
         app_state.displaying.set(true);
         app_state.updating.set(false);
+        //info!("Setting displaying book {:?}",bookdisplay);
         app_state.displayingbook.set(bookdisplay.clone());
     };
     view! { cx,
          div(class="column"){
                 div(class="card"){
+        button(class="delete", on:click=handle_delete){ "DEL-" }
+        button(class="update", on:click=handle_update){ "EDIT=" }
+        button(class="info", on:click=handle_display){ "INFO+" }
     img(src=coverurl,width="100")
   
     (format!("{:?}",loctitle))
@@ -405,9 +409,7 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     br{}
     (format!("{:?}",locdesc))
 
-    button(class="delete", on:click=handle_delete){ "-" }
-        button(class="update", on:click=handle_update){ "=" }
-        button(class="info", on:click=handle_display){ "+" }
+
 
 
     }
@@ -533,10 +535,9 @@ inp_author.set((*app_state.addingbook.get()).clone().author_name.unwrap_or(vec![
         app_state.updating.set(false);
         app_state.adding.set(false);
 
-        let jsval = wasm_bindgen::JsValue::from_str("none");
         let dom_node = node_ref.try_get::<DomNode>();
         if dom_node.is_some() {
-        dom_node.unwrap().set_property("display", &jsval.clone());
+                dom_node.unwrap().set_attribute("popup-display","false");
         }
 
    };
@@ -594,18 +595,14 @@ info!("Adding book");
    create_effect(cx, || {
         if *app_state.updating.get() == true || *app_state.adding.get() == true {
 
-        let jsval = wasm_bindgen::JsValue::from_str("flex");
-
         let dom_node = node_ref.try_get::<DomNode>();
         if dom_node.is_some() {
-            dom_node.unwrap().set_property("display",&jsval);
+            dom_node.unwrap().set_attribute("popup-display","true");
         }
         } else {
-        let jsval = wasm_bindgen::JsValue::from_str("none");
-
         let dom_node = node_ref.try_get::<DomNode>();
         if dom_node.is_some() {
-            dom_node.unwrap().set_property("display",&jsval);
+                dom_node.unwrap().set_attribute("popup-display","false");
         }
         }
     });
@@ -656,8 +653,8 @@ info!("Adding book");
 #[component]
 async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
     let app_state = use_context::<AppState>(cx);
-    let displ_book = create_signal(cx, (*app_state.displayingbook.get()).clone());
-    let coverurl = create_signal(cx, app_state.displayingbook.get().clone().cover.clone().unwrap_or("NONE".to_string()).to_string().clone());
+    let displ_book = create_memo(cx, || app_state.displayingbook.get());
+    let coverurl = create_memo(cx, || app_state.displayingbook.get().clone().cover.clone().unwrap_or("NONE".to_string()).to_string().clone());
     let node_ref = create_node_ref(cx);
     //on_mount(cx, || {
     //    let dom_node = node_ref.get::<DomNode>();
@@ -665,28 +662,24 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
 
     let handle_close = move |_| {
         app_state.displaying.set(false);
-        let jsval = wasm_bindgen::JsValue::from_str("none");
 
         let dom_node = node_ref.try_get::<DomNode>();
         if dom_node.is_some() {
-            dom_node.unwrap().set_property("display",&jsval);
+                dom_node.unwrap().set_attribute("popup-display","false");
         }
     };
 
 
     create_effect(cx, || {
         if *app_state.displaying.get() == true {
-            let jsval = wasm_bindgen::JsValue::from_str("flex");
             let dom_node = node_ref.try_get::<DomNode>();
             if dom_node.is_some() {
-            dom_node.unwrap().set_property("display",&jsval);
+                dom_node.unwrap().set_attribute("popup-display","true");
             }
         } else {
-                let jsval = wasm_bindgen::JsValue::from_str("none");
-
             let dom_node = node_ref.try_get::<DomNode>();
             if dom_node.is_some() {
-                dom_node.unwrap().set_property("display",&jsval);
+                dom_node.unwrap().set_attribute("popup-display","false");
             }
         }
     });
@@ -701,9 +694,9 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
         div(class="modal-content"){
        p{
         div(class="select-book"){
+                button(class="close", on:click=handle_close){ "CLOSE" }
                 img(src=coverurl.get(),width="200")
                 (format!("{:?}",displ_book.get()))
-                button(class="close", on:click=handle_close){ "CLOSE" }
                 }
         }
     }