diff --git a/battery.xcf b/battery.xcf
deleted file mode 100644
index ff30cd7..0000000
Binary files a/battery.xcf and /dev/null differ
diff --git a/package/contents/icons/battery_100.png b/package/contents/icons/battery_100.png
deleted file mode 100644
index 941a3ee..0000000
Binary files a/package/contents/icons/battery_100.png and /dev/null differ
diff --git a/package/contents/icons/battery_20.png b/package/contents/icons/battery_20.png
deleted file mode 100644
index 7e4e5c4..0000000
Binary files a/package/contents/icons/battery_20.png and /dev/null differ
diff --git a/package/contents/icons/battery_40.png b/package/contents/icons/battery_40.png
deleted file mode 100644
index 4621823..0000000
Binary files a/package/contents/icons/battery_40.png and /dev/null differ
diff --git a/package/contents/icons/battery_60.png b/package/contents/icons/battery_60.png
deleted file mode 100644
index 9353415..0000000
Binary files a/package/contents/icons/battery_60.png and /dev/null differ
diff --git a/package/contents/icons/battery_80.png b/package/contents/icons/battery_80.png
deleted file mode 100644
index 52750b8..0000000
Binary files a/package/contents/icons/battery_80.png and /dev/null differ
diff --git a/package/contents/icons/battery_charging.png b/package/contents/icons/battery_charging.png
deleted file mode 100644
index 3e3b6a8..0000000
Binary files a/package/contents/icons/battery_charging.png and /dev/null differ
diff --git a/package/contents/icons/battery_nc.png b/package/contents/icons/battery_nc.png
deleted file mode 100644
index 1b7c6ab..0000000
Binary files a/package/contents/icons/battery_nc.png and /dev/null differ
diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml
index 4a2607e..32ee1bb 100644
--- a/package/contents/ui/main.qml
+++ b/package/contents/ui/main.qml
@@ -2,6 +2,7 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.3
 import org.kde.plasma.plasmoid 2.0
 import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.kirigami 2.14 as Kirigami
 
 Item {
   id: main
@@ -24,34 +25,70 @@ Item {
   Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation
 
   Plasmoid.compactRepresentation: Item {
-    Layout.minimumWidth: units.iconSizes.medium
+    Layout.minimumWidth: units.iconSizes.large
+    Layout.alignment: Qt.AlignHCenter
 
-    Image {
+    Rectangle { // battery
+      id: container
       anchors.fill: parent
-      smooth: true
-      fillMode: Image.PreserveAspectFit
-      source: batteryIcon()
+      anchors.rightMargin: 15
+      anchors.topMargin: 2
+      anchors.bottomMargin: 2
+      color: "transparent"
+      border.color: PlasmaCore.Theme.textColor
+      radius: 4
       Plasmoid.toolTipMainText: "battery level: " + batteryLevel()
       Plasmoid.toolTipSubText: "polling rate: " + pollingrate + " seconds"
-    }
 
-    function batteryIcon() {
-      let iconName = "battery_100"
+      Item {
+        anchors.fill: parent
+        anchors.margins: 2
+        Rectangle { // battery fill
+          anchors.left: parent.left
+          anchors.top: parent.top
+          anchors.bottom: parent.bottom
+          color: batteryColor()
+          width: parent.width * Math.max(0, Math.min(batteryPercent, 100)) / 100
+        }
+      }
+    }
+    Rectangle { // battery cap
+      anchors.left: container.right
+      anchors.leftMargin: 1
+      anchors.verticalCenter: parent.verticalCenter
+      radius: 4
+      height: parent.height / 3
+      width: 2
+      color: PlasmaCore.Theme.textColor
+    }
+    Rectangle { // symbol: headset
+      anchors.fill: parent
+      anchors.rightMargin: 23
+      color: "transparent"
+      Kirigami.Icon {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.right
+        height: container.height * 0.45
+        source: "audio-headset-symbolic"
+      }
+    }
+    
+
+    function batteryColor() {
+      let color = "red"
       if(batteryPercent == -1) // charging
-        iconName = "battery_charging"
+        color = "green";
       else if(batteryPercent == -2) // not connected
-        iconName = "battery_nc";
+        color = "red";
       else if(batteryPercent > 80)
-        iconName = "battery_100";
+        color = "green";
       else if(batteryPercent > 60)
-        iconName = "battery_80";
+        color = "green";
       else if(batteryPercent > 40)
-        iconName = "battery_60";
+        color = "yellow";
       else if(batteryPercent > 20)
-        iconName = "battery_40";
-      else
-        iconName = "battery_20";
-      return "../icons/" + iconName + ".png";
+        color = "red";
+      return color;
     }
 
     function batteryLevel() {