diff --git a/src/App.vue b/src/App.vue
index 5e73d90..5d04320 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,6 +71,7 @@ export default {
 <style>
 @import "./css/transitions.css";
 @import "./css/dark_theme.css";
+@import "./css/scrollbar.css";
 @import "./css/tooltips.css";
 @import "./css/inputs.css";
 
diff --git a/src/css/dark_theme.css b/src/css/dark_theme.css
index 1a632e4..6688a21 100644
--- a/src/css/dark_theme.css
+++ b/src/css/dark_theme.css
@@ -46,5 +46,9 @@
 
 	--percent-filled: var(--accent2);
 	--percent-empty: var(--on-card-colour);
-	--percent-text: var(--on-card-text)
+	--percent-text: var(--on-card-text);
+
+	--scrollbar-background: #0f0f0f;
+	--scrollbar-handle: #4d4d4d;
+	--scrollbar-handle-hover: #5e5e5e;
 }
\ No newline at end of file
diff --git a/src/css/scrollbar.css b/src/css/scrollbar.css
new file mode 100644
index 0000000..3372bb1
--- /dev/null
+++ b/src/css/scrollbar.css
@@ -0,0 +1,27 @@
+/* width */
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+	background: var(--scrollbar-background);
+	border-radius: 5px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+	background: var(--scrollbar-handle);
+	border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	background: var(--scrollbar-handle-hover);
+}
+
+
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-handle) var(--scrollbar-background);
+}
\ No newline at end of file