diff --git a/public/assets/css/dash/book.css b/public/assets/css/dash/book.css
index 8d4fc76..b90b4f2 100644
--- a/public/assets/css/dash/book.css
+++ b/public/assets/css/dash/book.css
@@ -1,4 +1,4 @@
-section[role="book-index-header"] {
+section.book-index-header {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin: 100px auto 20px;
@@ -6,25 +6,25 @@ section[role="book-index-header"] {
   max-width: 900px;
 }
 
-section[role="book-index-header"] > div[role="book-index-header-left"] {
+section.book-index-header > div.book-index-header-left {
   text-transform: capitalize;
   display: inline-block;
   color: var(--white);
   font-size: 3em;
 }
 
-section[role="book-index-header"] > div[role="book-index-header-right"] {
+section.book-index-header > div.book-index-header-right {
   text-align: right;
   display: inline-block;
 }
 
-section[role="book-index-pages"] {
+section.book-index-pages {
   margin: 0 auto;
   width: 100%;
   max-width: 900px;
 }
 
-section[role="book-index-pages"] > a.page-link {
+section.book-index-pages > a.page-link {
   vertical-align: top;
   display: inline-block;
   width: 100%;
@@ -35,7 +35,7 @@ section[role="book-index-pages"] > a.page-link {
   overflow: hidden;
 }
 
-section[role="book-index-pages"] > a.page-link div.page-video {
+section.book-index-pages > a.page-link div.page-video {
   width: 100%;
   height: 350px;
   display: flex;
@@ -46,14 +46,14 @@ section[role="book-index-pages"] > a.page-link div.page-video {
   position: relative;
 }
 
-section[role="book-index-pages"] > a.page-link video {
+section.book-index-pages > a.page-link video {
   width: 100%;
   height: 100%;
   position: absolute;
   object-fit: cover;
 }
 
-section[role="book-index-pages"] > a.page-link > div.page-bg {
+section.book-index-pages > a.page-link > div.page-bg {
   width: 100%;
   height: 350px;
   display: flex;
@@ -64,7 +64,7 @@ section[role="book-index-pages"] > a.page-link > div.page-bg {
   position: relative;
 }
 
-section[role="book-index-pages"] aside {
+section.book-index-pages aside {
   font-size: 1.1em;
   color: var(--white);
   text-shadow: 2px 2px 2px var(--black);
@@ -72,38 +72,38 @@ section[role="book-index-pages"] aside {
   position: relative;
 }
 
-section[role="book-index-pages"] hr {
+section.book-index-pages hr {
   color: var(--white);
   border: 0.1px solid;
   margin: 7px 0;
 }
 
-section[role="book-index-pages"] button[data-active="true"] {
+section.book-index-pages button[data-active="true"] {
   background: var(--primary);
   color: var(--primary-highlight);
 }
 
-section[role="book-index-pages"] button[data-active="false"] {
+section.book-index-pages button[data-active="false"] {
   background: var(--secondary);
 }
 
-section[role="book-index-pages"] > div[role="paginate"] {
+section.book-index-pages > div.paginate {
   width: fit-content;
   margin: 0 auto;
   font-size: 1.5em;
   color: var(--secondary-highlight);
 }
 
-section[role="book-index-pages"] > div[role="paginate"] i {
+section.book-index-pages > div.paginate i {
   color: var(--secondary);
 }
 
-section[role="book-index-pages"] > div[role="paginate"] a,
-section[role="book-index-pages"] > div[role="paginate"] span {
+section.book-index-pages > div.paginate a,
+section.book-index-pages > div.paginate span {
   display: inline;
 }
 
-section[role="book-index-pages"] > div[role="paginate"] span {
+section.book-index-pages > div.paginate span {
   position: relative;
   top: -15px;
 }
diff --git a/resources/views/back/book.blade.php b/resources/views/back/book.blade.php
index ed17819..1409bd8 100644
--- a/resources/views/back/book.blade.php
+++ b/resources/views/back/book.blade.php
@@ -3,12 +3,12 @@
 @section('title', 'Pages')
 
   @section('main-content')
-  <section role="book-index-header">
-  <div role="book-index-header-left">
+  <section class="book-index-header">
+  <div class="book-index-header-left">
       {{ $result['paginate']['sort'] }}
       Pages
   </div>
-  <div role="book-index-header-right">
+  <div class="book-index-header-right">
       <a href="/dashboard/pages/all" title="view all pages">
           <button>
               <svg id="nav-menu-icon" class="icon">
@@ -34,7 +34,7 @@
           </button>
       </a>
   </section>
-  <section role="book-index-pages">
+  <section class="book-index-pages">
         @foreach($result['pages'] as $page)
             @php
                 $type = '';
@@ -66,7 +66,7 @@
                 @endif
         @endforeach
         @if($result['numOfPages'])
-            <div role="paginate">
+            <div class="paginate">
                   <a class="page-btns" href="/dashboard/pages/{{ $result['paginate']['sort'] }}/{{ $result['paginate']['prevPage'] }}">
                       <svg id="nav-menu-icon" class="icon">
                             <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-arrow-with-circle-left"/>