diff --git a/style/mixins.scss b/style/mixins.scss
new file mode 100644
index 0000000..4008733
--- /dev/null
+++ b/style/mixins.scss
@@ -0,0 +1,27 @@
+@mixin dial($_fg, $_bg, $margin, $padding, $font-size, $icon-font-size) {
+  color: $_fg;
+  background-color: $_bg;
+  margin: $margin;
+  padding: $padding;
+  font-size: $font-size;
+
+  label, icon {
+    font-family: 'Symbols Nerd Font Mono';
+    font-size: $icon-font-size;
+    color: $icon-color;
+  }
+}
+
+@mixin bar-dial($_fg, $_bg) {
+  @include dial($_fg, $_bg, 0px, 0px, 5px, 16px)
+}
+
+@mixin panel-dial($_fg, $_bg) {
+  @include dial($_fg, $_bg, 0px, 10px, 8px, 32px);
+  margin-left: 10px;
+  border-radius: 10px;
+  .resource-dial {
+    min-width: 96px;
+    min-height: 96px;
+  }
+}
diff --git a/style/style.css b/style/style.css
index e2ba035..c3279e1 100644
--- a/style/style.css
+++ b/style/style.css
@@ -4,16 +4,62 @@
 bar {
   background: transparent; }
 
-box.workspaces {
+centerbox > box.left box.workspaces {
   min-height: 50px;
   background: #161616;
-  padding: 5px; }
-  box.workspaces box > button {
+  padding: 5px;
+  padding-top: 15px; }
+  centerbox > box.left box.workspaces box > button {
     min-width: 10px;
     min-height: 10px;
     margin: 5px;
     background-color: #262626; }
-    box.workspaces box > button.occupied {
+    centerbox > box.left box.workspaces box > button.occupied {
       background-color: #393939; }
-    box.workspaces box > button.focused {
+    centerbox > box.left box.workspaces box > button.focused {
       background-color: #FF7EB6; }
+
+centerbox > box.right {
+  min-height: 50px;
+  background: #161616; }
+  centerbox > box.right box.sliders {
+    margin: 5px; }
+    centerbox > box.right box.sliders box.volume-slider > button {
+      font-size: 20px;
+      margin: 5px; }
+    centerbox > box.right box.sliders box.volume-slider > .volume-slider {
+      /* selecting this as `slider` doesn't work, for some reason.*/
+      min-width: 120px;
+      min-height: 10px; }
+      centerbox > box.right box.sliders box.volume-slider > .volume-slider trough {
+        min-height: 10px;
+        min-width: 120px;
+        background: #262626; }
+      centerbox > box.right box.sliders box.volume-slider > .volume-slider highlight {
+        background: #33B1FF; }
+  centerbox > box.right .battery-container {
+    padding-left: 10px;
+    padding-right: 10px; }
+    centerbox > box.right .battery-container .battery-dial {
+      min-width: 40px;
+      min-height: 40px;
+      color: #42be65;
+      background-color: #161616;
+      margin: 0px;
+      padding: 0px;
+      font-size: 5px; }
+      centerbox > box.right .battery-container .battery-dial label, centerbox > box.right .battery-container .battery-dial icon {
+        font-family: 'Symbols Nerd Font Mono';
+        font-size: 16px;
+        color: #f2f4f8; }
+  centerbox > box.right separator {
+    background: #262626;
+    padding: 1px;
+    margin-top: 10px;
+    margin-bottom: 10px; }
+  centerbox > box.right box.clock {
+    margin: 10px;
+    background: #161616; }
+    centerbox > box.right box.clock .datetime {
+      margin: 1px;
+      font-size: 10pt; }
diff --git a/style/style.scss b/style/style.scss
index 6b176e3..3dbf275 100644
--- a/style/style.scss
+++ b/style/style.scss
@@ -3,5 +3,6 @@
 }
 
 @import 'colors.scss';
+@import 'mixins.scss';
 
 @import './widgets/bar.scss'
diff --git a/style/widgets/bar.scss b/style/widgets/bar.scss
index ae13c07..7ba7c2f 100644
--- a/style/widgets/bar.scss
+++ b/style/widgets/bar.scss
@@ -1,26 +1,89 @@
 $height: 50px;
 
 bar {
-  background: transparent
+  background: transparent;
 }
 
-box.workspaces {
-  min-height: $height;
-  background: $bg;
-  padding: 5px;
+centerbox {
+  > box.left {
+    box.workspaces {
+      min-height: $height;
+      background: $bg;
+      padding: 5px;
+      padding-top: 15px;
 
-  box > button {
-    min-width: 10px;
-    min-height: 10px;
-    margin: 5px;
-    background-color: $bg-alt-1;
+      box > button {
+        min-width: 10px;
+        min-height: 10px;
+        margin: 5px;
+        background-color: $bg-alt-1;
 
-    &.occupied {
-      background-color: $bg-alt-2;
+        &.occupied {
+          background-color: $bg-alt-2;
+        }
+
+        &.focused {
+          background-color: $hl;
+        }
+      }
+    }
+  }
+
+  > box.right {
+    min-height: $height;
+    background: $bg;
+
+    box.sliders {
+      margin: 5px;
+      box.volume-slider {
+        > button {
+          font-size: 20px; 
+          margin: 5px;
+        }
+        
+        > .volume-slider { /* selecting this as `slider` doesn't work, for some reason.*/
+          min-width: 120px;
+          min-height: 10px;
+
+          & trough {
+            min-height: 10px;
+            min-width: 120px;
+            background: $bg-alt-1;
+          }
+
+          & highlight {
+            background: $hl-alt-1;
+          }
+        }
+      } 
     }
 
-    &.focused {
-      background-color: $hl;
+    .battery-container {
+      padding-left: 10px;
+      padding-right: 10px;
+      .battery-dial {
+        min-width: 40px;
+        min-height: 40px;
+        @include bar-dial($battery-dial-bg, $battery-dial-fg);
+      }    
+    }  
+
+    separator {
+      background: $bg-alt-1;
+      padding: 1px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    box.clock {
+      margin: 10px;
+      background: $bg;
+      
+      .datetime {
+        margin: 1px;
+        font-size: 10pt;
+      }
     }
   }
 }
+