diff --git a/app/templates/book/collection_view.html b/app/templates/book/collection_view.html
index 8d974d2..2484825 100644
--- a/app/templates/book/collection_view.html
+++ b/app/templates/book/collection_view.html
@@ -18,13 +18,21 @@
 {% elif current_user.is_authenticated %}
   {% include 'book/modals/fork_version_modal.html' %}
 {% endif %}
-<div class="md:hidden flex dark:text-white p-3 justify-between">
+<div class="md:hidden flex dark:text-white p-3 justify-between w-full">
   <!-- prettier-ignore -->
   <svg data-drawer-target="tab-content-slide" data-drawer-toggle="tab-content-slide" aria-controls="Slider" class="w-6 h-6 -rotate-90 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
-  <p class="break-words">{{book.label}}</p>
+  <p class="w-10/12 break-words">{{book.label}}</p>
   <!-- prettier-ignore -->
   <a href="{{ url_for('book.settings', book_id=book.id) }}" type="button" class="ml-2"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> </a>
 </div>
+<!-- prettier-ignore -->
+<div
+    class="md:hidden w-full p-3 px-4 md:w-4/6 dark:text-white
+    dark:bg-gray-500 bg-gray-400 text-center text-xs"
+    >
+      Editing a book is not available on mobile (yet). Please browse from your
+      desktop to access all the features.
+  </div>
 <div class="flex">
   <!-- prettier-ignore -->
   <div class="hidden md:block w-2/6 border-gray-200 dark:border-gray-700 h-box">
@@ -128,18 +136,6 @@
     {% include 'book/components/tab_content_slider.html' %}
   </div>
   <!-- Here start book-preview on right side-->
-  <!-- prettier-ignore -->
-  <div
-    class="md:hidden w-full p-3 px-4 md:w-4/6 dark:text-white
-    dark:bg-gray-500 bg-gray-400
-      {% if book.active_version.root_collection.active_children %} hidden {% endif %}
-    "
-    >
-    <div class="text-center text-xs">
-      Editing a book is not available on mobile (yet). Please browse from your
-      desktop to access all the features.
-    </div>
-  </div>
 
   <!-- prettier-ignore -->
   <div
@@ -188,7 +184,7 @@
     </div>
     {% endif %}
 
-    <div class="flex flex-row justify-between items-baseline mb-5">
+    <div class="flex flex-row justify-between items-baseline mb-5 w-full">
       <h1
         class="text-[2rem] hidden md:inline font-extrabold dark:text-white w-10/12 break-words">
         {{book.label}}
diff --git a/app/templates/book/components/sub_collection_preview_content.html b/app/templates/book/components/sub_collection_preview_content.html
index a1edd06..ff8bb3d 100644
--- a/app/templates/book/components/sub_collection_preview_content.html
+++ b/app/templates/book/components/sub_collection_preview_content.html
@@ -3,7 +3,9 @@
 <!-- prettier-ignore -->
 {% for sub_collection in collection.active_children if not sub_collection.is_deleted%}
 
-<p class="my-3 font-bold text-justify" id="collection-{{sub_collection.label}}">
+<p
+  class="my-3 font-bold text-justify break-words"
+  id="collection-{{sub_collection.label}}">
   {{ "#" * loop_index }} {{sub_collection.label}}
 </p>
 <!-- prettier-ignore -->
