diff --git a/public/assets/css/dash/icons.css b/public/assets/css/dash/icons.css
index b29409b..074a7d9 100644
--- a/public/assets/css/dash/icons.css
+++ b/public/assets/css/dash/icons.css
@@ -1,4 +1,4 @@
-svg[role="icon"] {
+svg.icon {
   transition: all 0.3s linear;
   fill: var(--secondary);
   width: 25px;
diff --git a/resources/views/back/book.blade.php b/resources/views/back/book.blade.php
index ad763e1..ed17819 100644
--- a/resources/views/back/book.blade.php
+++ b/resources/views/back/book.blade.php
@@ -11,7 +11,7 @@
   <div role="book-index-header-right">
       <a href="/dashboard/pages/all" title="view all pages">
           <button>
-              <svg id="nav-menu-icon" role="icon">
+              <svg id="nav-menu-icon" class="icon">
                   <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-folder"/>
               </svg>
               {{ $result['stats']['all'] }}
@@ -19,7 +19,7 @@
       </a>
       <a href="/dashboard/pages/published" title="view publised pages">
           <button>
-              <svg id="nav-menu-icon" role="icon">
+              <svg id="nav-menu-icon" class="icon">
                     <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
                 </svg>
               {{ $result['stats']['published'] }}
@@ -27,7 +27,7 @@
       </a>
       <a href="/dashboard/pages/deleted" title="view deleted pages">
           <button>
-              <svg id="nav-menu-icon" role="icon">
+              <svg id="nav-menu-icon" class="icon">
                     <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-trash"/>
                 </svg>
               {{ $result['stats']['deleted'] }}
@@ -68,7 +68,7 @@
         @if($result['numOfPages'])
             <div role="paginate">
                   <a class="page-btns" href="/dashboard/pages/{{ $result['paginate']['sort'] }}/{{ $result['paginate']['prevPage'] }}">
-                      <svg id="nav-menu-icon" role="icon">
+                      <svg id="nav-menu-icon" class="icon">
                             <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-arrow-with-circle-left"/>
                         </svg>
                   </a>
@@ -78,7 +78,7 @@
                       {{ $result['numOfPages'] }}
                   </span>
                   <a class="page-btns" href="/dashboard/pages/{{ $result['paginate']['sort'] }}/{{ $result['paginate']['nextPage'] }}">
-                      <svg id="nav-menu-icon" role="icon">
+                      <svg id="nav-menu-icon" class="icon">
                           <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-arrow-with-circle-right"/>
                       </svg>
                   </a>
diff --git a/resources/views/back/navigation.blade.php b/resources/views/back/navigation.blade.php
index 7dda6a4..0ed4a87 100644
--- a/resources/views/back/navigation.blade.php
+++ b/resources/views/back/navigation.blade.php
@@ -7,18 +7,18 @@
       <section id="nav-items">
           @foreach($menu as $item)
               <div id="{{ $item['id'] }}" class="nav-item" data-slug="{{ $item['slug'] }}" data-uuid="{{ $item['uuid'] }}" data-path="{{ $item['id'] }}">
-                  <svg id="move-menu-item" role="icon">
+                  <svg id="move-menu-item" class="icon">
                         <use id="move-menu-item" xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/>
                     </svg>
                   <label>{{ $item['title'] }}</label>
                   <div id="nav-btns">
                       <button id="edit-item" class="nav-btn" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}" title="edit page">
-                          <svg id="edit-item" role="icon" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}">
+                          <svg id="edit-item" class="icon" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}">
                               <use id="edit-item" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}" xlink:href="/assets/images/global/sprite.svg#entypo-edit"/>
                           </svg>
                       </button>
                       <button id="remove-item" class="nav-btn" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}" title="delete from menu">
-                          <svg id="remove-item" role="icon" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}">
+                          <svg id="remove-item" class="icon" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}">
                               <use id="remove-item" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}" xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
                           </svg>
                       </button>
diff --git a/resources/views/back/settings.blade.php b/resources/views/back/settings.blade.php
index 26548f5..5198c8d 100644
--- a/resources/views/back/settings.blade.php
+++ b/resources/views/back/settings.blade.php
@@ -23,7 +23,7 @@
 
             <div>
                 <button id="create-backup">
