diff --git a/src/dummy/java/cc/polyfrost/oneconfig/internal/assets/Images.java b/src/dummy/java/cc/polyfrost/oneconfig/internal/assets/Images.java
index 627ef4f..f45b1f1 100644
--- a/src/dummy/java/cc/polyfrost/oneconfig/internal/assets/Images.java
+++ b/src/dummy/java/cc/polyfrost/oneconfig/internal/assets/Images.java
@@ -1,7 +1,7 @@
 package cc.polyfrost.oneconfig.internal.assets;
 
-import cc.polyfrost.oneconfig.renderer.asset.Image;
+//import cc.polyfrost.oneconfig.renderer.asset.Image;
 
 public class Images {
-    public static final Image ALPHA_GRID = new Image("/assets/oneconfig/options/AlphaGrid.png");
+//    public static final Image ALPHA_GRID = new Image("/assets/oneconfig/options/AlphaGrid.png");
 }
\ No newline at end of file
diff --git a/src/main/kotlin/org/polyfrost/crosshair/PolyCrosshair.kt b/src/main/kotlin/org/polyfrost/crosshair/PolyCrosshair.kt
index 74387ca..86d967b 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/PolyCrosshair.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/PolyCrosshair.kt
@@ -22,7 +22,8 @@ object PolyCrosshair {
     const val NAME = "@MOD_NAME@"
     const val VERSION = "@MOD_VERSION@"
 
-    val path = "${ConfigUtils.getProfileDir().absolutePath}/${MODID}/caches/"
+//    val path = "${ConfigUtils.getProfileDir().absolutePath}/${MODID}/caches/"
+    val path = "config/${MODID}/caches/"
 
     val dir = File(path)
 
diff --git a/src/main/kotlin/org/polyfrost/crosshair/config/CrosshairEntry.kt b/src/main/kotlin/org/polyfrost/crosshair/config/CrosshairEntry.kt
index 9887cb2..4afe01f 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/config/CrosshairEntry.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/config/CrosshairEntry.kt
@@ -1,46 +1,48 @@
 package org.polyfrost.crosshair.config
 
-import cc.polyfrost.oneconfig.config.annotations.Button
-import cc.polyfrost.oneconfig.config.annotations.Slider
-import cc.polyfrost.oneconfig.config.annotations.Switch
-import cc.polyfrost.oneconfig.config.core.ConfigUtils
-import cc.polyfrost.oneconfig.utils.dsl.runAsync
-import org.polyfrost.crosshair.utils.*
-
-class CrosshairEntry(
-    var img: String = "iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAEUlEQVR42mNgGAWjYBQMIgAAA5MAAecADfkAAAAASUVORK5CYII\u003d",
-) {
-
-    @Slider(name = "Scale %", min = 0f, max = 200f)
+import org.polyfrost.oneconfig.api.config.v1.annotations.Button
+import org.polyfrost.oneconfig.api.config.v1.annotations.Slider
+import org.polyfrost.oneconfig.api.config.v1.annotations.Switch
+import org.polyfrost.oneconfig.utils.v1.dsl.runAsync
+
+class CrosshairEntry(var base64: String) {
+
+    companion object {
+
+        const val DEFAULT = "iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAEUlEQVR42mNgGAWjYBQMIgAAA5MAAecADfkAAAAASUVORK5CYII\u003d"
+
+    }
+
+    @Slider(title = "Scale %", min = 0f, max = 200f)
     var scale = 100
 
-    @Slider(name = "Rotation", min = -180f, max = 180f)
+    @Slider(title = "Rotation", min = -180f, max = 180f)
     var rotation = 0
 
-    @Slider(name = "X Offset", min = -1920f, max = 1920f)
+    @Slider(title = "X Offset", min = -1920f, max = 1920f)
     var offsetX = 0
 
-    @Slider(name = "Y Offset", min = -1080f, max = 1080f)
+    @Slider(title = "Y Offset", min = -1080f, max = 1080f)
     var offsetY = 0
 
-    @Switch(name = "Centered", description = "In vanilla Minecraft, the crosshair is not centered. Enable this option to center the crosshair.")
+    @Switch(title = "Centered", description = "In vanilla Minecraft, the crosshair is not centered. Enable this option to center the crosshair.")
     var centered = false
 
-    @Button(name = "Transform", text = "Reset", size = 1)
+    @Button(title = "Transform", text = "Reset")
     var transformReset = Runnable {
         runAsync {
-            val img = PolyCrosshairConfig.newCurrentCrosshair.img
-            PolyCrosshairConfig.newCurrentCrosshair.loadFrom(CrosshairEntry())
-            PolyCrosshairConfig.newCurrentCrosshair.img = img
-            save(Drawer.saveFromDrawer(false))
+            val base64 = PolyCrosshairConfig.currentCustomCrosshair.base64
+            PolyCrosshairConfig.currentCustomCrosshair.loadFrom(CrosshairEntry(DEFAULT))
+            PolyCrosshairConfig.currentCustomCrosshair.base64 = base64
+//            save(Drawer.saveFromDrawer(false))
         }
     }
 
     fun loadFrom(entry: CrosshairEntry) {
-        val newFields = ConfigUtils.getClassFields(entry::class.java)
-        val fields = ConfigUtils.getClassFields(this::class.java)
-        for (i in 0..<fields.size) {
-            fields[i].set(this, ConfigUtils.getField(newFields[i], entry))
-        }
+//        val newFields = ConfigUtils.getClassFields(entry::class.java)
+//        val fields = ConfigUtils.getClassFields(this::class.java)
+//        for (i in 0..<fields.size) {
+//            fields[i].set(this, ConfigUtils.getField(newFields[i], entry))
+//        }
     }
 }
\ No newline at end of file
diff --git a/src/main/kotlin/org/polyfrost/crosshair/config/CrosshairVisualizer.kt b/src/main/kotlin/org/polyfrost/crosshair/config/CrosshairVisualizer.kt
new file mode 100644
index 0000000..5f7a27a
--- /dev/null
+++ b/src/main/kotlin/org/polyfrost/crosshair/config/CrosshairVisualizer.kt
@@ -0,0 +1,138 @@
+package org.polyfrost.crosshair.config
+
+import org.polyfrost.oneconfig.api.config.v1.Property
+import org.polyfrost.oneconfig.api.config.v1.Visualizer
+import org.polyfrost.polyui.animate.Animations
+import org.polyfrost.polyui.color.PolyColor
+import org.polyfrost.polyui.color.argb
+import org.polyfrost.polyui.color.mutable
+import org.polyfrost.polyui.color.rgba
+import org.polyfrost.polyui.component.Drawable
+import org.polyfrost.polyui.component.extensions.onClick
+import org.polyfrost.polyui.component.extensions.setPalette
+import org.polyfrost.polyui.component.extensions.withBoarder
+import org.polyfrost.polyui.component.impl.Block
+import org.polyfrost.polyui.component.impl.Button
+import org.polyfrost.polyui.component.impl.ColorPicker
+import org.polyfrost.polyui.component.impl.Group
+import org.polyfrost.polyui.operations.Recolor
+import org.polyfrost.polyui.utils.ref
+import kotlin.math.abs
+import kotlin.math.max
+
+class CrosshairVisualizer : Visualizer {
+
+    override fun visualize(prop: Property<*>): Drawable {
+        val crosshairs = prop.getAs<List<CrosshairEntry>>()
+        val size = prop.getMetadata<Int>("size") ?: 15
+
+        val pickedColor = rgba(255, 255, 255).mutable().ref()
+        val pixels = mutableListOf<CrosshairPixel>()
+
+        fun List<CrosshairPixel>.getAt(x: Int, y: Int): CrosshairPixel {
+            return this[x + y * size]
+        }
+
+        for (index in 0 until size * size) {
+            pixels.add(CrosshairPixel(index, size).onClick { event ->
+                val state = event.button == 0
+                val newPixelValue = if (state) pickedColor.element else CrosshairPixel.indexToColor(index, size)
+                set(newPixelValue, state)
+
+                val mirrorMode = PolyCrosshairConfig.MirrorMode.values()[PolyCrosshairConfig.mirror]
+                if (mirrorMode != PolyCrosshairConfig.MirrorMode.OFF) { // NOTE: We do not need to run any mathematical calculations unnecessarily if we are not mirroring.
+                    val canvasCenter = (size + 1) / 2f - 1
+                    val disX = abs(index % size - canvasCenter)
+                    val disY = abs(index / size - canvasCenter)
+
+                    when (mirrorMode) {
+                        PolyCrosshairConfig.MirrorMode.HORIZONTAL -> {
+                            pixels.getAt(size - disX.toInt() - 1, index / size).set(newPixelValue, state)
+                        }
+
+                        PolyCrosshairConfig.MirrorMode.VERTICAL -> {
+                            pixels.getAt(index % size, size - disY.toInt() - 1).set(newPixelValue, state)
+                        }
+
+                        PolyCrosshairConfig.MirrorMode.QUADRANT -> {
+                            if (size % 2 == 1 && (disX.toInt() == 0 || disY.toInt() == 0)) {
+                                val dis = max(disX, disY).toInt()
+                                pixels.getAt(size - dis - 1, canvasCenter.toInt()).set(newPixelValue, state)
+                                pixels.getAt(dis, canvasCenter.toInt()).set(newPixelValue, state)
+                                pixels.getAt(canvasCenter.toInt(), size - dis - 1).set(newPixelValue, state)
+                                pixels.getAt(canvasCenter.toInt(), dis).set(newPixelValue, state)
+                            } else {
+                                pixels.getAt(size - disX.toInt() - 1, index / size).set(newPixelValue, state)
+                                pixels.getAt(index % size, size - disY.toInt() - 1).set(newPixelValue, state)
+                                pixels.getAt(size - disX.toInt() - 1, size - disY.toInt() - 1).set(newPixelValue, state)
+                            }
+                        }
+
+                        PolyCrosshairConfig.MirrorMode.OFF -> {
+                            throw IllegalStateException("What the heckers?! This should never happen!")
+                        }
+                    }
+                }
+
+                true
+            })
+        }
+
+        return Group(
+            Block(
+                children = pixels.toTypedArray(),
+            ),
+
+            Group(
+                Group(
+                    Button(text = "Export"),
+                    Button(text = "Import")
+                ),
+
+                Group(
+                    Block(color = pickedColor.element)
+                        .withBoarder(3f, color = { page.border20 })
+                        .onClick { ColorPicker(pickedColor, null, null, polyUI); true },
+                    Button(text = "Reset").setPalette { state.danger },
+                    Button(text = "Save").setPalette { onBrand.fg }
+                )
+            )
+        )
+    }
+
+}
+
+private class CrosshairPixel(
+    private val index: Int,
+    private val canvasSize: Int
+) : Block(
+    color = indexToColor(index, canvasSize)
+) {
+
+    companion object {
+
+        fun indexToColor(index: Int, size: Int): PolyColor {
+            return argb(if (size % 2 == 1 && index % size == size / 2 && index % size == index / size) {
+                0x703A3AFF
+            } else if ((index % size + index / size) % 2 == 0) {
+                0x333333FF
+            } else {
+                0x444444FF
+            })
+        }
+
+    }
+
+    private var state = false
+
+    fun set(color: PolyColor, state: Boolean) {
+        Recolor(
+            drawable = this,
+            toColor = color,
+            animation = Animations.Default.create(0L), // Instant
+        ).add()
+
+        this.state = if (color.a == 0) false else state
+    }
+
+}
\ No newline at end of file
diff --git a/src/main/kotlin/org/polyfrost/crosshair/config/Crosshairs.kt b/src/main/kotlin/org/polyfrost/crosshair/config/Crosshairs.kt
new file mode 100644
index 0000000..ad12b4c
--- /dev/null
+++ b/src/main/kotlin/org/polyfrost/crosshair/config/Crosshairs.kt
@@ -0,0 +1,12 @@
+package org.polyfrost.crosshair.config
+
+import org.polyfrost.oneconfig.api.config.v1.annotations.Option
+
+@Option(display = CrosshairVisualizer::class)
+@Retention(AnnotationRetention.RUNTIME)
+@Target(AnnotationTarget.FIELD)
+@MustBeDocumented
+annotation class Crosshairs(
+    val category: String = "General",
+    val subcategory: String = "General",
+)
diff --git a/src/main/kotlin/org/polyfrost/crosshair/config/Drawer.kt b/src/main/kotlin/org/polyfrost/crosshair/config/Drawer.kt
index 3f39061..aed2bb3 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/config/Drawer.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/config/Drawer.kt
@@ -1,297 +1,297 @@
-@file:Suppress("UnstableAPIUsage")
-
-package org.polyfrost.crosshair.config
-
-import dev.deftu.clipboard.BufferedClipboardImage
-import dev.deftu.clipboard.Clipboard
-import org.polyfrost.crosshair.elements.ColorSelector
-import org.polyfrost.crosshair.elements.PresetElement
-import org.polyfrost.crosshair.render.CrosshairRenderer
-import org.polyfrost.crosshair.utils.*
-import org.polyfrost.oneconfig.utils.v1.dsl.runAsync
-import java.awt.Image
-import java.awt.Toolkit
-import java.awt.datatransfer.DataFlavor
-import java.awt.image.BufferedImage
-import java.io.File
-import javax.imageio.ImageIO
-import kotlin.math.ceil
-
-object Drawer : BasicOption(null, null, "", "", "", "", 2) {
-
-    val pixels: Array<Pixel> = Array(1024) { Pixel(it) }
-
-    var elements = HashMap<CrosshairEntry, PresetElement>()
-
-    var removeQueue = ArrayList<CrosshairEntry>()
-
-    var moveQueue = ArrayList<MoveType>()
-
-    private var scroll = 0f
-
-    private var scrollTarget = 0f
-
-    private var scrollAnimation: Animation = DummyAnimation(0f)
-
-    private val resetButton = BasicButton(64, 32, "Reset", 2, ColorPalette.PRIMARY_DESTRUCTIVE)
-
-    private val saveButton = BasicButton(64, 32, "Save", 2, ColorPalette.PRIMARY)
-
-    private val importButton = BasicButton(64, 32, "Import", 2, ColorPalette.SECONDARY)
-
-    private val exportButton = BasicButton(64, 32, "Export", 2, ColorPalette.SECONDARY)
-
-    private val colorSelector = ColorSelector()
-
-    var inArea = false
-
-    init {
-        toBufferedImage(PolyCrosshairConfig.newCurrentCrosshair.img)?.let { it ->
-            if (it.width == 0 || it.height == 0) return@let
-            loadImage(it, false, PolyCrosshairConfig.newCurrentCrosshair)?.let {
-                CrosshairRenderer.updateTexture(it)
-            }
-        }
-
-        resetButton.setClickAction {
-            runAsync {
-                reset()
-            }
-        }
-
-        saveButton.setClickAction {
-            runAsync {
-                save(saveFromDrawer(false))
-            }
-        }
-
-        exportButton.setClickAction {
-            runAsync {
-                saveFromDrawer(false)?.let { copy(it.image) }
-            }
-        }
-
-        importButton.setClickAction {
-            runAsync {
-                var image: Image? = null
-                try {
-                    val hopefullyAList = Toolkit.getDefaultToolkit().systemClipboard.getContents(null)
-                        .getTransferData(DataFlavor.javaFileListFlavor)
-                    if (hopefullyAList is List<*>) {
-                        if (hopefullyAList.isEmpty() || hopefullyAList[0] !is File) return@runAsync
-                        val file = hopefullyAList[0] as File
-                        ImageIO.read(file)?.let {
-                            image = it
-                        }
-                    }
-                } catch (_: Exception) {
-
-                }
-
-                if (image == null) {
-                    image = BufferedClipboardImage.toBufferedImage(Clipboard.getInstance().image)
-                }
-
-                if (image != null) {
-                    loadImage(image!!.toBufferedImage(), true)
-                } else {
-                    notify("No image found in clipboard.")
-                }
-            }
-        }
-    }
-
-    override fun draw(vg: Long, x: Int, y: Int, inputHandler: InputHandler) {
-        if (moveQueue.isNotEmpty()) {
-            var x = 0
-            var y = 0
-            for (i in moveQueue) {
-                x += i.x
-                y += i.y
-            }
-            move(x, y)
-            moveQueue.clear()
-        }
-
-        for (posY in 0..<PolyCrosshairConfig.canvaSize) {
-            for (posX in 0..<PolyCrosshairConfig.canvaSize) {
-                pixels[posToIndex(posX, posY)].draw(vg, x.toFloat(), y.toFloat(), inputHandler)
-            }
-        }
-
-        if (PolyCrosshairConfig.canvaSize % 2 == 0) {
-            nanoVGHelper.drawLine(vg, (x + 128).toFloat(), (y + 108).toFloat(), (x + 128).toFloat(), (y + 148).toFloat(), 1f, OneColor("703A3AFF").rgb)
-            nanoVGHelper.drawLine(vg, (x + 108).toFloat(), (y + 128).toFloat(), (x + 148).toFloat(), (y + 128).toFloat(), 1f, OneColor("703A3AFF").rgb)
-        }
-
-        importButton.draw(vg, (x + 270).toFloat(), (y + 48).toFloat(), inputHandler)
-        resetButton.draw(vg, (x + 270).toFloat(), (y + 174).toFloat(), inputHandler)
-        saveButton.draw(vg, (x + 270).toFloat(), (y + 222).toFloat(), inputHandler)
-        colorSelector.draw(vg, (x + 270).toFloat(), (y + 126).toFloat(), inputHandler)
-        exportButton.draw(vg, (x + 270).toFloat(), y.toFloat(), inputHandler)
-
-        for (i in removeQueue) {
-            PolyCrosshairConfig.newCrosshairs.remove(i)
-            getElement(i).onRemove()
-            elements.remove(i)
-        }
-
-        removeQueue.clear()
-
-        val height = (149 + 16) * ceil(PolyCrosshairConfig.newCrosshairs.size / 4f) - 16
-
-        if (height <= 256) scrollAnimation = DummyAnimation(0f)
-
-        scroll = scrollAnimation.get()
-
-        val scissor = ScissorHelper.INSTANCE.scissor(vg, (x + 349).toFloat(), y.toFloat(), 644f, 256f)
-
-        inArea = scissor.isInScissor(inputHandler.mouseX(), inputHandler.mouseY())
-
-        if (inArea) {
-            inputHandler.unblockDWheel()
-
-            val dWheel = inputHandler.dWheel.toFloat()
-
-            inputHandler.blockDWheel()
-
-            if (dWheel != 0f) {
-                scrollTarget += dWheel
-
-                if (scrollTarget > 0f) scrollTarget = 0f
-                else if (scrollTarget < 256 - height) scrollTarget = (256 - height)
-
-                scrollAnimation = EaseOutQuad(150, scroll, scrollTarget, false)
-            }
-        } else {
-            inputHandler.unblockDWheel()
-            if (mc.currentScreen is OneConfigGui) {
-                inputHandler.stopBlockingInput()
-            }
-        }
-
-        val size = PolyCrosshairConfig.newCrosshairs.size
-
-        for (i in 0..<size) {
-            val posX = i % 4
-            val posY = i / 4
-            getElement(PolyCrosshairConfig.newCrosshairs[i]).draw(vg, x + 349 + posX * 165f, y + posY * 165f + scroll, inputHandler)
-        }
-
-        ScissorHelper.INSTANCE.resetScissor(vg, scissor)
-    }
-
-    fun Image.toBufferedImage(): BufferedImage {
-        if (this is BufferedImage) {
-            return this
-        }
-        val bufferedImage = BufferedImage(this.getWidth(null), this.getHeight(null), BufferedImage.TYPE_INT_ARGB)
-
-        val graphics2D = bufferedImage.createGraphics()
-        graphics2D.drawImage(this, 0, 0, null)
-        graphics2D.dispose()
-
-        return bufferedImage
-    }
-
-    fun loadImage(image: BufferedImage?, save: Boolean, entry: CrosshairEntry = CrosshairEntry()): OneImage? {
-        val loadedImage = OneImage(image)
-        val dimensionsSame = loadedImage.width == loadedImage.height
-        val withinSize = loadedImage.width in 15..32
-        if (!dimensionsSame || !withinSize) {
-            val message = if (!dimensionsSame) "The width of the image must be equal to the height" else "The image must be between 15x15 and 32x32 pixels"
-            notify("$message (width: ${loadedImage.width} height: ${loadedImage.height}).")
-            return null
-        }
-        PolyCrosshairConfig.newCurrentCrosshair.loadFrom(entry)
-        PolyCrosshairConfig.canvaSize = loadedImage.height
-        for (posY in 0..<PolyCrosshairConfig.canvaSize) {
-            for (posX in 0..<PolyCrosshairConfig.canvaSize) {
-                val c = loadedImage.image.getRGB(posX, posY)
-                pixels[posToIndex(posX, posY)].isToggled = c shr 24 != 0
-                pixels[posToIndex(posX, posY)].color = c
-            }
-        }
-        if (save) save(loadedImage)
-        return loadedImage
-    }
-
-    fun saveFromDrawer(close: Boolean): OneImage? {
-        val image = OneImage(PolyCrosshairConfig.canvaSize, PolyCrosshairConfig.canvaSize)
-        if (PolyCrosshairConfig.drawer.isEmpty() && !close) {
-            notify("Crosshair can't be empty.")
-            return null
-        }
-        for (i in PolyCrosshairConfig.drawer) {
-            val pos = indexToPos(i.key)
-            if (pos.x >= PolyCrosshairConfig.canvaSize || pos.y >= PolyCrosshairConfig.canvaSize) {
-                pixels[i.key].isToggled = false
-                continue
-            }
-            val c = i.value
-            image.setColorAtPos(pos.x, pos.y, c)
-        }
-        return image
-    }
-
-    fun reset() {
-        val newEntry = CrosshairEntry()
-        toBufferedImage(newEntry.img)?.let {
-            loadImage(it, false, newEntry)
-        }
-    }
-
-    fun move(x: Int, y: Int) {
-        val newPositions = HashMap<Pos, Int>()
-        for (i in PolyCrosshairConfig.drawer) {
-            val pos = indexToPos(i.key)
-            val posX = pos.x + x
-            val posY = pos.y + y
-            pixels[i.key].isToggled = false
-            if (posX !in 0..<PolyCrosshairConfig.canvaSize || posY !in 0..<PolyCrosshairConfig.canvaSize) continue
-            newPositions[Pos(posX, posY)] = i.value
-        }
-        for (i in newPositions) {
-            val index = i.key.y * 32 + i.key.x
-            pixels[index].isToggled = true
-            pixels[index].color = i.value
-        }
-    }
-
-    fun getElement(entry: CrosshairEntry): PresetElement {
-        elements[entry] ?: elements.put(entry, PresetElement(entry))
-        return elements[entry]!!
-    }
-
-    enum class MoveType(val x: Int, val y: Int) {
-        UP(0, -1),
-        DOWN(0, 1),
-        LEFT(-1, 0),
-        RIGHT(1, 0)
-    }
-
-    override fun finishUpAndClose() {
-        val image = saveFromDrawer(true) ?: return
-        PolyCrosshairConfig.newCurrentCrosshair.img = toBase64(image.image)
-        CrosshairRenderer.updateTexture(image)
-    }
-
-    override fun getHeight() = 256
-
-    override fun keyTyped(key: Char, keyCode: Int) {
-        if (mc.currentScreen !is OneConfigGui) return
-        if (keyCode == UKeyboard.KEY_W) moveQueue.add(MoveType.UP)
-        if (keyCode == UKeyboard.KEY_S) {
-            if (UKeyboard.isCtrlKeyDown()) {
-                runAsync {
-                    save(saveFromDrawer(false))
-                }
-            } else {
-                moveQueue.add(MoveType.DOWN)
-            }
-        }
-        if (keyCode == UKeyboard.KEY_A) moveQueue.add(MoveType.LEFT)
-        if (keyCode == UKeyboard.KEY_D) moveQueue.add(MoveType.RIGHT)
-    }
-
-}
\ No newline at end of file
+//@file:Suppress("UnstableAPIUsage")
+//
+//package org.polyfrost.crosshair.config
+//
+//import dev.deftu.clipboard.BufferedClipboardImage
+//import dev.deftu.clipboard.Clipboard
+//import org.polyfrost.crosshair.elements.ColorSelector
+//import org.polyfrost.crosshair.elements.PresetElement
+//import org.polyfrost.crosshair.render.CrosshairRenderer
+//import org.polyfrost.crosshair.utils.*
+//import org.polyfrost.oneconfig.utils.v1.dsl.runAsync
+//import java.awt.Image
+//import java.awt.Toolkit
+//import java.awt.datatransfer.DataFlavor
+//import java.awt.image.BufferedImage
+//import java.io.File
+//import javax.imageio.ImageIO
+//import kotlin.math.ceil
+//
+//object Drawer : BasicOption(null, null, "", "", "", "", 2) {
+//
+//    val pixels: Array<Pixel> = Array(1024) { Pixel(it) }
+//
+//    var elements = HashMap<CrosshairEntry, PresetElement>()
+//
+//    var removeQueue = ArrayList<CrosshairEntry>()
+//
+//    var moveQueue = ArrayList<MoveType>()
+//
+//    private var scroll = 0f
+//
+//    private var scrollTarget = 0f
+//
+//    private var scrollAnimation: Animation = DummyAnimation(0f)
+//
+//    private val resetButton = BasicButton(64, 32, "Reset", 2, ColorPalette.PRIMARY_DESTRUCTIVE)
+//
+//    private val saveButton = BasicButton(64, 32, "Save", 2, ColorPalette.PRIMARY)
+//
+//    private val importButton = BasicButton(64, 32, "Import", 2, ColorPalette.SECONDARY)
+//
+//    private val exportButton = BasicButton(64, 32, "Export", 2, ColorPalette.SECONDARY)
+//
+//    private val colorSelector = ColorSelector()
+//
+//    var inArea = false
+//
+//    init {
+//        toBufferedImage(PolyCrosshairConfig.newCurrentCrosshair.img)?.let { it ->
+//            if (it.width == 0 || it.height == 0) return@let
+//            loadImage(it, false, PolyCrosshairConfig.newCurrentCrosshair)?.let {
+//                CrosshairRenderer.updateTexture(it)
+//            }
+//        }
+//
+//        resetButton.setClickAction {
+//            runAsync {
+//                reset()
+//            }
+//        }
+//
+//        saveButton.setClickAction {
+//            runAsync {
+//                save(saveFromDrawer(false))
+//            }
+//        }
+//
+//        exportButton.setClickAction {
+//            runAsync {
+//                saveFromDrawer(false)?.let { copy(it.image) }
+//            }
+//        }
+//
+//        importButton.setClickAction {
+//            runAsync {
+//                var image: Image? = null
+//                try {
+//                    val hopefullyAList = Toolkit.getDefaultToolkit().systemClipboard.getContents(null)
+//                        .getTransferData(DataFlavor.javaFileListFlavor)
+//                    if (hopefullyAList is List<*>) {
+//                        if (hopefullyAList.isEmpty() || hopefullyAList[0] !is File) return@runAsync
+//                        val file = hopefullyAList[0] as File
+//                        ImageIO.read(file)?.let {
+//                            image = it
+//                        }
+//                    }
+//                } catch (_: Exception) {
+//
+//                }
+//
+//                if (image == null) {
+//                    image = BufferedClipboardImage.toBufferedImage(Clipboard.getInstance().image)
+//                }
+//
+//                if (image != null) {
+//                    loadImage(image!!.toBufferedImage(), true)
+//                } else {
+//                    notify("No image found in clipboard.")
+//                }
+//            }
+//        }
+//    }
+//
+//    override fun draw(vg: Long, x: Int, y: Int, inputHandler: InputHandler) {
+//        if (moveQueue.isNotEmpty()) {
+//            var x = 0
+//            var y = 0
+//            for (i in moveQueue) {
+//                x += i.x
+//                y += i.y
+//            }
+//            move(x, y)
+//            moveQueue.clear()
+//        }
+//
+//        for (posY in 0..<PolyCrosshairConfig.canvaSize) {
+//            for (posX in 0..<PolyCrosshairConfig.canvaSize) {
+//                pixels[posToIndex(posX, posY)].draw(vg, x.toFloat(), y.toFloat(), inputHandler)
+//            }
+//        }
+//
+//        if (PolyCrosshairConfig.canvaSize % 2 == 0) {
+//            nanoVGHelper.drawLine(vg, (x + 128).toFloat(), (y + 108).toFloat(), (x + 128).toFloat(), (y + 148).toFloat(), 1f, OneColor("703A3AFF").rgb)
+//            nanoVGHelper.drawLine(vg, (x + 108).toFloat(), (y + 128).toFloat(), (x + 148).toFloat(), (y + 128).toFloat(), 1f, OneColor("703A3AFF").rgb)
+//        }
+//
+//        importButton.draw(vg, (x + 270).toFloat(), (y + 48).toFloat(), inputHandler)
+//        resetButton.draw(vg, (x + 270).toFloat(), (y + 174).toFloat(), inputHandler)
+//        saveButton.draw(vg, (x + 270).toFloat(), (y + 222).toFloat(), inputHandler)
+//        colorSelector.draw(vg, (x + 270).toFloat(), (y + 126).toFloat(), inputHandler)
+//        exportButton.draw(vg, (x + 270).toFloat(), y.toFloat(), inputHandler)
+//
+//        for (i in removeQueue) {
+//            PolyCrosshairConfig.newCrosshairs.remove(i)
+//            getElement(i).onRemove()
+//            elements.remove(i)
+//        }
+//
+//        removeQueue.clear()
+//
+//        val height = (149 + 16) * ceil(PolyCrosshairConfig.newCrosshairs.size / 4f) - 16
+//
+//        if (height <= 256) scrollAnimation = DummyAnimation(0f)
+//
+//        scroll = scrollAnimation.get()
+//
+//        val scissor = ScissorHelper.INSTANCE.scissor(vg, (x + 349).toFloat(), y.toFloat(), 644f, 256f)
+//
+//        inArea = scissor.isInScissor(inputHandler.mouseX(), inputHandler.mouseY())
+//
+//        if (inArea) {
+//            inputHandler.unblockDWheel()
+//
+//            val dWheel = inputHandler.dWheel.toFloat()
+//
+//            inputHandler.blockDWheel()
+//
+//            if (dWheel != 0f) {
+//                scrollTarget += dWheel
+//
+//                if (scrollTarget > 0f) scrollTarget = 0f
+//                else if (scrollTarget < 256 - height) scrollTarget = (256 - height)
+//
+//                scrollAnimation = EaseOutQuad(150, scroll, scrollTarget, false)
+//            }
+//        } else {
+//            inputHandler.unblockDWheel()
+//            if (mc.currentScreen is OneConfigGui) {
+//                inputHandler.stopBlockingInput()
+//            }
+//        }
+//
+//        val size = PolyCrosshairConfig.newCrosshairs.size
+//
+//        for (i in 0..<size) {
+//            val posX = i % 4
+//            val posY = i / 4
+//            getElement(PolyCrosshairConfig.newCrosshairs[i]).draw(vg, x + 349 + posX * 165f, y + posY * 165f + scroll, inputHandler)
+//        }
+//
+//        ScissorHelper.INSTANCE.resetScissor(vg, scissor)
+//    }
+//
+//    fun Image.toBufferedImage(): BufferedImage {
+//        if (this is BufferedImage) {
+//            return this
+//        }
+//        val bufferedImage = BufferedImage(this.getWidth(null), this.getHeight(null), BufferedImage.TYPE_INT_ARGB)
+//
+//        val graphics2D = bufferedImage.createGraphics()
+//        graphics2D.drawImage(this, 0, 0, null)
+//        graphics2D.dispose()
+//
+//        return bufferedImage
+//    }
+//
+//    fun loadImage(image: BufferedImage?, save: Boolean, entry: CrosshairEntry = CrosshairEntry()): OneImage? {
+//        val loadedImage = OneImage(image)
+//        val dimensionsSame = loadedImage.width == loadedImage.height
+//        val withinSize = loadedImage.width in 15..32
+//        if (!dimensionsSame || !withinSize) {
+//            val message = if (!dimensionsSame) "The width of the image must be equal to the height" else "The image must be between 15x15 and 32x32 pixels"
+//            notify("$message (width: ${loadedImage.width} height: ${loadedImage.height}).")
+//            return null
+//        }
+//        PolyCrosshairConfig.newCurrentCrosshair.loadFrom(entry)
+//        PolyCrosshairConfig.canvaSize = loadedImage.height
+//        for (posY in 0..<PolyCrosshairConfig.canvaSize) {
+//            for (posX in 0..<PolyCrosshairConfig.canvaSize) {
+//                val c = loadedImage.image.getRGB(posX, posY)
+//                pixels[posToIndex(posX, posY)].isToggled = c shr 24 != 0
+//                pixels[posToIndex(posX, posY)].color = c
+//            }
+//        }
+//        if (save) save(loadedImage)
+//        return loadedImage
+//    }
+//
+//    fun saveFromDrawer(close: Boolean): OneImage? {
+//        val image = OneImage(PolyCrosshairConfig.canvaSize, PolyCrosshairConfig.canvaSize)
+//        if (PolyCrosshairConfig.drawer.isEmpty() && !close) {
+//            notify("Crosshair can't be empty.")
+//            return null
+//        }
+//        for (i in PolyCrosshairConfig.drawer) {
+//            val pos = indexToPos(i.key)
+//            if (pos.x >= PolyCrosshairConfig.canvaSize || pos.y >= PolyCrosshairConfig.canvaSize) {
+//                pixels[i.key].isToggled = false
+//                continue
+//            }
+//            val c = i.value
+//            image.setColorAtPos(pos.x, pos.y, c)
+//        }
+//        return image
+//    }
+//
+//    fun reset() {
+//        val newEntry = CrosshairEntry()
+//        toBufferedImage(newEntry.img)?.let {
+//            loadImage(it, false, newEntry)
+//        }
+//    }
+//
+//    fun move(x: Int, y: Int) {
+//        val newPositions = HashMap<Pos, Int>()
+//        for (i in PolyCrosshairConfig.drawer) {
+//            val pos = indexToPos(i.key)
+//            val posX = pos.x + x
+//            val posY = pos.y + y
+//            pixels[i.key].isToggled = false
+//            if (posX !in 0..<PolyCrosshairConfig.canvaSize || posY !in 0..<PolyCrosshairConfig.canvaSize) continue
+//            newPositions[Pos(posX, posY)] = i.value
+//        }
+//        for (i in newPositions) {
+//            val index = i.key.y * 32 + i.key.x
+//            pixels[index].isToggled = true
+//            pixels[index].color = i.value
+//        }
+//    }
+//
+//    fun getElement(entry: CrosshairEntry): PresetElement {
+//        elements[entry] ?: elements.put(entry, PresetElement(entry))
+//        return elements[entry]!!
+//    }
+//
+//    enum class MoveType(val x: Int, val y: Int) {
+//        UP(0, -1),
+//        DOWN(0, 1),
+//        LEFT(-1, 0),
+//        RIGHT(1, 0)
+//    }
+//
+//    override fun finishUpAndClose() {
+//        val image = saveFromDrawer(true) ?: return
+//        PolyCrosshairConfig.newCurrentCrosshair.img = toBase64(image.image)
+//        CrosshairRenderer.updateTexture(image)
+//    }
+//
+//    override fun getHeight() = 256
+//
+//    override fun keyTyped(key: Char, keyCode: Int) {
+//        if (mc.currentScreen !is OneConfigGui) return
+//        if (keyCode == UKeyboard.KEY_W) moveQueue.add(MoveType.UP)
+//        if (keyCode == UKeyboard.KEY_S) {
+//            if (UKeyboard.isCtrlKeyDown()) {
+//                runAsync {
+//                    save(saveFromDrawer(false))
+//                }
+//            } else {
+//                moveQueue.add(MoveType.DOWN)
+//            }
+//        }
+//        if (keyCode == UKeyboard.KEY_A) moveQueue.add(MoveType.LEFT)
+//        if (keyCode == UKeyboard.KEY_D) moveQueue.add(MoveType.RIGHT)
+//    }
+//
+//}
\ No newline at end of file
diff --git a/src/main/kotlin/org/polyfrost/crosshair/config/Pixel.kt b/src/main/kotlin/org/polyfrost/crosshair/config/Pixel.kt
index 24acb8a..9ca3c47 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/config/Pixel.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/config/Pixel.kt
@@ -1,110 +1,110 @@
-@file:Suppress("UnstableAPIUsage")
-package org.polyfrost.crosshair.config
-
-import cc.polyfrost.oneconfig.config.core.OneColor
-import cc.polyfrost.oneconfig.gui.OneConfigGui
-import cc.polyfrost.oneconfig.gui.elements.BasicElement
-import cc.polyfrost.oneconfig.utils.InputHandler
-import cc.polyfrost.oneconfig.utils.color.ColorPalette
-import cc.polyfrost.oneconfig.utils.dsl.nanoVGHelper
-import org.polyfrost.crosshair.utils.indexToPos
-import org.polyfrost.crosshair.utils.posToIndex
-import kotlin.math.abs
-import kotlin.math.max
-
-class Pixel(val index: Int) : BasicElement(16, 16, ColorPalette.PRIMARY, true, 0f) {
-    var backgroundColor = 0
-    var posX = 0
-    var posY = 0
-
-    var color = -1
-        set(value) {
-            if (value shr 24 == 0) isToggled = false
-            PolyCrosshairConfig.drawer[index] = value
-            field = value
-        }
-
-    var lastToggled = false
-
-    override fun draw(vg: Long, x: Float, y: Float, inputHandler: InputHandler) {
-        val size = (256 - (PolyCrosshairConfig.canvaSize - 1)) / PolyCrosshairConfig.canvaSize.toFloat()
-        posX = index % 32
-        posY = index / 32
-        val x1 = x + posX * (size + 1)
-        val y1 = y + posY * (size + 1)
-        width = size.toInt()
-        height = size.toInt()
-        this.update(x1, y1, inputHandler)
-        nanoVGHelper.drawRect(vg, x1, y1, size, size, currentColor)
-    }
-
-    override fun update(x: Float, y: Float, inputHandler: InputHandler) {
-        val pos = indexToPos(index)
-        val size = PolyCrosshairConfig.canvaSize
-        backgroundColor = if (size % 2 == 1 && pos.x == size / 2 && pos.x == pos.y) {
-            OneColor("703A3AFF").rgb
-        } else if ((pos.x + pos.y) % 2 == 0) {
-            ColorPalette.SECONDARY.normalColor
-        } else {
-            ColorPalette.SECONDARY.hoveredColor
-        }
-        hovered = inputHandler.isAreaHovered(x - hitBoxX, y - hitBoxY, (width + hitBoxX).toFloat(), (height + hitBoxY).toFloat())
-        if (hovered && OneConfigGui.INSTANCE.currentColorSelector == null) {
-            if (inputHandler.isMouseDown) {
-                doMirror(true, PolyCrosshairConfig.penColor.rgb)
-            }
-            if (inputHandler.isMouseDown(1)) {
-                doMirror(false, color)
-            }
-        }
-        if (lastToggled != isToggled) {
-            lastToggled = isToggled
-            if (isToggled) {
-                PolyCrosshairConfig.drawer[index] = color
-            } else {
-                PolyCrosshairConfig.drawer.remove(index)
-            }
-        }
-        currentColor = if (isToggled) color else backgroundColor
-    }
-
-    fun doMirror(toggle: Boolean, color: Int) {
-        val mode = PolyCrosshairConfig.mirror
-        set(toggle, color)
-        if (mode == 0) return
-        val size = PolyCrosshairConfig.canvaSize
-
-        val center = (size + 1) / 2f - 1
-        val disX = center - posX
-        val disY = center - posY
-        if (mode == 3 && size % 2 == 1 && (disX.toInt() == 0 || disY.toInt() == 0)) {
-            val distance = max(abs(disX), abs(disY)).toInt()
-            val c = center.toInt()
-            setPixel(c + distance, c, toggle, color)
-            setPixel(c - distance, c, toggle, color)
-            setPixel(c, c + distance, toggle, color)
-            setPixel(c, c - distance, toggle, color)
-        } else {
-            if (mode == 1 || mode == 3) {
-                setPixel((center + disX).toInt(), posY, toggle, color)
-            }
-            if (mode == 2 || mode == 3) {
-                setPixel(posX, (center + disY).toInt(), toggle, color)
-            }
-            if (mode == 3) {
-                setPixel((center + disX).toInt(), (center + disY).toInt(), toggle, color)
-            }
-        }
-    }
-
-    fun setPixel(x: Int, y: Int, toggle: Boolean, color: Int) {
-        Drawer.pixels[posToIndex(x, y)].set(toggle, color)
-    }
-
-    fun set(toggle: Boolean, color: Int) {
-        isToggled = toggle
-        if (!toggle) return
-        this.color = color
-    }
-
-}
\ No newline at end of file
+//@file:Suppress("UnstableAPIUsage")
+//package org.polyfrost.crosshair.config
+//
+//import cc.polyfrost.oneconfig.config.core.OneColor
+//import cc.polyfrost.oneconfig.gui.OneConfigGui
+//import cc.polyfrost.oneconfig.gui.elements.BasicElement
+//import cc.polyfrost.oneconfig.utils.InputHandler
+//import cc.polyfrost.oneconfig.utils.color.ColorPalette
+//import cc.polyfrost.oneconfig.utils.dsl.nanoVGHelper
+//import org.polyfrost.crosshair.utils.indexToPos
+//import org.polyfrost.crosshair.utils.posToIndex
+//import kotlin.math.abs
+//import kotlin.math.max
+//
+//class Pixel(val index: Int) : BasicElement(16, 16, ColorPalette.PRIMARY, true, 0f) {
+//    var backgroundColor = 0
+//    var posX = 0
+//    var posY = 0
+//
+//    var color = -1
+//        set(value) {
+//            if (value shr 24 == 0) isToggled = false
+//            PolyCrosshairConfig.drawer[index] = value
+//            field = value
+//        }
+//
+//    var lastToggled = false
+//
+//    override fun draw(vg: Long, x: Float, y: Float, inputHandler: InputHandler) {
+//        val size = (256 - (PolyCrosshairConfig.canvaSize - 1)) / PolyCrosshairConfig.canvaSize.toFloat()
+//        posX = index % 32
+//        posY = index / 32
+//        val x1 = x + posX * (size + 1)
+//        val y1 = y + posY * (size + 1)
+//        width = size.toInt()
+//        height = size.toInt()
+//        this.update(x1, y1, inputHandler)
+//        nanoVGHelper.drawRect(vg, x1, y1, size, size, currentColor)
+//    }
+//
+//    override fun update(x: Float, y: Float, inputHandler: InputHandler) {
+//        val pos = indexToPos(index)
+//        val size = PolyCrosshairConfig.canvaSize
+//        backgroundColor = if (size % 2 == 1 && pos.x == size / 2 && pos.x == pos.y) {
+//            OneColor("703A3AFF").rgb
+//        } else if ((pos.x + pos.y) % 2 == 0) {
+//            ColorPalette.SECONDARY.normalColor
+//        } else {
+//            ColorPalette.SECONDARY.hoveredColor
+//        }
+//        hovered = inputHandler.isAreaHovered(x - hitBoxX, y - hitBoxY, (width + hitBoxX).toFloat(), (height + hitBoxY).toFloat())
+//        if (hovered && OneConfigGui.INSTANCE.currentColorSelector == null) {
+//            if (inputHandler.isMouseDown) {
+//                doMirror(true, PolyCrosshairConfig.penColor.rgb)
+//            }
+//            if (inputHandler.isMouseDown(1)) {
+//                doMirror(false, color)
+//            }
+//        }
+//        if (lastToggled != isToggled) {
+//            lastToggled = isToggled
+//            if (isToggled) {
+//                PolyCrosshairConfig.drawer[index] = color
+//            } else {
+//                PolyCrosshairConfig.drawer.remove(index)
+//            }
+//        }
+//        currentColor = if (isToggled) color else backgroundColor
+//    }
+//
+//    fun doMirror(toggle: Boolean, color: Int) {
+//        val mode = PolyCrosshairConfig.mirror
+//        set(toggle, color)
+//        if (mode == 0) return
+//        val size = PolyCrosshairConfig.canvaSize
+//
+//        val center = (size + 1) / 2f - 1
+//        val disX = center - posX
+//        val disY = center - posY
+//        if (mode == 3 && size % 2 == 1 && (disX.toInt() == 0 || disY.toInt() == 0)) {
+//            val distance = max(abs(disX), abs(disY)).toInt()
+//            val c = center.toInt()
+//            setPixel(c + distance, c, toggle, color)
+//            setPixel(c - distance, c, toggle, color)
+//            setPixel(c, c + distance, toggle, color)
+//            setPixel(c, c - distance, toggle, color)
+//        } else {
+//            if (mode == 1 || mode == 3) {
+//                setPixel((center + disX).toInt(), posY, toggle, color)
+//            }
+//            if (mode == 2 || mode == 3) {
+//                setPixel(posX, (center + disY).toInt(), toggle, color)
+//            }
+//            if (mode == 3) {
+//                setPixel((center + disX).toInt(), (center + disY).toInt(), toggle, color)
+//            }
+//        }
+//    }
+//
+//    fun setPixel(x: Int, y: Int, toggle: Boolean, color: Int) {
+//        Drawer.pixels[posToIndex(x, y)].set(toggle, color)
+//    }
+//
+//    fun set(toggle: Boolean, color: Int) {
+//        isToggled = toggle
+//        if (!toggle) return
+//        this.color = color
+//    }
+//
+//}
\ No newline at end of file
diff --git a/src/main/kotlin/org/polyfrost/crosshair/config/PolyCrosshairConfig.kt b/src/main/kotlin/org/polyfrost/crosshair/config/PolyCrosshairConfig.kt
index 123182a..218b555 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/config/PolyCrosshairConfig.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/config/PolyCrosshairConfig.kt
@@ -5,8 +5,11 @@ import club.sk1er.patcher.config.OldPatcherConfig
 import org.polyfrost.crosshair.PolyCrosshair
 import org.polyfrost.crosshair.utils.*
 import org.polyfrost.oneconfig.api.config.v1.Config
+import org.polyfrost.oneconfig.api.config.v1.Property
+import org.polyfrost.oneconfig.api.config.v1.annotations.Dropdown
+import org.polyfrost.oneconfig.api.config.v1.annotations.Include
 import org.polyfrost.oneconfig.api.config.v1.annotations.RadioButton
-import java.lang.reflect.Field
+import org.polyfrost.oneconfig.api.config.v1.annotations.Slider
 
 object PolyCrosshairConfig : Config(
     "${PolyCrosshair.MODID}.json",
@@ -15,8 +18,6 @@ object PolyCrosshairConfig : Config(
     Category.QOL
 ) {
 
-    var drawer = HashMap<Int, Int>()
-
     val isCustom: Boolean
         get() = mode == 1
 
@@ -26,49 +27,47 @@ object PolyCrosshairConfig : Config(
     )
     var mode = 0
 
-    @CustomOption
-    var newCrosshairs = arrayListOf(CrosshairEntry())
-
-    var penColor = OneColor(-1)
+    @Crosshairs
+    var crosshairs = mutableListOf(CrosshairEntry(CrosshairEntry.DEFAULT))
 
     @Dropdown(
-        name = "Mirror",
+        title = "Mirror",
         options = ["Off", "Horizontal", "Vertical", "Quadrant"]
     )
     var mirror = 0
 
     @Slider(
-        name = "Canva Size",
+        title = "Canva Size",
         min = 15f, max = 32f
     )
     var canvaSize = 15
         get() = field.coerceIn(15, 32)
 
-    var newCurrentCrosshair = CrosshairEntry()
+    var currentCustomCrosshair = CrosshairEntry(CrosshairEntry.DEFAULT)
 
     var renderConfig = RenderConfig()
 
     init {
-        initialize()
-        this.generateOptionList(newCurrentCrosshair, mod.defaultPage, this.mod, false)
-        this.generateOptionList(renderConfig, mod.defaultPage, this.mod, false)
+//        this.generateOptionList(currentCustomCrosshair, mod.defaultPage, this.mod, false)
+//        this.generateOptionList(renderConfig, mod.defaultPage, this.mod, false)
         var options = listOf("hostile", "passive", "player", "hostileColor", "passiveColor", "playerColor", "dynamicOpacity")
-        for (i in options) {
-            hideIf(i) { !renderConfig.dynamicColor }
+        for (option in options) {
+            getProperty(option).addDisplayCondition { if (renderConfig.dynamicColor) Property.Display.HIDDEN else Property.Display.SHOWN }
         }
+
+        getProperty("crosshairs").addMetadata("size", canvaSize)
+
         addDependency(options[3], options[0])
         addDependency(options[4], options[1])
         addDependency(options[5], options[2])
         addDependency("centered", "mode")
         options = listOf("mirror", "canvaSize")
-        options.forEach { hideIf(it) { !mode } }
-        addListener("canvaSize") {
-            for (i in drawer) {
-                val pos = indexToPos(i.key)
-                if (pos.x >= canvaSize || pos.y >= canvaSize) {
-                    Drawer.pixels[i.key].isToggled = false
-                }
-            }
+        options.forEach {
+            getProperty(it).addDisplayCondition { if (mode == 0) Property.Display.HIDDEN else Property.Display.SHOWN }
+        }
+
+        addCallback("canvaSize") {
+            getProperty("crosshairs").addMetadata("size", canvaSize)
         }
 
         if (!renderConfig.didPatcherMigration) {
@@ -97,16 +96,25 @@ object PolyCrosshairConfig : Config(
         }
     }
 
-    override fun getCustomOption(
-        field: Field,
-        annotation: CustomOption,
-        page: OptionPage,
-        mod: Mod,
-        migrate: Boolean,
-    ): BasicOption? {
-        Drawer.addHideCondition { !mode }
-        ConfigUtils.getSubCategory(page, "General", "").options.add(Drawer)
-        return null
+//    override fun getCustomOption(
+//        field: Field,
+//        annotation: CustomOption,
+//        page: OptionPage,
+//        mod: Mod,
+//        migrate: Boolean,
+//    ): BasicOption? {
+//        Drawer.addHideCondition { !mode }
+//        ConfigUtils.getSubCategory(page, "General", "").options.add(Drawer)
+//        return null
+//    }
+
+    enum class MirrorMode {
+
+        OFF,
+        HORIZONTAL,
+        VERTICAL,
+        QUADRANT
+
     }
 
 }
diff --git a/src/main/kotlin/org/polyfrost/crosshair/elements/ColorSelector.kt b/src/main/kotlin/org/polyfrost/crosshair/elements/ColorSelector.kt
index d419ab4..c21fcfe 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/elements/ColorSelector.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/elements/ColorSelector.kt
@@ -1,42 +1,42 @@
-@file:Suppress("UnstableAPIUsage")
-package org.polyfrost.crosshair.elements
-
-import cc.polyfrost.oneconfig.gui.OneConfigGui
-import cc.polyfrost.oneconfig.gui.elements.BasicElement
-import cc.polyfrost.oneconfig.internal.assets.Images
-import cc.polyfrost.oneconfig.renderer.NanoVGHelper
-import cc.polyfrost.oneconfig.utils.InputHandler
-import cc.polyfrost.oneconfig.utils.dsl.renderTick
-import org.polyfrost.crosshair.config.PolyCrosshairConfig
-import java.awt.Color
-
-class ColorSelector : BasicElement(64, 32, false) {
-    private val element = BasicElement(64, 32, false)
-    private var colorSelector: ColorSelector? = null
-    private var open = false
-
-    override fun draw(vg: Long, x: Float, y: Float, inputHandler: InputHandler) {
-        if (OneConfigGui.INSTANCE == null) return
-        val nanoVGHelper = NanoVGHelper.INSTANCE
-
-        var color = PolyCrosshairConfig.penColor
-
-        element.update(x, y, inputHandler)
-        nanoVGHelper.drawHollowRoundRect(vg, x, y - 1, 64f, 32f, Color(73, 79, 92, 255).rgb, 12f, 2f)
-        nanoVGHelper.drawRoundImage(vg, Images.ALPHA_GRID.filePath, x + 5, y + 4, 56f, 24f, 8f, javaClass)
-        nanoVGHelper.drawRoundedRect(vg, x + 5, y + 4, 56f, 24f, color.rgb, 8f)
-        if (element.isClicked && !open) {
-            val finalColor = color
-            renderTick(1) {
-                open = true
-                colorSelector =
-                    ColorSelector(finalColor, inputHandler.mouseX(), inputHandler.mouseY(), true, inputHandler)
-                OneConfigGui.INSTANCE.initColorSelector(colorSelector)
-            }
-        }
-        if (OneConfigGui.INSTANCE.currentColorSelector !== colorSelector) open = false
-        else if (open) color = (OneConfigGui.INSTANCE.color)
-        PolyCrosshairConfig.penColor = color
-    }
-
-}
\ No newline at end of file
+//@file:Suppress("UnstableAPIUsage")
+//package org.polyfrost.crosshair.elements
+//
+//import cc.polyfrost.oneconfig.gui.OneConfigGui
+//import cc.polyfrost.oneconfig.gui.elements.BasicElement
+//import cc.polyfrost.oneconfig.internal.assets.Images
+//import cc.polyfrost.oneconfig.renderer.NanoVGHelper
+//import cc.polyfrost.oneconfig.utils.InputHandler
+//import cc.polyfrost.oneconfig.utils.dsl.renderTick
+//import org.polyfrost.crosshair.config.PolyCrosshairConfig
+//import java.awt.Color
+//
+//class ColorSelector : BasicElement(64, 32, false) {
+//    private val element = BasicElement(64, 32, false)
+//    private var colorSelector: ColorSelector? = null
+//    private var open = false
+//
+//    override fun draw(vg: Long, x: Float, y: Float, inputHandler: InputHandler) {
+//        if (OneConfigGui.INSTANCE == null) return
+//        val nanoVGHelper = NanoVGHelper.INSTANCE
+//
+//        var color = PolyCrosshairConfig.penColor
+//
+//        element.update(x, y, inputHandler)
+//        nanoVGHelper.drawHollowRoundRect(vg, x, y - 1, 64f, 32f, Color(73, 79, 92, 255).rgb, 12f, 2f)
+//        nanoVGHelper.drawRoundImage(vg, Images.ALPHA_GRID.filePath, x + 5, y + 4, 56f, 24f, 8f, javaClass)
+//        nanoVGHelper.drawRoundedRect(vg, x + 5, y + 4, 56f, 24f, color.rgb, 8f)
+//        if (element.isClicked && !open) {
+//            val finalColor = color
+//            renderTick(1) {
+//                open = true
+//                colorSelector =
+//                    ColorSelector(finalColor, inputHandler.mouseX(), inputHandler.mouseY(), true, inputHandler)
+//                OneConfigGui.INSTANCE.initColorSelector(colorSelector)
+//            }
+//        }
+//        if (OneConfigGui.INSTANCE.currentColorSelector !== colorSelector) open = false
+//        else if (open) color = (OneConfigGui.INSTANCE.color)
+//        PolyCrosshairConfig.penColor = color
+//    }
+//
+//}
\ No newline at end of file
diff --git a/src/main/kotlin/org/polyfrost/crosshair/elements/PresetElement.kt b/src/main/kotlin/org/polyfrost/crosshair/elements/PresetElement.kt
index c7ff797..c59b5da 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/elements/PresetElement.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/elements/PresetElement.kt
@@ -1,80 +1,80 @@
-@file:Suppress("UnstableAPIUsage")
-
-package org.polyfrost.crosshair.elements
-
-import cc.polyfrost.oneconfig.gui.elements.BasicButton
-import cc.polyfrost.oneconfig.gui.elements.BasicElement
-import cc.polyfrost.oneconfig.platform.Platform
-import cc.polyfrost.oneconfig.renderer.asset.AssetHelper
-import cc.polyfrost.oneconfig.renderer.asset.Image
-import cc.polyfrost.oneconfig.renderer.asset.SVG
-import cc.polyfrost.oneconfig.utils.InputHandler
-import cc.polyfrost.oneconfig.utils.color.ColorPalette
-import cc.polyfrost.oneconfig.utils.dsl.nanoVGHelper
-import org.polyfrost.crosshair.PolyCrosshair
-import org.polyfrost.crosshair.config.CrosshairEntry
-import org.polyfrost.crosshair.config.Drawer
-import org.polyfrost.crosshair.utils.copy
-import org.polyfrost.crosshair.utils.export
-import org.polyfrost.crosshair.utils.toBufferedImage
-import java.io.File
-import java.util.*
-
-private val remove = SVG("/assets/polycrosshair/trashcan.svg")
-private val copy = SVG("/assets/polycrosshair/copy.svg")
-
-class PresetElement(val crosshair: CrosshairEntry) : BasicElement(149, 149, ColorPalette.SECONDARY, true) {
-    val removeButton = BasicButton(32, 32, remove, 2, ColorPalette.TERTIARY)
-    val copyButton = BasicButton(32, 32, copy, 2, ColorPalette.TERTIARY)
-    val bufferedImage = toBufferedImage(crosshair.img)
-    val fileName = UUID.randomUUID().toString()
-    val image = Image(export(bufferedImage, fileName), AssetHelper.DEFAULT_FLAGS or 32)
-
-    init {
-        removeButton.setClickAction {
-            Drawer.removeQueue.add(crosshair)
-        }
-        copyButton.setClickAction {
-            copy(bufferedImage)
-        }
-    }
-
-    override fun update(x: Float, y: Float, inputHandler: InputHandler) {
-        hovered = Drawer.inArea && inputHandler.isAreaHovered(x - hitBoxX, y - hitBoxY, (width + hitBoxX).toFloat(), (height + hitBoxY).toFloat())
-        pressed = hovered && Platform.getMousePlatform().isButtonDown(0)
-        clicked = inputHandler.isClicked(false) && hovered
-
-        if (clicked) {
-            toggled = !toggled
-            onClick()
-        }
-
-        currentColor = if (hoverFx) colorAnimation.getColor(hovered, pressed)
-        else colorAnimation.getColor(false, false)
-    }
-
-    override fun draw(vg: Long, x: Float, y: Float, inputHandler: InputHandler?) {
-        super.draw(vg, x, y, inputHandler)
-        val half = 135 / 2f
-        nanoVGHelper.translate(vg, x + 7 + half, y + 7 + half)
-        nanoVGHelper.rotate(vg, crosshair.rotation.toDouble())
-        nanoVGHelper.drawImage(vg, image, -half, -half, 135f, 135f, -1)
-        nanoVGHelper.rotate(vg, -crosshair.rotation.toDouble())
-        nanoVGHelper.translate(vg, -(x + 7 + half), -(y + 7 + half))
-        if (hovered) {
-            copyButton.draw(vg, x + 117, y + 32, inputHandler)
-            removeButton.draw(vg, x + 117, y, inputHandler)
-        }
-    }
-
-    fun onRemove() {
-        File(PolyCrosshair.path + fileName + ".png").delete()
-        Drawer.elements.remove(crosshair)
-    }
-
-    override fun onClick() {
-        if (copyButton.isHovered) return
-        if (removeButton.isHovered) return
-        Drawer.loadImage(bufferedImage, false, crosshair)
-    }
-}
\ No newline at end of file
+//@file:Suppress("UnstableAPIUsage")
+//
+//package org.polyfrost.crosshair.elements
+//
+//import cc.polyfrost.oneconfig.gui.elements.BasicButton
+//import cc.polyfrost.oneconfig.gui.elements.BasicElement
+//import cc.polyfrost.oneconfig.platform.Platform
+//import cc.polyfrost.oneconfig.renderer.asset.AssetHelper
+//import cc.polyfrost.oneconfig.renderer.asset.Image
+//import cc.polyfrost.oneconfig.renderer.asset.SVG
+//import cc.polyfrost.oneconfig.utils.InputHandler
+//import cc.polyfrost.oneconfig.utils.color.ColorPalette
+//import cc.polyfrost.oneconfig.utils.dsl.nanoVGHelper
+//import org.polyfrost.crosshair.PolyCrosshair
+//import org.polyfrost.crosshair.config.CrosshairEntry
+//import org.polyfrost.crosshair.config.Drawer
+//import org.polyfrost.crosshair.utils.copy
+//import org.polyfrost.crosshair.utils.export
+//import org.polyfrost.crosshair.utils.toBufferedImage
+//import java.io.File
+//import java.util.*
+//
+//private val remove = SVG("/assets/polycrosshair/trashcan.svg")
+//private val copy = SVG("/assets/polycrosshair/copy.svg")
+//
+//class PresetElement(val crosshair: CrosshairEntry) : BasicElement(149, 149, ColorPalette.SECONDARY, true) {
+//    val removeButton = BasicButton(32, 32, remove, 2, ColorPalette.TERTIARY)
+//    val copyButton = BasicButton(32, 32, copy, 2, ColorPalette.TERTIARY)
+//    val bufferedImage = toBufferedImage(crosshair.img)
+//    val fileName = UUID.randomUUID().toString()
+//    val image = Image(export(bufferedImage, fileName), AssetHelper.DEFAULT_FLAGS or 32)
+//
+//    init {
+//        removeButton.setClickAction {
+//            Drawer.removeQueue.add(crosshair)
+//        }
+//        copyButton.setClickAction {
+//            copy(bufferedImage)
+//        }
+//    }
+//
+//    override fun update(x: Float, y: Float, inputHandler: InputHandler) {
+//        hovered = Drawer.inArea && inputHandler.isAreaHovered(x - hitBoxX, y - hitBoxY, (width + hitBoxX).toFloat(), (height + hitBoxY).toFloat())
+//        pressed = hovered && Platform.getMousePlatform().isButtonDown(0)
+//        clicked = inputHandler.isClicked(false) && hovered
+//
+//        if (clicked) {
+//            toggled = !toggled
+//            onClick()
+//        }
+//
+//        currentColor = if (hoverFx) colorAnimation.getColor(hovered, pressed)
+//        else colorAnimation.getColor(false, false)
+//    }
+//
+//    override fun draw(vg: Long, x: Float, y: Float, inputHandler: InputHandler?) {
+//        super.draw(vg, x, y, inputHandler)
+//        val half = 135 / 2f
+//        nanoVGHelper.translate(vg, x + 7 + half, y + 7 + half)
+//        nanoVGHelper.rotate(vg, crosshair.rotation.toDouble())
+//        nanoVGHelper.drawImage(vg, image, -half, -half, 135f, 135f, -1)
+//        nanoVGHelper.rotate(vg, -crosshair.rotation.toDouble())
+//        nanoVGHelper.translate(vg, -(x + 7 + half), -(y + 7 + half))
+//        if (hovered) {
+//            copyButton.draw(vg, x + 117, y + 32, inputHandler)
+//            removeButton.draw(vg, x + 117, y, inputHandler)
+//        }
+//    }
+//
+//    fun onRemove() {
+//        File(PolyCrosshair.path + fileName + ".png").delete()
+//        Drawer.elements.remove(crosshair)
+//    }
+//
+//    override fun onClick() {
+//        if (copyButton.isHovered) return
+//        if (removeButton.isHovered) return
+//        Drawer.loadImage(bufferedImage, false, crosshair)
+//    }
+//}
\ No newline at end of file
diff --git a/src/main/kotlin/org/polyfrost/crosshair/render/CrosshairRenderer.kt b/src/main/kotlin/org/polyfrost/crosshair/render/CrosshairRenderer.kt
index 43c3ca9..4e6519a 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/render/CrosshairRenderer.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/render/CrosshairRenderer.kt
@@ -20,7 +20,6 @@ import org.polyfrost.crosshair.config.PolyCrosshairConfig
 import org.polyfrost.crosshair.mixin.GuiIngameAccessor
 import org.polyfrost.oneconfig.utils.v1.OneImage
 import org.polyfrost.polyui.color.PolyColor
-import org.polyfrost.polyui.color.argb
 import org.polyfrost.universal.UResolution
 import org.polyfrost.utils.v1.dsl.mc
 import java.awt.image.BufferedImage
@@ -97,7 +96,7 @@ object CrosshairRenderer {
         (if (PolyCrosshairConfig.isCustom) textureLocation else vanillaLocation).let { mc.textureManager.bindTexture(it) }
         val mcScale = UResolution.scaleFactor.toFloat()
         GL.scale(1 / mcScale, 1 / mcScale, 1f)
-        val crosshair = PolyCrosshairConfig.newCurrentCrosshair
+        val crosshair = PolyCrosshairConfig.currentCustomCrosshair
         GL.translate(crosshair.offsetX.toFloat(), crosshair.offsetY.toFloat(), 0f)
         GL.translate((UResolution.windowWidth / 2).toFloat(), (UResolution.windowHeight / 2).toFloat(), 0f)
         GL.rotate(crosshair.rotation.toFloat(), 0f, 0f, 1f)
diff --git a/src/main/kotlin/org/polyfrost/crosshair/utils/Utils.kt b/src/main/kotlin/org/polyfrost/crosshair/utils/Utils.kt
index e817f7e..41123d0 100644
--- a/src/main/kotlin/org/polyfrost/crosshair/utils/Utils.kt
+++ b/src/main/kotlin/org/polyfrost/crosshair/utils/Utils.kt
@@ -35,16 +35,16 @@ fun export(image: BufferedImage?, name: String): String {
 fun save(image: OneImage?) {
     image ?: return
     val base64 = toBase64(image.image)
-    PolyCrosshairConfig.newCrosshairs.forEach {
-        if (it.img == base64) {
-            it.loadFrom(PolyCrosshairConfig.newCurrentCrosshair)
+    PolyCrosshairConfig.crosshairs.forEach {
+        if (it.base64 == base64) {
+            it.loadFrom(PolyCrosshairConfig.currentCustomCrosshair)
             return
         }
     }
-    val entry = CrosshairEntry()
-    entry.loadFrom(PolyCrosshairConfig.newCurrentCrosshair)
-    entry.img = base64
-    PolyCrosshairConfig.newCrosshairs.add(entry)
+    val entry = CrosshairEntry(CrosshairEntry.DEFAULT)
+    entry.loadFrom(PolyCrosshairConfig.currentCustomCrosshair)
+    entry.base64 = base64
+    PolyCrosshairConfig.crosshairs.add(entry)
 }
 
 fun toBufferedImage(string: String): BufferedImage? {
diff --git a/src/main/resources/mcmod.info b/src/main/resources/mcmod.info
index 1b11a57..d977302 100644
--- a/src/main/resources/mcmod.info
+++ b/src/main/resources/mcmod.info
@@ -1,10 +1,10 @@
 [
   {
-    "modid": "${id}",
-    "name": "${name}",
+    "modid": "${mod_id}",
+    "name": "${mod_name}",
     "description": "",
-    "version": "${version}",
-    "mcversion": "${mcVersionStr}",
+    "version": "${mod_version}",
+    "mcversion": "${mc_version}",
     "url": "",
     "updateUrl": "",
     "authorList": [