diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml
index 8bd2fe2cbe63581d52465000e3eb03df21cbfdb4..c59dcddfe96a0b7292436d6c26f4561922d87762 100644
--- a/gui/components/StatusBox.qml
+++ b/gui/components/StatusBox.qml
@@ -12,30 +12,18 @@ Item {
     id: statusbox
     anchors.fill: parent
 
-    VPNState {
-        id: vpn
-    }
-
     Rectangle {
-        color: customTheme.bgColor
+        id: statusBoxBackground
         anchors.fill: parent
+        Image {
+            id: backgroundImage
+            anchors.fill: parent
+            source: customTheme.bgDisconnected
+        }
     }
 
-    Rectangle {
-        id: statusBoxBackground
-        color: customTheme.fgColor
-        height: 300
-        radius: 10
-        antialiasing: true
-        anchors {
-            fill: parent
-            margins: 20
-            bottomMargin: 30
-        }
-        border {
-            color: Theme.accentOff
-            width: 4
-        }
+    VPNState {
+        id: vpn
     }
 
     ToolButton {
@@ -131,10 +119,10 @@ Item {
             source: customTheme.iconOff
             anchors.horizontalCenter: parent.horizontalCenter
             fillMode: Image.PreserveAspectFit
-            OpacityAnimator on opacity{
+            OpacityAnimator on opacity {
                 id: fadeIn
-                from: 0.5;
-                to: 1;
+                from: 0.5
+                to: 1
                 duration: 1000
             }
             onStatusChanged: {
diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml
index 4882d0a20ef1f15a8a9b29309ac430300d426bfc..72219b3a3dd6729c04b87108de7ddc24198920aa 100644
--- a/gui/components/VPNState.qml
+++ b/gui/components/VPNState.qml
@@ -35,8 +35,8 @@ StateGroup {
                 text: getSnowflakeTag()
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentConnecting
+                target: backgroundImage
+                source: customTheme.bgConnecting
             }
             PropertyChanges {
                 target: connectionImage
@@ -52,8 +52,8 @@ StateGroup {
                 font.pixelSize: Theme.fontSize * 1.5
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentConnecting
+                target: backgroundImage
+                source: customTheme.bgConnecting
             }
             PropertyChanges {
                 target: connectionImage
@@ -86,8 +86,8 @@ StateGroup {
                 visible: true
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentOff
+                target: backgroundImage
+                source: customTheme.bgDisconnected
             }
             PropertyChanges {
                 target: connectionImage
@@ -121,8 +121,8 @@ StateGroup {
                 visible: true
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentOn
+                target: backgroundImage
+                source: customTheme.bgConnected
             }
             PropertyChanges {
                 target: connectionImage
@@ -157,8 +157,8 @@ StateGroup {
                 visible: true
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentConnecting
+                target: backgroundImage
+                source: customTheme.bgConnecting
             }
             PropertyChanges {
                 target: connectionImage
@@ -201,8 +201,8 @@ StateGroup {
             }
             */
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentConnecting
+                target: backgroundImage
+                source: customTheme.bgConnecting
             }
             PropertyChanges {
                 target: systray
@@ -221,30 +221,38 @@ StateGroup {
     transitions: [
         Transition {
             to: on
-            ColorAnimation {
-                target: statusBoxBackground
-                duration: 500
+            OpacityAnimator {
+                target: backgroundImage
+                from: 0.8;
+                to: 1;
+                duration: 500;
             }
         },
         Transition {
             to: off
-            ColorAnimation {
-                target: statusBoxBackground
-                duration: 500
+            OpacityAnimator {
+                target: backgroundImage
+                from: 0.8;
+                to: 1;
+                duration: 500;
             }
         },
         Transition {
             to: starting
-            ColorAnimation {
-                target: statusBoxBackground
-                duration: 500
+            OpacityAnimator {
+                target: backgroundImage
+                from: 0.8;
+                to: 1;
+                duration: 500;
             }
         },
         Transition {
             to: stopping
-            ColorAnimation {
-                target: statusBoxBackground
-                duration: 500
+            OpacityAnimator {
+                target: backgroundImage
+                from: 0.8;
+                to: 1;
+                duration: 500;
             }
         }
     ]