diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 0000000..433b482
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1 @@
+*.min.css
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 0000000..0a08a15
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-standard"]
+}
diff --git a/package.json b/package.json
index 05e48fc..792b133 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,9 @@
     "electron-builder": "25.0.5",
     "husky": "^9.1.5",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3"
+    "prettier": "^3.3.3",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard": "^36.0.1"
   },
   "scripts": {
     "start": "electron ./ --dev",
@@ -52,9 +54,15 @@
     "postinstall": "electron-builder install-app-deps",
     "pack-win": "cd out/win-unpacked && cp ../windows-install.bat ./ && 7za a sidenoder-$npm_package_version-win.zip  ./* && mv sidenoder-$npm_package_version-win.zip ../",
     "pack-mac": "cd out/mac && tar -czf sidenoder-$npm_package_version-mac.tar.gz  ./* && mv sidenoder-$npm_package_version-mac.tar.gz ../",
-    "prepare": "husky"
+    "prepare": "husky",
+    "stylelint:check": "stylelint \"**/*.css\"",
+    "stylelint:fix": "stylelint --fix \"**/*.css\""
   },
   "lint-staged": {
+    "**/*.css": [
+      "stylelint --fix",
+      "stylelint"
+    ],
     "*.{js,html,twig}": [
       "eslint --fix",
       "eslint"
diff --git a/views/browse_include.twig b/views/browse_include.twig
index be03060..fe23a26 100644
--- a/views/browse_include.twig
+++ b/views/browse_include.twig
@@ -10,12 +10,12 @@
       </a>
       <a
         class="btn btn-md btn-primary"
-        id="shellOpenDirPath"
+        id="shell-open-dir-path"
         title="Open by filebrowser"
       >
         <i class="fa fa-folder-open"></i>
       </a>
-      <a class="btn btn-md btn-primary" id="editDirPath" title="Edit path">
+      <a class="btn btn-md btn-primary" id="edit-dir-path" title="Edit path">
         <i class="fa fa-edit"></i>
       </a>
       <span id="path"></span>
@@ -104,7 +104,7 @@
         class="row row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5"
       ></div>
       <table class="table table-striped-rookie table-hover">
-        <tbody id="listTable"></tbody>
+        <tbody id="list-table"></tbody>
       </table>
     </div>
   </div>
@@ -124,10 +124,10 @@
     id('addBookmark').onclick = () => {
       addBookmark(id('bookmarkName').value, id('path').title);
     };
-    id('shellOpenDirPath').onclick = () => {
+    id('shell-open-dir-path').onclick = () => {
       shell.openPath(id('path').title);
     };
-    id('editDirPath').onclick = () => {
+    id('edit-dir-path').onclick = () => {
       promptDialog(
         'Change directory location',
         '',
diff --git a/views/css/component.css b/views/css/component.css
index d96769f..335d20f 100755
--- a/views/css/component.css
+++ b/views/css/component.css
@@ -13,8 +13,6 @@
 }
 
 .cbp-fwslider ul li {
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
   transform: translateZ(0);
   float: left;
   display: block;
@@ -36,6 +34,16 @@
   max-width: 75%;
 }
 
+.cbp-fwdots span {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background: #ddd;
+  margin: 4px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
 .cbp-fwslider nav span {
   position: absolute;
   top: 50%;
@@ -51,44 +59,32 @@
   font-weight: normal;
 }
 
+.cbp-fwdots span:hover {
+  background: #999;
+}
+
 .cbp-fwslider nav span:hover {
   background: #378fc3;
 }
 
 .cbp-fwslider nav span.cbp-fwnext {
-  right: 0px;
+  right: 0;
 }
 
 .cbp-fwslider nav span.cbp-fwprev {
-  left: 0px;
+  left: 0;
 }
 
 .cbp-fwdots {
   position: absolute;
-  bottom: 0px;
+  bottom: 0;
   white-space: nowrap;
   text-align: center;
   width: 100%;
 }
 
-.cbp-fwdots span {
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  background: #ddd;
-  margin: 4px;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.cbp-fwdots span:hover {
-  background: #999;
-}
-
 .cbp-fwdots span.cbp-fwcurrent {
   background: #47a3da;
   box-shadow: 0 0 0 2px #47a3da;
-  -webkit-transition: box-shadow 0.2s ease-in-out;
-  -moz-transition: box-shadow 0.2s ease-in-out;
   transition: box-shadow 0.2s ease-in-out;
 }
diff --git a/views/css/main.css b/views/css/main.css
index b009f6a..188a4ab 100644
--- a/views/css/main.css
+++ b/views/css/main.css
@@ -7,45 +7,58 @@ a {
 .card-header {
   padding: 0.4rem 0.75rem;
 }
+
 .btn-floating,
 [class*="btn-outline-"].btn-floating {
   border-radius: 50px;
   position: relative;
 }
+
 .btn {
   text-shadow: none;
   font-weight: bold;
 }
+
 .btn-md {
   padding: 0.4rem 0.75rem;
 }
+
 .btn-success {
   background: #7c4;
 }
+
 .btn-success:hover {
   background: #46ba46;
 }
+
 .btn-danger {
   background: #ec4d49;
 }
+
 .btn-danger:hover {
   background: #e8241f;
 }
+
 .btn-info {
   background: #49b;
 }
+
 .btn-info:hover {
   background: #28b;
 }
+
 .badge {
   text-shadow: none;
 }
+
 .bg-success {
   background: #5a4;
 }
+
 .alert-warning {
   background-color: #b80;
 }
+
 .alert-info {
   background-color: #28b;
 }
@@ -56,10 +69,13 @@ a {
   width: 100%;
   padding: 15px;
 }
+
 html {
   position: relative;
   min-height: 100%;
+  overflow-y: scroll;
 }
+
 body {
   margin-bottom: 120px;
 }
@@ -75,7 +91,7 @@ pre {
 }
 
 .modal-content {
-  box-shadow: 0px 0px 20pt black;
+  box-shadow: 0 0 20pt black;
 }
 
 .text-center li {
@@ -83,7 +99,7 @@ pre {
 }
 
 .table-hover tbody tr:hover {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgb(255 255 255 / 25%);
 }
 
 .ribbon-img-container {
@@ -95,8 +111,8 @@ pre {
   height: 88px;
   overflow: hidden;
   position: absolute;
-  top: 0px;
-  right: 0px;
+  top: 0;
+  right: 0;
 }
 
 .ribbon {
@@ -110,21 +126,23 @@ pre {
   left: -5px;
   top: 15px;
   width: 120px;
-  box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 5px 3px rgb(0 0 0 / 30%);
   cursor: pointer;
 }
 
 .ribbon-green {
   background-color: #8b4;
 }
+
 .ribbon-yellow {
   background-color: #bb4;
 }
+
 .ribbon-red {
   background-color: #b44;
 }
 
-#backToTop {
+#back-to-top {
   position: fixed;
   width: 52px;
   height: 52px;
@@ -134,30 +152,30 @@ pre {
   display: none;
 }
 
-/*html, body {
+/* html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
-}*/
+} */
 
-/*.fixed_bar {
+/* .fixed-bar {
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
   background: #272b30;
-}*/
+} */
 
-.content_container {
+.content-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
 }
 
-.content_container .sticky {
+.content-container .sticky {
   position: sticky;
   top: 0;
   left: 0;
@@ -168,13 +186,12 @@ pre {
   background: #272b30;
 }
 
-#device_infoDiv {
+#device-info-div {
   background: #272b30;
   padding: 2px 20px;
 }
 
 #mainbody {
-  /*margin-top: 110px;*/
   padding: 0 20px;
   flex: 1;
 }
@@ -184,19 +201,21 @@ pre {
   width: 100%;
   flex: auto;
   padding: 1rem;
-  margin: 0 1rem 1rem 1rem;
+  margin: 0 1rem 1rem;
   white-space: normal;
   font-size: 100%;
   line-height: 18pt;
 }
 
-#sideloadQueueModal.fade .modal-dialog {
-  transform: translate(45%, 45%) scale(0.1);
-}
-#sideloadQueueModal.show .modal-dialog {
-  transform: none;
+.table td,
+.table th,
+.table thead th {
+  vertical-align: middle;
+  border-bottom: 1px solid rgb(0 0 0 / 40%);
+  border-top: none;
 }
-#sideloadQueueModal .modal-dialog {
+
+#sideload-queue-modal .modal-dialog {
   min-width: 600px;
   max-width: 1200px;
   width: 90%;
@@ -206,7 +225,15 @@ pre {
   margin: 0;
 }
 
-#showQueue {
+#sideload-queue-modal.fade .modal-dialog {
+  transform: translate(45%, 45%) scale(0.1);
+}
+
+#sideload-queue-modal.show .modal-dialog {
+  transform: none;
+}
+
+#show-queue {
   position: fixed;
   width: 52px;
   height: 52px;
@@ -216,40 +243,30 @@ pre {
   display: none;
 }
 
-#sideloadQueueModal table {
+#sideload-queue-modal table {
   text-align: center;
   font-size: 11pt;
 }
-#sideloadQueueModal td:first-child {
+
+#sideload-queue-modal td:first-child {
   text-align: left;
-  /*min-width: 30%;*/
+
+  /* min-width: 30%; */
 }
 
-#sideloadQueueModal .modal-body {
+#sideload-queue-modal .modal-body {
   padding: 0;
   height: 300pt;
   overflow: auto;
-  border-top: 1px solid rgba(0, 0, 0, 0.4);
+  border-top: 1px solid rgb(0 0 0 / 40%);
 }
 
-#sideloadQueueModal th {
+#sideload-queue-modal th {
   background: #32383e;
   position: sticky;
   top: -1px;
 }
 
-.table td,
-.table th,
-.table thead th {
-  vertical-align: middle;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-  border-top: none;
-}
-
-html {
-  overflow-y: scroll;
-}
-
 .small,
 small {
   font-size: 0.75em;
@@ -265,22 +282,25 @@ small {
   width: 6pt;
   height: 6pt;
 }
+
 /* Track */
 ::-webkit-scrollbar-track {
   background: #bbb;
   border: 1px solid #666;
   border-radius: 4px;
 }
+
 ::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0);
+  background: rgb(0 0 0 / 0%);
 }
+
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #888;
-
   border: 1px solid #666;
   border-radius: 4px;
 }
