diff --git a/README.md b/README.md
index b2b9a73..490b703 100644
--- a/README.md
+++ b/README.md
@@ -23,5 +23,36 @@ Manage Study plans|/local/treestudyplan/edit-plan.php||en
 ```
 
 ## Dev Notepad
+### Size matching and grid view
 Link to jsfiddle for size matching with different scroll area (frozen line headings): https://jsfiddle.net/pmkuipers/sfweghr1/4/
-Use proper grid styling for column resizing (see same fiddle)
\ No newline at end of file
+Use proper grid styling for column resizing (see same fiddle)
+
+
+### Scroll bar syling
+example style with cross-browser support
+```
+:root{
+  --primary: #006DDD;
+ 
+}
+div.scroll {
+	height: 50em;
+	overflow-y: scroll;
+  	scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
+  	scrollbar-width: thin;
+}
+div.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+/* Track */
+div.scroll::-webkit-scrollbar-track {
+  background:  color-mix(in srgb, var(--primary) 20%, white);
+}
+ 
+/* Handle */
+div.scroll::-webkit-scrollbar-thumb {
+  background:var(--primary); 
+}
+
+```
\ No newline at end of file