diff --git a/src/interface/static/css/main.css b/src/interface/static/css/main.css
index ef68d13..1e43e35 100644
--- a/src/interface/static/css/main.css
+++ b/src/interface/static/css/main.css
@@ -58,7 +58,7 @@ body {
   font-size: 17px;
   text-align: center;
   padding: 0px 0px 0px 0px;
-  color: #ffffffc7;
+  color: #fefefeb3;
 }
 
 .shadow {
@@ -227,7 +227,7 @@ body {
 .nav_search {
   /* margin: 0px 5px 0px 0px; */
   /* border-radius: 5px; */
-  border: 1px solid #ffffffc7;
+  border: 1px solid #fefefeb3;
   /* max-height: 17px; */
   /* padding: 0px 5px; */
   /* margin-left: 0px; */
@@ -252,19 +252,21 @@ body {
 #horiz_nav_hdr {
   display: grid;
   grid-area: horiz_nav_hdr;
-  grid-template-areas: "left_col middle_col right_col";
+  grid-template-areas:
+    "left_col middle_col";
   grid-template-columns: max-content auto max-content;
   padding: 0px 5px 0px;
 }
 
 #horiz_nav_main {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto;
   grid-area: horiz_nav_main;
   align-items: center;
   justify-content: center;
   padding: 5px 5px 0px 5px;
   min-width: max-content;
-  color: #ffffffc7;
+  color: #fefefeb3;
   font-size: smaller;
 }
 
@@ -281,30 +283,29 @@ body {
 
 #hdr_nav_right {
   grid-area: right_col;
-  color: #ffffffc7;
+  color: #fefefeb3;
   display: flex;
   align-items: center;
 }
 
 .nav_icon {
   font-size: larger;
-  color: #ffffffc7;
+  color: #fefefeb3;
 }
 
 .input_box {
-  border: 1px solid #ffffffc7;
+  border: 1px solid #fefefeb3;
   background-color: #0000006e;
-  color: #ffffffc7;
+  color: #fefefeb3;
   padding: 0px 5px;
   text-align: center;
   font-size: medium;
 }
 
 .ui_btn_w_icon {
-  background-color: #ffffffc7;
+  background-color: #fefefeb3;
   /* border-radius: 5px; */
   padding: 0px 5px;
-  font-size: small;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -320,13 +321,13 @@ body {
   display: flex;
   background-color: #00000045;
   padding: 0px;
-  margin: 0px auto;
+  margin: 0px auto 0px 5px;
 }
 
 .active_tab {
-  background-color: #ffffffc7 !important;
-  color: #000000 !important;
-  border-bottom: 1px solid #000000 !important;
+  background-color: #282828 !important;
+  color: #ffffff !important;
+  border-bottom: 1px solid #ffffff !important;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
 }
@@ -340,8 +341,8 @@ body {
   padding: 0px 0px 0px 5px;
   font-size: medium;
   border-bottom: 1px solid;
-  background-color: #282828;
-  color: #ffffff;
+  background-color: #fefefeb3;
+  color: #000000;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
 }
@@ -366,7 +367,6 @@ body {
   padding-inline-start: 0px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  min-width: 1645px;
   /* position: fixed; */
 }
 
@@ -414,8 +414,7 @@ p {
   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;
@@ -480,7 +479,7 @@ a.book_link {
   grid-area: book_tags;
   font-size: small;
   padding: 0px 5px 0px;
-  color: #ffffffc7;
+  color: #fefefeb3;
   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 b36dc51..4a22ad1 100755
--- a/src/interface/static/css/main.scss
+++ b/src/interface/static/css/main.scss
@@ -1,7 +1,7 @@
-$ui-color-1: #ffffffc7;
+$ui-color-1: #fefefeb3; //UI border active button Font Color
 $ui-color-2: #282828;
 $ui-color-3: #676767;
-$ui-font-color-1: #000000;
+$ui-font-color-1: #000000; //Active button
 $ui-font-color-2: #ffffff;
 $ui-shelf-item-color: #0000006e;
 $ui-background-img: url(/static/img/bookshelf.jpg);
@@ -324,7 +324,14 @@ body {
     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_btn_w_icon{
+    background-color: $ui-color-1;
+    /* border-radius: 5px; */
+    padding: 0px 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;/* min-width: 55px; */
+}
 .ui_icon_notxt{
     margin: 0px 5px 0px 0px;
 }
@@ -333,12 +340,12 @@ body {
     display: flex;
     background-color: #00000045;
     padding: 0px;
-    margin: 0px auto;
+    margin: 0px auto 0px 5px;
 }
 .active_tab{
-    background-color: $ui-color-1 !important;
-    color: $ui-font-color-1 !important;
-    border-bottom: 1px solid $ui-font-color-1 !important;
+    background-color: $ui-color-2 !important;
+    color: $ui-font-color-2 !important;
+    border-bottom: 1px solid $ui-font-color-2 !important;
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
 }
@@ -351,8 +358,8 @@ body {
     padding: 0px 0px 0px 5px;
     font-size: medium;
     border-bottom: 1px solid;
-    background-color: $ui-color-2;
-    color: $ui-font-color-2;
+    background-color: $ui-color-1;
+    color: $ui-font-color-1;
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
 }
@@ -377,7 +384,7 @@ body {
     padding-inline-start: 0px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    min-width: 1645px;
+    // min-width: 1645px;
     /* position: fixed; */
 }
 .shelf_contents {
diff --git a/src/interface/templates/index.html b/src/interface/templates/index.html
index 026fa6c..2fed887 100755
--- a/src/interface/templates/index.html
+++ b/src/interface/templates/index.html
@@ -27,26 +27,24 @@
             <div id="horiz_nav_hdr">
                 <h1 class="app_hdr" id="hdr_branding">pyShelf {{Version}}</h1>
                 <div class="hdr_nav" id="hdr_nav_center">
-                    <input class="nav_search input_box" type="text" size="50" value="search by Title, Author, Tags, or Collections">
+                    <input class="nav_search input_box" type="text" size="40" value="search by Title, Author, Tags, or Collections">
                     <div class="ui_btn_w_icon"><i class="fas fa-search search_submit search_button" onclick="window.location.href = '/prev_page/{{ Set }}'"></i>search</div>
                     <ul id="tab_nav_menu">
                         <li class="nav_menu_tab active_tab"><i class="fas fa-home"></i>&nbsp;Home</li>
                         <li class="nav_menu_tab"><i class="fas fa-layer-group"></i>&nbsp;Collections</li>
                         <li class="nav_menu_tab"><i class="fas fa-star"></i>&nbsp;Favorites</li>
-                        <li class="nav_menu_tab"><i class="fas fa-question-circle"></i>&nbsp;Help</li>
                         <li class="nav_menu_tab"><i class="fas fa-bug"></i>&nbsp;Bug report</li>
-                </div>
-                <div class="hdr_nav" id="hdr_nav_right">
-                    <i class="fas fa-user ui_icon_notxt"></i>
-                    <input id="username" class="nav_login input_box" type="text" size="8" value="Username">
-                    <input id="password" class="nav_login input_box" type="text" size="8" value="Password">
-                </div>
-            </div>
-            <div id="horiz_nav_main">
+                        <li class="nav_menu_tab"> <i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;Login</li>
+                </div> 
+            </div> 
+            <div id="horiz_nav_main"> 
                 <!--<i class="fas fa-chevron-left nav_icon prev_page" onclick="window.location.href = '/prev_page/{{ Set }}'"></i>-->
                 {{ BookStats }} books | <script type="text/javascript">document.write(collections.length)</script> collections
                 <!--<i class="fas fa-chevron-right nav_icon next_page" onclick="window.location.href = '/next_page/{{ Set }}'"></i>-->
-                <!--<input class="nav_button search_submit" type="submit" value="Search">-->
+                <div class="hdr_nav" id="hdr_nav_right"> 
+                    <input id="username" class="nav_login input_box" type="text" size="8" value="Username"> 
+                    <input id="password" class="nav_login input_box" type="text" size="8" value="Password"> 
+                </div> 
             </div>
         </ul>
         <div class="app_body">