diff --git a/app/components/document_advanced_search_component.rb b/app/components/document_advanced_search_component.rb
index 838e3a5..e32bed1 100644
--- a/app/components/document_advanced_search_component.rb
+++ b/app/components/document_advanced_search_component.rb
@@ -1,7 +1,7 @@
-class DocumentAdvancedSearhComponent < BaseComponent
+class DocumentAdvancedSearchComponent < BaseComponent
   attr_reader :opts
 
-  def initialize(current_user: opts: {})
+  def initialize(current_user:, opts: {})
     @opts = opts
   end
 end
\ No newline at end of file
diff --git a/app/components/document_advanced_search_component/document_advanced_search_component.html.erb b/app/components/document_advanced_search_component/document_advanced_search_component.html.erb
index bef69f3..5ce6d5a 100644
--- a/app/components/document_advanced_search_component/document_advanced_search_component.html.erb
+++ b/app/components/document_advanced_search_component/document_advanced_search_component.html.erb
@@ -1,24 +1,25 @@
 <%= form_tag(documents_path, method: :get) do %>
-  <div class="row">
+  <div class="mb-3">
     <%= text_field_tag :q, params[:q], placeholder:  'Full text search',  class: "form-control" %>
   </div>
-
-  <div class="row">
-    <%= text_field_tag :reference_number, params[:reference_number], placeholder: 'G.R. Number',  class: "form-control" %>
+  <hr class="simple">
+  <div class="mb-3">
+    <label for="exampleFormControlInput1" class="form-label text-white">G.R. Number</label>
+    <%= text_field_tag :reference_number, params[:reference_number],  class: "form-control" %>
   </div>
 
-  <div class="row">
-    <%= text_field_tag :title, params[:short_title], placeholder: 'short_title',  class: "form-control" %>
+  <div class="mb-3">
+    <label for="exampleFormControlInput1" class="form-label text-white">Short title</label>
+    <%= text_field_tag :title, params[:short_title], class: "form-control" %>
   </div>
 
-  <div class="row">
-    <div class="col-sm-12 p-2">
-      <%= text_field_tag :citation_finder, params[:citation_finder], class: "form-control", placeholder: "Citation Finder" %>
-    </div>
+  <div class="mb-3">
+    <label for="exampleFormControlInput1" class="form-label text-white">Citation Finder</label>
+    <%= text_field_tag :citation_finder, params[:citation_finder], class: "form-control" %>
   </div>
 
-  <div class="row">
-    <button type="submit" class="btn btn-primary">Search</button>
-    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+  <div class="d-flex justify-content-end mt-5">
+    <button  type="button" class="btn btn-success  me-2 mb-3">Refresh</button>
+    <button type="submit" class="btn btn-danger mb-3">Search</button>
   </div>
 <% end %>
\ No newline at end of file
diff --git a/app/javascript/images/application/search-icon.png b/app/javascript/images/application/search-icon.png
new file mode 100644
index 0000000..fc79b64
Binary files /dev/null and b/app/javascript/images/application/search-icon.png differ
diff --git a/app/javascript/src/application.scss b/app/javascript/src/application.scss
index fb38700..6689515 100644
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@@ -4,6 +4,7 @@
 @import "./application/pagination";
 @import "./application/table";
 @import "./application/nav-bar";