+
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
@@ -333,11 +353,6 @@ small {
   border-radius: 2px;
 }
 
-.find-close:hover .find-close-brtl,
-.find-close:hover .find-close-bltr {
-  background: #ccc;
-}
-
 .find-close-brtl {
   width: 14px;
   height: 2px;
@@ -358,6 +373,11 @@ small {
   left: 3px;
 }
 
+.find-close:hover .find-close-brtl,
+.find-close:hover .find-close-bltr {
+  background: #ccc;
+}
+
 .find-delete {
   color: #aaa;
   margin-right: 3px;
@@ -367,10 +387,11 @@ small {
 .find-delete:hover {
   color: #ccc;
 }
+
 /* Find dialog end */
 
 .table-striped-rookie tr:nth-child(odd of :not([hidden])) {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgb(255 255 255 / 5%);
 }
 
 #installedmodaldiv .modal-content {
diff --git a/views/js/browse.js b/views/js/browse.js
index d440702..cd1b339 100644
--- a/views/js/browse.js
+++ b/views/js/browse.js
@@ -324,7 +324,7 @@ function loadDir(list) {
   }
 
   id("browseCardBody").innerHTML = cards_first.join("\n");
-  id("listTable").innerHTML = rows;
+  id("list-table").innerHTML = rows;
   // scrollByHistory();
 
   if (cards) {
@@ -339,7 +339,7 @@ function sortFiles(key, asc) {
   const suffix = asc ? "" : "-desc";
 
   sortElements($id("browseCardBody"), key, asc);
-  sortFileElements($id("listTable"), key, asc);
+  sortFileElements($id("list-table"), key, asc);
 
   ipcRenderer.send("change_config", { key: "sortFiles", val: key + suffix });
 }
diff --git a/views/js/main.js b/views/js/main.js
index 2747353..607d844 100644
--- a/views/js/main.js
+++ b/views/js/main.js
@@ -23,9 +23,9 @@ window.addEventListener("scroll", () => {
   // console.log(document.body.scrollTop, document.documentElement.scrollTop);
   const scroll = document.documentElement.scrollTop;
   if (scroll > 100) {
-    $id("backToTop").fadeIn();
+    $id("back-to-top").fadeIn();
   } else {
-    $id("backToTop").fadeOut();
+    $id("back-to-top").fadeOut();
   }
 });
 
diff --git a/views/js/search.js b/views/js/search.js
index 37f3108..1d8ed8e 100644
--- a/views/js/search.js
+++ b/views/js/search.js
@@ -361,7 +361,7 @@ function sortBy(key, asc) {
  */
 function sortItems(key, asc) {
   sortElements($("#browseCardBody"), key, asc);
-  sortElements($("#listTable"), key, asc);
+  sortElements($("#list-table"), key, asc);
 }
 
 /**
diff --git a/views/layout.twig b/views/layout.twig
index bdd9671..2348c58 100644
--- a/views/layout.twig
+++ b/views/layout.twig
@@ -117,7 +117,7 @@
     </script>
   </head>
   <body>
-    <div class="content_container">
+    <div class="content-container">
       <div class="sticky" id="topbar">
         <nav class="navbar navbar-expand" style="padding: 5px">
           <img
@@ -214,7 +214,7 @@
         </nav>
 
         <div>
-          <div id="device_infoDiv"></div>
+          <div id="device-info-div"></div>
         </div>
       </div>
 
@@ -249,7 +249,7 @@
 
     <a
       class="btn btn-dark btn-floating btn-lg"
-      id="backToTop"
+      id="back-to-top"
       onclick="backToTop()"
       ><i class="fa fa-angle-up"></i
     ></a>
@@ -263,7 +263,7 @@
           }
         ]
       */
-      loadInclude('device_info.twig', 'device_infoDiv');
+      loadInclude('device_info.twig', 'device-info-div');
       loadInclude('modals/appinfo.twig', 'appinfomodaldiv');
       loadInclude('modals/appinfo_events.twig', 'appinfoeventsmodaldiv');
       loadInclude('modals/confirm.twig', 'confirmmodaldiv');
diff --git a/views/modals/sideload-queue.twig b/views/modals/sideload-queue.twig
index 446ec88..b8a909a 100644
--- a/views/modals/sideload-queue.twig
+++ b/views/modals/sideload-queue.twig
@@ -1,10 +1,10 @@
 <!-- Modal -->
 <div
   class="modal fade modal-right"
-  id="sideloadQueueModal"
+  id="sideload-queue-modal"
   tabindex="-1"
   role="dialog"
-  aria-labelledby="sideloadQueueModalLabel"
+  aria-labelledby="sideloadModalLabel"
   data-bs-backdrop="static"
   data-keyboard="false"
 >
@@ -441,7 +441,10 @@
   </div>
 </div>
 
-<a class="btn btn-info btn-floating btn-lg" id="showQueue" onclick="showQueue()"
+<a
+  class="btn btn-info btn-floating btn-lg"
+  id="show-queue"
+  onclick="showQueue()"
   >1</a
 >
 <script>
@@ -454,10 +457,10 @@
       }
     ]
   */
-  $id('showQueue').show(100);
+  $id('show-queue').show(100);
 
   function showQueue() {
-    $id('sideloadQueueModal').modal('show');
+    $id('sideload-queue-modal').modal('show');
   }
 
   function hash(s) {
@@ -477,8 +480,8 @@
 
     const sideloadQueue = $('#sideloadQueue tr').length;
     if (data.length) {
-      $id('showQueue').text($('#sideloadQueue tr').length);
-      $id('showQueue').show();
+      $id('show-queue').text($('#sideloadQueue tr').length);
+      $id('show-queue').show();
     }
   });