diff --git a/app/templates/book/components/sub_collection_tab_content_mobile.html b/app/templates/book/components/sub_collection_tab_content_mobile.html
new file mode 100644
index 0000000..03d0e4f
--- /dev/null
+++ b/app/templates/book/components/sub_collection_tab_content_mobile.html
@@ -0,0 +1,86 @@
+<!-- prettier-ignore -->
+<div
+  class="pl-6 pb-1 {% if not has_permission(collection, Access.U) %}filter{% endif %}"
+  {% if collection %}
+    data-entity-type="collection"
+    data-entity-id="{{collection.id}}"
+  {% endif %}
+  {% if sub_collection %}
+    data-entity-type="sub_collection"
+    data-entity-id="{{sub_collection.id}}"
+  {% endif %}
+  data-book-id="{{book.id}}"
+  >
+  {% if collection.active_children %}
+  <!-- if collection has sub_collection make for loop for it -->
+  <!-- Nested accordion -->
+  <!-- prettier-ignore -->
+    {% for sub_collection in collection.active_children if not sub_collection.is_deleted%}
+      <div
+        id="accordion-nested-collapse"
+        data-accordion="open"
+        data-entity-id="{{sub_collection.id}}"
+        data-entity-type="sub_collection"
+        data-book-id="{{book.id}}"
+      >
+        <!-- prettier-ignore -->
+        <div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
+          <button
+            class="bg-inherit"
+            type="button"
+            data-accordion-target="#accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}"
+            aria-expanded="true"
+            aria-controls="accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}">
+            <!-- prettier-ignore -->
+            <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
+          </button>
+          <!-- prettier-ignore -->
+          <button href="#collection-{{sub_collection.label}}" id="accordion-nested-collapse-heading-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="w-full text-black dark:text-white">
+            <form id="rename-sub-collection-label-form-{{sub_collection.id}}" data-book-id="{{book.id}}" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" method="post" class="mb-0">
+              {{ form_hidden_tag() }}
+              <!-- prettier-ignore -->
+              <input class="w-full truncate bg-inherit border-none" value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{sub_collection.id}}" placeholder="Sub collection label" required readonly />
+              <button name="submit" type="submit"></button>
+            </form>
+          </button>
+        </div>
+        <!-- prettier-ignore -->
+        <svg id="dropdownSubCollectionContextButton{{sub_collection.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
+        <!-- prettier-ignore -->
+        <div data="sub-collection-context-menu-{{sub_collection.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow dark:bg-gray-700">
+          {% if not version %}
+            {% include 'book/components/sub_collection_context_menu.html' %}
+          {% endif %}
+        </div>
+        <!-- prettier-ignore -->
+        <div id="accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="hidden pl-6 pb-1" aria-labelledby="accordion-nested-collapse-heading-{{sub_collection.id}}">
+          {% if sub_collection.active_children %}
+            {{recursive_render("book/components/sub_collection_tab_content.html",sub_collection,book,version)|safe}}
+          {% elif sub_collection.active_sections  %}
+            <div data-entity-id="{{sub_collection.id}}" data-entity-type="sub_collection" data-book-id="{{book.id}}" class="{% if not has_permission(collection, Access.U) %}filter{% endif %}">
+              <!-- here comes for loop for all section in this sub_collection-->
+              {% for section in sub_collection.active_sections %}
+                {% include 'book/components/section_tab_content.html' %}
+              {% endfor %}
+            </div>
+          {% else %}
+            <div data-entity-type="sub_collection" data-entity-id="{{sub_collection.id}}" class="{% if not has_permission(collection, Access.U) %}filter{% endif %}"></div>
+          {% endif %}
+        </div>
+      </div>
+    {% endfor %}
+  <!-- End: Nested accordion -->
+  {% else %}
+  <!-- if collection doesn't have sub_collection -->
+  <div
+    class="ml-6 {% if not has_permission(collection, Access.U) %}filter{% endif %}"
+    data-entity-id="{{collection.id}}"
+    data-entity-type="collection"
+  >
+    <!-- here comes for loop for all section in this collection-->
+    {% for section in collection.active_sections %}
+      {% include 'book/components/section_tab_content.html' %}
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
diff --git a/app/templates/book/components/tab_content_slider.html b/app/templates/book/components/tab_content_slider.html
index f94534d..1a08e4a 100644
--- a/app/templates/book/components/tab_content_slider.html
+++ b/app/templates/book/components/tab_content_slider.html
@@ -1,6 +1,6 @@
 <!-- prettier-ignore -->
