diff --git a/src/interface/static/css/main.css b/src/interface/static/css/main.css
index a41bcb4..ef68d13 100644
--- a/src/interface/static/css/main.css
+++ b/src/interface/static/css/main.css
@@ -1,18 +1,18 @@
 body {
   margin: 0px;
   padding: 0px;
-  background-color: #FFF;
+  background-color: #676767;
+  background-image: url(/static/img/bookshelf.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
   color: #000;
 }
 
 #app {
   display: grid;
   grid-template-areas: "nav" "main";
-  background-image: url(/static/img/fractal-bg-dark.png);
-  background-size: cover;
-  background-repeat: no-repeat;
   /* background-origin: unset; */
-  grid-row-gap: 20px;
+  margin: 10px auto;
 }
 
 .clear {
@@ -20,7 +20,6 @@ body {
 }
 
 .app_header {
-  grid-area: app_header;
   margin: 0px;
   display: grid;
   grid-template-areas: "title nav_left_top nav_center_top nav_right_top";
@@ -59,7 +58,7 @@ body {
   font-size: 17px;
   text-align: center;
   padding: 0px 0px 0px 0px;
-  color: deepskyblue;
+  color: #ffffffc7;
 }
 
 .shadow {
@@ -88,8 +87,6 @@ body {
   /* grid-template-rows: auto; */
   grid-template-areas: "nav_l shelf";
   grid-template-columns: min-content auto;
-  background-color: white;
-  background-image: url(/static/img/fractal-bg-dark.png);
   background-size: cover;
   background-repeat: no-repeat;
 }
@@ -230,7 +227,7 @@ body {
 .nav_search {
   /* margin: 0px 5px 0px 0px; */
   /* border-radius: 5px; */
-  border: 1px solid deepskyblue;
+  border: 1px solid #ffffffc7;
   /* max-height: 17px; */
   /* padding: 0px 5px; */
   /* margin-left: 0px; */
@@ -264,15 +261,16 @@ body {
   display: flex;
   grid-area: horiz_nav_main;
   align-items: center;
-  /* justify-content: center; */
+  justify-content: center;
   padding: 5px 5px 0px 5px;
   min-width: max-content;
-  color: deepskyblue;
+  color: #ffffffc7;
   font-size: smaller;
 }
 
 #hdr_branding {
   grid-area: left_col;
+  display: none;
 }
 
 #hdr_nav_center {
@@ -283,26 +281,27 @@ body {
 
 #hdr_nav_right {
   grid-area: right_col;
-  color: deepskyblue;
+  color: #ffffffc7;
   display: flex;
   align-items: center;
 }
 
 .nav_icon {
   font-size: larger;
-  color: deepskyblue;
+  color: #ffffffc7;
 }
 
 .input_box {
-  border: 1px solid deepskyblue;
-  background-color: #f0ffff00;
-  color: deepskyblue;
+  border: 1px solid #ffffffc7;
+  background-color: #0000006e;
+  color: #ffffffc7;
   padding: 0px 5px;
   text-align: center;
+  font-size: medium;
 }
 
 .ui_btn_w_icon {
-  background-color: deepskyblue;
+  background-color: #ffffffc7;
   /* border-radius: 5px; */
   padding: 0px 5px;
   font-size: small;
@@ -320,28 +319,31 @@ body {
   list-style-type: none;
   display: flex;
   background-color: #00000045;
-  padding: 0px 5px 0px 5px;
-  margin: 0px auto -1px 0px;
+  padding: 0px;
+  margin: 0px auto;
 }
 
 .active_tab {
-  background-color: deepskyblue;
-  color: black !important;
-  border-bottom: 1px solid black !important;
-  /* border-right: 1px dashed white; */
+  background-color: #ffffffc7 !important;
+  color: #000000 !important;
+  border-bottom: 1px solid #000000 !important;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }
 
 .nav_menu_tab {
-  min-width: 5vw;
+  min-width: 8vw;
   margin: 0px auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding: 0px 0px 0px 5px;
-  font-size: smaller;
+  font-size: medium;
   border-bottom: 1px solid;
-  color: deepskyblue;
-  cursor: pointer;
+  background-color: #282828;
+  color: #ffffff;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }
 
 .search_button {
@@ -354,9 +356,7 @@ body {
 
 #shelf_nav {
   display: grid;
-  grid-template-areas:
-    "horiz_nav_hdr"
-    "horiz_nav_main";
+  grid-template-areas: "horiz_nav_hdr" "horiz_nav_main";
   grid-area: nav;
   list-style-type: none;
   /* background-color: #6767677a; */
@@ -366,7 +366,7 @@ body {
   padding-inline-start: 0px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  /* min-width: 1645px; */
+  min-width: 1645px;
   /* position: fixed; */
 }
 
@@ -409,10 +409,13 @@ p {
 }
 
 .shelf_item {
-  background-color: #ffffff2e;
+  background-color: #0000006e;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
   display: grid;
   grid-template-columns: 1fr 5fr;
-  grid-template-areas: "thumb details";
+  grid-template-areas:
+    "thumb details";
   /* grid-template-rows: auto; */
   margin: 0 10px 25px 10px;
   border: 0px solid #ffffff2e;
@@ -450,9 +453,10 @@ a.book_link {
   /* justify-content: center; */
   align-items: center;
   /* text-align: center; */
-  font-family: "Ubuntu Mono", monospace;
+  font-family: "Ubuntu", monospace;
   font-size: medium;
   padding: 0px 5px 0px;
+  margin: 5px 0px 0px 0px;
   /* background-color: #676767; */
 }
 
@@ -460,7 +464,7 @@ a.book_link {
   grid-area: book_author;
   font-family: serif;
   font-style: oblique;
-  font-size: medium;
+  font-size: small;
   padding: 0px 5px 0px;
   margin: 0px 0px 0px 5px;
 }
@@ -476,7 +480,7 @@ a.book_link {
   grid-area: book_tags;
   font-size: small;
   padding: 0px 5px 0px;
-  color: deepskyblue;
+  color: #ffffffc7;
   font-style: italic;
   font-size: xx-small;
   margin-bottom: 5px;
diff --git a/src/interface/static/css/main.scss b/src/interface/static/css/main.scss
index c6a1916..b36dc51 100755
--- a/src/interface/static/css/main.scss
+++ b/src/interface/static/css/main.scss
@@ -1,9 +1,17 @@
-$ui-color-1: deepskyblue;
-$ui-background-img: url(/static/img/fractal-bg-dark.png);
+$ui-color-1: #ffffffc7;
+$ui-color-2: #282828;
+$ui-color-3: #676767;
+$ui-font-color-1: #000000;
+$ui-font-color-2: #ffffff;
+$ui-shelf-item-color: #0000006e;
+$ui-background-img: url(/static/img/bookshelf.jpg);
 body {
     margin: 0px;
     padding: 0px;
-    background-color: #FFF;
+    background-color: $ui-color-3;
+    background-image: $ui-background-img;
+    background-size: cover;
+    background-repeat: no-repeat;
     color: #000;
 }
 
@@ -12,11 +20,10 @@ body {
     grid-template-areas:
         "nav"
         "main";
-    background-image: $ui-background-img;
-    background-size: cover;
-    background-repeat: no-repeat;
+    //background-image: $ui-background-img;
     /* background-origin: unset; */
-    grid-row-gap: 20px;
+//    grid-row-gap: 20px;
+    margin: 10px auto;
 }
 
 .clear {
@@ -24,7 +31,7 @@ body {
 }
 
 .app_header {
-    grid-area: app_header;
+    //grid-area: a#282828;
     margin: 0px;
     display: grid;
     grid-template-areas:
@@ -94,8 +101,8 @@ body {
     grid-template-areas:
         "nav_l shelf";
     grid-template-columns: min-content auto;
-    background-color: white;
-    background-image: $ui-background-img;
+    //background-color: white;
+    //background-image: $ui-background-img;
     background-size: cover;
     background-repeat: no-repeat;
 }
@@ -289,6 +296,7 @@ body {
 }
 #hdr_branding{
     grid-area: left_col;
+    display: none;
 }
 #hdr_nav_center{
     display: flex;
@@ -310,10 +318,11 @@ body {
 }
 .input_box{
     border: 1px solid $ui-color-1;
-    background-color: #f0ffff00;
+    background-color: $ui-shelf-item-color;
     color: $ui-color-1;
     padding: 0px 5px;
     text-align: center;
+    font-size: medium;
 }
 .ui_btn_w_icon{background-color: $ui-color-1;/* border-radius: 5px; */padding: 0px 5px;font-size: small;display: flex;justify-content: center;align-items: center;/* min-width: 55px; */}
 .ui_icon_notxt{
@@ -327,9 +336,11 @@ body {
     margin: 0px auto;
 }
 .active_tab{
-    background-color: $ui-color-1;
-    color: black !important;
-    border-bottom: 1px solid black !important;
+    background-color: $ui-color-1 !important;
+    color: $ui-font-color-1 !important;
+    border-bottom: 1px solid $ui-font-color-1 !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 }
 .nav_menu_tab{
     min-width: 8vw;
@@ -338,9 +349,12 @@ body {
     align-items: center;
     justify-content: flex-start;
     padding: 0px 0px 0px 5px;
-    font-size: smaller;
+    font-size: medium;
     border-bottom: 1px solid;
-    color: $ui-color-1;
+    background-color: $ui-color-2;
+    color: $ui-font-color-2;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 }
 .search_button{
     /* color: aliceblue; */
@@ -406,7 +420,9 @@ p {
 }
 
 .shelf_item {
-    background-color: #ffffff2e;
+    background-color: $ui-shelf-item-color;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
     display: grid;
     grid-template-columns: 1fr 5fr;
     grid-template-areas:
@@ -452,16 +468,17 @@ a.book_link {
     /* justify-content: center; */
     align-items: center;
     /* text-align: center; */
-    font-family: 'Ubuntu Mono', monospace;
+    font-family: 'Ubuntu', monospace;
     font-size: medium;
     padding: 0px 5px 0px;
+    margin: 5px 0px 0px 0px;
     /* background-color: #676767; */
 }
 .book_author {
     grid-area: book_author;
     font-family: serif;
     font-style: oblique;
-    font-size: medium;
+    font-size: small;
     padding: 0px 5px 0px;
     margin: 0px 0px 0px 5px;
 }
diff --git a/src/interface/static/css/mobile.css b/src/interface/static/css/mobile.css
index 0c8c37e..b99c628 100644
--- a/src/interface/static/css/mobile.css
+++ b/src/interface/static/css/mobile.css
@@ -1,4 +1,38 @@
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1366px) {
+    #vert-nav{
+        display: none;
+    } 
+    .book_description{
+        font-size: xx-small;
+    }
+    #shelf_nav{
+        min-width: auto;
+    }
+    .nav_menu_tab{
+        font-size: small;
+    }
+    .shelf_item{
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    #vert-nav{
+        display: none;
+    } 
+    .book_description{
+        font-size: xx-small;
+    }
+    #shelf_nav{
+        min-width: auto;
+    }
+    .nav_menu_tab{
+        font-size: small;
+    }
+    .shelf_item{
+        max-width: min-content;
+    }
+}
+@media only screen and (max-width: 400px) {
     .vert-nav{
         list-style: None;
         padding: 0px;
@@ -8,7 +42,7 @@
     .vert-nav-item {}
 
     #vert-nav {
-        display: initial;
+        display: none;
         list-style: None;
         padding: 0px 0px 0px 0px;
         margin: 0px;
@@ -17,4 +51,24 @@
         /* border-right: 1px solid; */
         background: linear-gradient(to right, #333 51%, #7d7a7aed 181%);
     }
+    #shelf_nav {
+        min-width: auto;
+    }
+    .shelf_item {
+        grid-template-areas:
+            "thumb details";
+        max-width: initial;
+        min-width: -webkit-fill-available;
+        margin: 0px 0px 40px auto;
+    }
+    .book_thumb {
+        max-width: -webkit-fill-available;
+    }
+    .app_body{
+        margin: 0px 50px;
+    }
+    #book_shelf{
+        display: grid;
+        grid-template-columns: auto auto;
+    }
 }
diff --git a/src/interface/static/img/bookshelf.jpg b/src/interface/static/img/bookshelf.jpg
new file mode 100644
index 0000000..3e5a684
Binary files /dev/null and b/src/interface/static/img/bookshelf.jpg differ
diff --git a/src/interface/templates/index.html b/src/interface/templates/index.html
index 7315e55..026fa6c 100755
--- a/src/interface/templates/index.html
+++ b/src/interface/templates/index.html
@@ -10,7 +10,7 @@
     <link type="text/css" rel="stylesheet" href="/static/css/mobile.css" />
     <link type="text/css" rel="stylesheet" href="/static/css/all-fa.css" />
     <title>pyShelf E-Book Server</title>
-    <link href="https://fonts.googleapis.com/css?family=Audiowide&family=Montserrat:wght@300&family=Gruppo&family=Cinzel+Decorative&family=Ubuntu+Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Gruppo&family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">
     <script src="/static/js/jquery-3.4.1.min.js" type="text/javascript"></script>
     <!-- Place this tag in your head or just before your close body tag. -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>