diff --git a/.config/quickshell/modules/common/widgets/ButtonGroup.qml b/.config/quickshell/modules/common/widgets/ButtonGroup.qml
index 2b997acf9..a1570c6af 100644
--- a/.config/quickshell/modules/common/widgets/ButtonGroup.qml
+++ b/.config/quickshell/modules/common/widgets/ButtonGroup.qml
@@ -6,8 +6,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 /**
- * A container that supports bouncy children. 
- * https://m3.material.io/components/button-groups/overview
+ * A container that supports GroupButton children for bounciness.
+ * See https://m3.material.io/components/button-groups/overview
  */
 Rectangle {
     id: root
diff --git a/.config/quickshell/modules/common/widgets/CircularProgress.qml b/.config/quickshell/modules/common/widgets/CircularProgress.qml
index 480098db1..19a838c4c 100644
--- a/.config/quickshell/modules/common/widgets/CircularProgress.qml
+++ b/.config/quickshell/modules/common/widgets/CircularProgress.qml
@@ -1,9 +1,12 @@
-// From https://github.com/rafzby/circular-progressbar
+// From https://github.com/rafzby/circular-progressbar with modifications
 // License: LGPL-3.0 - A copy can be found in `licenses` folder of repo
-// Modified so it looks like in Material 3: https://m3.material.io/components/progress-indicators/specs
+
 import QtQuick
 import "root:/modules/common"
 
+/**
+ * Material 3 circular progress. See https://m3.material.io/components/progress-indicators/specs
+ */
 Item {
     id: root
 
diff --git a/.config/quickshell/modules/common/widgets/DialogButton.qml b/.config/quickshell/modules/common/widgets/DialogButton.qml
index 062fa3dba..977e9b95d 100644
--- a/.config/quickshell/modules/common/widgets/DialogButton.qml
+++ b/.config/quickshell/modules/common/widgets/DialogButton.qml
@@ -6,13 +6,19 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
 
+/**
+ * Material 3 dialog button. See https://m3.material.io/components/dialogs/overview
+ */
 RippleButton {
     id: button
 
     property string buttonText
     implicitHeight: 30
     implicitWidth: buttonTextWidget.implicitWidth + 15 * 2
-    buttonRadius: Appearance.rounding.full
+    buttonRadius: Appearance?.rounding.full ?? 9999
+
+    property color colEnabled: Appearance?.m3colors.m3primary ?? "#65558F"
+    property color colDisabled: Appearance?.m3colors.m3outline ?? "#8D8C96"
 
     contentItem: StyledText {
         id: buttonTextWidget
@@ -21,8 +27,8 @@ RippleButton {
         anchors.rightMargin: 15
         text: buttonText
         horizontalAlignment: Text.AlignHCenter
-        font.pixelSize: Appearance.font.pixelSize.small
-        color: button.enabled ? Appearance.m3colors.m3primary : Appearance.m3colors.m3outline
+        font.pixelSize: Appearance?.font.pixelSize.small ?? 12
+        color: button.enabled ? button.colEnabled : button.colDisabled
 
         Behavior on color {
             animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
diff --git a/.config/quickshell/modules/common/widgets/DragManager.qml b/.config/quickshell/modules/common/widgets/DragManager.qml
index 8876c18f2..087729edb 100644
--- a/.config/quickshell/modules/common/widgets/DragManager.qml
+++ b/.config/quickshell/modules/common/widgets/DragManager.qml
@@ -4,7 +4,10 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
-MouseArea { // Flick to dismiss
+/**
+ * A convenience MouseArea for handling drag events.
+ */
+MouseArea {
     id: root
     hoverEnabled: true
     acceptedButtons: Qt.LeftButton
diff --git a/.config/quickshell/modules/common/widgets/FlowButtonGroup.qml b/.config/quickshell/modules/common/widgets/FlowButtonGroup.qml
index d5faf4306..ec9526ef2 100644
--- a/.config/quickshell/modules/common/widgets/FlowButtonGroup.qml
+++ b/.config/quickshell/modules/common/widgets/FlowButtonGroup.qml
@@ -1,5 +1,8 @@
 import QtQuick
 
+/** 
+ * This is just to make sure `RippleButton`s can be used in a Flow layout.
+ */
 Flow {
     property int clickIndex: -1
 }
diff --git a/.config/quickshell/modules/common/widgets/GroupButton.qml b/.config/quickshell/modules/common/widgets/GroupButton.qml
index f9d0195ca..4b033a72b 100644
--- a/.config/quickshell/modules/common/widgets/GroupButton.qml
+++ b/.config/quickshell/modules/common/widgets/GroupButton.qml
@@ -8,6 +8,10 @@ import QtQuick.Layouts
 import Quickshell.Io
 import Quickshell.Widgets
 
+/**
+ * Material 3 button with expressive bounciness. 
+ * See https://m3.material.io/components/button-groups/overview
+ */
 Button {
     id: root
     property bool toggled
@@ -35,12 +39,12 @@ Button {
         animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
     }
 
-    property color colBackground: ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
-    property color colBackgroundHover: Appearance.colors.colLayer1Hover
-    property color colBackgroundActive: Appearance.colors.colLayer1Active
-    property color colBackgroundToggled: Appearance.m3colors.m3primary
-    property color colBackgroundToggledHover: Appearance.colors.colPrimaryHover
-    property color colBackgroundToggledActive: Appearance.colors.colPrimaryActive
+    property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
+    property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
+    property color colBackgroundActive: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
+    property color colBackgroundToggled: Appearance?.m3colors.m3primary ?? "#65558F"
+    property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"
+    property color colBackgroundToggledActive: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
 
     property real radius: root.down ? root.buttonRadiusPressed : root.buttonRadius
     property color color: root.enabled ? (root.toggled ? 
diff --git a/.config/quickshell/modules/common/widgets/MaterialSymbol.qml b/.config/quickshell/modules/common/widgets/MaterialSymbol.qml
index ff6b4f66e..dbbfff009 100644
--- a/.config/quickshell/modules/common/widgets/MaterialSymbol.qml
+++ b/.config/quickshell/modules/common/widgets/MaterialSymbol.qml
@@ -4,20 +4,20 @@ import QtQuick.Layouts
 
 Text {
     id: root
-    property real iconSize: Appearance.font.pixelSize.small
+    property real iconSize: Appearance?.font.pixelSize.small ?? 16
     property real fill: 0
     renderType: Text.NativeRendering
     font.hintingPreference: Font.PreferFullHinting
     verticalAlignment: Text.AlignVCenter
-    font.family: Appearance.font.family.iconMaterial
+    font.family: Appearance?.font.family.iconMaterial ?? "Material Symbols Rounded"
     font.pixelSize: iconSize
     color: Appearance.m3colors.m3onBackground
 
     Behavior on fill {
         NumberAnimation {
-            duration: Appearance.animation.elementMoveFast.duration
-            easing.type: Appearance.animation.elementMoveFast.type
-            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+            duration: Appearance?.animation.elementMoveFast.duration ?? 200
+            easing.type: Appearance?.animation.elementMoveFast.type ?? Easing.BezierSpline
+            easing.bezierCurve: Appearance?.animation.elementMoveFast.bezierCurve ?? [0.34, 0.80, 0.34, 1.00, 1, 1]
         }
     }
 
diff --git a/.config/quickshell/modules/common/widgets/MenuButton.qml b/.config/quickshell/modules/common/widgets/MenuButton.qml
index 41bd762ef..0c4c4f411 100644
--- a/.config/quickshell/modules/common/widgets/MenuButton.qml
+++ b/.config/quickshell/modules/common/widgets/MenuButton.qml
@@ -7,7 +7,7 @@ import Quickshell
 import Quickshell.Io
 
 RippleButton {
-    id: button
+    id: root
 
     buttonRadius: 0
     implicitHeight: 36
@@ -18,10 +18,10 @@ RippleButton {
         anchors.fill: parent
         anchors.leftMargin: 14
         anchors.rightMargin: 14
-        text: button.buttonText
+        text: root.buttonText
         horizontalAlignment: Text.AlignLeft
         font.pixelSize: Appearance.font.pixelSize.small
-        color: button.enabled ? Appearance.m3colors.m3onSurface : Appearance.m3colors.m3outline
+        color: root.enabled ? Appearance.m3colors.m3onSurface : Appearance.m3colors.m3outline
 
         Behavior on color {
             animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
diff --git a/.config/quickshell/modules/common/widgets/NotificationGroupExpandButton.qml b/.config/quickshell/modules/common/widgets/NotificationGroupExpandButton.qml
index 5de02a98e..bd1a8e96d 100644
--- a/.config/quickshell/modules/common/widgets/NotificationGroupExpandButton.qml
+++ b/.config/quickshell/modules/common/widgets/NotificationGroupExpandButton.qml
@@ -12,16 +12,17 @@ RippleButton { // Expand button
     id: root
     required property int count
     required property bool expanded
-    property real fontSize: Appearance.font.pixelSize.small
+    property real fontSize: Appearance?.font.pixelSize.small ?? 12
+    property real iconSize: Appearance?.font.pixelSize.normal ?? 16
     implicitHeight: fontSize + 4 * 2
     implicitWidth: Math.max(contentItem.implicitWidth + 5 * 2, 30)
     Layout.alignment: Qt.AlignVCenter
     Layout.fillHeight: false
 
     buttonRadius: Appearance.rounding.full
-    colBackground: ColorUtils.mix(Appearance.colors.colLayer2, Appearance.colors.colLayer2Hover, 0.5)
-    colBackgroundHover: Appearance.colors.colLayer2Hover
-    colRipple: Appearance.colors.colLayer2Active
+    colBackground: ColorUtils.mix(Appearance?.colors.colLayer2, Appearance?.colors.colLayer2Hover, 0.5)
+    colBackgroundHover: Appearance?.colors.colLayer2Hover ?? "#E5DFED"
+    colRipple: Appearance?.colors.colLayer2Active ?? "#D6CEE2"
 
     contentItem: Item {
         anchors.centerIn: parent
@@ -38,7 +39,7 @@ RippleButton { // Expand button
             }
             MaterialSymbol {
                 text: "keyboard_arrow_down"
-                iconSize: Appearance.font.pixelSize.normal
+                iconSize: root.iconSize
                 color: Appearance.colors.colOnLayer2
                 rotation: expanded ? 180 : 0
                 Behavior on rotation {
diff --git a/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml b/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml
index de80d185b..accf17ab4 100644
--- a/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml
+++ b/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml
@@ -10,6 +10,8 @@ ColumnLayout {
     required property var tabButtonList // Something like [{"icon": "notifications", "name": qsTr("Notifications")}, {"icon": "volume_up", "name": qsTr("Volume mixer")}]
     required property var externalTrackedTab
     property bool enableIndicatorAnimation: false
+    property color colIndicator: Appearance?.m3colors.m3primary ?? "#65558F"
+    property color colBorder: Appearance?.m3colors.m3outlineVariant ?? "#C6C6D0"
     signal currentIndexChanged(int index)
 
     TabBar {
@@ -67,15 +69,15 @@ ColumnLayout {
 
             x: tabBar.currentIndex * fullTabSize + (fullTabSize - targetWidth) / 2
 
-            color: Appearance.m3colors.m3primary
-            radius: Appearance.rounding.full
+            color: root.colIndicator
+            radius: Appearance?.rounding.full ?? 9999
 
             Behavior on x {
-                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
             }
 
             Behavior on implicitWidth {
-                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
             }
         }
     }
@@ -83,7 +85,7 @@ ColumnLayout {
     Rectangle { // Tabbar bottom border
         id: tabBarBottomBorder
         Layout.fillWidth: true
-        height: 1
-        color: Appearance.m3colors.m3outlineVariant
+        implicitHeight: 1
+        color: root.colBorder
     }
 }
diff --git a/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml b/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml
index 58424032c..3a2879adc 100644
--- a/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml
+++ b/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml
@@ -17,10 +17,16 @@ TabButton {
     property int rippleDuration: 1200
     height: buttonBackground.height
 
+    property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
+    property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
+    property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
+    property color colActive: Appearance?.m3colors.m3primary ?? "#65558F"
+    property color colInactive: Appearance?.colors.colOnLayer1 ?? "#45464F"
+
     component RippleAnim: NumberAnimation {
         duration: rippleDuration
-        easing.type: Appearance.animation.elementMoveEnter.type
-        easing.bezierCurve: Appearance.animationCurves.standardDecel
+        easing.type: Appearance?.animation.elementMoveEnter.type
+        easing.bezierCurve: Appearance?.animationCurves.standardDecel
     }
 
     MouseArea {
@@ -86,9 +92,9 @@ TabButton {
 
     background: Rectangle {
         id: buttonBackground
-        radius: Appearance.rounding.small
+        radius: Appearance?.rounding.small
         implicitHeight: 50
-        color: (button.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
+        color: (button.hovered ? button.colBackgroundHover : button.colBackground)
         layer.enabled: true
         layer.effect: OpacityMask {
             maskSource: Rectangle {
@@ -99,14 +105,14 @@ TabButton {
         }
         
         Behavior on color {
-            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+            animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
         }
 
         Rectangle {
             id: ripple
 
-            radius: Appearance.rounding.full
-            color: Appearance.colors.colLayer1Active
+            radius: Appearance?.rounding.full ?? 9999
+            color: button.colRipple
             opacity: 0
 
             transform: Translate {
@@ -126,22 +132,22 @@ TabButton {
                 Layout.alignment: Qt.AlignHCenter
                 horizontalAlignment: Text.AlignHCenter
                 text: buttonIcon
-                iconSize: Appearance.font.pixelSize.hugeass
+                iconSize: Appearance?.font.pixelSize.hugeass ?? 25
                 fill: selected ? 1 : 0
-                color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
+                color: selected ? button.colActive : button.colInactive
                 Behavior on color {
-                    animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                    animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
                 }
             }
             StyledText {
                 id: buttonTextWidget
                 Layout.alignment: Qt.AlignHCenter
                 horizontalAlignment: Text.AlignHCenter
-                font.pixelSize: Appearance.font.pixelSize.small
-                color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
+                font.pixelSize: Appearance?.font.pixelSize.small
+                color: selected ? button.colActive : button.colInactive
                 text: buttonText
                 Behavior on color {
-                    animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                    animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
                 }
             }
         }
diff --git a/.config/quickshell/modules/common/widgets/RippleButton.qml b/.config/quickshell/modules/common/widgets/RippleButton.qml
index 4d38236e9..e6ca5a3fd 100644
--- a/.config/quickshell/modules/common/widgets/RippleButton.qml
+++ b/.config/quickshell/modules/common/widgets/RippleButton.qml
@@ -22,7 +22,7 @@ Button {
     property bool rippleEnabled: true
     property var altAction
 
-    property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "#00000000"
+    property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
     property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
     property color colBackgroundToggled: Appearance?.m3colors.m3primary ?? "#65558F"
     property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"