-                    <svg id="nav-menu-icon" role="icon">
+                    <svg id="nav-menu-icon" class="icon">
                         <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-back-in-time"/>
                     </svg>
                     <span>CREATE BACKUP</span>
@@ -38,14 +38,14 @@
             <div class="features">
                 @if(isset($apiStatus) && $apiStatus == 'true')
                     <button id="api-access-toggle" title="allow external api" data-enabled="true">
-                        <svg id="nav-menu-icon" role="icon">
+                        <svg id="nav-menu-icon" class="icon">
                             <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
                         </svg>
                         <span id="api-status">API ACCESS ENABLED</span>
                     </button>
                 @else
                     <button id="api-access-toggle" title="allow external api" data-enabled="false">
-                        <svg id="nav-menu-icon" role="icon">
+                        <svg id="nav-menu-icon" class="icon">
                             <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
                         </svg>
                         <span id="api-status">API ACCESS NOT ENABLED</span>
@@ -54,7 +54,7 @@
                 @endif
                 @if(isset($dynamicRenderStatus) && $dynamicRenderStatus == 'true')
                     <button id="dynamic-render-toggle" title="allow external api" data-enabled="true">
-                        <svg id="nav-menu-icon" role="icon">
+                        <svg id="nav-menu-icon" class="icon">
                             <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cycle"/>
                         </svg>
                         <span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
@@ -62,7 +62,7 @@
 
                 @else
                     <button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
-                        <svg id="nav-menu-icon" role="icon">
+                        <svg id="nav-menu-icon" class="icon">
                             <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cycle"/>
                         </svg>
                         <span id="dynamic-render-status">STATIC PAGE RENDERING</span>
@@ -75,14 +75,14 @@
                 @foreach($themes as $theme)
                     @if($theme['name'] == $currentTheme)
                         <button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
-                            <svg id="nav-menu-icon" role="icon">
+                            <svg id="nav-menu-icon" class="icon">
                                 <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
                             </svg>
                             <span>{{ $theme['display-name'] }}</span>
                         </button>
                     @else
                         <button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
-                            <svg id="nav-menu-icon" role="icon">
+                            <svg id="nav-menu-icon" class="icon">
                                 <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
                             </svg>
                             <span>{{ $theme['display-name'] }}</span>
@@ -109,7 +109,7 @@
                 @endif
                 @include('forms.mailforms')
                 <button id="send-mail">
-                    <svg id="nav-menu-icon" role="icon">
+                    <svg id="nav-menu-icon" class="icon">
                         <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-mail-with-circle"/>
                     </svg>
                     <span>TEST MAIL</span>
diff --git a/resources/views/includes/editor.blade.php b/resources/views/includes/editor.blade.php
index 59aa00f..7b5a34b 100644
--- a/resources/views/includes/editor.blade.php
+++ b/resources/views/includes/editor.blade.php
@@ -1,58 +1,58 @@
 <div class="text-editor-control">
     <button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
-        <svg id="edit-bold" role="icon">
+        <svg id="edit-bold" class="icon">
               <use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold"/>
           </svg>
     </button>
     <button id="edit-italic" class="content-editor-btn-text editor-button" title="italic">
-        <svg id="edit-italic" role="icon">
+        <svg id="edit-italic" class="icon">
               <use id="edit-italic" xlink:href="/assets/images/global/sprite.svg#tabler-italic"/>
           </svg>
     </button>
     <button id="edit-strikethrough" class="content-editor-btn-text editor-button" title="strikethrough">
-        <svg id="edit-strikethrough" role="icon">
+        <svg id="edit-strikethrough" class="icon">
               <use id="edit-strikethrough" xlink:href="/assets/images/global/sprite.svg#tabler-strikethrough"/>
           </svg>
     </button>
     <button id="edit-link" class="content-editor-btn-icon editor-button" title="insert link">
-        <svg id="edit-link" role="icon">
+        <svg id="edit-link" class="icon">
               <use id="edit-link" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
           </svg>
     </button>
     <button id="edit-header1" class="content-editor-btn-text editor-button" title="header 1">
