diff --git a/exp_legacy/module/config/_file_loader.lua b/exp_legacy/module/config/_file_loader.lua
index c8ceed82..02dc1d98 100644
--- a/exp_legacy/module/config/_file_loader.lua
+++ b/exp_legacy/module/config/_file_loader.lua
@@ -50,16 +50,16 @@ return {
     "modules.gui.task-list",
     --"modules.gui.warp-list",
     --"modules.gui.player-list",
-    --"modules.gui.server-ups",
-    --"modules.gui.bonus",
+    "modules.gui.server-ups",
+    "modules.gui.bonus",
     --"modules.gui.vlayer",
-    --"modules.gui.research",
+    "modules.gui.research",
     --"modules.gui.module",
     "modules.gui.landfill",
     "modules.gui.tool",
     "modules.gui.production",
     --"modules.gui.playerdata",
-    --"modules.gui.surveillance",
+    "modules.gui.surveillance",
     --"modules.gui.toolbar", -- must be loaded last to register toolbar handlers
     
     "modules.graftorio.require", -- graftorio
diff --git a/exp_legacy/module/modules/gui/bonus.lua b/exp_legacy/module/modules/gui/bonus.lua
index 9ee65303..a80ac57b 100644
--- a/exp_legacy/module/modules/gui/bonus.lua
+++ b/exp_legacy/module/modules/gui/bonus.lua
@@ -3,17 +3,20 @@
     @alias bonus_container
 ]]
 
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
-local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
+local Gui = require("modules/exp_gui")
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
+local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
 local config = require("modules.exp_legacy.config.bonus") --- @dep config.bonus
 local vlayer = require("modules.exp_legacy.modules.control.vlayer")
 local format_number = require("util").format_number --- @dep util
 local bonus_container
 
-local function bonus_gui_pts_needed(player)
-    local frame = Gui.get_left_element(player, bonus_container)
-    local disp = frame.container["bonus_st_2"].disp.table
+--- @param player LuaPlayer
+--- @param container LuaGuiElement?
+--- @return number
+local function bonus_gui_pts_needed(player, container)
+    container = container or Gui.get_left_element(bonus_container, player)
+    local disp = container.frame["bonus_st_2"].disp.table
     local total = 0
 
     for k, v in pairs(config.conversion) do
@@ -29,6 +32,7 @@ local function bonus_gui_pts_needed(player)
     return total
 end
 
+--- @param player LuaPlayer
 local function apply_bonus(player)
     if not Roles.player_allowed(player, "gui/bonus") then
         for k, v in pairs(config.player_bonus) do
@@ -48,8 +52,8 @@ local function apply_bonus(player)
         return
     end
 
-    local frame = Gui.get_left_element(player, bonus_container)
-    local disp = frame.container["bonus_st_2"].disp.table
+    local container = Gui.get_left_element(bonus_container, player)
+    local disp = container.frame["bonus_st_2"].disp.table
 
     for k, v in pairs(config.conversion) do
         player[v] = disp["bonus_display_" .. k .. "_slider"].slider_value
@@ -71,8 +75,8 @@ local function apply_periodic_bonus(player)
         return
     end
 
-    local frame = Gui.get_left_element(player, bonus_container)
-    local disp = frame.container["bonus_st_2"].disp.table
+    local container = Gui.get_left_element(bonus_container, player)
+    local disp = container.frame["bonus_st_2"].disp.table
 
     if vlayer.get_statistics()["energy_sustained"] > 0 then
         local armor = player.get_inventory(defines.inventory.character_armor)
@@ -99,20 +103,20 @@ end
 
 --- Control label for the bonus points available
 -- @element bonus_gui_control_pts_a
