diff --git a/assets/graphics/gui/toggler_icons.tga b/assets/graphics/gui/toggler_icons.tga
new file mode 100644
index 000000000..2f58e24e5
--- /dev/null
+++ b/assets/graphics/gui/toggler_icons.tga
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3f553b6af195ace9835a040d70eab026d27af46b8cdea7f916dc55bc8613bb5
+size 1586
diff --git a/src/net/torvald/terrarum/modulebasegame/ui/UIGraphicsControlPanel.kt b/src/net/torvald/terrarum/modulebasegame/ui/UIGraphicsControlPanel.kt
index 9ab44dd7d..c77eace3f 100644
--- a/src/net/torvald/terrarum/modulebasegame/ui/UIGraphicsControlPanel.kt
+++ b/src/net/torvald/terrarum/modulebasegame/ui/UIGraphicsControlPanel.kt
@@ -79,7 +79,7 @@ class UIGraphicsControlPanel(remoCon: UIRemoCon?) : UICanvas() {
             }) to { _, _ -> }
         }
         else if (args.startsWith("toggle")) {
-            UIItemToggleButton(this, x, y, App.getConfigBoolean(optionName)) to { it: UIItem, optionStr: String ->
+            UIItemToggleButton(this, x, y, spinnerWidth, App.getConfigBoolean(optionName)) to { it: UIItem, optionStr: String ->
                 (it as UIItemToggleButton).clickOnceListener = { _, _, _ ->
                     it.toggle()
                     App.setConfig(optionStr, it.getStatus())
diff --git a/src/net/torvald/terrarum/tests/UIElemTest.kt b/src/net/torvald/terrarum/tests/UIElemTest.kt
index 665c90747..b0dffcc63 100644
--- a/src/net/torvald/terrarum/tests/UIElemTest.kt
+++ b/src/net/torvald/terrarum/tests/UIElemTest.kt
@@ -100,7 +100,7 @@ class UIElemTest : ApplicationAdapter() {
 }
 
 class DummyTogglePane : UICanvas() {
-    private val button1 = UIItemToggleButton(this, 400, 100)
+    private val button1 = UIItemToggleButton(this, 400, 100, 80)
     private val textin = UIItemTextLineInput(this, 400, 160, 400)
 
     override var width = 800
diff --git a/src/net/torvald/terrarum/ui/UIItemToggleButton.kt b/src/net/torvald/terrarum/ui/UIItemToggleButton.kt
index 21662c34f..5b506c6c6 100644
--- a/src/net/torvald/terrarum/ui/UIItemToggleButton.kt
+++ b/src/net/torvald/terrarum/ui/UIItemToggleButton.kt
@@ -5,41 +5,37 @@ import com.badlogic.gdx.graphics.Camera
 import com.badlogic.gdx.graphics.Color
 import com.badlogic.gdx.graphics.Texture
 import com.badlogic.gdx.graphics.g2d.SpriteBatch
-import com.badlogic.gdx.graphics.g2d.TextureRegion
 import net.torvald.terrarum.CommonResourcePool
 import net.torvald.terrarum.blendNormalStraightAlpha
 import net.torvald.terrarum.toInt
+import net.torvald.terrarumsansbitmap.gdx.TextureRegionPack
 import kotlin.math.roundToInt
 
 /**
  * Created by Torvald on 2019-10-17.
  */
 class UIItemToggleButton(
-        parent: UICanvas,
-        initialX: Int,
-        initialY: Int,
-        private var status: Boolean = false
+    parent: UICanvas,
+    initialX: Int,
+    initialY: Int,
+    override val width: Int,
+    private var status: Boolean = false,
 ) : UIItem(parent, initialX, initialY) {
 
+
     init {
-        CommonResourcePool.addToLoadingList("ui_item_toggler_base") {
-            TextureRegion(Texture(Gdx.files.internal("./assets/graphics/gui/toggler_back.tga")))
-        }
-        CommonResourcePool.addToLoadingList("ui_item_toggler_handle") {
-            TextureRegion(Texture(Gdx.files.internal("./assets/graphics/gui/toggler_switch.tga")))
+        CommonResourcePool.addToLoadingList("gui_toggler_icons") {
+            TextureRegionPack(Texture(Gdx.files.internal("assets/graphics/gui/toggler_icons.tga")), 14, 14)
         }
         CommonResourcePool.loadAll()
     }
 
-    override val width: Int
-        get() = togglerBase.regionWidth
-    override val height: Int
-        get() = togglerBase.regionHeight
 
-    private var togglerBase = CommonResourcePool.getAsTextureRegion("ui_item_toggler_base")
-    private var togglerHandle = CommonResourcePool.getAsTextureRegion("ui_item_toggler_handle")
+    override val height = 24
 
-    private var handleTravelDist = togglerBase.regionWidth - togglerHandle.regionWidth
+    private var handleWidth = 30
+
+    private var handleTravelDist = width - handleWidth
     private var handlePos = handleTravelDist * status.toInt()
 
     private var animTimer = 0f
@@ -67,6 +63,8 @@ class UIItemToggleButton(
 
     // define clickOnceListener by yourself!
 
+    private var mouseOnHandle = false
+
     override fun update(delta: Float) {
         super.update(delta)
 
@@ -85,16 +83,64 @@ class UIItemToggleButton(
             animCalled = false
         }
 
+
+        mouseOnHandle = itemRelativeMouseX in handlePos until handlePos + handleWidth && itemRelativeMouseY in 0 until height
+
+
         oldPosX = posX
         oldPosY = posY
     }
 
+    private val togglerIcon = CommonResourcePool.getAsTextureRegionPack("gui_toggler_icons")
+
+    private val renderJobs = arrayOf(
+        // trough fill
+        { batch: SpriteBatch ->
+            batch.color = UIItemTextLineInput.TEXTINPUT_COL_BACKGROUND
+            Toolkit.fillArea(batch, posX, posY, width, height)
+            batch.color = togglerIconCol[1]
+            batch.draw(togglerIcon.get(1,0), posX.toFloat() + (handleWidth - 14)/2, posY.toFloat() + (height - 14)/2)
+            batch.color = togglerIconCol[0]
+            batch.draw(togglerIcon.get(0,0), posX.toFloat() + width - handleWidth + (handleWidth - 14)/2, posY.toFloat() + (height - 14)/2)
+        },
+        // trough border
+        { batch: SpriteBatch ->
+            batch.color = troughBorderCol
+            Toolkit.drawBoxBorder(batch, posX - 1, posY - 1, width + 2, height + 2)
+        },
+        // handle fill
+        { batch: SpriteBatch ->
+            batch.color = handleCol.cpy().mul(Color.LIGHT_GRAY)
+            Toolkit.fillArea(batch, posX + handlePos, posY, handleWidth, height)
+        },
+        // handle border
+        { batch: SpriteBatch ->
+            batch.color = handleCol
+            Toolkit.drawBoxBorder(batch, posX + handlePos - 1, posY - 1, handleWidth + 2, height + 2)
+        },
+    )
+
+    val troughBorderCol: Color; get() = if (mouseUp && !mouseOnHandle && mousePushed) Toolkit.Theme.COL_SELECTED
+    else if (mouseUp && !mouseOnHandle) Toolkit.Theme.COL_MOUSE_UP else Toolkit.Theme.COL_INACTIVE
+    val handleCol: Color; get() = if (mouseOnHandle && mousePushed) Toolkit.Theme.COL_SELECTED
+    else if (mouseOnHandle) Toolkit.Theme.COL_MOUSE_UP else Color.WHITE
+
+    private val renderOrderMouseUp = arrayOf(0,2,3,1).map { renderJobs[it] }
+    private val renderOrderNormal = arrayOf(0,1,2,3).map { renderJobs[it] }
+
+    private val togglerIconCol = arrayOf(
+        Color(0xFF8888FF.toInt()),
+        Color(0x00E800FF)
+    )
+
     override fun render(batch: SpriteBatch, camera: Camera) {
-        batch.color = Color.WHITE
         blendNormalStraightAlpha(batch)
 
-        batch.draw(togglerBase, posX.toFloat(), posY.toFloat())
-        batch.draw(togglerHandle, (posX + handlePos).toFloat(), posY.toFloat())
+
+        if (mouseUp && !mouseOnHandle)
+            renderOrderMouseUp.forEach { it(batch) }
+        else
+            renderOrderNormal.forEach { it(batch) }
 
 
         super.render(batch, camera)