diff --git a/public/assets/css/dash/page-editor.css b/public/assets/css/dash/page-editor.css
index 408a2b1..b39ddeb 100644
--- a/public/assets/css/dash/page-editor.css
+++ b/public/assets/css/dash/page-editor.css
@@ -1,12 +1,12 @@
 /* FILE MANAGER */
-main > section[role="file-manager"] {
+main > section.file-manager {
   width: 100%;
   background: var(--primary-highlight);
   padding: 20px 0;
   margin-top: 75px;
 }
 
-main > section[role="file-manager"] label[role="list-title"] {
+main > section.file-manager label.list-title {
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
@@ -14,7 +14,7 @@ main > section[role="file-manager"] label[role="list-title"] {
   color: var(--primary);
 }
 
-main > section[role="file-manager"] > div[role="file-drop"] {
+main > section.file-manager > div.file-drop {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -28,8 +28,8 @@ main > section[role="file-manager"] > div[role="file-drop"] {
   margin: 10px auto;
 }
 
-main > section[role="file-manager"] > div[role="page-images-list"],
-main > section[role="file-manager"] > div[role="page-files-list"] {
+main > section.file-manager > div.page-images-list,
+main > section.file-manager > div.page-files-list {
   max-width: 900px;
   width: 100%;
   margin: 10px auto;
@@ -38,8 +38,8 @@ main > section[role="file-manager"] > div[role="page-files-list"] {
   gap: 10px;
 }
 
-main > section[role="file-manager"] > div[role="page-images-list"] > div,
-main > section[role="file-manager"] > div[role="page-files-list"] > div {
+main > section.file-manager > div.page-images-list > div,
+main > section.file-manager > div.page-files-list > div {
   width: 100%;
   height: 150px;
   border-radius: 3px;
@@ -48,117 +48,79 @@ main > section[role="file-manager"] > div[role="page-files-list"] > div {
   cursor: pointer;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-images-list"]
-  > div
-  > div.item-progress {
+main > section.file-manager > div.page-images-list > div > div.item-progress {
   width: 100%;
   height: 100%;
   background: var(--primary);
 }
 
-main > section[role="text-editor"] > div[role="text-editor-control"] button {
+main > section.text-editor > div.text-editor-control button {
   border-radius: 0;
 }
 
-main > section[role="text-editor"] > div[role="text-editor-control"] button > i {
+main > section.text-editor > div.text-editor-control button > i {
   font-size: 1.6em;
 }
 
-main
-  > section[role="text-editor"]
-  > div[role="text-editor-control"]
-  > button:nth-child(1) {
+main > section.text-editor > div.text-editor-control > button:nth-child(1) {
   border-radius: 3px 0 0 3px;
 }
 
-main
-  > section[role="text-editor"]
-  > div[role="text-editor-control"]
-  > button:nth-child(10) {
+main > section.text-editor > div.text-editor-control > button:nth-child(10) {
   border-radius: 0 3px 3px 0;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-images-list"]
-  > div
-  > button.media-remove,
-main
-  > section[role="file-manager"]
-  > div[role="page-files-list"]
-  > div
-  > button.media-remove {
+main > section.file-manager > div.page-images-list > div > button.media-remove,
+main > section.file-manager > div.page-files-list > div > button.media-remove {
   color: var(--white);
   margin: 5px;
   padding: 10px 15px 7px;
   font-size: 1.5em;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-images-list"]
-  > div.video-item
-  > video {
+main > section.file-manager > div.page-images-list > div.video-item > video {
   object-fit: cover;
   height: 100%;
   width: 100%;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-images-list"]
-  > div.video-item
-  > button,
-main
-  > section[role="file-manager"]
-  > div[role="page-files-list"]
-  > div.audio-item
-  > button,
-main
-  > section[role="file-manager"]
-  > div[role="page-files-list"]
-  > div.file-item
-  > button {
+main > section.file-manager > div.page-images-list > div.video-item > button,
+main > section.file-manager > div.page-files-list > div.audio-item > button,
+main > section.file-manager > div.page-files-list > div.file-item > button {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-main > section[role="file-manager"] > div[role="page-files-list"] > div.audio-item {
+main > section.file-manager > div.page-files-list > div.audio-item {
   background: url("/assets/images/global/upload-audio.png") no-repeat center center /
     cover;
 }
 
-main > section[role="file-manager"] > div[role="page-files-list"] > div.file-item {
+main > section.file-manager > div.page-files-list > div.file-item {
   background: url("/assets/images/global/upload-doc.png") no-repeat center center / cover;
 }
 
-main > section[role="file-manager"] > div[role="page-files-list"] > div.file-item > a {
+main > section.file-manager > div.page-files-list > div.file-item > a {
   position: absolute;
   bottom: 0;
   background: var(--secondary);
   padding: 2px;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-files-list"]
-  > div.audio-item
-  > audio {
+main > section.file-manager > div.page-files-list > div.audio-item > audio {
   height: 100%;
   width: 100%;
 }
 
 /* PAGE META */
 
-main > section[role="page-meta"] {
+main > section.page-meta {
   width: 100%;
   background: var(--secondary-highlight);
 }
 
-main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
+main > section.page-meta > div.page-meta-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
@@ -168,7 +130,7 @@ main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
   color: var(--secondary);
 }
 
-main section[role="page-meta"] textarea#post-title-text {
+main section.page-meta textarea#post-title-text {
   font-family: var(--base-type);
   width: 100%;
   height: 80px;
@@ -176,14 +138,14 @@ main section[role="page-meta"] textarea#post-title-text {
   color: var(--primary);
 }
 
-main section[role="page-meta"] textarea#post-tags {
+main section.page-meta textarea#post-tags {
   font-family: var(--base-type);
   width: 100%;
   height: 80px;
   color: var(--primary);
 }
 
-main section[role="page-meta"] select {
+main section.page-meta select {
   background: var(--primary);
   color: var(--secondary);
   border-radius: 3px;
@@ -194,15 +156,11 @@ main section[role="page-meta"] select {
   font-size: 1.5em;
 }
 
-main section[role="page-meta"] div[role="page-options"] {
+main section.page-meta div.page-options {
   width: 100%;
 }
 
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  div[role="page-options"]
-  button {
+main section.page-meta div.page-meta-wrapper div.page-options button {
   width: 25%;
   height: 45px;
   transition: all 0.3s linear;
@@ -214,45 +172,36 @@ main
 }
 
 main
-  > section[role="page-meta"]
-  > div[role="page-meta-wrapper"]
-  > div[role="page-options"]
+  > section.page-meta
+  > div.page-meta-wrapper
+  > div.page-options
   > button.post-option-btn:nth-child(3) {
   border-radius: 3px 0 0 3px;
 }
 
-main
-  > section[role="page-meta"]
-  > div[role="page-meta-wrapper"]
-  > div[role="page-options"]
-  > a
-  > button {
+main > section.page-meta > div.page-meta-wrapper > div.page-options > a > button {
   border-radius: 0 3px 3px 0;
 }
 
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  div[role="page-created"]
-  input {
+main section.page-meta div.page-meta-wrapper div.page-created input {
   display: none;
   visibility: hidden;
 }
 
 /* TEXT EDITOR */
 
-main > section[role="text-editor"] {
+main > section.text-editor {
   width: 100%;
   max-width: 900px;
   margin: 10px auto;
 }
 
-main section[role="text-editor"] .icon-hide {
+main section.text-editor .icon-hide {
   display: none;
   visibility: hidden;
 }
 
-main > section[role="text-editor"] > div[role="text-editor-control"] {
+main > section.text-editor > div.text-editor-control {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
 }
@@ -264,7 +213,7 @@ main > section[role="text-editor"] > div[role="text-editor-control"] {
   top: 65px;
 }
 
-main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
+main > section.text-editor > div.edit-post-wrapper {
   width: 100%;
   max-width: 900px;
   border-radius: 5px;
@@ -272,13 +221,13 @@ main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
   margin: 10px 0;
 }
 
-main > section[role="text-editor"] > div[role="edit-post-wrapper"] textarea:focus {
+main > section.text-editor > div.edit-post-wrapper textarea:focus {
   outline: none;
   border-color: var(--secondary-highlight);
 }
 
-main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
-main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
+main section.text-editor div.edit-post-wrapper #edit,
+main section.text-editor div.edit-post-wrapper #highlight {
   font-family: var(--mono-type);
   border: 0;
   width: 100%;
@@ -297,25 +246,25 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
   margin: 0;
 }
 
-main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight-content {
+main section.text-editor div.edit-post-wrapper #highlight-content {
   word-wrap: normal;
   white-space: pre-wrap;
   line-break: normal;
 }
 
-main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #edit {
+main > section.text-editor > div.edit-post-wrapper > #edit {
   z-index: 1;
   background: transparent;
   color: transparent;
   caret-color: var(--secondary-highlight);
 }
 
-main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #highlight {
+main > section.text-editor > div.edit-post-wrapper > #highlight {
   z-index: 0;
 }
 
-main section[role="text-editor"] div[role="edit-post-wrapper"] pre,
-main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
+main section.text-editor div.edit-post-wrapper pre,
+main section.text-editor div.edit-post-wrapper pre code {
   padding: 0;
   margin: 0;
 }
@@ -323,68 +272,56 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
 /* RESPONSIVE */
 
 @media only screen and (max-width: 900px) {
-  main > section[role="file-manager"] > div[role="file-drop"],
-  main > section[role="file-manager"] > div[role="page-images-list"],
-  main > section[role="file-manager"] > div[role="page-files-list"],
-  main > section[role="page-meta"] > div[role="page-meta-wrapper"],
-  main > section[role="text-editor"] {
+  main > section.file-manager > div.file-drop,
+  main > section.file-manager > div.page-images-list,
+  main > section.file-manager > div.page-files-list,
+  main > section.page-meta > div.page-meta-wrapper,
+  main > section.text-editor {
     width: 97%;
   }
 }
 
 @media only screen and (max-width: 480px) {
-  main > section[role="file-manager"] > div[role="page-images-list"],
-  main > section[role="file-manager"] > div[role="page-files-list"] {
+  main > section.file-manager > div.page-images-list,
+  main > section.file-manager > div.page-files-list {
     grid-template-columns: 1fr 1fr 1fr;
   }
 
-  main > section[role="file-manager"] > div[role="file-drop"],
-  main > section[role="file-manager"] > div[role="page-images-list"],
-  main > section[role="file-manager"] > div[role="page-files-list"],
-  main > section[role="page-meta"] > div[role="page-meta-wrapper"],
-  main > section[role="text-editor"] {
+  main > section.file-manager > div.file-drop,
+  main > section.file-manager > div.page-images-list,
+  main > section.file-manager > div.page-files-list,
+  main > section.page-meta > div.page-meta-wrapper,
+  main > section.text-editor {
     width: 95%;
   }
 
-  main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
+  main > section.page-meta > div.page-meta-wrapper {
     grid-template-columns: 1fr;
   }
 
-  main > section[role="text-editor"] > div[role="text-editor-control"] {
+  main > section.text-editor > div.text-editor-control {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
   }
 
-  main
-    > section[role="text-editor"]
-    > div[role="text-editor-control"]
-    > button:nth-child(1) {
+  main > section.text-editor > div.text-editor-control > button:nth-child(1) {
     border-radius: 3px 0;
   }
 
-  main
-    > section[role="text-editor"]
-    > div[role="text-editor-control"]
-    > button:nth-child(5) {
+  main > section.text-editor > div.text-editor-control > button:nth-child(5) {
     border-radius: 0 3px;
   }
 
-  main
-    > section[role="text-editor"]
-    > div[role="text-editor-control"]
-    > button:nth-child(6) {
+  main > section.text-editor > div.text-editor-control > button:nth-child(6) {
     border-radius: 0 0 0 3px;
   }
 
-  main
-    > section[role="text-editor"]
-    > div[role="text-editor-control"]
-    > button:nth-child(10) {
+  main > section.text-editor > div.text-editor-control > button:nth-child(10) {
     border-radius: 0 0 3px;
   }
 
-  main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
-  main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
+  main section.text-editor div.edit-post-wrapper #edit,
+  main section.text-editor div.edit-post-wrapper #highlight {
     font-size: 0.8em;
   }
 }
diff --git a/public/assets/scripts/dash/app/actions/PageActions.js b/public/assets/scripts/dash/app/actions/PageActions.js
index ee37efd..cac3529 100644
--- a/public/assets/scripts/dash/app/actions/PageActions.js
+++ b/public/assets/scripts/dash/app/actions/PageActions.js
@@ -10,7 +10,7 @@ export default class PostActions {
 	collectInfo(files) {
 		return new Promise((resolve, reject) => {
 			let pageInfo = [];
-			let pageRef = document.querySelector('[role="file-manager"]');
+			let pageRef = document.querySelector('.file-manager');
 			//process html content for storage
 			let txt = document.createElement('textarea');
 			txt.innerHTML = document.getElementById('highlight-content').innerHTML;
diff --git a/public/assets/scripts/dash/app/controllers/PageEditor.js b/public/assets/scripts/dash/app/controllers/PageEditor.js
index 57ab0e7..a90736a 100644
--- a/public/assets/scripts/dash/app/controllers/PageEditor.js
+++ b/public/assets/scripts/dash/app/controllers/PageEditor.js
@@ -28,23 +28,23 @@ export default class PostEditor {
 		this.postUUID = null;
 		this.postLayout = null;
 		this.fm = null;
-		if (document.querySelector('[role="file-manager"]').getAttribute('data-index')) {
+		if (document.querySelector('.file-manager').getAttribute('data-index')) {
 			this.postID = document
-				.querySelector('[role="file-manager"]')
+				.querySelector('.file-manager')
 				.getAttribute('data-index');
 			this.postUUID = document
-				.querySelector('[role="file-manager"]')
+				.querySelector('.file-manager')
 				.getAttribute('data-uuid');
 			this.postLayout = document
-				.querySelector('[role="file-manager"]')
+				.querySelector('.file-manager')
 				.getAttribute('data-layout');
 		}
 		if (document.getElementById('edit')) {
 			this.editor = new TextEditor(
 				document.getElementById('edit'),
-				document.querySelector('[role="file-manager"]').offsetHeight +
-					document.querySelector('[role="page-meta"]').offsetHeight +
-					document.querySelector('[role="text-editor"]').offsetHeight
+				document.querySelector('.page-meta').offsetHeight +
+					document.querySelector('.file-manager').offsetHeight +
+					document.querySelector('.text-editor').offsetHeight
 			);
 			this.editor.addListener(
 				EditorEvent.EDITOR_DELETE,
@@ -89,13 +89,13 @@ export default class PostEditor {
 	// methods
 	//--------------------------
 	start() {
-		if (document.querySelector('[role="file-drop"]')) {
+		if (document.querySelector('.file-drop')) {
 			//insert fileManager here
 			this.fm = new FileManager(
-				document.querySelector('[role="file-drop"]'),
+				document.querySelector('.file-drop'),
 				document.getElementById('page-files-upload'),
 				document.getElementById('page-images-list'),
-				document.querySelector('[role="page-files-list"]')
+				document.querySelector('.page-files-list')
 			);
 			var optionButtons = document.querySelectorAll('.post-option-btn');
 			for (var i = 0, length = optionButtons.length; i < length; i++) {
diff --git a/public/assets/scripts/dash/app/ui/TextEditor.js b/public/assets/scripts/dash/app/ui/TextEditor.js
index 3954e0b..e846a4e 100644
--- a/public/assets/scripts/dash/app/ui/TextEditor.js
+++ b/public/assets/scripts/dash/app/ui/TextEditor.js
@@ -18,22 +18,20 @@ class TextEditor extends EventEmitter {
 	constructor(textEditor, scrollLimit) {
 		super();
 
-		document
-			.querySelector('[role="text-editor-control"]')
-			.addEventListener('scroll', e => {
-				console.log('HERE');
-			});
+		document.querySelector('.text-editor-control').addEventListener('scroll', e => {
+			console.log('HERE');
+		});
 
 		document.body.addEventListener('scroll', e => {
 			var fixLimit = scrollLimit;
 			//console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit);
 			if (document.body.scrollTop + 5 >= fixLimit) {
 				document
-					.querySelector('[role="text-editor-control"]')
+					.querySelector('.text-editor-control')
 					.classList.add('control-freeze');
 			} else {
 				document
-					.querySelector('[role="text-editor-control"]')
+					.querySelector('.text-editor-control')
 					.classList.remove('control-freeze');
 			}
 		});
@@ -47,7 +45,7 @@ class TextEditor extends EventEmitter {
 				.replace(new RegExp('&', 'g'), '&amp;')
 				.replace(new RegExp('<', 'g'), '&lt;');
 			let editorHeight = document.getElementById('highlight').offsetHeight;
-			document.querySelector('[role="edit-post-wrapper"]').style.height =
+			document.querySelector('.edit-post-wrapper').style.height =
 				editorHeight + 'px';
 			e.target.style.height = editorHeight + 30 + 'px'; //TODO: yeah, it's ugly but it works for now, fix soon
 			// Syntax Highlight
diff --git a/resources/views/back/page.blade.php b/resources/views/back/page.blade.php
index fb92e56..b7e67f4 100644
--- a/resources/views/back/page.blade.php
+++ b/resources/views/back/page.blade.php
@@ -32,21 +32,21 @@
 @endphp
 
   @section('main-content')
-    <section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" role="file-manager">
+    <section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" class="file-manager">
         @if($feature == '')
-            <div role="file-drop">
+            <div class="file-drop">
                 <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
             </div>
-            <label role="list-title">IMAGES AND VIDEO</label>
-            <div id="page-images-list" role="page-images-list"></div>
-            <label role="list-title">FILES</label>
-            <div role="page-files-list"></div>
+            <label class="list-title">IMAGES AND VIDEO</label>
+            <div id="page-images-list" class="page-images-list"></div>
+            <label class="list-title">FILES</label>
+            <div class="page-files-list"></div>
         @else
-            <div role="file-drop">
+            <div class="file-drop">
                 <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
             </div>
-            <label role="list-title">IMAGES AND VIDEO</label>
-            <div id="page-images-list" role="page-images-list">
+            <label class="list-title">IMAGES AND VIDEO</label>
+            <div id="page-images-list" class="page-images-list">
                 @if(count($media)>1)
                     @foreach($media as $item)
                         @if($item['type'] == "mp4")
@@ -80,8 +80,8 @@
                     @endif
                 @endif
             </div>
-            <label role="list-title">FILES</label>
-            <div role="page-files-list">
+            <label class="list-title">FILES</label>
+            <div class="page-files-list">
                 @if(count($files) > 1)
                     @foreach($files as $item)
                         @php
@@ -135,17 +135,17 @@
 
             </div>
         @endif
-    </section><section role="page-meta">
-        <div role="page-meta-wrapper">
-            <div role="page-title">
+    </section><section class="page-meta">
+        <div class="page-meta-wrapper">
+            <div class="page-title">
                 <strong>TITLE</strong>
                 <textarea id="post-title-text" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{ $title }}</textarea>
             </div>
-            <div role="page-tags">
+            <div class="page-tags">
                 <strong>TAGS</strong>
                 <textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">{{ $tags }}</textarea>
             </div>
-            <div role="page-layouts">
+            <div class="page-layouts">
                 <strong>LAYOUTS</strong>
                 <select id="page-templates">
                     @foreach($views as $view)
@@ -157,19 +157,19 @@
                     @endforeach
                 </select>
             </div>
-            <div role="page-options">
+            <div class="page-options">
                 <strong>OPTIONS</strong>
                 @spaceless
                     @include('includes.options')
                 @endspaceless
             </div>
-            <div role="page-updated">
+            <div class="page-updated">
                 <strong>UPDATED</strong>
                 <span id="post-date" type="text">
                     {{ $updated }}
                 </span>
             </div>
-            <div role="page-created">
+            <div class="page-created">
                 <strong>CREATED</strong>
                 <span id="post-date" type="text">
                     {{ $date }}
@@ -180,11 +180,11 @@
             </div>
         </div>
     </section>
-    <section role="text-editor">
+    <section class="text-editor">
         @spaceless
         @include('includes.editor')
         @endspaceless
-        <div role="edit-post-wrapper">
+        <div class="edit-post-wrapper">
             <textarea id="edit" spellcheck="false" class="language-md">{{ $content }}</textarea>
             <pre id="highlight"><code id="highlight-content" class="language-md"></code></pre>
         </div>
diff --git a/resources/views/includes/editor.blade.php b/resources/views/includes/editor.blade.php
index dcbcd19..59aa00f 100644
--- a/resources/views/includes/editor.blade.php
+++ b/resources/views/includes/editor.blade.php
@@ -1,4 +1,4 @@
-<div role="text-editor-control">
+<div class="text-editor-control">
     <button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
         <svg id="edit-bold" role="icon">
               <use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold"/>