+@import "./application/document-search";
 
 .tableFixHead { 
     overflow: auto;
diff --git a/app/javascript/src/application/nav-bar.scss b/app/javascript/src/application/nav-bar.scss
index ac72c41..ffa0bb4 100644
--- a/app/javascript/src/application/nav-bar.scss
+++ b/app/javascript/src/application/nav-bar.scss
@@ -8,4 +8,9 @@ img.nav-bar-app-logo {
 
 .active-red a:hover {
     background: transparent;
+}
+
+.nav-body {
+    box-shadow: 0 2px 2px rgb(0 0 0 / 5%), 0 1px 0 rgb(0 0 0 / 5%);
+    background: #fff;
 }
\ No newline at end of file
diff --git a/app/views/documents/index.html.erb b/app/views/documents/index.html.erb
index 962f839..8e3be0f 100644
--- a/app/views/documents/index.html.erb
+++ b/app/views/documents/index.html.erb
@@ -1,63 +1,40 @@
 
-<div class="container">
-  <%= form_tag(documents_path, method: :get) do %>
-    <div class="row justify-content-center">
-      <div class="col-sm-8 col-md-7 col-lg-8 col-xl-9 p-2 ps-1">
-        <%= text_field_tag :q, params[:q], placeholder:  'Full text search',  class: "form-control" %>
-      </div>
-
-      <div class="col-sm-4 col-md-5 col-lg-4 col-xl-3 mt-2 d-flex justify-content-end align-items-baseline">
-        <%= submit_tag "Search", class: "btn btn-primary text-white me-3" %>
-        <button type="button" class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#citationFinder"> Citation Finder </button>
-        <div class="modal fade" id="citationFinder" tabindex="-1" aria-labelledby="citationFinder" aria-hidden="true">
-          <%= form_tag(documents_path, method: :get) do %>
-            <div class="modal-dialog modal-lg modal-dialog-scrollable">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h5 class="modal-title"> Citation Finder </h5>
-                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-
-                  <div class="modal-body">
-                    <div class="row">
-                      <div class="col-sm-12 p-2">
-                        <%= text_field_tag :citation_finder, params[:citation_finder], class: "form-control", placeholder: "PHILREP/SCRA" %>
-                      </div>
-                    </div>
-                </div>
+<div class="container-fluid row p-0 m-0">
+  <div class="container col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3" >
+    <div class="advanced-search-box">
+      <%= render(DocumentAdvancedSearchComponent.new(current_user: current_user,  opts: {})) %>
+    </div>
+  </div>
+  <div class="container col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9"> 
+    <% if @search_params.present? %>
+      <div class="container m-2"> <%= render PaginationComponent.new(data: @jurisprudences) %> </div>
+      <hr style="margin: 0 18px;"/>
+      <div class="card-header mt-1 col-sm-12 bg-transparent">
+        <div class="card g-3 " style="border:none;">
+          <div class="card-body col-sm-12 tableFixHead p-0">
+            <table class="table table-hover mb-0">
+              <thead>
+                <th class="bg-light"> Reference No. </th>
+                <th class="bg-light"> Title </th>
+                <th class="bg-light"> Date </th>
+              </thead>
 
-                <div class="modal-footer">
-                  <button type="submit" class="btn btn-primary">Search</button>
-                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                </div>
-              </div>
-            </div>
-          <% end %>
+              <tbody>
+                <%= render(DocumentIndexTableComponent.with_collection(@jurisprudences, current_user: current_user, opts: {})) %>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
-    </div>
-  
-  <% end %>
-</div>
-</div>
-<% if @search_params.present? %>     
-  <div class="container m-2"> <%= render PaginationComponent.new(data: @jurisprudences) %> </div>
-  <hr style="margin: 0 18px;"/>
-  <div class="card-header mt-1 col-sm-12 bg-transparent">
-    <div class="card g-3 " style="border:none;">
-      <div class="card-body col-sm-12 tableFixHead p-0">
-        <table class="table table-hover mb-0">
-          <thead>
-            <th class="bg-light"> Reference No. </th>
-            <th class="bg-light"> Title </th>
-            <th class="bg-light"> Date </th>
-          </thead>
-
-          <tbody>
-            <%= render(DocumentIndexTableComponent.with_collection(@jurisprudences, current_user: current_user, opts: {})) %>
-          </tbody>
-        </table>
+    <% else %>  
+    <div class="d-flex justify-content-center flex-column no-search-body"> 
+      <div class="text-center ">
+        <%= image_pack_tag 'application/search-icon.png', class: "search-doc-icon"%>
+      </div>
+      <div class="text-center label-no-search" >
+        No Documents Found
       </div>
     </div>
+    <% end %>
   </div>
-<% end %>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/app/views/documents/show.html.erb b/app/views/documents/show.html.erb
index 7c03740..3679071 100644
--- a/app/views/documents/show.html.erb
+++ b/app/views/documents/show.html.erb
@@ -1,90 +1,99 @@
-<div class="card mt-1 g-3">
-  <div class="container p-2 card-header">
-    <div class="row">
-      <div class="col-lg-12"> 
+<div class="container-fluid row p-0 m-0">
+  <div class="container col-md-3">
+    <div class="advanced-search-box">
+      <%= render(DocumentAdvancedSearchComponent.new(current_user: current_user,  opts: {})) %>
+    </div>
+  </div>
+  <div class="container col-md-9"> 
+    <div class="card mt-1 g-3">
+      <div class="container p-2 card-header">
         <div class="row">
-          <div class="col-lg-6">
-          </div>
-          <div class="col-lg-3 text-end"> 
-          <b>Date : </b>
+          <div class="col-lg-12"> 
+            <div class="row">
+              <div class="col-lg-6">
+              </div>
+              <div class="col-lg-3 text-end"> 
+              <b>Date : </b>
+              </div>
+              <div class="col-lg-3 text-end"> 
+                <b><%= @document.docdate.present? ? @document.docdate.strftime("%m/%d/%Y") : @document.year %> </b>
+              </div>
+            </div>
           </div>
-          <div class="col-lg-3 text-end"> 
-            <b><%= @document.docdate.present? ? @document.docdate.strftime("%m/%d/%Y") : @document.year %> </b>
-          </div>
-        </div>
-      </div>
 
-      <div class="col-lg-12 mt-2 mb-2"> 
-        <div class="row"> 
-          <div class="col-lg-3"> 
-            Reference Number :
+          <div class="col-lg-12 mt-2 mb-2"> 
+            <div class="row"> 
+              <div class="col-lg-3"> 
+                Reference Number :
+              </div>
+              <div class="col-lg-9"> 
+                <b><%= @document.reference_number %></b>
+              </div>
+            </div>
           </div>
-          <div class="col-lg-9"> 
-            <b><%= @document.reference_number %></b>
+          <div class="col-lg-12  mb-2"> 
+            <div class="row">
+              <div class="col-lg-3"> 
+                Title : 
+              </div>
+              <div class="col-lg-9"> 
+              <strong> <%= @document.title %> </strong> 
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="col-lg-12  mb-2"> 
-        <div class="row">
-          <div class="col-lg-3"> 
-            Title : 
-          </div>
-          <div class="col-lg-9"> 
-          <strong> <%= @document.title %> </strong> 
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="card-body p-0">
-    <ul class="doc-nav-body nav nav-tabs nav-justified" id="menuTab" role="tablist">
-      <li class="nav-item" role="presentation">
-        <button class="nav-link active" id="analysisMenuTab" data-bs-toggle="tab" data-bs-target="#analysisTabContent" type="button" role="tab" aria-controls="analysisTab" aria-selected="true">Analysis</button>
-      </li>
-      <li class="nav-item" role="presentation">
-        <button class="nav-link" id="analysisMenuTab" data-bs-toggle="tab" data-bs-target="#documentTabContent" type="button" role="tab" aria-controls="analysisTab" aria-selected="true">Full Text</button>
-      </li>
-      <li class="nav-item" role="presentation">
-        <button class="nav-link" id="analysisMenuTab" data-bs-toggle="tab" data-bs-target="#ciatatonTabContent" type="button" role="tab" aria-controls="analysisTab" aria-selected="true">Citator</button>
-      </li>
-    </ul>
+      <div class="card-body p-0">
+        <ul class="doc-nav-body nav nav-tabs nav-justified" id="menuTab" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="analysisMenuTab" data-bs-toggle="tab" data-bs-target="#analysisTabContent" type="button" role="tab" aria-controls="analysisTab" aria-selected="true">Analysis</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="analysisMenuTab" data-bs-toggle="tab" data-bs-target="#documentTabContent" type="button" role="tab" aria-controls="analysisTab" aria-selected="true">Full Text</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="analysisMenuTab" data-bs-toggle="tab" data-bs-target="#ciatatonTabContent" type="button" role="tab" aria-controls="analysisTab" aria-selected="true">Citator</button>
+          </li>
+        </ul>
 
-    <div class="tab-content" style="height: 550px;overflow: auto;">
-      <div class="tab-pane fade show active" id="analysisTabContent" role="tabpanel" aria-labelledby="home-tab">
-        <div class="row">
-          <div class="d-flex justify-content-end" style="margin: 10px 0 0 -20px;">
-            <a class="btn btn-sm btn-primary" data-controller="doctrines" data-document-id="<%= @document.id %>" data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Add Doctrine </a>
+        <div class="tab-content" style="height: 550px;overflow: auto;">
+          <div class="tab-pane fade show active" id="analysisTabContent" role="tabpanel" aria-labelledby="home-tab">
+            <div class="row">
+              <div class="d-flex justify-content-end" style="margin: 10px 0 0 -20px;">
+                <a class="btn btn-sm btn-primary" data-controller="doctrines" data-document-id="<%= @document.id %>" data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Add Doctrine </a>
+              </div>
+              <div class="container-sm row-flex col-sm-12 mt-2">
+                <%= render(DoctrineModalFormComponent.new(current_user: current_user)) %>
+              </div>
+            </div>
+
+            <div class="container-sm row-flex col-sm-12 p-0 doct-body-index">
+              <%= render(DocumentDoctrineIndexComponent.with_collection(@doctrines, current_user: current_user, opts: { document_id: @document.id })) %>
+            </div>
           </div>
-          <div class="container-sm row-flex col-sm-12 mt-2">
-            <%= render(DoctrineModalFormComponent.new(current_user: current_user)) %>
+
+          <div class="tab-pane fade" id="documentTabContent" role="tabpanel">
+            <div class="container-sm mt-2">
+              <%= raw @document.content.html_safe%>
+            </div>
           </div>
-        </div>
 
-        <div class="container-sm row-flex col-sm-12 p-0 doct-body-index">
-          <%= render(DocumentDoctrineIndexComponent.with_collection(@doctrines, current_user: current_user, opts: { document_id: @document.id })) %>
-        </div>
-      </div>
+          <div class="tab-pane fade cited-table-body" id="ciatatonTabContent" role="tabpanel">
+            <div class="mt-3 ps-3"> <h4> Cited Ins Documents </h4> </div>
+            <table class="table table-hover mb-0 table-width">
+              <thead style="position: sticky;top: 0">
+                <th class="bg-light"> Reference No. </th>
+                <th class="bg-light"> Title </th>
+                <th class="bg-light"> Date </th>
+              </thead>
 
-      <div class="tab-pane fade" id="documentTabContent" role="tabpanel">
-        <div class="container-sm mt-2">
-          <%= raw @document.content.html_safe%>
+              <tbody>
+                <%= render(DocumentIndexTableComponent.with_collection(@cited_in_documents, current_user: current_user)) %>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
-
-      <div class="tab-pane fade cited-table-body" id="ciatatonTabContent" role="tabpanel">
-        <div class="mt-3 ps-3"> <h4> Cited Ins Documents </h4> </div>
-        <table class="table table-hover mb-0 table-width">
-          <thead style="position: sticky;top: 0">
-            <th class="bg-light"> Reference No. </th>
-            <th class="bg-light"> Title </th>
-            <th class="bg-light"> Date </th>
-          </thead>
-
-          <tbody>
-            <%= render(DocumentIndexTableComponent.with_collection(@cited_in_documents, current_user: current_user)) %>
-          </tbody>
-        </table>
-      </div>
     </div>
   </div>
 </div>