-local bonus_gui_control_pts_a =
-    Gui.element{
+local bonus_gui_control_pts_a = Gui.element("bonus_gui_control_pts_a")
+    :draw{
         type = "label",
-        name = "bonus_control_pts_a",
+        name = Gui.property_from_name,
         caption = { "bonus.control-pts-a" },
         style = "heading_2_label",
     }:style{
         width = config.gui_display_width["half"],
     }
 
-local bonus_gui_control_pts_a_count =
-    Gui.element{
+local bonus_gui_control_pts_a_count = Gui.element("bonus_gui_control_pts_a_count")
+    :draw{
         type = "label",
-        name = "bonus_control_pts_a_count",
+        name = Gui.property_from_name,
         caption = config.pts.base,
         style = "heading_2_label",
     }:style{
@@ -121,20 +125,20 @@ local bonus_gui_control_pts_a_count =
 
 --- Control label for the bonus points needed
 -- @element bonus_gui_control_pts_n
-local bonus_gui_control_pts_n =
-    Gui.element{
+local bonus_gui_control_pts_n = Gui.element("bonus_gui_control_pts_n")
+    :draw{
         type = "label",
-        name = "bonus_control_pts_n",
+        name = Gui.property_from_name,
         caption = { "bonus.control-pts-n" },
         style = "heading_2_label",
     }:style{
         width = config.gui_display_width["half"],
     }
 
-local bonus_gui_control_pts_n_count =
-    Gui.element{
+local bonus_gui_control_pts_n_count = Gui.element("bonus_gui_control_pts_n_count")
+    :draw{
         type = "label",
-        name = "bonus_control_pts_n_count",
+        name = Gui.property_from_name,
         caption = "0",
         style = "heading_2_label",
     }:style{
@@ -143,20 +147,20 @@ local bonus_gui_control_pts_n_count =
 
 --- Control label for the bonus points remaining
 -- @element bonus_gui_control_pts_r
-local bonus_gui_control_pts_r =
-    Gui.element{
+local bonus_gui_control_pts_r = Gui.element("bonus_gui_control_pts_r")
+    :draw{
         type = "label",
-        name = "bonus_control_pts_r",
+        name = Gui.property_from_name,
         caption = { "bonus.control-pts-r" },
         style = "heading_2_label",
     }:style{
         width = config.gui_display_width["half"],
     }
 
-local bonus_gui_control_pts_r_count =
-    Gui.element{
+local bonus_gui_control_pts_r_count = Gui.element("bonus_gui_control_pts_r_count")
+    :draw{
         type = "label",
-        name = "bonus_control_pts_r_count",
+        name = Gui.property_from_name,
         caption = "0",
         style = "heading_2_label",
     }:style{
@@ -165,16 +169,17 @@ local bonus_gui_control_pts_r_count =
 
 --- A button used for pts calculations
 -- @element bonus_gui_control_refresh
-local bonus_gui_control_reset =
-    Gui.element{
+local bonus_gui_control_reset = Gui.element("bonus_gui_control_reset")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = { "bonus.control-reset" },
     }:style{
         width = config.gui_display_width["half"],
-    }:on_click(function(player, element, _)
-        local frame = Gui.get_left_element(player, bonus_container)
-        local disp = frame.container["bonus_st_2"].disp.table
+    }:on_click(function(def, event, element)
+        local player = Gui.get_player(event)
+        local container = Gui.get_left_element(bonus_container, player)
+        local disp = container.frame["bonus_st_2"].disp.table
 
         for k, v in pairs(config.conversion) do
             local s = "bonus_display_" .. k .. "_slider"
@@ -198,14 +203,15 @@ local bonus_gui_control_reset =
 
 --- A button used for pts apply
 -- @element bonus_gui_control_apply
-local bonus_gui_control_apply =
-    Gui.element{
+local bonus_gui_control_apply = Gui.element("bonus_gui_control_apply")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = { "bonus.control-apply" },
     }:style{
         width = config.gui_display_width["half"],
-    }:on_click(function(player, element, _)
+    }:on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local n = bonus_gui_pts_needed(player)
         element.parent[bonus_gui_control_pts_n_count.name].caption = n
         local r = tonumber(element.parent[bonus_gui_control_pts_a_count.name].caption) - n
@@ -218,10 +224,10 @@ local bonus_gui_control_apply =
 
 --- A vertical flow containing all the bonus control
 -- @element bonus_control_set
-local bonus_control_set =
-    Gui.element(function(_, parent, name)
+local bonus_control_set = Gui.element("bonus_control_set")
+    :draw(function(_, parent, name)
         local bonus_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local disp = Gui.scroll_table(bonus_set, config.gui_display_width["half"] * 2, 2, "disp")
+        local disp = Gui.elements.scroll_table(bonus_set, config.gui_display_width["half"] * 2, 2, "disp")
 
         bonus_gui_control_pts_a(disp)
         bonus_gui_control_pts_a_count(disp)
@@ -240,8 +246,8 @@ local bonus_control_set =
 
 --- Display group
 -- @element bonus_gui_slider
-local bonus_gui_slider =
-    Gui.element(function(_definition, parent, name, caption, tooltip, bonus)
+local bonus_gui_slider = Gui.element("bonus_gui_slider")
+    :draw(function(def, parent, name, caption, tooltip, bonus)
         local label = parent.add{
             type = "label",
             caption = caption,
@@ -284,7 +290,8 @@ local bonus_gui_slider =
 
         return slider
     end)
-    :on_value_changed(function(player, element, _event)
+    :on_value_changed(function(def, event, element)
+        local player = Gui.get_player(event)
         if element.tags.is_percentage then
             element.parent[element.tags.counter].caption = format_number(element.slider_value * 100, false) .. " %"
         else
@@ -292,18 +299,18 @@ local bonus_gui_slider =
         end
 
         local r = bonus_gui_pts_needed(player)
-        local frame = Gui.get_left_element(player, bonus_container)
-        local disp = frame.container["bonus_st_1"].disp.table
+        local container = Gui.get_left_element(bonus_container, player)
+        local disp = container.frame["bonus_st_1"].disp.table
         disp[bonus_gui_control_pts_n_count.name].caption = r
         disp[bonus_gui_control_pts_r_count.name].caption = tonumber(disp[bonus_gui_control_pts_a_count.name].caption) - r
     end)
 
 --- A vertical flow containing all the bonus data
 -- @element bonus_data_set
-local bonus_data_set =
-    Gui.element(function(_, parent, name)
+local bonus_data_set = Gui.element("bonus_data_set")
+    :draw(function(_, parent, name)
         local bonus_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local disp = Gui.scroll_table(bonus_set, config.gui_display_width["half"] * 2, 3, "disp")
+        local disp = Gui.elements.scroll_table(bonus_set, config.gui_display_width["half"] * 2, 3, "disp")
 
         for k, v in pairs(config.conversion) do
             bonus_gui_slider(disp, "bonus_display_" .. k, { "bonus.display-" .. k }, { "bonus.display-" .. k .. "-tooltip" }, config.player_bonus[v])
@@ -317,32 +324,34 @@ local bonus_data_set =
 
 --- The main container for the bonus gui
 -- @element bonus_container
-bonus_container =
-    Gui.element(function(definition, parent)
-        local player = Gui.get_player_from_element(parent)
-        local container = Gui.container(parent, definition.name, config.gui_display_width["half"] * 2)
+bonus_container = Gui.element("bonus_container")
+    :draw(function(def, parent)
+        local player = Gui.get_player(parent)
+        local container = Gui.elements.container(parent, config.gui_display_width["half"] * 2)
 
         bonus_control_set(container, "bonus_st_1")
         bonus_data_set(container, "bonus_st_2")
 
-        local frame = Gui.get_left_element(player, bonus_container)
-        local disp = frame.container["bonus_st_1"].disp.table
-        local n = bonus_gui_pts_needed(player)
+        local disp = container["bonus_st_1"].disp.table
+        local n = bonus_gui_pts_needed(player, container.parent)
         disp[bonus_gui_control_pts_n_count.name].caption = n
         local r = tonumber(disp[bonus_gui_control_pts_a_count.name].caption) - n
         disp[bonus_gui_control_pts_r_count.name].caption = r
 
-        apply_bonus(player)
         return container.parent
     end)
-    :static_name(Gui.unique_static_name)
-    :add_to_left_flow()
 
---- Button on the top flow used to toggle the bonus container
--- @element toggle_left_element
-Gui.left_toolbar_button("item/exoskeleton-equipment", { "bonus.main-tooltip" }, bonus_container, function(player)
-    return Roles.player_allowed(player, "gui/bonus")
-end)
+--- Add the element to the left flow with a toolbar button
+Gui.add_left_element(bonus_container, false)
+Gui.create_toolbar_button{
+    name = "bonus_toggle",
+    left_element = bonus_container,
+    sprite = "item/exoskeleton-equipment",
+    tooltip = { "bonus.main-tooltip" },
+    visible = function(player, element)
+        return Roles.player_allowed(player, "gui/bonus")
+    end
+}
 
 Event.add(defines.events.on_player_created, function(event)
     if event.player_index ~= 1 then
@@ -369,8 +378,8 @@ end)
 --- When a player respawns re-apply bonus
 Event.add(defines.events.on_player_respawned, function(event)
     local player = game.players[event.player_index]
-    local frame = Gui.get_left_element(player, bonus_container)
-    local disp = frame.container["bonus_st_1"].disp.table
+    local container = Gui.get_left_element(bonus_container, player)
+    local disp = container.frame["bonus_st_1"].disp.table
     local n = bonus_gui_pts_needed(player)
     disp[bonus_gui_control_pts_n_count.name].caption = n
     local r = tonumber(disp[bonus_gui_control_pts_a_count.name].caption) - n
diff --git a/exp_legacy/module/modules/gui/research.lua b/exp_legacy/module/modules/gui/research.lua
index 3325581a..7defc66b 100644
--- a/exp_legacy/module/modules/gui/research.lua
+++ b/exp_legacy/module/modules/gui/research.lua
@@ -2,7 +2,7 @@
 -- @gui Research
 
 local ExpUtil = require("modules/exp_util")
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
+local Gui = require("modules/exp_gui")
 local Storage = require("modules/exp_util/storage")
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
 local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
@@ -174,20 +174,20 @@ end
 
 --- Display label for the clock display
 -- @element research_gui_clock_display
-local research_gui_clock =
-    Gui.element{
+local research_gui_clock = Gui.element("research_gui_clock")
+    :draw{
         type = "label",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = empty_time,
         style = "heading_2_label",
     }
 
 --- A vertical flow containing the clock
 -- @element research_clock_set
-local research_clock_set =
-    Gui.element(function(_, parent, name)
+local research_clock_set = Gui.element("research_clock_set")
+    :draw(function(_, parent, name)
         local research_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local disp = Gui.scroll_table(research_set, 390, 1, "disp")
+        local disp = Gui.elements.scroll_table(research_set, 390, 1, "disp")
 
         research_gui_clock(disp)
 
@@ -196,8 +196,8 @@ local research_clock_set =
 
 --- Display group
 -- @element research_data_group
-local research_data_group =
-    Gui.element(function(_definition, parent, i)
+local research_data_group = Gui.element("research_data_group")
+    :draw(function(_def, parent, i)
         local name = parent.add{
             type = "label",
             name = "research_" .. i .. "_name",
@@ -238,10 +238,10 @@ local research_data_group =
 
 --- A vertical flow containing the data
 -- @element research_data_set
-local research_data_set =
-    Gui.element(function(_, parent, name)
+local research_data_set = Gui.element("research_data_set")
+    :draw(function(_, parent, name)
         local research_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local disp = Gui.scroll_table(research_set, 390, 4, "disp")
+        local disp = Gui.elements.scroll_table(research_set, 390, 4, "disp")
         local res_disp = research_gui_update()
 
         research_data_group(disp, 0)
@@ -265,21 +265,27 @@ local research_data_set =
         return research_set
     end)
 
-local research_container =
-    Gui.element(function(definition, parent)
-        local container = Gui.container(parent, definition.name, 390)
+local research_container = Gui.element("research_container")
+    :draw(function(def, parent)
+        local container = Gui.elements.container(parent, 390)
 
         research_clock_set(container, "research_st_1")
         research_data_set(container, "research_st_2")
 
         return container.parent
     end)
-    :static_name(Gui.unique_static_name)
-    :add_to_left_flow()
 
-Gui.left_toolbar_button("item/space-science-pack", { "research.main-tooltip" }, research_container, function(player)
-    return Roles.player_allowed(player, "gui/research")
-end)
+--- Add the element to the left flow with a toolbar button
+Gui.add_left_element(research_container, false)
+Gui.create_toolbar_button{
+    name = "research_toggle",
+    left_element = research_container,
+    sprite = "item/space-science-pack",
+    tooltip = { "research.main-tooltip" },
+    visible = function(player, element)
+        return Roles.player_allowed(player, "gui/research")
+    end
+}
 
 Event.add(defines.events.on_research_finished, function(event)
     research_notification(event)
@@ -294,8 +300,8 @@ Event.add(defines.events.on_research_finished, function(event)
     local res_disp = research_gui_update()
 
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, research_container)
-        local disp = frame.container["research_st_2"].disp.table
+        local container = Gui.get_left_element(research_container, player)
+        local disp = container.frame["research_st_2"].disp.table
 
         for i = 1, 8, 1 do
             local research_name_i = "research_" .. i
@@ -313,8 +319,8 @@ Event.on_nth_tick(60, function()
     local current_time = research_time_format(game.tick)
 
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, research_container)
-        local disp = frame.container["research_st_1"].disp.table
+        local container = Gui.get_left_element(research_container, player)
+        local disp = container.frame["research_st_1"].disp.table
         disp[research_gui_clock.name].caption = current_time
     end
 end)
diff --git a/exp_legacy/module/modules/gui/server-ups.lua b/exp_legacy/module/modules/gui/server-ups.lua
index fc0bd3d2..c05ca770 100644
--- a/exp_legacy/module/modules/gui/server-ups.lua
+++ b/exp_legacy/module/modules/gui/server-ups.lua
@@ -4,7 +4,7 @@
     @alias server_ups
 ]]
 
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
+local Gui = require("modules/exp_gui")
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
 local External = require("modules.exp_legacy.expcore.external") --- @dep expcore.external
 local Commands = require("modules/exp_commands")
@@ -20,11 +20,11 @@ UsesServerUps:set_metadata{
 
 --- Label to show the server ups
 -- @element server_ups
-local server_ups =
-    Gui.element{
+local server_ups = Gui.element("server_ups")
+    :draw{
         type = "label",
         caption = "SUPS = 60.0",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }
     :style{
         font = "default-game",
@@ -70,6 +70,7 @@ end
 
 -- Draw the label when the player joins
 Event.add(defines.events.on_player_created, set_location)
+Event.add(defines.events.on_player_joined_game, set_location)
 
 -- Update the caption for all online players
 -- percentage of game speed
diff --git a/exp_legacy/module/modules/gui/surveillance.lua b/exp_legacy/module/modules/gui/surveillance.lua
index 87187d12..dadb2965 100644
--- a/exp_legacy/module/modules/gui/surveillance.lua
+++ b/exp_legacy/module/modules/gui/surveillance.lua
@@ -1,32 +1,31 @@
 ---- module surveillance
 -- @gui surveillance
 
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
+local Gui = require("modules/exp_gui")
 local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
 
-local cctv_player =
-    Gui.element(function(definition, parent, player_list)
+local cctv_player = Gui.element("cctv_player")
+    :draw(function(def, parent, player_list)
         return parent.add{
-            name = definition.name,
+            name = def.name,
             type = "drop-down",
             items = player_list,
-            selected_index = #player_list > 0 and 1,
+            selected_index = #player_list > 0 and 1 or nil,
         }
     end)
     :style{
         horizontally_stretchable = true,
     }
-    :static_name(Gui.unique_static_name)
 
-local cctv_status =
-    Gui.element{
+local cctv_status = Gui.element("cctv_status")
+    :draw{
         type = "drop-down",
         items = { { "surveillance.status-enable" }, { "surveillance.status-disable" } },
         selected_index = 2,
     }:style{
         width = 96,
-    }:on_selection_changed(function(_, element, _)
+    }:on_selection_state_changed(function(def, event, element)
         if element.selected_index == 1 then
             element.parent.parent.parent.cctv_display.visible = true
         else
@@ -34,59 +33,60 @@ local cctv_status =
         end
     end)
 
-local cctv_type =
-    Gui.element{
+local cctv_type = Gui.element("cctv_type")
+    :draw{
         type = "drop-down",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         items = { { "surveillance.type-player" }, { "surveillance.type-static" }, { "surveillance.type-player-loop" } },
         selected_index = 1,
     }:style{
         width = 96,
     }
 
-local cctv_location =
-    Gui.element{
+local cctv_location = Gui.element("cctv_location")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = { "surveillance.func-set" },
     }:style{
         width = 48,
-    }:on_click(function(player, element, _)
+    }:on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         element.parent.parent.parent.cctv_display.position = player.physical_position
     end)
 
-local zoom_in =
-    Gui.element{
+local zoom_in = Gui.element("zoom_in")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = "+",
     }:style{
         width = 32,
-    }:on_click(function(_, element, _)
+    }:on_click(function(def, event, element)
         local display = element.parent.parent.parent.cctv_display
         if display.zoom < 2.0 then
             display.zoom = display.zoom + 0.05
         end
     end)
 
-local zoom_out =
-    Gui.element{
+local zoom_out = Gui.element("zoom_out")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = "-",
     }:style{
         width = 32,
-    }:on_click(function(_, element, _)
+    }:on_click(function(def, event, element)
         local display = element.parent.parent.parent.cctv_display
         if display.zoom > 0.2 then
             display.zoom = display.zoom - 0.05
         end
     end)
 
-local camera_set =
-    Gui.element(function(_, parent, name, player_list)
+local camera_set = Gui.element("camera_set")
+    :draw(function(_, parent, name, player_list)
         local camera_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local buttons = Gui.scroll_table(camera_set, 480, 6, "buttons")
+        local buttons = Gui.elements.scroll_table(camera_set, 480, 6, "buttons")
 
         cctv_player(buttons, player_list)
         cctv_status(buttons)
@@ -109,9 +109,9 @@ local camera_set =
         return camera_set
     end)
 
-local cctv_container =
-    Gui.element(function(definition, parent)
-        local container = Gui.container(parent, definition.name, 480)
+local cctv_container = Gui.element("cctv_container")
+    :draw(function(def, parent)
+        local container = Gui.elements.container(parent, 480)
         local scroll = container.add{ name = "scroll", type = "scroll-pane", direction = "vertical" }
         scroll.style.maximal_height = 704
         local player_list = {}
@@ -125,12 +125,18 @@ local cctv_container =
 
         return container.parent
     end)
-    :static_name(Gui.unique_static_name)
-    :add_to_left_flow()
 
-Gui.left_toolbar_button("entity/radar", { "surveillance.main-tooltip" }, cctv_container, function(player)
-    return Roles.player_allowed(player, "gui/surveillance")
-end)
+--- Add the element to the left flow with a toolbar button
+Gui.add_left_element(cctv_container, false)
+Gui.create_toolbar_button{
+    name = "cctv_toggle",
+    left_element = cctv_container,
+    sprite = "entity/radar",
+    tooltip = { "surveillance.main-tooltip" },
+    visible = function(player, element)
+        return Roles.player_allowed(player, "gui/surveillance")
+    end
+}
 
 local function gui_update()
     local player_list = {}
@@ -140,9 +146,9 @@ local function gui_update()
     end
 
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, cctv_container)
-        frame.container.scroll["cctv_st_1"].buttons.table[cctv_player.name].items = player_list
-        frame.container.scroll["cctv_st_2"].buttons.table[cctv_player.name].items = player_list
+        local container = Gui.get_left_element(cctv_container, player)
+        container.frame.scroll["cctv_st_1"].buttons.table[cctv_player.name].items = player_list
+        container.frame.scroll["cctv_st_2"].buttons.table[cctv_player.name].items = player_list
     end
 end
 
@@ -151,18 +157,18 @@ Event.add(defines.events.on_player_left_game, gui_update)
 
 Event.add(defines.events.on_tick, function(_)
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, cctv_container)
+        local container = Gui.get_left_element(cctv_container, player)
 
         for i = 1, 2 do
             local scroll_table_name = "cctv_st_" .. i
-            local current_camera_set = frame.container.scroll[scroll_table_name]
+            local current_camera_set = container.frame.scroll[scroll_table_name]
             local switch_index = current_camera_set.buttons.table[cctv_type.name].selected_index
 
             if (switch_index == 1) or (switch_index == 3) then
                 local selected_index = current_camera_set.buttons.table[cctv_player.name].selected_index
 
                 if selected_index ~= 0 then
-                    selected_index = current_camera_set.buttons.table[cctv_player.name].items[selected_index]
+                    selected_index = current_camera_set.buttons.table[cctv_player.name].items[selected_index] --[[ @as number ]]
                     current_camera_set["cctv_display"].position = game.players[selected_index].physical_position
                     current_camera_set["cctv_display"].surface_index = game.players[selected_index].surface_index
                 else
@@ -176,10 +182,10 @@ end)
 
 Event.on_nth_tick(600, function(_)
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, cctv_container)
+        local container = Gui.get_left_element(cctv_container, player)
 
         for i = 1, 2 do
-            local current_camera_set = frame.container.scroll["cctv_st_" .. i]
+            local current_camera_set = container.frame.scroll["cctv_st_" .. i]
 
             if current_camera_set.buttons.table[cctv_type.name].selected_index == 3 then
                 local item_n = #current_camera_set.buttons.table[cctv_player.name].items