-        <svg id="edit-header1" role="icon">
+        <svg id="edit-header1" class="icon">
               <use id="edit-header1" xlink:href="/assets/images/global/sprite.svg#tabler-heading-1"/>
           </svg>
     </button>
     <button id="edit-header2" class="content-editor-btn-text editor-button" title="header 2">
-        <svg id="edit-header2" role="icon">
+        <svg id="edit-header2" class="icon">
               <use id="edit-header2" xlink:href="/assets/images/global/sprite.svg#tabler-heading-2"/>
           </svg>
     </button>
     <button id="edit-header3" class="content-editor-btn-text editor-button" title="header 3">
-        <svg id="edit-header3" role="icon">
+        <svg id="edit-header3" class="icon">
               <use id="edit-header3" xlink:href="/assets/images/global/sprite.svg#tabler-heading-3"/>
           </svg>
     </button>
     <button id="edit-image" class="content-editor-btn-icon editor-button" title="insert image">
-        <svg id="edit-image" role="icon">
+        <svg id="edit-image" class="icon">
               <use id="edit-image" xlink:href="/assets/images/global/sprite.svg#entypo-image"/>
           </svg>
     </button>
     @if($mode == "edit")
         <button id="edit-update" class="post-sumbit-btn submit-start editor-button" data-action='blog-update' data-id="{{ $page['uuid'] }} type='submit' title=" bold">
-            <svg id="edit-update" role="icon">
+            <svg id="edit-update" class="icon">
                   <use id="edit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
               </svg>
         </button>
         <button id="edit-delete" class="content-editor-btn-icon editor-button submit-delete" for="post-delete" title='delete post'>
-            <svg id="edit-delete" role="icon">
+            <svg id="edit-delete" class="icon">
                   <use id="edit-delete" xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
               </svg>
         </button>
     @else
         <button id="edit-save" class="post-sumbit-btn submit-start editor-button" data-action='blog-add' type='submit'>
-            <svg id="edit-save" role="icon">
+            <svg id="edit-save" class="icon">
                   <use id="edit-save" xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
               </svg>
         </button>
diff --git a/resources/views/includes/nav.blade.php b/resources/views/includes/nav.blade.php
index f0eeca5..9b69b08 100644
--- a/resources/views/includes/nav.blade.php
+++ b/resources/views/includes/nav.blade.php
@@ -6,21 +6,21 @@
     @endif
     <a id="settings" href="/dashboard/settings" title="settings">
         <button>
-            <svg id="nav-settings-icon" role="icon">
+            <svg id="nav-settings-icon" class="icon">
                 <use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog"/>
             </svg>
         </button>
     </a>
     <a id="navigation" href="/dashboard/navigation" title="edit navigation">
         <button>
-            <svg id="nav-menu-icon" role="icon">
+            <svg id="nav-menu-icon" class="icon">
                 <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
             </svg>
         </button>
     </a>
     <a id="navigation" href="/dashboard/logout" title="log out">
         <button>
-            <svg id="nav-logout-icon" role="icon">
+            <svg id="nav-logout-icon" class="icon">
                 <use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
             </svg>
         </button>
diff --git a/resources/views/includes/notifications.blade.php b/resources/views/includes/notifications.blade.php
index 818f887..51c25be 100644
--- a/resources/views/includes/notifications.blade.php
+++ b/resources/views/includes/notifications.blade.php
@@ -1,12 +1,12 @@
 <div class="notify-message">
     <div class="notify-icons">
-        <svg id="nav-menu-icon" role="icon" class="notify-good">
+        <svg id="nav-menu-icon" class="icon" class="notify-good">
               <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-emoji-happy"/>
           </svg>
-        <svg id="nav-menu-icon" role="icon" class="notify-notgood">
+        <svg id="nav-menu-icon" class="icon" class="notify-notgood">
               <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-emoji-sad"/>
           </svg>
-        <svg id="nav-menu-icon" role="icon" class="notify-working">
+        <svg id="nav-menu-icon" class="icon" class="notify-working">
               <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-hour-glass"/>
           </svg>
         <i class="ti ti-settings notify-working"></i>