-<div id="tab-content-slide" aria-label="Slider" class="w-full border-gray-200 dark:border-gray-700 h-screen md:hidden fixed top-16 left-0 z-40 transition-transform -translate-x-full bg-white border-r md:translate-x-0 dark:bg-gray-800 bg-opacity-0">
-  <div id="accordion-collapse-mobile" data-accordion="open" class="p-3 w-full border-r fixed inset-0 mt-16 overflow-y-scroll">
+<div id="tab-content-slide" aria-label="Slider" class="w-screen break-words border-gray-200 dark:border-gray-700 h-full md:hidden fixed top-16 left-0 z-40 transition-transform -translate-x-full bg-white border-r md:translate-x-0 dark:bg-gray-800 bg-opacity-0">
+  <div id="accordion-collapse-mobile" data-accordion="open" class="p-3 w-11/12 border-r fixed inset-0 mt-16 overflow-y-scroll">
     <!-- prettier-ignore -->
       <div class="md:hidden w-full flex dark:text-white justify-between">
         <!-- prettier-ignore -->
@@ -11,9 +11,7 @@
       </div>
 
       <div
-        class="md:hidden w-full mt-3 p-3 px-4 md:w-4/6 dark:text-white dark:bg-gray-500 bg-gray-400
-          {% if book.active_version.root_collection.active_children %} hidden {% endif %}
-        "
+        class="md:hidden w-full mt-3 p-3 px-4 md:w-4/6 dark:text-white dark:bg-gray-500 bg-gray-400"
       >
         <div class="text-center text-xs ">
           Editing a book is not available on mobile (yet). Please browse from your desktop to access all the features.
@@ -28,17 +26,6 @@
 
       {% for collection in children_collections if not collection.is_root and not collection.is_deleted %}
         <div
-          {% if not collection.active_children and not collection.active_sections %}
-            id="empty-dnd-entity"
-          {% elif collection.active_children %}
-            {% if not version and has_permission(collection, Access.U) %}
-              data-dnd="dnd-sub-collection"
-            {% endif %}
-          {% elif collection.active_sections %}
-            {% if not version and has_permission(collection, Access.U) %}
-              id="draggableSectionItems"
-            {% endif %}
-          {% endif %}
           data-entity-type="collection"
           data-entity-id="{{collection.id}}"
           class="filter {% if not version and not has_permission(collection, Access.U) %}denied{% endif %}"
@@ -70,11 +57,11 @@
         <!-- prettier-ignore -->
         {% if collection.active_children %}
         <div id="accordion-collapse-mobile-body-{{collection.id}}" class="hidden" aria-labelledby="accordion-collapse-mobile-heading-{{collection.id}}" >
-          {{recursive_render("book/components/sub_collection_tab_content.html",collection,book,version)|safe}}
+          {{recursive_render("book/components/sub_collection_tab_content_mobile.html",collection,book,version)|safe}}
         </div>
         {% elif collection.active_sections %}
         <div id="accordion-collapse-mobile-body-{{collection.id}}" class="hidden" aria-labelledby="accordion-collapse-mobile-heading-{{collection.id}}" >
-          <div {% if not version and has_permission(collection, Access.U) %}id="draggableSectionItems"{% endif %} data-entity-id="{{collection.id}}" data-entity-type="collection" data-book-id="{{book.id}}" class="{% if not has_permission(collection, Access.U) %}filter{% endif %}">
+          <div data-entity-id="{{collection.id}}" data-entity-type="collection" data-book-id="{{book.id}}" class="{% if not has_permission(collection, Access.U) %}filter{% endif %}">
             {% for section in collection.active_sections %}
               {% include 'book/components/section_tab_content.html' %}
             {% endfor %}
@@ -84,7 +71,6 @@
         <div
           id="accordion-collapse-mobile-body-{{collection.id}}"
           class="pl-6 pb-6 {% if not version and not has_permission(collection, Access.U) %}filter{% endif %}"
-          data-dnd="dnd-sub-collection"
           data-book-id="{{book.id}}"
           data-entity-type="collection"
           data-entity-id="{{collection.id}}"