From dc33043f124bc4111658ab3c00ef9dcfc3bf971e Mon Sep 17 00:00:00 2001
From: alexdbondoc17 <alexdbondoc17@gmail.com>
Date: Sun, 30 Jan 2022 15:51:21 +0000
Subject: [PATCH] Improve main UI

---
 .../annotation_marks_modal_form_component.rb  |  23 ++++
 ...tation_marks_modal_form_component.html.erb |  45 +++++++
 .../doctrine_index_component.html.erb         |  62 ---------
 .../doctrine_modal_form_component.rb          |   5 +-
 .../doctrine_modal_form_component.html.erb    |  18 +--
 app/components/doctrine_show_component.rb     |   9 --
 .../doctrine_show_component.html.erb          |  64 ----------
 ...b => document_doctrine_index_component.rb} |  10 +-
 ...document_doctrine_index_component.html.erb |  23 ++++
 .../document_doctrine_show_component.rb       |  28 +++++
 .../document_doctrine_show_component.html.erb |  90 +++++++++++++
 .../document_index_table_component.rb         |   2 +-
 .../document_index_table_component.html.erb   |  22 ++--
 .../pagination_component.html.erb             |   2 +-
 .../sidenav_component.html.erb                |  20 +--
 .../subject_accordion_component.html.erb      |   8 +-
 ...bjects_sidenav_sub_menu_component.html.erb | 118 ++++++++++--------
 .../document/doctrines_controller.rb          |   7 ++
 app/javascript/packs/application.js           |   2 +-
 app/javascript/src/application/sidenav.scss   |   4 +
 app/views/document/doctrines/show.html.erb    |  23 ++++
 app/views/documents/index.html.erb            |   1 +
 app/views/documents/show.html.erb             |  22 ++--
 app/views/kaminari/_first_page.html.erb       |   4 +-
 app/views/kaminari/_last_page.html.erb        |   4 +-
 app/views/kaminari/_next_page.html.erb        |   4 +-
 app/views/kaminari/_page.html.erb             |   4 +-
 app/views/kaminari/_prev_page.html.erb        |   4 +-
 app/views/subject_indexes/index.html.erb      |   2 +-
 config/routes.rb                              |   4 +
 30 files changed, 386 insertions(+), 248 deletions(-)
 create mode 100644 app/components/annotation_marks_modal_form_component.rb
 create mode 100644 app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
 delete mode 100644 app/components/doctrine_index_component/doctrine_index_component.html.erb
 delete mode 100644 app/components/doctrine_show_component.rb
 delete mode 100644 app/components/doctrine_show_component/doctrine_show_component.html.erb
 rename app/components/{doctrine_index_component.rb => document_doctrine_index_component.rb} (77%)
 create mode 100644 app/components/document_doctrine_index_component/document_doctrine_index_component.html.erb
 create mode 100644 app/components/document_doctrine_show_component.rb
 create mode 100644 app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
 create mode 100644 app/controllers/document/doctrines_controller.rb
 create mode 100644 app/views/document/doctrines/show.html.erb