diff --git a/resources/views/includes/options.blade.php b/resources/views/includes/options.blade.php
index fed9654..b844743 100644
--- a/resources/views/includes/options.blade.php
+++ b/resources/views/includes/options.blade.php
@@ -33,19 +33,19 @@ if(isset($page['uuid']))
 
 <br>
     <button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ $menu }}" title='Pin to Menu'>
-        <svg id="option-menu-pin" role="icon">
+        <svg id="option-menu-pin" class="icon">
             <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
         </svg>
     </button><button id="option-feature" class="option-inactive post-option-btn" data-active="{{ $featured }}" title='Feature'>
-        <svg id="option-feature-icon" role="icon">
+        <svg id="option-feature-icon" class="icon">
             <use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
         </svg>
     </button><button id="option-published" class="option-inactive post-option-btn" data-active="{{ $published }}" title='Published'>
-        <svg id="option-published-icon" role="icon">
+        <svg id="option-published-icon" class="icon">
             <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
         </svg>
     </button><a href="/dashboard/page/preview/{{ $uuid }}" target="_blank"><button id="option-preview" class="option-inactive post-option-btn" data-active="false" title='preview page'>
-            <svg id="option-preview-icon" role="icon">
+            <svg id="option-preview-icon" class="icon">
                 <use id="option-preview-icon" xlink:href="/assets/images/global/sprite.svg#entypo-eye"/>
             </svg>
         </button>
diff --git a/resources/views/includes/recent-meta.blade.php b/resources/views/includes/recent-meta.blade.php
index 6f8caf6..f60fad2 100644
--- a/resources/views/includes/recent-meta.blade.php
+++ b/resources/views/includes/recent-meta.blade.php
@@ -33,18 +33,18 @@ if($page['featured'] == 'true')
     </strong>
     <hr/>
     <button data-active="{{ $menu }}">
-        <svg id="option-menu-pin" role="icon">
+        <svg id="option-menu-pin" class="icon">
             <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
         </svg>
     </button>
     <button data-active="{{ $published }}">
-        <svg id="option-published-icon" role="icon">
+        <svg id="option-published-icon" class="icon">
             <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
         </svg>
     </button>
 
     <button data-active="{{ $featured }}">
-        <svg id="option-feature-icon" role="icon">
+        <svg id="option-feature-icon" class="icon">
             <use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
         </svg>
     </button>
diff --git a/resources/views/includes/submenu-settings.blade.php b/resources/views/includes/submenu-settings.blade.php
index 69555ed..1af6f85 100644
--- a/resources/views/includes/submenu-settings.blade.php
+++ b/resources/views/includes/submenu-settings.blade.php
@@ -1,16 +1,16 @@
 <div class="submenu">
     <button id="save-toggle" title="save settings">
-        <svg id="save-toggle" role="icon">
+        <svg id="save-toggle" class="icon">
             <use id="save-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
         </svg>
     </button>
     <button id="publish-pages" title="publish site">
-        <svg id="publish-pages" role="icon">
+        <svg id="publish-pages" class="icon">
             <use id="publish-pages" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/>
         </svg>
     </button>
     <button id="render-toggle" title="render on save toggle" data-render="{{ $renderOnSave }}">
-        <svg id="render-toggle" role="icon">
+        <svg id="render-toggle" class="icon">
             <use id="render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-ccw"/>
         </svg>
     </button>
diff --git a/resources/views/includes/submenu-start.blade.php b/resources/views/includes/submenu-start.blade.php
index 6084117..ab5c2b1 100644
--- a/resources/views/includes/submenu-start.blade.php
+++ b/resources/views/includes/submenu-start.blade.php
@@ -1,14 +1,14 @@
 <div class="submenu">
     <a href='/dashboard/pages' title="view pages">
         <button>
-            <svg id="option-menu-pin" role="icon">
+            <svg id="option-menu-pin" class="icon">
                 <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#minicute-book"/>
             </svg>
         </button>
     </a>
     <a href='/dashboard/page/add/new' title="add new page">
         <button>
-            <svg id="option-menu-pin" role="icon">
+            <svg id="option-menu-pin" class="icon">
                 <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-squared-plus"/>
             </svg>
         </button>