diff --git a/example.html b/example.html
index 351d7eb..0001d12 100644
--- a/example.html
+++ b/example.html
@@ -13,11 +13,13 @@
         </div>
         <div class="box">
             <div class="sidebar">
-                <button class="sb_button">lorem ipsum</button>
-                <button class="sb_button">dolor sit amet</button>
+                <a href="#top"><button class="sb_button">top of page</button></a>
+                <a href="#mid"><button class="sb_button">middle of page</button></a>
+                <a href="#bot"><button class="sb_button">bottom of page</button></a>
             </div>
             <div class="box-content-1">
                 <div class="box-v">
+                    <section id="top">
                     <div class="box-content-1">
                         <h1>Hello yaru!</h1>
                         <h2>Hello yaru!</h2>
@@ -25,6 +27,7 @@
                         <p>yaru.css is a css library attempting to recreate the Ubuntu Yaru style in a web format. it also works as it's own implementation of something like bootstrap with built in GTK style elements like Boxes and Popovers. This is a simple test page showing the different elements.</p>
                         <button>Test</button>
                     </div>
+                    <section id="mid">
                     <div class="box-content-1">
                         <h1>Hello again yaru!</h1>
                         <h2>Hello again yaru!</h2>
@@ -32,6 +35,24 @@
                         <p>You may have noticed this is a different item. yaru.css has the "box-v" div class for stacking different "box-content-1"s ontop of eachother, as long as the box-v is wrapped inside a box-content-1 of it's own. If you do not want this centering, just use two individual "box-content-1" classes.</p>
                         <button>Test again</button>
                     </div>
+                    <div class="box-content-1">
+                        <div class="col-btn">
+                            <button>Lorum ipsum</button>
+                            <button>dolor sit amet</button>
+                            <button>idk</button>
+                            <button>Lorum ipsum</button>
+                            <button>dolor sit amet</button>
+                            <button>idk</button>
+                            <button>Lorum ipsum</button>
+                            <button>dolor sit amet</button>
+                            <button>idk</button>
+                            <button>Lorum ipsum</button>
+                            <button>dolor sit amet</button>
+                            <button>idk</button>
+                        </div>
+                        <section id="bot"></section>
+                    </div>
+
                 </div>               
             </div>
         </div>
diff --git a/exampledark.html b/exampledark.html
index 2d6690e..fe4e1c8 100644
--- a/exampledark.html
+++ b/exampledark.html
@@ -13,11 +13,13 @@
         </div>
         <div class="box">
             <div class="sidebar">
-                <button class="sb_button">lorem ipsum</button>
-                <button class="sb_button">dolor sit amet</button>
+                <a href="#top"><button class="sb_button">top of page</button></a>
+                <a href="#mid"><button class="sb_button">middle of page</button></a>
+                <a href="#bot"><button class="sb_button">bottom of page</button></a>
             </div>
             <div class="box-content-1">
                 <div class="box-v">
+                    <section id="top">
                     <div class="box-content-1">
                         <h1>Hello yaru!</h1>
                         <h2>Hello yaru!</h2>
@@ -25,6 +27,7 @@
                         <p>yaru.css is a css library attempting to recreate the Ubuntu Yaru style in a web format. it also works as it's own implementation of something like bootstrap with built in GTK style elements like Boxes and Popovers. This is a simple test page showing the different elements.</p>
                         <button>Test</button>
                     </div>
+                    <section id="mid">
                     <div class="box-content-1">
                         <h1>Hello again yaru!</h1>
                         <h2>Hello again yaru!</h2>
@@ -32,6 +35,24 @@
                         <p>You may have noticed this is a different item. yaru.css has the "box-v" div class for stacking different "box-content-1"s ontop of eachother, as long as the box-v is wrapped inside a box-content-1 of it's own. If you do not want this centering, just use two individual "box-content-1" classes.</p>
                         <button>Test again</button>
                     </div>
+                    <div class="box-content-1">
+                        <div class="col-btn">
+                            <button>Lorum ipsum</button>
+                            <button>dolor sit amet</button>
+                            <button>idk</button>
+                            <button>Lorum ipsum</button>
+                            <button>dolor sit amet</button>
+                            <button>idk</button>
+                            <button>Lorum ipsum</button>
+                            <button>dolor sit amet</button>
+                            <button>idk</button>
+                            <button>Lorum ipsum</button>
+                            <button>dolor sit amet</button>
+                            <button>idk</button>
+                        </div>
+                        <section id="bot"></section>
+                    </div>
+
                 </div>               
             </div>
         </div>
diff --git a/scss/yaru-dark.scss b/scss/yaru-dark.scss
index a33d3a4..30b0179 100644
--- a/scss/yaru-dark.scss
+++ b/scss/yaru-dark.scss
@@ -3,6 +3,10 @@
 
 $variant: 'dark';
 
+html {
+    scroll-behavior: smooth;
+}
+
 body {
     background-color: $bg_color;
     color: $fg_color;
@@ -52,6 +56,9 @@ button:hover {
 };
 
 .header {
+    position: fixed;
+    top: 0;
+    z-index: 1000;
     width: 100%;
     padding: 10px;
     background-color: $headerbar_bg_color;
@@ -62,17 +69,19 @@ button:hover {
 }
 
 .sidebar {
+    position: fixed;
+    top: 50px;
     width: 200px;
     height: 100%;
-    background-color: $sidebar_bg_color;
+    background-color: $headerbar_bg_color;
     color: $text_color;
     border-radius: 0 20px 20px 0;
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
+    overflow-y: hidden;
 }
-
 .sb_button {
     min-height: 48px;
     width: 185px;
@@ -121,3 +130,23 @@ button:hover {
     max-width: 400px;
     margin: auto;
 }
+
+.col-btn {
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+}
+
+.col-btn:first-child {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.col-btn:not(:first-child):not(:last-child) {
+    border-radius: 0;
+}
+
+.col-btn:last-child {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
\ No newline at end of file
diff --git a/scss/yaru-light.scss b/scss/yaru-light.scss
index e58baad..69535ad 100644
--- a/scss/yaru-light.scss
+++ b/scss/yaru-light.scss
@@ -4,6 +4,11 @@
 
 $variant: 'light';
 
+html {
+    scroll-behavior: smooth;
+}
+
+
 body {
     background-color: $bg_color;
     color: $fg_color;
@@ -53,6 +58,9 @@ button:hover {
 };
 
 .header {
+    position: fixed;
+    top: 0;
+    z-index: 1000;
     width: 100%;
     padding: 10px;
     background-color: $headerbar_bg_color;
@@ -63,8 +71,10 @@ button:hover {
 }
 
 .sidebar {
+    position: fixed;
+    top: 50px;
     width: 200px;
-    height: 100%;
+    height: calc(100vh - 50px);
     background-color: $porcelain;
     color: $text_color;
     border-radius: 0 20px 20px 0;
@@ -72,6 +82,7 @@ button:hover {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    overflow-y: hidden;
 }
 
 .sb_button {
@@ -123,3 +134,26 @@ button:hover {
     margin: auto;
 }
 
+.col-btn {
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+}
+
+.col-btn:first-child {
+    background-color: $porcelain;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.col-btn:not(:first-child):not(:last-child) {
+    border-radius: 0;
+    background-color: $porcelain;
+}
+
+.col-btn:last-child {
+    background-color: $porcelain;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+