diff --git a/data/images/ui/button-grey-down.png b/data/images/ui/button-grey-down.png
new file mode 100644
index 0000000000..b0935c59b9
Binary files /dev/null and b/data/images/ui/button-grey-down.png differ
diff --git a/data/images/ui/button-grey-up.png b/data/images/ui/button-grey-up.png
new file mode 100644
index 0000000000..bb5a869689
Binary files /dev/null and b/data/images/ui/button-grey-up.png differ
diff --git a/data/images/ui/icon-arrow-disabled.png b/data/images/ui/icon-arrow-disabled.png
new file mode 100644
index 0000000000..d581aebeed
Binary files /dev/null and b/data/images/ui/icon-arrow-disabled.png differ
diff --git a/data/images/ui/icon-arrow.png b/data/images/ui/icon-arrow.png
new file mode 100644
index 0000000000..2b467e4fc2
Binary files /dev/null and b/data/images/ui/icon-arrow.png differ
diff --git a/data/images/ui/icon-arrow7x7-down.png b/data/images/ui/icon-arrow7x7-down.png
new file mode 100644
index 0000000000..859cec5175
Binary files /dev/null and b/data/images/ui/icon-arrow7x7-down.png differ
diff --git a/data/images/ui/icon-arrow7x7-right.png b/data/images/ui/icon-arrow7x7-right.png
new file mode 100644
index 0000000000..4238a43ccb
Binary files /dev/null and b/data/images/ui/icon-arrow7x7-right.png differ
diff --git a/data/images/ui/test/button-darkgrey-down.png b/data/images/ui/test/button-darkgrey-down.png
new file mode 100644
index 0000000000..9304eeed2e
Binary files /dev/null and b/data/images/ui/test/button-darkgrey-down.png differ
diff --git a/data/images/ui/test/button-darkgrey-up.png b/data/images/ui/test/button-darkgrey-up.png
new file mode 100644
index 0000000000..520166aee4
Binary files /dev/null and b/data/images/ui/test/button-darkgrey-up.png differ
diff --git a/data/images/ui/test/button-verydarkgrey-down.png b/data/images/ui/test/button-verydarkgrey-down.png
new file mode 100644
index 0000000000..6ea33d1517
Binary files /dev/null and b/data/images/ui/test/button-verydarkgrey-down.png differ
diff --git a/data/images/ui/test/button-verydarkgrey-up.png b/data/images/ui/test/button-verydarkgrey-up.png
new file mode 100644
index 0000000000..15f9fee823
Binary files /dev/null and b/data/images/ui/test/button-verydarkgrey-up.png differ
diff --git a/modules/client_options/data_options.lua b/modules/client_options/data_options.lua
index fadff65bd3..de7eae1d98 100644
--- a/modules/client_options/data_options.lua
+++ b/modules/client_options/data_options.lua
@@ -1,7 +1,7 @@
 return {
     vsync                             = {
         value = true,
-        action = function(value, options, controller, panels, extraWidgets, extraWidgets)
+        action = function(value, options, controller, panels, extraWidgets)
             g_window.setVerticalSync(value)
         end
     },
@@ -96,7 +96,7 @@ return {
         value = true,
         action = function(value, options, controller, panels, extraWidgets)
             panels.gameMapPanel:setDrawLights(value and options.ambientLight.value < 100)
-            panels.graphicsPanel:recursiveGetChildById('ambientLight'):setEnabled(value)
+            panels.graphicsEffectsPanel:recursiveGetChildById('ambientLight'):setEnabled(value)
         end
     },
     limitVisibleDimension             = {
@@ -114,7 +114,7 @@ return {
     ambientLight                      = {
         value = 0,
         action = function(value, options, controller, panels, extraWidgets)
-            panels.graphicsPanel:recursiveGetChildById('ambientLight'):setText(string.format('Ambient light: %s%%', value))
+            panels.graphicsEffectsPanel:recursiveGetChildById('ambientLight'):setText(string.format('Ambient light: %s%%', value))
             panels.gameMapPanel:setMinimumAmbientLight(value / 100)
             panels.gameMapPanel:setDrawLights(options.enableLights.value)
         end
@@ -158,13 +158,13 @@ return {
     turnDelay                         = {
         value = 50,
         action = function(value, options, controller, panels, extraWidgets)
-            panels.controlPanel:recursiveGetChildById('turnDelay'):setText(string.format('Turn delay: %sms', value))
+            panels.generalPanel:recursiveGetChildById('turnDelay'):setText(string.format('Turn delay: %sms', value))
         end
     },
     hotkeyDelay                       = {
         value = 70,
         action = function(value, options, controller, panels, extraWidgets)
-            panels.controlPanel:recursiveGetChildById('hotkeyDelay'):setText(string.format('Hotkey delay: %sms', value))
+            panels.generalPanel:recursiveGetChildById('hotkeyDelay'):setText(string.format('Hotkey delay: %sms', value))
         end
     },
     crosshair                         = {
@@ -177,7 +177,7 @@ return {
             end
 
             panels.gameMapPanel:setCrosshairTexture(newValue and crossPath .. newValue or nil)
-            panels.generalPanel:recursiveGetChildById('crosshair'):setCurrentOptionByData(newValue, true)
+            panels.interface:recursiveGetChildById('crosshair'):setCurrentOptionByData(newValue, true)
         end
     },
     enableHighlightMouseTarget        = {
@@ -196,7 +196,7 @@ return {
     shadowFloorIntensity              = {
         value = 30,
         action = function(value, options, controller, panels, extraWidgets)
-            panels.graphicsPanel:recursiveGetChildById('shadowFloorIntensity'):setText(string.format(
+            panels.graphicsEffectsPanel:recursiveGetChildById('shadowFloorIntensity'):setText(string.format(
                 'Shadow floor Intensity: %s%%', value))
             panels.gameMapPanel:setShadowFloorIntensity(1 - (value / 100))
         end
@@ -223,16 +223,16 @@ return {
         value = 1,
         action = function(value, options, controller, panels, extraWidgets)
             panels.gameMapPanel:setFloorViewMode(value)
-            panels.graphicsPanel:recursiveGetChildById('floorViewMode'):setCurrentOptionByData(value, true)
+            panels.graphicsEffectsPanel:recursiveGetChildById('floorViewMode'):setCurrentOptionByData(value, true)
 
             local fadeMode = value == 1
-            panels.graphicsPanel:recursiveGetChildById('floorFading'):setEnabled(fadeMode)
+            panels.graphicsEffectsPanel:recursiveGetChildById('floorFading'):setEnabled(fadeMode)
         end
     },
     floorFading                       = {
         value = 500,
         action = function(value, options, controller, panels, extraWidgets)
-            panels.graphicsPanel:recursiveGetChildById('floorFading'):setText(string.format('Floor Fading: %s ms', value))
+            panels.graphicsEffectsPanel:recursiveGetChildById('floorFading'):setText(string.format('Floor Fading: %s ms', value))
             panels.gameMapPanel:setFloorFading(tonumber(value))
         end
     },
@@ -242,7 +242,7 @@ return {
             if g_game.isUsingProtobuf() then
                 value = true
             elseif g_app.isEncrypted() then
-                local asyncWidget = panels.generalPanel:recursiveGetChildById('asyncTxtLoading')
+                local asyncWidget = panels.graphicsPanel:recursiveGetChildById('asyncTxtLoading')
                 asyncWidget:setEnabled(false)
                 asyncWidget:setChecked(false)
                 return
@@ -260,7 +260,7 @@ return {
                 value = value / 2
             end
             g_app.setCreatureInformationScale(math.max(value + 0.5, 1))
-            panels.consolePanel:recursiveGetChildById('creatureInformationScale'):setText(string.format(
+            panels.interfaceHUD:recursiveGetChildById('creatureInformationScale'):setText(string.format(
                 'Creature Information Scale: %sx', math.max(value + 0.5, 1)))
         end
     },
@@ -273,7 +273,7 @@ return {
                 value = value / 2
             end
             g_app.setStaticTextScale(math.max(value + 0.5, 1))
-            panels.consolePanel:recursiveGetChildById('staticTextScale'):setText(string.format('Message Scale: %sx',
+            panels.interfaceHUD:recursiveGetChildById('staticTextScale'):setText(string.format('Message Scale: %sx',
                 math.max(value + 0.5, 1)))
         end
     },
@@ -286,7 +286,7 @@ return {
                 value = value / 2
             end
             g_app.setAnimatedTextScale(math.max(value + 0.5, 1))
-            panels.consolePanel:recursiveGetChildById('animatedTextScale'):setText(
+            panels.interfaceHUD:recursiveGetChildById('animatedTextScale'):setText(
                 tr('Animated Message Scale: %sx', math.max(value + 0.5, 1)))
         end
     },
@@ -332,14 +332,14 @@ return {
         value = 100,
         action = function(value, options, controller, panels, extraWidgets)
             g_client.setEffectAlpha(value / 100)
-            panels.consolePanel:recursiveGetChildById('setEffectAlphaScroll'):setText(tr('Opacity Effect: %s%%', value))
+            panels.graphicsEffectsPanel:recursiveGetChildById('setEffectAlphaScroll'):setText(tr('Opacity Effect: %s%%', value))
         end
     },
     setMissileAlphaScroll             = {
         value = 100,
         action = function(value, options, controller, panels, extraWidgets)
             g_client.setMissileAlpha(value / 100)
-            panels.consolePanel:recursiveGetChildById('setMissileAlphaScroll'):setText(tr('Opacity Missile: %s%%', value))
+            panels.graphicsEffectsPanel:recursiveGetChildById('setMissileAlphaScroll'):setText(tr('Opacity Missile: %s%%', value))
         end
     },
     distFromCenScrollbar              = {
diff --git a/modules/client_options/options.lua b/modules/client_options/options.lua
index ac3859dab5..1d1b7a0030 100644
--- a/modules/client_options/options.lua
+++ b/modules/client_options/options.lua
@@ -2,13 +2,78 @@ local options = dofile("data_options")
 
 local panels = {
     generalPanel = nil,
-    controlPanel = nil,
-    consolePanel = nil,
     graphicsPanel = nil,
     soundPanel = nil,
-    gameMapPanel = nil
+    gameMapPanel = nil,
+    graphicsEffectsPanel = nil,
+    interfaceHUD = nil,
+    interface = nil,
+    misc = nil,
+    miscHelp = nil
 }
-
+-- LuaFormatter off
+local buttons = {{
+
+    text = "Controls",
+    icon = "/images/icons/icon_controls",
+    open = "generalPanel"
+    --[[     subCategories = {{
+        text = "General Hotkeys",
+        open = "generalPanel"
+    }, {
+        text = "Action Bar Hotkeys",
+        open = "Action_Bar_Hotkeys"
+    }, {
+        text = "Custom Hotkeys",
+        open = "Custom_Hotkeys"
+    }} ]]
+}, {
+    text = "Interface",
+    icon = "/images/icons/icon_interface",
+    open = "interface",
+    subCategories = {{
+        text = "HUD",
+        open = "interfaceHUD"
+    }, {
+        text = "Console",
+        open = "interfaceConsole"
+    }}
+}, {
+    text = "Graphics",
+    icon = "/images/icons/icon_graphics",
+    open = "graphicsPanel",
+    subCategories = {{
+        text = "Effects",
+        open = "graphicsEffectsPanel"
+    }}
+}, {
+    text = "Sound",
+    icon = "/images/icons/icon_sound",
+    open = "soundPanel"
+    --[[     subCategories = {{
+        text = "Battle Sounds",
+        open = "Battle_Sounds"
+    }, {
+        text = "UI Sounds",
+        open = "UI_Sounds"
+    }} ]]
+}, {
+    text = "Misc.",
+    icon = "/images/icons/icon_misc",
+    open = "misc",
+    subCategories = { --[[ {
+        text = "GamePlay",
+        open = "GamePlay"
+    },  {
+        text = "Screenshots",
+        open = "Screenshots"
+    }, ]] {
+        text = "Help",
+        open = "miscHelp"
+    }}
+}}
+
+-- LuaFormatter on
 local extraWidgets = {
     audioButton = nil,
     optionsButton = nil,
@@ -36,9 +101,9 @@ local function toggleOption(key)
 end
 
 local function setupComboBox()
-    local crosshairCombo = panels.generalPanel:recursiveGetChildById('crosshair')
+    local crosshairCombo = panels.interface:recursiveGetChildById('crosshair')
     local antialiasingModeCombobox = panels.graphicsPanel:recursiveGetChildById('antialiasingMode')
-    local floorViewModeCombobox = panels.graphicsPanel:recursiveGetChildById('floorViewMode')
+    local floorViewModeCombobox = panels.graphicsEffectsPanel:recursiveGetChildById('floorViewMode')
 
     for k, v in pairs({ { 'Disabled', 'disabled' }, { 'Default', 'default' }, { 'Full', 'full' } }) do
         crosshairCombo:addOption(v[1], v[2])
@@ -106,28 +171,32 @@ function controller:onInit()
     extraWidgets.audioButton = modules.client_topmenu.addTopRightToggleButton('audioButton', tr('Audio'),
         '/images/topbuttons/button_mute_up', function() toggleOption('enableAudio') end)
 
-    panels.generalPanel = g_ui.loadUI('general')
-    panels.controlPanel = g_ui.loadUI('control')
-    panels.consolePanel = g_ui.loadUI('console')
-    panels.graphicsPanel = g_ui.loadUI('graphics')
-    panels.soundPanel = g_ui.loadUI('audio')
+    panels.generalPanel = g_ui.loadUI('styles/controls/general',controller.ui.optionsTabContent)
+
+    panels.graphicsPanel = g_ui.loadUI('styles/graphics/graphics',controller.ui.optionsTabContent)
+    panels.graphicsEffectsPanel = g_ui.loadUI('styles/graphics/effects',controller.ui.optionsTabContent)
+    
+    panels.interface = g_ui.loadUI('styles/interface/interface',controller.ui.optionsTabContent)
+    panels.interfaceConsole = g_ui.loadUI('styles/interface/console',controller.ui.optionsTabContent)
+    panels.interfaceHUD = g_ui.loadUI('styles/interface/HUD',controller.ui.optionsTabContent)
 
+    panels.soundPanel = g_ui.loadUI('styles/sound/audio',controller.ui.optionsTabContent)
+    
+    panels.misc = g_ui.loadUI('styles/misc/misc',controller.ui.optionsTabContent)
+    panels.miscHelp = g_ui.loadUI('styles/misc/help',controller.ui.optionsTabContent)
+   
     self.ui:hide()
-    self.ui.optionsTabBar:setContentWidget(self.ui.optionsTabContent)
-    self.ui.optionsTabBar:addTab(tr('Options'), panels.generalPanel, '/images/icons/icon_options')
-    self.ui.optionsTabBar:addTab(tr('Controls'), panels.controlPanel, '/images/icons/icon_controls')
-    self.ui.optionsTabBar:addTab(tr('Interface'), panels.consolePanel, '/images/icons/icon_interface')
-    self.ui.optionsTabBar:addTab(tr('Graphics'), panels.graphicsPanel, '/images/icons/icon_graphics')
-    self.ui.optionsTabBar:addTab(tr('Sound'), panels.soundPanel, '/images/icons/icon_sound')
 
+    configureCharacterCategories()
     addEvent(setup)
 end
 
 function controller:onTerminate()
     extraWidgets.optionsButton:destroy()
     extraWidgets.audioButton:destroy()
-    panels = nil
-    extraWidgets = nil
+    panels = {}
+    extraWidgets = {}
+    buttons = {}
 end
 
 function setOption(key, value, force)
@@ -146,7 +215,7 @@ function setOption(key, value, force)
 
 
     -- change value for keybind updates
-    for _, panel in pairs(controller.ui.optionsTabBar:getTabsPanel()) do
+    for _, panel in pairs(panels) do
         local widget = panel:recursiveGetChildById(key)
         if widget then
             if widget:getStyle().__class == 'UICheckBox' then
@@ -190,23 +259,296 @@ end
 function toggle()
     if controller.ui:isVisible() then
         hide()
-    else
-        show()
+        return
+    end
+    if not controller.ui.openedCategory then
+        local firstCategory = controller.ui.optionsTabBar:getChildByIndex(1)
+        controller.ui.openedCategory = firstCategory
+        firstCategory.Button:onClick()
+        local panelToShow = panels[firstCategory.open]
+        if panelToShow then
+            panelToShow:show()
+            controller.ui.selectedOption = panelToShow
+        end
     end
+    show()
 end
 
 function addTab(name, panel, icon)
-    controller.ui.optionsTabBar:addTab(name, panel, icon)
+    print("to prevent the error use Ex = g_ui.loadUI('option_healthcircle',modules.client_options:getPanel()) ")
 end
 
 function removeTab(v)
-    if type(v) == 'string' then
-        v = controller.ui.optionsTabBar:getTab(v)
+    print("to prevent the error use Ex   modules.client_options.addButton('Interface', 'HP/MP Circle', optionPanel)")
+end
+
+local function toggleSubCategories(parent, isOpen)
+    for subId, _ in ipairs(parent.subCategories) do
+        local subWidget = parent:getChildById(subId)
+        if subWidget then
+            subWidget:setVisible(isOpen)
+        end
+    end
+    parent:setHeight(isOpen and parent.openedSize or parent.closedSize)
+    parent.opened = isOpen
+    parent.Button.Arrow:setVisible(not isOpen)
+end
+
+local function close(parent)
+    if parent.subCategories then
+        toggleSubCategories(parent, false)
+    end
+end
+
+local function open(parent)
+    local oldOpen = controller.ui.openedCategory
+    if oldOpen and oldOpen ~= parent then
+        close(oldOpen)
+    end
+    toggleSubCategories(parent, true)
+    controller.ui.openedCategory = parent
+end
+
+function selectCharacterPage()
+    local selectedOption = controller.ui.selectedOption
+    if selectedOption then
+        selectedOption:hide()
+    end
+    if controller.ui.InfoBase then
+        controller.ui.InfoBase:setVisible(true)
+        controller.ui.InfoBase:show()
+    end
+end
+
+local function createSubWidget(parent, subId, subButton)
+    local subWidget = g_ui.createWidget("OptionsCategory", parent)
+    subWidget:setId(subId)
+    subWidget.Button.Icon:setIcon(subButton.icon)
+    subWidget.Button.Title:setText(subButton.text)
+    subWidget:setVisible(false)
+    subWidget.open = subButton.open
+
+    function subWidget.Button.onClick()
+        local selectedOption = controller.ui.selectedOption
+        closeCharacterButtons()
+        parent.Button:setChecked(false)
+        parent.Button.Arrow:setVisible(true)
+        parent.Button.Arrow:setImageSource("")
+        subWidget.Button:setChecked(true)
+        subWidget.Button.Arrow:setVisible(true)
+        subWidget.Button.Arrow:setImageSource("/images/ui/icon-arrow7x7-right")
+
+        if selectedOption then
+            selectedOption:hide()
+        end
+
+        local panelToShow = panels[subWidget.open]
+        if panelToShow then
+            panelToShow:show()
+            panelToShow:setVisible(true)
+            controller.ui.selectedOption = panelToShow
+        else
+            print("Error: panelToShow is nil or does not exist in panels")
+        end
+    end
+
+    subWidget:addAnchor(AnchorHorizontalCenter, "parent", AnchorHorizontalCenter)
+    if subId == 1 then
+        subWidget:addAnchor(AnchorTop, "parent", AnchorTop)
+        subWidget:setMarginTop(20)
+    else
+        subWidget:addAnchor(AnchorTop, "prev", AnchorBottom)
+        subWidget:setMarginTop(-1)
+    end
+
+    return subWidget
+end
+
+function configureCharacterCategories()
+    controller.ui.optionsTabBar:destroyChildren()
+
+    for id, button in ipairs(buttons) do
+        local widget = g_ui.createWidget("OptionsCategory", controller.ui.optionsTabBar)
+        widget:setId(id)
+        widget.Button.Icon:setIcon(button.icon)
+        widget.Button.Title:setText(button.text)
+        widget.open = button.open
+
+        if button.subCategories then
+            widget.subCategories = button.subCategories
+            widget.subCategoriesSize = #button.subCategories
+            widget.Button.Arrow:setVisible(true)
+
+            for subId, subButton in ipairs(button.subCategories) do
+                local subWidget = createSubWidget(widget, subId, subButton)
+                if button.text == "Controls" then
+                    subWidget.Button.Title:setMarginLeft(-5)
+                end
+            end
+        end
+
+        widget:addAnchor(AnchorHorizontalCenter, "parent", AnchorHorizontalCenter)
+        if id == 1 then
+            widget:addAnchor(AnchorTop, "parent", AnchorTop)
+            widget:setMarginTop(10)
+        else
+            widget:addAnchor(AnchorTop, "prev", AnchorBottom)
+            widget:setMarginTop(10)
+        end
+
+        function widget.Button.onClick()
+            local parent = widget
+            local oldOpen = controller.ui.openedCategory
+
+            if oldOpen and oldOpen ~= parent then
+                if oldOpen.Button then
+                    oldOpen.Button:setChecked(false)
+                    oldOpen.Button.Arrow:setImageSource("/images/ui/icon-arrow7x7-down")
+                end
+
+                close(oldOpen)
+
+            end
+
+            if parent.subCategoriesSize then
+                parent.closedSize = parent.closedSize or parent:getHeight() / (parent.subCategoriesSize + 1) + 15
+                parent.openedSize = parent.openedSize or parent:getHeight() * (parent.subCategoriesSize + 1) - 6
+
+                if not parent.opened then
+                    open(parent)
+                end
+            end
+
+            widget.Button:setChecked(true)
+            widget.Button.Arrow:setImageSource("/images/ui/icon-arrow7x7-right")
+            widget.Button.Arrow:setVisible(true)
+
+            if controller.ui.selectedOption then
+                controller.ui.selectedOption:hide()
+            end
+
+            local panelToShow = panels[parent.open]
+            if panelToShow then
+                closeCharacterButtons()
+                panelToShow:show()
+                panelToShow:setVisible(true)
+                controller.ui.selectedOption = panelToShow
+            else
+                print("Error: panelToShow is nil or does not exist in panels")
+            end
+
+            controller.ui.openedCategory = parent
+        end
+    end
+end
+
+function closeCharacterButtons()
+    for i = 1, controller.ui.optionsTabBar:getChildCount() do
+        local widget = controller.ui.optionsTabBar:getChildByIndex(i)
+        if widget and widget.subCategories then
+            for subId, _ in ipairs(widget.subCategories) do
+                local subWidget = widget:getChildById(subId)
+                if subWidget then
+                    subWidget.Button:setChecked(false)
+                    subWidget.Button.Arrow:setVisible(false)
+                end
+            end
+        end
     end
+end
+
+function createCategory(text, icon, openPanel, subCategories)
+    local newCategory = {
+        text = text,
+        icon = icon,
+        open = type(openPanel) == "string" and openPanel or getPanelName(openPanel),
+        subCategories = subCategories
+    }
+    table.insert(buttons, newCategory)
+    if type(openPanel) ~= "string" then
+        panels[getPanelName(openPanel)] = openPanel
+    end
+    configureCharacterCategories()
+end
+
+function removeCategory(categoryText, subcategoryText)
+    for i, category in ipairs(buttons) do
+        if category.text == categoryText then
+            if subcategoryText then
+                if category.subCategories then
+                    for j, subcategory in ipairs(category.subCategories) do
+                        if subcategory.text == subcategoryText then
+                            panels[subcategory.open] = nil
+                            table.remove(category.subCategories, j)
+                            break
+                        end
+                    end
+                end
+            else
+                panels[category.open] = nil
+                if category.subCategories then
+                    for _, subcategory in ipairs(category.subCategories) do
+                        panels[subcategory.open] = nil
+                    end
+                end
+                table.remove(buttons, i)
+            end
+            configureCharacterCategories()
+            return
+        end
+    end
+end
+
+function removeButton(categoryText, buttonText)
+    for _, category in ipairs(buttons) do
+        if category.text == categoryText then
+            if category.subCategories then
+                for i, subcategory in ipairs(category.subCategories) do
+                    if subcategory.text == buttonText then
+                        panels[subcategory.open] = nil
+                        table.remove(category.subCategories, i)
+                        configureCharacterCategories()
+                        return
+                    end
+                end
+            end
+        end
+    end
+end
+
+function addButton(categoryText, buttonText, openPanel)
+    for _, category in ipairs(buttons) do
+        if category.text == categoryText then
+            if not category.subCategories then
+                category.subCategories = {}
+            end
+            local panelName = type(openPanel) == "string" and openPanel or getPanelName(openPanel)
+            table.insert(category.subCategories, {
+                text = buttonText,
+                open = panelName
+            })
+            if type(openPanel) ~= "string" then
+                panels[panelName] = openPanel
+            end
+            configureCharacterCategories()
+            return
+        end
+    end
+end
+
+function getPanelName(panel)
+    for name, p in pairs(panels) do
+        if p == panel then
+            return name
+        end
+    end
+    return "panel_" .. tostring(panel):match("userdata: 0x(%x+)")
+end
 
-    controller.ui.optionsTabBar:removeTab(v)
+function addSubcategoryToCategory(categoryText, newSubcategory)
+    addButtonToCategory(categoryText, newSubcategory)
 end
 
-function addButton(name, func, icon)
-    controller.ui.optionsTabBar:addButton(name, func, icon)
+function getPanel()
+    return controller.ui.optionsTabContent
 end
diff --git a/modules/client_options/options.otui b/modules/client_options/options.otui
index 3cc7e01b8a..cf930b11a5 100644
--- a/modules/client_options/options.otui
+++ b/modules/client_options/options.otui
@@ -1,3 +1,58 @@
+OptionsCategory < UIWidget
+  size: 115 22
+  image-source: /images/game/actionbar/1pixel-down-frame
+  image-border: 5
+  UIWidget
+    id: Button
+    size: 115 20
+    anchors.top: parent.top
+    anchors.left: parent.left
+    margin-left: 1
+    margin-top: 1
+    image-source: /images/ui/button-grey-up
+    image-border: 5
+    opacity: 1.0
+    $pressed:
+      image-source: /images/ui/button-grey-down
+    $checked:
+      image-source: /images/ui/button-grey-down
+    UIWidget
+      id: Icon
+      size: 13 13
+      anchors.left: parent.left
+      anchors.verticalCenter: parent.verticalCenter
+      margin-left: 10
+      phantom: true
+      $checked:
+        margin-left: 11
+        margin-top: 1
+      $!checked:
+        margin-left: 10
+        margin-top: 0
+    Label
+      id: Title
+      anchors.left: Icon.right
+      anchors.verticalCenter: Icon.verticalCenter
+      margin-left: 10
+      text-align: center
+      text-auto-resize: true
+      !text: tr('General Stats')
+      color: #ffffff
+      font: cipsoftFont
+      $checked:
+        text-offset: 12 10
+      $!checked:
+        text-offset: 0 0
+    UIWidget
+      id: Arrow
+      size: 7 7
+      anchors.right: parent.right
+      anchors.verticalCenter: parent.verticalCenter
+      margin-right: 5
+      phantom: true
+      image-source: /images/ui/icon-arrow7x7-down
+      visible: false
+
 OptionCheckBox < QtCheckBox
   anchors.left: parent.left
   anchors.right: parent.right
@@ -56,33 +111,45 @@ OptionScaleScrollMarked < Label
     @onValueChange: |
       modules.client_options.setOption(self:getParent():getId(), self:getValue())
 
-MiniQtWindow
+MainWindow
   id: optionsWindow
-  size: 685 530
+  size: 686 534
   anchors.centerIn: parent
   visible: false
-  draggable: false
+  draggable: true
+  icon-rect: 4 4 16 16
+
+  image-source: /images/ui/window_new
+  image-border: 4
+  image-border-top: 16
+  image-border-bottom: 4
+  &minimizedHeight: 17
+  draggable: true
 
+  $on:
+    image-border-bottom: 2
   @onEnter: modules.client_options.hide()
   @onEscape: modules.client_options.hide()
 
   Label
     !text: tr('Options')
     font: verdana-11px-antialised
-    text-offset: 0 2
+    margin-top: -35
     text-align: top
     anchors.top: parent.top
-    anchors.bottom: parent.bottom
+
     anchors.left: parent.left
     anchors.right: parent.right
     opacity: 0.5
 
-  TabBarQtVertical
+  UIWidget
     id: optionsTabBar
     anchors.top: parent.top
     anchors.left: parent.left
-    margin-left: 16
-    margin-top: 29
+    margin-left: 1
+    margin-top: -10
+    image-border: 3
+    image-source: /images/ui/2pixel_up_frame_borderimage_dark
     size: 128 453
 
   QtPanel
@@ -92,7 +159,7 @@ MiniQtWindow
     anchors.right: parent.right
     anchors.bottom: optionsTabBar.bottom
     margin-left: 10
-    margin-right: 10
+
 
   HorizontalSeparator
     anchors.left: optionsTabBar.left
@@ -106,7 +173,7 @@ MiniQtWindow
     !text: tr('Ok')
     size: 64 20
     anchors.right: parent.right
-    anchors.bottom: parent.bottom
-    margin-bottom: 10
+    anchors.top: prev.bottom
+    margin-top: 10
     margin-right: 10
     @onClick: modules.client_options.hide()
diff --git a/modules/client_options/styles/controls/general.otui b/modules/client_options/styles/controls/general.otui
new file mode 100644
index 0000000000..15fa6d23c0
--- /dev/null
+++ b/modules/client_options/styles/controls/general.otui
@@ -0,0 +1,140 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    height: 22
+
+    OptionCheckBoxMarked
+      id: showPing
+      !text: tr('Show connection ping')
+      !tooltip: tr('Display connection speed to the server (milliseconds)')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    height: 22
+    margin-top: 7
+    OptionCheckBox
+      id: classicControl
+      !text: tr('Classic control')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: autoChaseOverride
+      !text: tr('Allow auto chase override')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: moveStack
+      !text: tr('Move stacks directly')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBoxMarked
+      id: smartWalk
+      !text: tr('Enable smart walking')
+      !tooltip: tr('Will detect when to use diagonal step based on the\nkeys you are pressing')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBoxMarked
+      id: preciseControl
+      !text: tr('Enable precise control')
+      !tooltip: tr('You will have more precision over the character walking,\nbut it can feel more abrupt or unnatural')
+      @onCheckChange: g_game.setScheduleLastWalk(not self:isChecked())
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: openMaximized
+      !text: tr('Open containers maximized')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: displayText
+      !text: tr('Display text messages')
+      
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+
+    OptionScaleScroll
+      id: turnDelay
+      !text: tr('Turn delay: 30ms')
+      anchors.fill: parent
+      &minimumScrollValue: 30
+      &maximumScrollValue: 250
+      &scrollSize: 21
+      @onSetup: |
+        local value = modules.client_options.getOption('turnDelay')
+        self:setText(tr('Turn delay: %dms', value))
+
+  SmallReversedQtPanel
+    id: hotkeyDelay_label
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+
+    OptionScaleScroll
+      id: hotkeyDelay
+      !text: tr('Hotkey delay: 30ms')
+      anchors.fill: parent
+      &minimumScrollValue: 30
+      &maximumScrollValue: 250
+      &scrollSize: 21
+      @onSetup: |
+        local value = modules.client_options.getOption('hotkeyDelay')
+        self:setText(tr('Hotkey delay: %dms', value))
+
+  QtButton
+    id: hotkeysButton
+    !text: tr('Hotkeys Manager')
+    @onClick: modules.game_hotkeys.show()
+    anchors.top: prev.bottom
+    anchors.left: parent.left
+    margin-top: 12
+
+    size: 120 20
+
diff --git a/modules/client_options/styles/graphics/effects.otui b/modules/client_options/styles/graphics/effects.otui
new file mode 100644
index 0000000000..68cc881aec
--- /dev/null
+++ b/modules/client_options/styles/graphics/effects.otui
@@ -0,0 +1,129 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+
+    height: 60
+  
+    OptionCheckBox
+      id: enableLights
+      !text: tr('Enable lights')
+
+    OptionScaleScroll
+      id: ambientLight
+      anchors.top: prev.bottom
+      &minimumScrollValue: 0
+      &maximumScrollValue: 100
+      &scrollSize: 21
+      @onSetup: |
+        local value = modules.client_options.getOption('ambientLight')
+        self:setText(string.format('Ambient light: %s%%', value))
+
+    OptionScaleScroll
+      id: shadowFloorIntensity
+      anchors.top: prev.bottom
+      &minimumScrollValue: 0
+      &maximumScrollValue: 100
+      &scrollSize: 21
+      @onSetup: |
+        local value = modules.client_options.getOption('shadowFloorIntensity')
+        self:setText(string.format('Floor Shadowing Intensity: %s%%', value))
+
+    OptionScaleScroll
+      id: floorFading
+      anchors.top: prev.bottom
+      &minimumScrollValue: 0
+      &maximumScrollValue: 1000
+      &scrollSize: 21
+      @onSetup: |
+        local value = modules.client_options.getOption('floorFading')
+        self:setText(tr('Floor Fading: %s ms', value))
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 32
+  
+    Label
+      !text: 'Floor View Mode:'
+      anchors.left: parent.left
+      margin-left: 18
+      color: #c0c0c0ff
+      anchors.verticalCenter: parent.verticalCenter
+
+    QtComboBox
+      id: floorViewMode
+      width: 180
+      margin-left: 10
+      anchors.verticalCenter: prev.verticalCenter
+      anchors.left: prev.right
+      mouse-scroll: false
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+
+    OptionCheckBoxMarked
+      id: drawEffectOnTop
+      !text: tr('Draw Effect On Top')
+      !tooltip: tr('Draw effect after drawing the entire floor.')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBoxMarked
+      id: limitVisibleDimension
+      !text: tr('Limit Visible Dimension')
+      !tooltip: tr('The limit is based on your maximum range.')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: floatingEffect
+      !text: 'Draw Floating Effects'
+      
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+
+    OptionScaleScroll
+      id: setEffectAlphaScroll
+      anchors.fill: parent
+      &minimumScrollValue: 10
+      &maximumScrollValue: 100
+      &scrollSize: 21
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+
+    OptionScaleScroll
+      id: setMissileAlphaScroll
+      anchors.fill: parent
+      &minimumScrollValue: 10
+      &maximumScrollValue: 100
+      &scrollSize: 21
diff --git a/modules/client_options/styles/graphics/graphics.otui b/modules/client_options/styles/graphics/graphics.otui
new file mode 100644
index 0000000000..111f5c7ed2
--- /dev/null
+++ b/modules/client_options/styles/graphics/graphics.otui
@@ -0,0 +1,113 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+
+  Label
+    !text: 'Antialiasing Mode:'
+    anchors.left: parent.left
+    margin-left: 18
+    color: #c0c0c0ff
+    anchors.top: parent.top
+
+  QtComboBox
+    id: antialiasingMode
+    width: 180
+    margin-left: 10
+    anchors.verticalCenter: prev.verticalCenter
+    anchors.left: prev.right
+    mouse-scroll: false
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBoxMarked
+      id: fullscreen
+      !text: 'Full Screen Mode'
+      !tooltip: 'Ctrl+Shift+F'
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 5
+    height:55
+    
+    OptionCheckBoxMarked
+      id: vsync
+      !text: tr('V-Sync')
+      !tooltip: tr('Limits your fps based on monitor refresh rate')
+
+  
+    OptionCheckBoxMarked
+      id: showFps
+      !tooltip: tr('Show frame rate')
+      !text: tr('Show frame rate')
+      anchors.top: prev.bottom
+
+    OptionScaleScroll
+      id: backgroundFrameRate
+      !text: tr('Game framerate limit: %s', 'max')
+      anchors.top: prev.bottom
+      margin-top: 5
+      &minimumScrollValue: 10
+      &maximumScrollValue: 201
+      &scrollSize: 21
+      @onSetup: |
+        local value = modules.client_options.getOption('backgroundFrameRate')
+        local text = value
+        if value <= 0 or value >= 201 then
+          text = 'max'
+        end
+
+        self:setText(tr('Game framerate limit: %s', text))
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBoxMarked
+      id: optimizeFps
+      !text: tr('Optimize FPS')
+      !tooltip: tr('Try to optimize when the frame rate is below 60. VISUAL PROBLEMS MAY OCCUR')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBoxMarked
+      id: forceEffectOptimization
+      !text: tr('Force Effect Optimization')
+      !tooltip: tr('Will avoid drawing effects on certain occasions.')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBoxMarked
+      id: asyncTxtLoading
+      !text: tr('Async texture loading')
+      !tooltip: tr('This option makes textures load asynchronously and uses less RAM.')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: dontStretchShrink
+      !text: 'Don\'t stretch/shrink Game Window'
\ No newline at end of file
diff --git a/modules/client_options/styles/interface/HUD.otui b/modules/client_options/styles/interface/HUD.otui
new file mode 100644
index 0000000000..d66f90cbd8
--- /dev/null
+++ b/modules/client_options/styles/interface/HUD.otui
@@ -0,0 +1,77 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+
+    height: 22
+  
+    OptionCheckBox
+      id: displayNames
+      !text: tr('Display creature names')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: displayHealth
+      !text: tr('Display creature health bars')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: displayMana
+      !text: tr('Display player mana bar')
+      
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    height: 22
+    margin-top: 7
+    OptionScaleScroll
+      id: creatureInformationScale
+      anchors.fill: parent
+      &minimumScrollValue: 1
+      &maximumScrollValue: 9
+      &scrollSize: 21
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+
+    OptionScaleScroll
+      id: staticTextScale
+      anchors.fill: parent
+      &minimumScrollValue: 1
+      &maximumScrollValue: 9
+      &scrollSize: 21
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+
+    OptionScaleScroll
+      id: animatedTextScale
+      anchors.fill: parent
+      &minimumScrollValue: 1
+      &maximumScrollValue: 9
+      &scrollSize: 21
+
diff --git a/modules/client_options/styles/interface/console.otui b/modules/client_options/styles/interface/console.otui
new file mode 100644
index 0000000000..4d5a634b5e
--- /dev/null
+++ b/modules/client_options/styles/interface/console.otui
@@ -0,0 +1,90 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    height: 22
+
+    OptionCheckBox
+      id: showInfoMessagesInConsole
+      !text: tr('Show info messages')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showEventMessagesInConsole
+      !text: tr('Show event messages')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showStatusMessagesInConsole
+      !text: tr('Show status messages')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showOthersStatusMessagesInConsole
+      !text: tr('Show others status messages in console')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showTimestampsInConsole
+      !text: tr('Show timestamps')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showLevelsInConsole
+      !text: tr('Show levels')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showPrivateMessagesInConsole
+      !text: tr('Show private messages')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showPrivateMessagesOnScreen
+      !text: tr('Show private messages on screen')
+
diff --git a/modules/client_options/styles/interface/interface.otui b/modules/client_options/styles/interface/interface.otui
new file mode 100644
index 0000000000..bddc74b729
--- /dev/null
+++ b/modules/client_options/styles/interface/interface.otui
@@ -0,0 +1,80 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    height: 22
+
+    OptionCheckBox
+      id: enableHighlightMouseTarget
+      !text: tr('Highlight mouse target')
+
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showLeftPanel
+      !text: tr('Show left panel')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+  
+    OptionCheckBox
+      id: showRightExtraPanel
+      !text: tr('Show an extra right panel')
+      
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 22
+
+    OptionCheckBox
+      id: showActionbar
+      !text: tr('Show action bar')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    height: 22
+    margin-top: 5
+
+    OptionCheckBoxMarked
+      id: showSpellGroupCooldowns
+      !text: tr('Show spell group cooldowns')
+      !tooltip: tr('Can be enabled only in version 8.7x or higher')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 32
+  
+    Label
+      !text: 'Crosshair:'
+      anchors.left: parent.left
+      margin-left: 18
+      color: #c0c0c0ff
+      anchors.verticalCenter: parent.verticalCenter
+
+    QtComboBox
+      id: crosshair
+      width: 120
+      margin-left: 10
+      anchors.verticalCenter: prev.verticalCenter
+      anchors.left: prev.right
+      mouse-scroll: false
\ No newline at end of file
diff --git a/modules/client_options/styles/misc/help.otui b/modules/client_options/styles/misc/help.otui
new file mode 100644
index 0000000000..784cefa5b3
--- /dev/null
+++ b/modules/client_options/styles/misc/help.otui
@@ -0,0 +1,44 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    height: 60
+
+    QtButton
+      !text: tr('Wiki')
+      anchors.left: parent.left
+      anchors.top: parent.top
+      size: 130 20
+      margin-bottom: 10
+      margin-right: 10
+      @onClick: g_platform.openUrl("https://github.com/mehah/otclient/wiki")
+
+    QtButton
+      !text: tr('Info')
+      size: 130 20
+      margin-top: 5
+     
+      anchors.top: prev.bottom
+      anchors.left: parent.left
+
+      @onClick: g_platform.openUrl("https://github.com/mehah/otclient/wiki")
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    height: 33
+    margin-top: 5
+
+    QtButton
+      !text: tr('Clear Cache')
+      size: 130 20
+      margin-bottom: 10
+      margin-right: 10
+      anchors.left: parent.left
+      anchors.top: parent.top
+      @onClick: g_platform.openUrl("https://github.com/mehah/otclient/wiki")
+
diff --git a/modules/client_options/styles/misc/misc.otui b/modules/client_options/styles/misc/misc.otui
new file mode 100644
index 0000000000..a2144ce31c
--- /dev/null
+++ b/modules/client_options/styles/misc/misc.otui
@@ -0,0 +1,12 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    height: 22
+
+    OptionCheckBox
+      id: autoChaseOverride
+      !text: tr('Allow auto chase override')
\ No newline at end of file
diff --git a/modules/client_options/styles/sound/audio.otui b/modules/client_options/styles/sound/audio.otui
new file mode 100644
index 0000000000..5af79771e1
--- /dev/null
+++ b/modules/client_options/styles/sound/audio.otui
@@ -0,0 +1,36 @@
+UIWidget
+  anchors.fill: parent
+  visible: false
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    height: 22
+
+    OptionCheckBox
+      id: enableAudio
+      !text: tr('Enable audio')
+
+  SmallReversedQtPanel
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 7
+    height: 44
+  
+    OptionCheckBox
+      id: enableMusicSound
+      !text: tr('Enable music sound')
+
+    OptionScaleScroll
+      id: musicSoundVolume
+      margin-top: 5
+      anchors.top: prev.bottom
+      anchors.left: parent.left
+      anchors.right: parent.right
+      &minimumScrollValue: 1
+      &maximumScrollValue: 100
+      &scrollSize: 21
+      @onSetup: |
+        local value = modules.client_options.getOption('musicSoundVolume')
+        self:setText(tr('Music volume: %d', value))
diff --git a/modules/game_actionbar/game_actionbar.lua b/modules/game_actionbar/game_actionbar.lua
index d2b4dc4e21..2dbde86cfc 100644
--- a/modules/game_actionbar/game_actionbar.lua
+++ b/modules/game_actionbar/game_actionbar.lua
@@ -89,17 +89,9 @@ function terminate()
 end
 
 function online()
-
-    if g_game.getFeature(GameSpellList) then
-        local console = modules.game_cooldown.cooldownWindow
-        if console then
-            console:addAnchor(AnchorTop, actionBar:getId(), AnchorBottom)
-        end
-    else
-        local console = modules.game_console.consolePanel
-        if console then
-            console:addAnchor(AnchorTop, actionBar:getId(), AnchorBottom)
-        end
+    local console = modules.game_cooldown.cooldownWindow
+    if console then
+        console:addAnchor(AnchorTop, actionBar:getId(), AnchorBottom)
     end
     actionBarPanel:destroyChildren()
     addEvent(function()
diff --git a/modules/game_cooldown/cooldown.lua b/modules/game_cooldown/cooldown.lua
index da3b42cfc6..b3fda07688 100644
--- a/modules/game_cooldown/cooldown.lua
+++ b/modules/game_cooldown/cooldown.lua
@@ -277,6 +277,11 @@ function onSpellGroupCooldown(groupId, duration)
 end
 
 function setSpellGroupCooldownsVisible(visible)
+    if not g_game.getFeature(GameSpellList) then
+        cooldownWindow:hide()
+        cooldownWindow:setHeight(10)
+        return
+    end
     if visible then
         cooldownWindow:setHeight(30)
         cooldownWindow:show()
diff --git a/modules/game_healthcircle/game_healthcircle.lua b/modules/game_healthcircle/game_healthcircle.lua
index 4bea172863..e0b4b2bacf 100644
--- a/modules/game_healthcircle/game_healthcircle.lua
+++ b/modules/game_healthcircle/game_healthcircle.lua
@@ -512,8 +512,7 @@ opacityScrollbar = nil
 
 function addToOptionsModule()
     -- Add to options module
-    optionPanel = g_ui.loadUI('option_healthcircle')
-    modules.client_options.addTab('HP/MP Circle', optionPanel, '/images/icons/icon_health')
+    optionPanel = g_ui.loadUI('option_healthcircle',modules.client_options:getPanel())
 
     -- UI values
     healthCheckBox = optionPanel:recursiveGetChildById('healthCheckBox')
@@ -563,6 +562,7 @@ function addToOptionsModule()
     distFromCenScrollbar:setValue(distanceFromCenter)
     opacityScrollbar:setText(tr('Opacity') .. ': ' .. opacityCircle)
     opacityScrollbar:setValue(opacityCircle * 100)
+    modules.client_options.addButton("Interface", "HP/MP Circle", optionPanel)
 end
 
 function updateStatsBar()
@@ -595,6 +595,6 @@ function destroyOptionsModule()
     chooseStatsBarDimension = nil
     chooseStatsBarPlacement = nil
 
-    modules.client_options.removeTab('HP/MP Circle')
+    modules.client_options.removeButton("Interface", "HP/MP Circle")
     optionPanel = nil
 end
diff --git a/modules/game_healthcircle/option_healthcircle.otui b/modules/game_healthcircle/option_healthcircle.otui
index d4022c562b..511abfec3e 100644
--- a/modules/game_healthcircle/option_healthcircle.otui
+++ b/modules/game_healthcircle/option_healthcircle.otui
@@ -1,4 +1,6 @@
-Panel
+UIWidget
+  anchors.fill: parent
+  visible: false
   SmallReversedQtPanel
     anchors.left: parent.left
     anchors.right: parent.right
diff --git a/modules/game_screenshot/game_screenshot.lua b/modules/game_screenshot/game_screenshot.lua
index 0007c141c9..09536df3ff 100644
--- a/modules/game_screenshot/game_screenshot.lua
+++ b/modules/game_screenshot/game_screenshot.lua
@@ -43,7 +43,6 @@ local AutoScreenshotEvents = {
 -- LuaFormatter on
 
 -- @ widget
-local screenshotScheduleEvent = nil
 local optionPanel = nil
 -- @
 -- @ variables
@@ -61,18 +60,17 @@ end
 function screenshotController:onTerminate()
     destroyOptionsModule()
 
-    if screenshotScheduleEvent then
-        removeEvent(screenshotScheduleEvent)
-        screenshotScheduleEvent = nil
-    end
+    ScreenshotType = {}
+    checkboxes = {}
+    TypeScreenshots = {}
+    AutoScreenshotEvents = {}
 end
 
 function screenshotController:onGameStart()
     if g_game.getClientVersion() < 1180 then
         return
     end
-    optionPanel = g_ui.loadUI('game_screenshot')
-    modules.client_options.addTab('Screenshot', optionPanel, '/images/icons/icon_misc')
+    optionPanel = g_ui.loadUI('game_screenshot',modules.client_options:getPanel())
 
     for _, screenshotEvent in ipairs(AutoScreenshotEvents) do
         local label = g_ui.createWidget("ScreenshotType", optionPanel.allCheckBox)
@@ -84,6 +82,7 @@ function screenshotController:onGameStart()
         screenshotEvent.currentBoolean = settings
     end
 
+    optionPanel:recursiveGetChildById("enableScreenshots"):setChecked(g_settings.getBoolean("enableScreenshots"))
     optionPanel:recursiveGetChildById("onlyCaptureGameWindow"):setChecked(g_settings.getBoolean("onlyCaptureGameWindow"))
 
     if not g_resources.directoryExists(autoScreenshotDir) then
@@ -94,18 +93,17 @@ function screenshotController:onGameStart()
         onTakeScreenshot = onScreenShot
     })
     optionPanel:recursiveGetChildById("keepBlacklog"):disable() -- no compatibility 11/07/24
-    
+   
+    modules.client_options.addButton("Misc.", "Screenshot", optionPanel)
 end
 
 function screenshotController:onGameEnd()
     if g_game.getClientVersion() >= 1180 then
         g_settings.set("onlyCaptureGameWindow",optionPanel:recursiveGetChildById("onlyCaptureGameWindow"):isChecked())
+        g_settings.set("enableScreenshots",optionPanel:recursiveGetChildById("enableScreenshots"):isChecked())
         destroyOptionsModule()
     end
-    if screenshotScheduleEvent then
-        removeEvent(screenshotScheduleEvent)
-        screenshotScheduleEvent = nil
-    end
+
     for _, screenshotEvent in ipairs(AutoScreenshotEvents) do
         local labelScreenshotEvent = screenshotEvent.label:gsub("%s+", "")
         g_settings.set(labelScreenshotEvent, screenshotEvent.currentBoolean)
@@ -150,7 +148,7 @@ end
 -- LuaFormatter on
 
 function destroyOptionsModule()
-    modules.client_options.removeTab('Screenshot')
+    modules.client_options.removeButton("Misc.","Screenshot")
     if optionPanel and not optionPanel:isDestroyed() then
         optionPanel:destroy()
         optionPanel = nil
@@ -178,21 +176,17 @@ function takeScreenshot(name)
         return
     end
 
-    if screenshotScheduleEvent then
-        removeEvent(screenshotScheduleEvent)
-        screenshotScheduleEvent = nil
-    end
-
-    screenshotScheduleEvent = scheduleEvent(function()
+    screenshotController:scheduleEvent(function()
         if  optionPanel:recursiveGetChildById("onlyCaptureGameWindow"):isChecked() then
             g_app.doMapScreenshot(name)
         else
             g_app.doScreenshot(name)
         end
-    end, 50)
+    end, 50, 'screenshotScheduleEvent')
 end
 
 function OpenFolder()
     local directory = g_resources.getWriteDir():gsub("[/\\]+", "\\") .. autoScreenshotDirName
     g_platform.openDir(directory)
 end
+
diff --git a/modules/game_screenshot/game_screenshot.otui b/modules/game_screenshot/game_screenshot.otui
index a71ef8387f..57a71a2c13 100644
--- a/modules/game_screenshot/game_screenshot.otui
+++ b/modules/game_screenshot/game_screenshot.otui
@@ -1,4 +1,6 @@
-Panel
+UIWidget
+  anchors.fill: parent
+  visible: false
   SmallReversedQtPanel
     anchors.left: parent.left
     anchors.right: parent.right
@@ -34,7 +36,7 @@ Panel
       id: enableScreenshots
       !text: tr('Enable Auto Screenshots')
       !tooltip: tr('Enable this option to save screenshots of the most important\nmoments of your Tibia career! Whenever one of the events you\nhave selected takes place, a screenshot will be taken\nautomatically.\n\nThe following events can be selected to trigger an auto screenshot:\n\n- Level Up: Your character has reached the next level\n- Skill Up: You advanced in one of your skills (e.g. Magic Level\nor Sword Fighting)\n- Achievement: You earned an achievement, either while\nplaying or upon login\n- Bestiary Entry Unlocked: You unlocked new information\nabout a creature in the Bestiary\n- Bestiary Entry Completed: You unlocked all information about\na creature in the Bestiary\n- Treasure Found: You received some reward from a container\nfor solving a quest or a riddle\n- Valuable Loot: You just found some loot which you have\nmarked in the Drop Tracker\n- Boss Defeated: You defeated a boss monster, either alone or\ntogether with other players, and are entitled to loot it\n- Death PvE: You were just killed by some creature (PvE)\n- Death PvP: You were just killed by another player (PvP)\n- Player Kill: You defeated another player\n- Player Killer Assist: You assisted the killing of another player\n- Player Attacking: Another player just started to attack you\n- Highest Damage Dealt: You dealt a new all-time high damage\non a foe. To see or reset your current all-time high, check\nthe Impact Analyser\n- Highest Healing Done: You healed someone with a new all-\ntime high healing value. To see or reset your current all-time\nhigh, check the Impact Analyser\n- Low Health: You have reached a threshold of deep red\nhealth Copy')
-      checked: true
+      checked: false
 
     Label
       !text: tr('Select all events that sould trigger auto Screenshots:')