diff --git a/app/components/annotation_marks_modal_form_component.rb b/app/components/annotation_marks_modal_form_component.rb
new file mode 100644
index 0000000..5c613b9
--- /dev/null
+++ b/app/components/annotation_marks_modal_form_component.rb
@@ -0,0 +1,23 @@
+class AnnotationMarksModalFormComponent < BaseComponent
+  attr_reader :document, :annotation, :opts
+
+  def initialize(current_user:, document:, annotation:, opts:)
+    @document = document
+    @annotation = annotation
+    @opts = opts
+  end
+
+  def document_date_or_year
+    return document.year if document.docdate.blank?
+    
+    document.docdate.strftime("%B %d, %Y")
+  end
+
+  def document_title
+    [document.title, document.reference_number, document_date_or_year].join(", ")
+  end
+
+  def render?
+    opts[:form_url].present? && opts[:form_method].present?
+  end
+end
\ No newline at end of file
diff --git a/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb b/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
new file mode 100644
index 0000000..f5e8c7a
--- /dev/null
+++ b/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
@@ -0,0 +1,45 @@
+<%= form_tag(opts[:form_url], method: opts[:form_method]) do %>
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Edit Annotation Marks</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">
+            <%= label_tag :annotation_marks %>
+            <%= hidden_field_tag :document_id, opts[:document_id] %>
+            <%= select_tag "annomark_ids[]", options_from_collection_for_select(Annomark.all, :id, :name, annotation.annomark_ids), class: "form-select i-chosen", multiple: true, prompt: "Please select" %>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-12 p-2">
+            <%= label_tag :document_title %>
+            <%= text_area_tag :document_title, document_date_or_year, class: "form-control" %>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-sm-12 p-2">
+            <%= label_tag :phil_rep %>
+            <%= text_field_tag :phil_rep, annotation.phil_rep, class: "form-control" %>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-sm-12 p-2">
+            <%= label_tag :editor_notes %>
+            <%= text_area_tag :editor_notes, annotation.editor_notes, class: "form-control i-ckeditor" %>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <%= submit_tag "Save", class: "btn btn-primary" %>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+<% end %>
diff --git a/app/components/doctrine_index_component/doctrine_index_component.html.erb b/app/components/doctrine_index_component/doctrine_index_component.html.erb
deleted file mode 100644
index a46f281..0000000
--- a/app/components/doctrine_index_component/doctrine_index_component.html.erb
+++ /dev/null
@@ -1,62 +0,0 @@
-<div class="card">
-  <div class="card-header">  </div>
-  <div class="card-body">
-    <%= form_tag(doctrine_form_url, method: :patch) do %>
-      <div class="row">
-        <%= label_tag :subject_indexes %>
-        <%= select_tag "subject_ids[]", options_from_collection_for_select(Cdao::Subject.all, :id, :lineage_name, subject_ids), class: "form-select i-chosen", multiple: true, prompt: "Please select" %>
-      </div>
-
-      <div class="row">
-        <div class="col-sm-12 p-2">
-          <%= label_tag :content %>
-          <%= text_area_tag :content, content, class: "i-ckeditor form-control", placeholder: "Doctrine" %>
-        </div>
-      </div>
-    <% end %>
-
-    <div class="row">
-      <div class="col-sm-12 p-2">
-        <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button
-      </div>
-    </div>
-    
-    <div class="collapse" id="caseListsCollapse">
-      <div class="row">
-        <div class="col-sm-10 p-2">
-          <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number" %>
-        </div>
-
-        <div class="col-sm-1 p-2">
-          <%= button_tag "search", class: "btn btn-primary" %>
-        </div>
-      </div>
-
-      <div class="row tab">
-        <table class="table table-striped table-hover mb-0">
-          <thead>
-            <th class="bg-light"> Reference No. </th>
-            <th class="bg-light"> Date </th>
-            <th class="bg-light"> Title </th>
-            <th class="bg-light"> </th>
-          </thead>
-
-          <tbody>
-            <%= render(DocumentIndexTableComponent.with_collection(Cdao::Jurisprudence.first(5), current_user: current_user, opts: { is_case_lists: true, form_url: annotation_form_url, document_id: document_id })) %>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    
-    <% doctrine.annotations.each do |annotation| %>
-      <div class="row">
-        <div class="card col-sm-12">
-          <div class="card-header p-1">
-            <h6> <%= "#{annotation.annomarks.map { |annomark| "(#{annomark.code})" }.join(" ")} #{[annotation.document.title, annotation.document.reference_number, annotation.document.docdate.strftime("%B %d, %Y"), annotation.phil_rep].join(', ')}" %> </h6>
-            <span class="m-3"> Editors Note: <%= annotation.editor_notes %> </span>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>
\ No newline at end of file
diff --git a/app/components/doctrine_modal_form_component.rb b/app/components/doctrine_modal_form_component.rb
index a5a5c96..86ca73c 100644
--- a/app/components/doctrine_modal_form_component.rb
+++ b/app/components/doctrine_modal_form_component.rb
@@ -1,7 +1,8 @@
 class DoctrineModalFormComponent < BaseComponent
-  attr_reader :opts
+  attr_reader :doctrine, :opts
 
-  def initialize(current_user:, opts:)
+  def initialize(current_user:, doctrine:, opts:)
+    @doctrine = doctrine
     @opts = opts
   end
 
diff --git a/app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb b/app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb
index 09a6d3f..3280e47 100644
--- a/app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb
+++ b/app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb
@@ -1,21 +1,23 @@
 <div class="modal fade" id="doctrineModal" tabindex="-1" aria-labelledby="doctrineModal" aria-hidden="true">
-  <div class="modal-dialog w-100">
-    <div class="modal-content w-100">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"> <%= opts[:form_method].eql?(:post) ? "New Doctrine" : "Update Doctrine" %> </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
       <%= form_tag(opts[:form_url], method: opts[:form_method]) do %>
-        <div class="modal-header">
-          <h4> Add New Doctrine </h4>
-        </div>
-
         <div class="modal-body">
           <div class="row">
             <div class="col-sm-12 p-2">
-              <%= select_tag "subject_ids[]", options_from_collection_for_select(Cdao::Subject.all, :id, :lineage_name, params[:subject_ids]), class: "form-select i-chosen", multiple: true, prompt: "Please select" %>
+              <strong> <%= label_tag :subjects %> </strong>
+              <%= select_tag "subject_ids[]", options_from_collection_for_select(Cdao::Subject.all, :id, :lineage_name, doctrine.subject_ids), class: "form-select i-chosen", multiple: true, prompt: "Please select" %>
             </div>
           </div>
 
           <div class="row">
             <div class="col-sm-12 p-2">
-              <%= text_area_tag :content, params[:content], class: "i-ckeditor form-control", placeholder: "Doctrine" %>
+              <strong> <%= label_tag :content %> </strong>
+              <%= text_area_tag :content, doctrine.content, class: "i-ckeditor form-control", placeholder: "Doctrine" %>
             </div>
           </div>
         </div>
diff --git a/app/components/doctrine_show_component.rb b/app/components/doctrine_show_component.rb
deleted file mode 100644
index 9939351..0000000
--- a/app/components/doctrine_show_component.rb
+++ /dev/null
@@ -1,9 +0,0 @@
-class DoctrineShowComponent < BaseComponent
-  with_collection_parameter :search_result
-  attr_reader :doctrine, :current_user
-
-  def initialize(doctrine:, current_user:)
-    @doctrine = doctrine
-    @current_user = current_user
-  end
-end
\ No newline at end of file
diff --git a/app/components/doctrine_show_component/doctrine_show_component.html.erb b/app/components/doctrine_show_component/doctrine_show_component.html.erb
deleted file mode 100644
index 7dee1f8..0000000
--- a/app/components/doctrine_show_component/doctrine_show_component.html.erb
+++ /dev/null
@@ -1,64 +0,0 @@
-<div class="card">
-  <div class="card-body">
-    <%= form_tag(doctrine_form_url, method: :patch) do %>
-      <div class="row">
-        <%= label_tag :subject_indexes %>
-        <%= select_tag "subject_ids[]", options_from_collection_for_select(Cdao::Subject.all, :id, :lineage_name, subject_ids), class: "form-select i-chosen", multiple: true, prompt: "Please select" %>
-      </div>
-
-      <div class="row">
-        <div class="col-sm-12 p-2">
-          <%= label_tag :content %>
-          <%= text_area_tag :content, content, class: "i-ckeditor form-control", placeholder: "Doctrine" %>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="col-sm-12 p-2">
-          <%= submit_tag "Update Doctrine", class: "btn btn-primary" %>
-        </div>
-      </div>
-    <% end %>
-
-    <div class="row">
-      <div class="col-sm-12 p-2">
-        <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button
-      </div>
-    </div>
-    
-    <div class="collapse" id="caseListsCollapse">
-      <div class="row">
-        <div class="col-sm-10 p-2">
-          <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number" %>
-        </div>
-
-        <div class="col-sm-1 p-2">
-          <%= button_tag "search", class: "btn btn-primary" %>
-        </div>
-      </div>
-
-      <div class="row tab">
-        <table class="table table-striped table-hover mb-0">
-          <thead>
-            <th class="bg-light"> Reference No. </th>
-            <th class="bg-light"> Date </th>
-            <th class="bg-light"> Title </th>
-            <th class="bg-light"> </th>
-          </thead>
-
-          <tbody>
-            <%= render(DocumentIndexTableComponent.with_collection(Cdao::Jurisprudence.first(5), current_user: current_user, opts: { is_case_lists: true, form_url: annotation_form_url, document_id: document_id })) %>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <%= form_tag(annotation_form_url, method: :patch) do %>
-      <div class="row">
-        <%= label_tag :annotation %>
-        <%%= hidden_tag :document_id, doctrine >
-        <%= text_area_tag :content, content, class: "i-ckeditor form-control", placeholder: "Doctrine" %>
-      </div>
-    <%end%>
-  </div>
-</div>
\ No newline at end of file
diff --git a/app/components/doctrine_index_component.rb b/app/components/document_doctrine_index_component.rb
similarity index 77%
rename from app/components/doctrine_index_component.rb
rename to app/components/document_doctrine_index_component.rb
index 9978825..d5a8693 100644
--- a/app/components/doctrine_index_component.rb
+++ b/app/components/document_doctrine_index_component.rb
@@ -1,4 +1,4 @@
-class DoctrineIndexComponent < BaseComponent
+class DocumentDoctrineIndexComponent < BaseComponent
   with_collection_parameter :doctrine
   attr_reader :doctrine
 
@@ -10,6 +10,8 @@ class DoctrineIndexComponent < BaseComponent
   delegate :subject_ids, to: :doctrine
   delegate :content, to: :doctrine
   delegate :document_id, to: :doctrine
+  delegate :annotations, to: :doctrine
+  delegate :subjects, to: :doctrine
 
   def doctrine_form_url
     jurisprudence_doctrines_path(jurisprudence_id: document_id)
@@ -18,8 +20,4 @@ class DoctrineIndexComponent < BaseComponent
   def annotation_form_url
     doctrine_annotations_path(doctrine_id: id)
   end
-
-  def doctrine_subjects
-    doctrine_subjects.group(:subject_id)
-  end
-end
\ No newline at end of file
+end
diff --git a/app/components/document_doctrine_index_component/document_doctrine_index_component.html.erb b/app/components/document_doctrine_index_component/document_doctrine_index_component.html.erb
new file mode 100644
index 0000000..7a7adb4
--- /dev/null
+++ b/app/components/document_doctrine_index_component/document_doctrine_index_component.html.erb
@@ -0,0 +1,23 @@
+<% if id.present? %>
+  <div class="card card-header row-flex m-3 clickable-link" href="<%= document_doctrine_path(document_id, id)%>">
+    <h4> <%= subjects.present? ? subjects.map(&:lineage_name).join(" <br> ") : "(No Subjects Provided)" %> </h4>
+    
+    <div class="container-sm ms-3">
+      <p class="mb-0"> <%= raw content.html_safe %> </p>
+
+      <% annotations.each do |annotation| %>
+        <div class="container-sm ms-5">
+          <p class="mb-0">
+            <strong>
+              <%= "#{annotation.annomarks.map { |annomark| "(#{annomark.code})" }.join(" ")} #{[annotation.document.title, annotation.document.reference_number, annotation.document.docdate.strftime("%B %d, %Y"), annotation.phil_rep].join(', ')}" %>
+            </strong>
+          </p>
+
+          <% if annotation.editor_notes.present? %>
+            <span class="m-5"> Editors Note: <%= annotation.editor_notes %> </span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>
diff --git a/app/components/document_doctrine_show_component.rb b/app/components/document_doctrine_show_component.rb
new file mode 100644
index 0000000..0d4de2b
--- /dev/null
+++ b/app/components/document_doctrine_show_component.rb
@@ -0,0 +1,28 @@
+class DocumentDoctrineShowComponent < BaseComponent
+  attr_reader :current_user, :doctrine
+
+  def initialize(current_user:, doctrine:, opts: {})
+    @doctrine = doctrine
+    @current_user = current_user
+  end
+
+  delegate :id, to: :doctrine
+  delegate :subject_ids, to: :doctrine
+  delegate :content, to: :doctrine
+  delegate :document_id, to: :doctrine
+  delegate :document, to: :doctrine
+  delegate :annotations, to: :doctrine
+  delegate :subjects, to: :doctrine
+
+  def doctrine_form_url
+    jurisprudence_doctrines_path(jurisprudence_id: document_id)
+  end
+
+  def edit_doctrine_form_url
+    jurisprudence_doctrines_path(jurisprudence_id: document_id, id: id)
+  end
+
+  def annotation_form_url
+    doctrine_annotations_path(doctrine_id: id)
+  end
+end
\ No newline at end of file
diff --git a/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb b/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
new file mode 100644
index 0000000..13bf732
--- /dev/null
+++ b/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
@@ -0,0 +1,90 @@
+<div class="card clickable">
+  <h5 class="card-header">
+    Doctrine Details
+    <a class="btn btn-sm btn-primary justify-content-end" data-bs-toggle="modal" data-bs-target="#doctrineModal"> 
+      <i class="fas fa-edit" data-toggle="tooltip" data-placement="bottom" title="Edit Doctrine"></i> 
+    </a>
+  </h5>
+
+  <div class="card-body">
+    <div class="row">
+      <div class="container-sm row-flex col-sm-12 mt-2">
+        <%= render(DoctrineModalFormComponent.new(current_user: current_user, doctrine: doctrine, opts: { form_url: jurisprudence_doctrine_path(jurisprudence_id: document_id, id: doctrine.id), form_method: "PUT" })) %>
+      </div>
+    </div>
+    
+    <%= form_tag(doctrine_form_url, method: :patch) do %>
+      <div class="row">
+        <strong> <%= label_tag :subjects %> </strong>
+        <%= select_tag "subject_ids[]", options_from_collection_for_select(Cdao::Subject.all, :id, :lineage_name, subject_ids), class: "form-select i-chosen", multiple: true, prompt: "Please select" %>
+      </div>
+
+      <div class="row">
+        <div class="col-sm-12 p-2">
+          <strong> <%= label_tag :content %> </strong>
+          <%= text_area_tag :content, content, class: "i-ckeditor form-control", placeholder: "Doctrine" %>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="row">
+      <div class="col-sm-10"> </div>
+      <div class="col-sm-2 p-2">
+        <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button>
+      </div>
+    </div>
+    
+    <div class="collapse mb-3" id="caseListsCollapse">
+      <div class="row">
+        <div class="col-sm-10 p-2">
+          <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number" %>
+        </div>
+
+        <div class="col-sm-1 p-2">
+          <%= button_tag "search", class: "btn btn-primary" %>
+        </div>
+      </div>
+
+      <div class="row tab">
+        <table class="table table-striped table-hover mb-0">
+          <thead>
+            <th class="bg-light"> Reference No. </th>
+            <th class="bg-light"> Date </th>
+            <th class="bg-light"> Title </th>
+            <th class="bg-light"> </th>
+          </thead>
+
+          <tbody>
+            <%= render(DocumentIndexTableComponent.with_collection(Cdao::Jurisprudence.first(5), current_user: current_user, opts: { is_case_lists: true, form_url: annotation_form_url, form_method: :post, document_id: document_id })) %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="card row-flex">
+      <h5 class="card-header"> Annotation Marks </h5>
+      <div class="card-body">
+        <% doctrine.annotations.order(rank: :asc).each do |annotation| %>
+          <div class="container-sm ms-1">
+            <p> 
+              <strong> <%= "#{annotation.annomarks.map { |annomark| "(#{annomark.code})" }.join(" ")}" %> </strong>
+              <%= raw [annotation.document.title, annotation.document.reference_number, annotation.document.docdate.strftime("%B %d, %Y"), annotation.phil_rep].join(', ').html_safe %> 
+              <a class="btn btn-sm btn-primary justify-content-end" data-bs-toggle="modal" data-bs-target="#editAnnotationModal<%= annotation.id %>"> 
+                <i class="fas fa-edit" data-toggle="tooltip" data-placement="bottom" title="Edit Annotation Marks"></i> 
+              </a>
+            </p>
+            <% if annotation.editor_notes.present? %>
+              <span class="ms-3"> Editors Note: <%= annotation.editor_notes %> </span>
+            <% end %>
+          </div>
+
+          <div class="row">
+            <div class="modal fade" id="editAnnotationModal<%= annotation.id %>" tabindex="-1" aria-labelledby="annotationModal" aria-hidden="true">
+              <%= render AnnotationMarksModalFormComponent.new(current_user: current_user, document: document, annotation: annotation, opts: { form_url: doctrine_annotation_path(id, annotation.id), form_method: "PUT" }) %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/document_index_table_component.rb b/app/components/document_index_table_component.rb
index 3acb933..efaf596 100644
--- a/app/components/document_index_table_component.rb
+++ b/app/components/document_index_table_component.rb
@@ -2,7 +2,7 @@ class DocumentIndexTableComponent < BaseComponent
   with_collection_parameter :search_result
   attr_reader :search_result, :opts
 
-  def initialize(search_result:, current_user:, opts:)
+  def initialize(search_result:, current_user:, opts: {})
     @search_result = search_result
     @opts = opts
   end
diff --git a/app/components/document_index_table_component/document_index_table_component.html.erb b/app/components/document_index_table_component/document_index_table_component.html.erb
index d1d0b71..6fc926e 100644
--- a/app/components/document_index_table_component/document_index_table_component.html.erb
+++ b/app/components/document_index_table_component/document_index_table_component.html.erb
@@ -4,15 +4,19 @@
   <td> <%= date_or_year %> </td>
   <% if opts[:is_case_lists].present? && opts[:form_url].present? && opts[:document_id].present? %>
     <td>
-      <a class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#annotationModal"> 
+      <a class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#annotationModal<%= search_result.id %>"> 
         <i class="fas fa-plus-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add"></i> 
       </a>
 
-      <div class="modal fade" id="annotationModal" tabindex="-1" aria-labelledby="annotationModal" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-scrollable w-50">
-          <div class="modal-header"> Create Annotations </div>
-          <div class="modal-content">
-            <%= form_tag(opts[:form_url], method: :post) do%>
+      <div class="modal fade" id="annotationModal<%= search_result.id %>" tabindex="-1" aria-labelledby="annotationModal" aria-hidden="true">
+        <%= form_tag(opts[:form_url], method: :post) do%>
+          <div class="modal-dialog modal-lg modal-dialog-scrollable">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title">New Annotation Marks</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">
@@ -24,7 +28,7 @@
                 <div class="row">
                   <div class="col-sm-12 p-2">
                     <%= label_tag :document_title %>
-                    <%= text_area_tag :document_title, [title, reference_number, date_or_year].join(","), class: "form-control" %>
+                    <%= text_area_tag :document_title, [title, reference_number, date_or_year].join(", "), class: "form-control" %>
                   </div>
                 </div>
 
@@ -47,9 +51,9 @@
                 <%= submit_tag "Save", class: "btn btn-primary" %>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
               </div>
-            <% end %>
+            </div>
           </div>
-        </div>
+        <% end %>
       </div>
     </td>
   <% end %>
diff --git a/app/components/pagination_component/pagination_component.html.erb b/app/components/pagination_component/pagination_component.html.erb
index 2ee82ea..a6d0775 100644
--- a/app/components/pagination_component/pagination_component.html.erb
+++ b/app/components/pagination_component/pagination_component.html.erb
@@ -8,7 +8,7 @@
         </small>
       </div>
       <div class="col-md-8">
-        <div class="text-center paginator pull-right">
+        <div class="text-center pagination justify-content-end">
           <%= (paginate @data) if @data.present? %>
         </div>
       </div>
diff --git a/app/components/sidenav_component/sidenav_component.html.erb b/app/components/sidenav_component/sidenav_component.html.erb
index 0310eef..9d6ce0f 100644
--- a/app/components/sidenav_component/sidenav_component.html.erb
+++ b/app/components/sidenav_component/sidenav_component.html.erb
@@ -1,29 +1,29 @@
 <% if @current_user.present? %>
   <div class="accordion accordion-flush flex-column align-items-stretch p-3 overflow-auto sidenav" id="sidenav">
-    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Home", root_path, class: "text-dark" %> </h5> </div>
-    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Search", documents_path, class: "text-dark" %> </h5> </div>
+    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Home", root_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div>
+    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Search", documents_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div>
 
     <div class="accordion-item">
-      <h5 class="accordion-header">
+      <div class="accordion-header">
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
-          <%= link_to "Subject Index", "#", class: "accordion-link text-dark" %>
+          <h5> <%= link_to "Subject Index", "#", class: "accordion-link text-decoration-none text-dark" %> </h5>
         </button>
-      </h5>
+      </div>
 
       <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %>
     </div>
 
     <div class="accordion-item">
-      <h5 class="accordion-header">
+      <div class="accordion-header">
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
-          <%= link_to "Doctrines", "#", class: "accordion-link text-dark" %>
+          <h5> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none text-dark" %> </h5>
         </button>
-      </h5>
+      </div>
 
       <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %>
     </div>
 
-    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Desicions", decisions_path, class: "text-dark" %> </h5> </div>
-    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Logout", destroy_user_session_path, class: "text-dark" %> </h5> </div>
+    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Desicions", decisions_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div>
+    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Logout", destroy_user_session_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div>
   </div>
 <% end %>
diff --git a/app/components/subject_accordion_component/subject_accordion_component.html.erb b/app/components/subject_accordion_component/subject_accordion_component.html.erb
index ef96ed5..0242d25 100644
--- a/app/components/subject_accordion_component/subject_accordion_component.html.erb
+++ b/app/components/subject_accordion_component/subject_accordion_component.html.erb
@@ -2,7 +2,7 @@
   <div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= second_subject.id %>">
     <div class="accordion-item">
       <div class="<%= second_subject.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["secondLevel", second_subject.id].join %>"> 
-        <%= link_to second_subject.name, subject_index_path(second_subject.id), class: "accordion-link" %>
+        <%= link_to second_subject.name, subject_index_path(second_subject.id), class: "clickable-link" %>
       </div>
 
       <div class="accordion-collapse collapse" id="<%= ["secondLevel", second_subject.id].join %>" data-bs-parent="#secondLevelPanel<%= second_subject.id %>">
@@ -11,7 +11,7 @@
             <div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= third_subject.id %>">
               <div class="accordion-item">
                 <div class="<%= third_subject.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["thirdLevel", third_subject.id].join %>"> 
-                  <%= link_to third_subject.name, subject_index_path(third_subject.id), class: "accordion-link" %>
+                  <%= link_to third_subject.name, subject_index_path(third_subject.id), class: "clickable-link" %>
                 </div>
 
                 <div class="accordion-collapse collapse" id="<%= ["thirdLevel", third_subject.id].join %>" data-bs-parent="#thirdLevelPanel<%= third_subject.id %>">
@@ -20,7 +20,7 @@
                       <div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= fourth_subject.id %>">
                         <div class="accordion-item">
                           <div class="<%= fourth_subject.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["fourthLevel", fourth_subject.id].join %>"> 
-                            <%= link_to fourth_subject.name, subject_index_path(fourth_subject.id), class: "accordion-link" %>
+                            <%= link_to fourth_subject.name, subject_index_path(fourth_subject.id), class: "clickable-link" %>
                           </div>
 
                           <div class="accordion-collapse collapse" id="<%= ["fourthLevel", fourth_subject.id].join %>" data-bs-parent="#fourthLevelPanel<%= fourth_subject.id %>">
@@ -29,7 +29,7 @@
                                 <div class="accordion accordion-flush ps-20">
                                   <div class="accordion-item">
                                     <div> 
-                                      <%= link_to fifth_subject.name, subject_index_path(fifth_subject.id), class: "accordion-link" %>
+                                      <%= link_to fifth_subject.name, subject_index_path(fifth_subject.id), class: "clickable-link" %>
                                     </div>
                                   </div>
                                 </div>
diff --git a/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb b/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
index 94a624c..a17ccd5 100644
--- a/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
+++ b/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
@@ -3,72 +3,88 @@
     <% Cdao::Subject.roots.each do |root| %>
       <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
         <div class="accordion-item">
-          <h5 class="accordion-header">
-            <button class="<%= root.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:second_sub_menu], root.id].join %>">
-              <%= link_to root.name, search_documents_path(subject_ids: root.id), class: "accordion-link text-dark" %>
-            </button>
-          </h5>
+          <div class="accordion-header">
+            <% if root.children.present? %>
+              <button class="<%= root.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:second_sub_menu], root.id].join %>">
+                <h5> <%= link_to root.name, search_documents_path(subject_ids: root.id), class: "accordion-link text-decoration-none text-dark" %> </h5>
+              </button>
+            <% else %>
+              <h5> <%= link_to root.name, search_documents_path(subject_ids: root.id), class: "accordion-link text-decoration-none text-dark" %> </h5>
+            <% end %>
+          </div>
 
           <% if root.children.present? %>
-          <div class="accordion-collapse collapse" id="<%= [opts[:second_sub_menu], root.id].join %>" data-bs-parent="#firstLevelSubMenu">
-            <div class="accordion-body pb-0 pe-0 pt-0">
-              <% root.children.each do |sub1| %>
-                <div class="accordion accordion-flush ps-20" id="secondLevelSubMenu">
-                  <div class="accordion-item">
-                    <h5 class="accordion-header">
-                      <button class="<%= sub1.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:third_sub_menu], sub1.id].join %>">
-                        <%= link_to sub1.name, search_documents_path(subject_ids: sub1.id), class: "accordion-link text-dark" %>
-                      </button>
-                    </h5>
+            <div class="accordion-collapse collapse" id="<%= [opts[:second_sub_menu], root.id].join %>" data-bs-parent="#firstLevelSubMenu">
+              <div class="accordion-body pb-0 pe-0 pt-0">
+                <% root.children.each do |sub1| %>
+                  <div class="accordion accordion-flush ps-20" id="secondLevelSubMenu">
+                    <div class="accordion-item">
+                      <div class="accordion-header">
+                        <% if sub1.children.present? %>
+                          <button class="<%= sub1.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:third_sub_menu], sub1.id].join %>">
+                            <h5> <%= link_to sub1.name, search_documents_path(subject_ids: sub1.id), class: "accordion-link text-decoration-none text-dark" %> </h5> 
+                          </button>
+                        <% else %>
+                          <h5> <%= link_to sub1.name, search_documents_path(subject_ids: sub1.id), class: "accordion-link text-decoration-none text-dark" %> </h5>
+                        <% end %>
+                      </div>
 
-                    <div class="accordion-collapse collapse" id="<%= [opts[:third_sub_menu], sub1.id].join %>" data-bs-parent="#secondLevelSubMenu">
-                      <div class="accordion-body pb-0 pe-0 pt-0">
-                        <% sub1.children.each do |sub2| %>
-                          <div class="accordion accordion-flush" id="thirdLevelSubMenu">
-                            <div class="accordion-item">
-                              <h5 class="accordion-header">
-                                <button class="<%= sub2.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fourth_sub_menu], sub2.id].join %>">
-                                  <%= link_to sub2.name, search_documents_path(subject_ids: sub2.id), class: "accordion-link text-dark" %>
-                                </button>
-                              </h5>
+                      <div class="accordion-collapse collapse" id="<%= [opts[:third_sub_menu], sub1.id].join %>" data-bs-parent="#secondLevelSubMenu">
+                        <div class="accordion-body pb-0 pe-0 pt-0">
+                          <% sub1.children.each do |sub2| %>
+                            <div class="accordion accordion-flush" id="thirdLevelSubMenu">
+                              <div class="accordion-item">
+                                <h5 class="accordion-header">
+                                  <% if sub2.children.present? %>
+                                    <button class="<%= sub2.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fourth_sub_menu], sub2.id].join %>">
+                                      <h5> <%= link_to sub2.name, search_documents_path(subject_ids: sub2.id), class: "accordion-link text-decoration-none text-dark" %> </h5>
+                                    </button>
+                                  <% else %>
+                                    <h5> <%= link_to sub2.name, search_documents_path(subject_ids: sub2.id), class: "accordion-link text-decoration-none text-dark" %> </h5>
+                                  <% end %>
+                                </h5>
 
-                              <div class="accordion-collapse collapse" id="<%= [opts[:fourth_sub_menu], sub2.id].join %>" data-bs-parent="#thirdLevelSubMenu">
-                                <div class="accordion-body pb-0 pe-0 pt-0">
-                                  <% sub2.children.each do |sub3| %>
-                                    <div class="accordion accordion-flush ps-20" id="fourthLevelSubMenu">
-                                      <div class="accordion-item">
-                                        <h5 class="accordion-header">
-                                          <button class="<%= sub2.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fifth_sub_menu], sub3.id].join %>">
-                                            <%= link_to sub3.name, search_documents_path(subject_ids: sub3.id), class: "accordion-link text-dark" %>
-                                          </button>
-                                        </h5>
+                                <div class="accordion-collapse collapse" id="<%= [opts[:fourth_sub_menu], sub2.id].join %>" data-bs-parent="#thirdLevelSubMenu">
+                                  <div class="accordion-body pb-0 pe-0 pt-0">
+                                    <% sub2.children.each do |sub3| %>
+                                      <div class="accordion accordion-flush ps-20" id="fourthLevelSubMenu">
+                                        <div class="accordion-item">
+                                          <h5 class="accordion-header">
+                                            <% if sub3.children.present? %>
+                                              <button class="<%= sub2.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fifth_sub_menu], sub3.id].join %>">
+                                                <h5> <%= link_to sub3.name, search_documents_path(subject_ids: sub3.id), class: "accordion-link text-decoration-none text-dark" %> </h5> 
+                                              </button>
+                                            <% else%>
+                                              <h5> <%= link_to sub3.name, search_documents_path(subject_ids: sub3.id), class: "accordion-link text-decoration-none text-dark" %> </h5> 
+                                            <% end %>
+                                          </h5>
 
-                                        <div class="accordion-collapse collapse" id="<%= [opts[:fifth_sub_menu], sub3.id].join %>" data-bs-parent="#fourthLevelSubMenu">
-                                          <div class="accordion-body pb-0 pe-0 pt-0">
-                                            <% sub3.children.each do |sub4| %>
-                                              <div class="accordion-item">
-                                                <p class="accordion-header">
-                                                  <%= link_to sub4.name, search_documents_path(subject_ids: sub4.id), class: "accordion-link text-dark" %>
-                                                </p>
-                                              </div>
-                                            <% end if sub3.children.present? %>
+                                          <div class="accordion-collapse collapse" id="<%= [opts[:fifth_sub_menu], sub3.id].join %>" data-bs-parent="#fourthLevelSubMenu">
+                                            <div class="accordion-body pb-0 pe-0 pt-0">
+                                              <% sub3.children.each do |sub4| %>
+                                                <div class="accordion-item">
+                                                  <h5 class="accordion-header">
+                                                    <%= link_to sub4.name, search_documents_path(subject_ids: sub4.id), class: "accordion-link text-decoration-none text-dark" %>
+                                                  </h5>
+                                                </div>
+                                              <% end if sub3.children.present? %>
+                                            </div>
                                           </div>
                                         </div>
                                       </div>
-                                    </div>
-                                  <% end if sub2.children.present? %>
+                                    <% end if sub2.children.present? %>
+                                  </div>
                                 </div>
                               </div>
                             </div>
-                          </div>
-                        <% end if sub1.children.present? %>
+                          <% end if sub1.children.present? %>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              <% end if root.children.present? %>
+                <% end if root.children.present? %>
+              </div>
             </div>
-          </div>
           <% end %>
         </div>
       </div>
diff --git a/app/controllers/document/doctrines_controller.rb b/app/controllers/document/doctrines_controller.rb
new file mode 100644
index 0000000..e6df65f
--- /dev/null
+++ b/app/controllers/document/doctrines_controller.rb
@@ -0,0 +1,7 @@
+class Document::DoctrinesController < ApplicationController
+  load_and_authorize_resource :document, class: "Cdao::Jurisprudence"
+  load_and_authorize_resource :doctrine, class: "Doctrine", through: :document
+
+
+  def show; end
+end
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 1528cea..1e11c0c 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -30,7 +30,7 @@ $(document).ready(function () {
     $('#sidenav').toggleClass('active');
   });
 
-  $(".accordion-link").on("click", function (e) {
+  $(".clickable-link").on("click", function (e) {
     e.preventDefault();
 
     let $href = $(this).attr("href");
diff --git a/app/javascript/src/application/sidenav.scss b/app/javascript/src/application/sidenav.scss
index 6440eb3..ea4c457 100644
--- a/app/javascript/src/application/sidenav.scss
+++ b/app/javascript/src/application/sidenav.scss
@@ -15,6 +15,10 @@
     background-color: #e6e6e6;
     border-color: #e6e6e6;
   }
+
+  button {
+    padding: 0px !important;
+  }
 }
 
 .wrapper {
diff --git a/app/views/document/doctrines/show.html.erb b/app/views/document/doctrines/show.html.erb
new file mode 100644
index 0000000..925ea13
--- /dev/null
+++ b/app/views/document/doctrines/show.html.erb
@@ -0,0 +1,23 @@
+<div class="card mt-1 g-3">
+  <div class="card-header mt-1 mb-2 col-sm-12">
+    <table class="table table-borderless">
+      <tbody>
+        <tr>
+          <td class="text-start" style="width: 160px;"> Reference Number: </td>
+          <td class="text-start"> <strong> <%= @document.reference_number %> </strong> </td>
+          <td class="text-end" style="width: 50px;" > Date: </td>
+          <td class="text-end" style="width: 160px;"> <strong> <%= @document.docdate.present? ? @document.docdate.strftime("%m/%d/%Y") : @document.year %> </strong> </td>
+        </tr>
+
+        <tr>
+          <td style="width: 160px;" class="text-start"> Title: </td>
+          <td colspan="3" class="text-start"> <strong> <%= @document.title %> </strong> </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="card-body">
+    <%= render(DocumentDoctrineShowComponent.new(current_user: current_user, doctrine: @doctrine)) %>
+  </div>
+</div>
diff --git a/app/views/documents/index.html.erb b/app/views/documents/index.html.erb
index b81b0be..ab9a3a2 100644
--- a/app/views/documents/index.html.erb
+++ b/app/views/documents/index.html.erb
@@ -15,6 +15,7 @@
   </div>
 
   <div class="card-body col-sm-12 tableFixHead p-0 mt-1">
+    <div class="row"> <%= render PaginationComponent.new(data: @jurisprudences) %> </div>
     <table class="table table-striped table-hover mb-0">
       <thead>
         <th class="bg-light"> Reference No. </th>
diff --git a/app/views/documents/show.html.erb b/app/views/documents/show.html.erb
index 165c134..d8f7083 100644
--- a/app/views/documents/show.html.erb
+++ b/app/views/documents/show.html.erb
@@ -17,8 +17,7 @@
     </table>
   </div>
 
-
-  <div class="card-body">
+  <div class="card-body h100">
     <ul class="nav nav-tabs" 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>
@@ -33,18 +32,23 @@
 
     <div class="tab-content">
       <div class="tab-pane fade show active" id="analysisTabContent" role="tabpanel" aria-labelledby="home-tab">
-        <div class="container-fluid">
-          <div class="row-flex col-sm-12 end-0">
+        <div class="row">
+          <div class="col-sm-11"> </div>
+
+          <div class="col-sm-1 p-3 end-0">
             <a class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#doctrineModal"> 
               <i class="fas fa-plus-circle" data-toggle="tooltip" data-placement="bottom" title="New Doctrine"></i> 
             </a>
-
-            <%= render(DoctrineModalFormComponent.new(current_user: current_user, opts: { form_url: jurisprudence_doctrines_path(jurisprudence_id: @document.id), form_method: :post })) %>
           </div>
+        </div>
 
-          <div class="row-flex col-sm-12 mt-2">
-            <%= render(DoctrineIndexComponent.with_collection(@doctrines, current_user: current_user)) %>
-          </div>
+
+        <div class="container-sm row-flex col-sm-12 mt-2">
+          <%= render(DoctrineModalFormComponent.new(current_user: current_user, doctrine: @document.doctrines.new, opts: { form_url: jurisprudence_doctrines_path(jurisprudence_id: @document.id), form_method: :post })) %>
+        </div>
+
+        <div class="container-sm row-flex col-sm-12 mt-2">
+          <%= render(DocumentDoctrineIndexComponent.with_collection(@doctrines, current_user: current_user)) %>
         </div>
       </div>
 
diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb
index 0cc83b9..936ff4b 100644
--- a/app/views/kaminari/_first_page.html.erb
+++ b/app/views/kaminari/_first_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="first">
-  <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote %>
+<span class="page-item first">
+  <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote, class: "page-link" %>
 </span>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
index bc777b4..5e86ca6 100644
--- a/app/views/kaminari/_last_page.html.erb
+++ b/app/views/kaminari/_last_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="last">
-  <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote %>
+<span class="page-item last">
+  <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote, class: "page-link" %>
 </span>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
index 3b0d054..89fead1 100644
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="next">
-  <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %>
+<span class="page-item next">
+  <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote, class: "page-link" %>
 </span>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
index 393bfc4..051cca9 100644
--- a/app/views/kaminari/_page.html.erb
+++ b/app/views/kaminari/_page.html.erb
@@ -7,6 +7,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="page<%= ' current' if page.current? %>">
-  <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel} %>
+<span class="page-item page<%= ' current page-link' if page.current? %>">
+  <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel, class: "page-link"} %>
 </span>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
index 0f32af4..db63d91 100644
--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="prev">
-  <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote %>
+<span class="page-item prev">
+  <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote, class: "page-link" %>
 </span>
diff --git a/app/views/subject_indexes/index.html.erb b/app/views/subject_indexes/index.html.erb
index 81f4a83..ac59f4c 100644
--- a/app/views/subject_indexes/index.html.erb
+++ b/app/views/subject_indexes/index.html.erb
@@ -8,7 +8,7 @@
 					<div class="accordion accordion-flash" id="mainPanel<%= subject.id %>">
 						<div class="accordion-item">
 							<div class="<%= subject.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["firstLevel", subject.id].join %>"> 
-								<%= link_to subject.name, subject_index_path(subject.id), class: "accordion-link" %>
+								<%= link_to subject.name, subject_index_path(subject.id), class: "clickble-link" %>
 							</div>
 
 							<div class="accordion-collapse collapse" id="<%= ["firstLevel", subject.id].join %>" data-bs-parent="#mainPanel<%= subject.id %>">
diff --git a/config/routes.rb b/config/routes.rb
index 52306f5..bec78e8 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -17,6 +17,10 @@ Rails.application.routes.draw do
 
   resources :documents, only: %i[index show] do
     get :search, on: :collection
+
+    scope module: :document do
+      resources :doctrines, only: %i[show]
+    end
   end
   resources :decisions, only: %i[index show]
   resources :subject_indexes