diff --git a/docs/assets/content/imguiExample.png b/docs/assets/content/imguiExample.png
new file mode 100644
index 00000000..c61416fe
Binary files /dev/null and b/docs/assets/content/imguiExample.png differ
diff --git a/docs/assets/content/imguiExample.zip b/docs/assets/content/imguiExample.zip
new file mode 100644
index 00000000..35e99a90
Binary files /dev/null and b/docs/assets/content/imguiExample.zip differ
diff --git a/docs/en/beamng/cef-snippets.md b/docs/en/beamng/cef-snippets.md
new file mode 100644
index 00000000..680d0713
--- /dev/null
+++ b/docs/en/beamng/cef-snippets.md
@@ -0,0 +1,11 @@
+!!! warning "This site is under construction!"
+
+    This site is being actively worked on. 
+    
+    Feel you could help? Please do by clicking on the page with a pencil on the right!
+
+    This can be done any page too.
+    
+# BeamNG.drive CEF Code Snippets
+
+to-do
diff --git a/docs/en/beamng/css-snippets.md b/docs/en/beamng/css-snippets.md
new file mode 100644
index 00000000..6d0a6a9a
--- /dev/null
+++ b/docs/en/beamng/css-snippets.md
@@ -0,0 +1,179 @@
+!!! warning "This site is under construction!"
+
+    This site is being actively worked on. 
+    
+    Feel you could help? Please do by clicking on the page with a pencil on the right!
+
+    This can be done any page too.
+    
+# BeamNG.drive CSS Code Snippets
+
+## Common variables
+
+=== BeamNG Orange
+
+	```css
+	var(--bng-orange) /*Common orange*/
+	var(--bng-orange-shade1) /*70% opacity*/
+	var(--bng-orange-shade2) /*40% opacity*/
+	var(--bng-orange-shade1opaque)
+	var(--bng-orange-shade2opaque)
+	```
+
+=== Monochrome
+
+	```css
+	--- Monochrome
+	var(--bng-black-8) /*80% opacity (duplicate --bng-black-o8)*/
+	var(--bng-black-6) /*60% opacity (duplicate --bng-black-o6)*/
+	var(--bng-black-4) /*40% opacity (duplicate --bng-black-o4)*/
+	var(--bng-black-2) /*20% opacity (duplicate --bng-black-o2)*/
+
+	var(--dark-neutral-grey)
+	var(--neutral-grey)
+	var(--light-neutral-grey)
+	var(--dark-grey)
+	var(--dark-grey-alpha) /*80% opacity*/
+
+	var(--black-1) /*70% opacity*/
+	var(--black-2) /*40% opacity (duplicate --bng-black-o4)*/
+
+	var(--white-1) /*80% opacity*/
+	var(--white-2) /*40% opacity*/
+	var(--white-3) /*20% opacity*/
+	```
+
+=== BeamNG UI Color Palette
+
+	=== Orange
+
+		```css
+		var(--bng-orange-50)
+		var(--bng-orange-100)
+		var(--bng-orange-200)
+		var(--bng-orange-300)
+		var(--bng-orange-b400)
+		var(--bng-orange-500)
+		var(--bng-orange-600)
+		var(--bng-orange-700)
+		var(--bng-orange-800)
+		var(--bng-orange-900)
+		```
+	
+	=== Cool Gray
+
+		```css
+		var(--bng-cool-gray-50)
+		var(--bng-cool-gray-100)
+		var(--bng-cool-gray-200)
+		var(--bng-cool-gray-300)
+		var(--bng-cool-gray-400)
+		var(--bng-cool-gray-500)
+		var(--bng-cool-gray-600)
+		var(--bng-cool-gray-700)
+		var(--bng-cool-gray-800)
+		var(--bng-cool-gray-900)
+		```
+	
+	=== Ter Blue
+		```css
+		var(--bng-ter-blue-50)
+		var(--bng-ter-blue-100)
+		var(--bng-ter-blue-200)
+		var(--bng-ter-blue-300)
+		var(--bng-ter-blue-400)
+		var(--bng-ter-blue-500)
+		var(--bng-ter-blue-600)
+		var(--bng-ter-blue-700)
+		var(--bng-ter-blue-800)
+		var(--bng-ter-blue-900)
+		```
+	
+	=== Add Blue
+		```css
+		var(--bng-add-blue-50)
+		var(--bng-add-blue-100)
+		var(--bng-add-blue-200)
+		var(--bng-add-blue-300)
+		var(--bng-add-blue-400)
+		var(--bng-add-blue-500)
+		var(--bng-add-blue-600)
+		var(--bng-add-blue-700)
+		var(--bng-add-blue-800)
+		var(--bng-add-blue-900)
+		```
+	
+	=== Add Green
+		```css
+		var(--bng-add-green-50)
+		var(--bng-add-green-100)
+		var(--bng-add-green-200)
+		var(--bng-add-green-300)
+		var(--bng-add-green-400)
+		var(--bng-add-green-500)
+		var(--bng-add-green-600)
+		var(--bng-add-green-700)
+		var(--bng-add-green-800)
+		var(--bng-add-green-900)
+		```
+	
+	=== Add Yellow
+		```css
+		var(--bng-add-yellow-50)
+		var(--bng-add-yellow-100)
+		var(--bng-add-yellow-200)
+		var(--bng-add-yellow-300)
+		var(--bng-add-yellow-400)
+		var(--bng-add-yellow-500)
+		var(--bng-add-yellow-600)
+		var(--bng-add-yellow-700)
+		var(--bng-add-yellow-800)
+		var(--bng-add-yellow-900)
+		```
+	
+	=== Add Peach
+		```css
+		var(--bng-add-peach-50)
+		var(--bng-add-peach-100)
+		var(--bng-add-peach-200)
+		var(--bng-add-peach-300)
+		var(--bng-add-peach-400)
+		var(--bng-add-peach-500)
+		var(--bng-add-peach-600)
+		var(--bng-add-peach-700)
+		var(--bng-add-peach-800)
+		var(--bng-add-peach-900)
+		```
+
+	=== Add Red
+		```css
+		var(--bng-add-red-50)
+		var(--bng-add-red-100)
+		var(--bng-add-red-200)
+		var(--bng-add-red-300)
+		var(--bng-add-red-400)
+		var(--bng-add-red-500)
+		var(--bng-add-red-600)
+		var(--bng-add-red-700)
+		var(--bng-add-red-800)
+		var(--bng-add-red-900)
+		```
+	
+
+=== Extra color presets
+
+	```css
+	var(--bng-filter-orange) /*Filter preset to force SVGs to use bng-orange*/
+	var(--bng-black-o8) /*80% opacity*/
+	var(--bng-black-o6) /*60% opacity*/
+	var(--bng-black-o4) /*40% opacity*/
+	var(--bng-black-o2) /*20% opacity*/
+	```
+
+=== Corner rounding presets
+
+	```css
+	var(--bng-corners-1) /*0.25rem*/
+	var(--bng-corners-2) /*0.50rem*/
+	var(--bng-corners-3) /*1.00rem*/
+	```
diff --git a/docs/en/beamng/dev/modding/imgui-window-tutorial.md b/docs/en/beamng/dev/modding/imgui-window-tutorial.md
new file mode 100644
index 00000000..6b707491
--- /dev/null
+++ b/docs/en/beamng/dev/modding/imgui-window-tutorial.md
@@ -0,0 +1,88 @@
+!!! warning "This site is under construction!"
+
+    This site is being actively worked on. 
+    
+    Feel you could help? Please do by clicking on the page with a pencil on the right!
+
+    This can be done any page too.
+    # Creating an ImGui Window
+
+This page covers how to create a basic ImGui window.
+
+## Setup
+
+Before using ImGui, some setup is required:
+
+```lua
+local im = ui_imgui -- shortcut to prevent lookups all the time. should help with optimization
+local imguiExampleWindowOpen = im.BoolPtr(true)
+```
+
+`imguiExampleWindowOpen` will be used to determine when this example window should be rendered.
+
+## Window Rendering
+
+ImGui windows and their contents must be recreated for every frame they should be displayed. This means that some form of onUpdate function is necessary to use ImGui.
+
+```lua
+local function onUpdate()
+	if worldReadyState == 2 then
+		if imguiExampleWindowOpen[0] == true then
+			imguiExample()
+		end
+	end
+end
+M.onUpdate = onUpdate
+```
+
+This will run a function to create this example's window, so long as the level is fully loaded, and that the example window should be displaying.
+
+## Window Content
+
+If you're new to writing ImGui, think of it as a distant cousin of HTML:
+
+* `im.SetNextWindowSize(im.ImVec2(x, y), im.Cond_FirstUseEver)` defines your viewport size if it hasn't already been defined
+* `im.Begin()` and `im.End()` is your `<body>` and `</body>`
+* `im.Text()` is your `<p></p>`
+
+```lua
+local buttonPresses = 0
+
+local function imguiExample()
+	im.SetNextWindowSize(im.ImVec2(366, 100), im.Cond_FirstUseEver) -- prepare our window
+	im.Begin("Hello World, I am a window") -- create a window with the title of "Hello World, I am a window"
+		im.Indent() -- a... padding element
+			im.Text("Hello World, I am text.") -- add a line of text, somewhat like a <p> element
+			im.SameLine() -- Not really HTML. This appends the following element to the same line as the previous element.
+			if im.Button("The Hello World Button") then -- Like <button>. This runs Lua when pressed.
+				buttonPresses = buttonPresses + 1
+			end
+			if buttonPresses > 0 then
+				im.Text("The Hello World Button has been pressed " .. buttonPresses .. " times!")
+			else
+				im.Text("The Hello World Button has not been pressed.")
+			end
+		im.Unindent() -- end the "padding element"
+	im.End() -- complete our "canvas" so it can be drawn
+end
+```
+
+You can add the following function to easily toggle visibility of the window:
+
+```lua
+local function toggleExampleImgui()
+	imguiExampleWindowOpen[0] = not imguiExampleWindowOpen[0]
+end
+```
+
+## Result
+
+<figure class="image image_resized" style="width:100%" markdown>
+  ![The ImGui example code demonstrated ingame](../../../../assets/content/imguiExample.png)
+</figure>
+
+When the The Hello World Button button is pressed, the counter below it will update to display the amount of times the The Hello World Button button has been pressed.
+
+## Download
+
+This tutorial is almost entirely based off of [StanleyDudek](https://github.com/StanleyDudek)'s ImGui example mod. You can download this example mod [here](../../../../assets/content/imguiExample.zip).
diff --git a/docs/en/beamng/imgui-snippets.md b/docs/en/beamng/imgui-snippets.md
new file mode 100644
index 00000000..69464e3a
--- /dev/null
+++ b/docs/en/beamng/imgui-snippets.md
@@ -0,0 +1,77 @@
+!!! warning "This site is under construction!"
+
+    This site is being actively worked on. 
+    
+    Feel you could help? Please do by clicking on the page with a pencil on the right!
+
+    This can be done any page too.
+    
+# BeamNG.drive ImGui Code Snippets
+
+## Setup
+
+### Setup ImGui
+
+```lua
+local im = ui_imgui
+```
+
+### Setup Window
+
+```lua
+im.SetNextWindowSize(im.ImVec2(366, 100), im.Cond_FirstUseEver)
+```
+
+### Create window
+
+```lua
+im.Begin("Window Title") -- Create window
+im.End()
+```
+
+## General
+
+=== Basic Formatting
+
+	```lua
+	im.Text("")
+	im.TextWrapped("") -- automatic word wrap
+	im.TextColored(im.ImVec4(0,1,0,1), "") -- R,G,B,A
+	im.TextDisabled("") -- predefined style for disabled text
+
+	im.LabelText("", "")
+	im.BulletText("") -- Bullet point with text
+	im.SeparatorText("") -- Separator with centered text
+
+	im.Separator() -- might want a NewLine before these
+	im.SameLine() -- horizontally append the following element to the previous element
+	im.NewLine()
+
+	im.Spacing() -- small padding
+	im.Indent()
+	im.Unindent()
+	```
+
+=== Inputs
+
+	```lua
+	im.Button("", im.ImVec2(0,0)) -- 0 = fit to content
+	im.SmallButton("") -- Fit to content and slightly less padding
+	im.ArrowButton("", 0) -- arg 1: string is not actually used? arg 2: 0 = left, 1 = right, 2 = up, 3 = down
+	im.InvisibleButton("", im.ImVec2(0,0), ...) -- used for imgui cursor positioning?
+
+	im.Checkbox("", im.BoolPtr(false))
+
+	im.RadioButton1("", im.BoolPtr(false))
+	im.RadioButton2("", im.IntPtr(), 0) -- arg. 3: 0 or 1 for disabled or enabled
+	```
+
+=== Other
+
+	```lua
+	im.Bullet()
+
+	im.ProgressBar(0.5, im.ImVec2(0,0), "") -- arg 2: 0 for default width and/or height
+
+	im.TextUnformatted("", "") -- Second argument seems to crash the game
+	```
diff --git a/docs/en/beamng/index.md b/docs/en/beamng/index.md
index ac544901..b37dc04c 100644
--- a/docs/en/beamng/index.md
+++ b/docs/en/beamng/index.md
@@ -4,7 +4,6 @@ This documentation is unofficial and produced by the BeamMP Mod Team and the Bea
 ## Understanding The File Structure
 ...
 
-
 ## Snippets
 
-Helpful code snippets can be found here: [Snippets](snippets.md)
\ No newline at end of file
+Helpful code snippets can be found here: [Lua Snippets](lua-snippets.md)
\ No newline at end of file
diff --git a/docs/en/beamng/lua-snippets.md b/docs/en/beamng/lua-snippets.md
new file mode 100644
index 00000000..41a0c80e
--- /dev/null
+++ b/docs/en/beamng/lua-snippets.md
@@ -0,0 +1,350 @@
+!!! warning "This site is under construction!"
+
+    This site is being actively worked on. 
+    
+    Feel you could help? Please do by clicking on the page with a pencil on the right!
+
+    This can be done any page too.
+    
+# BeamNG.drive Lua Code Snippets
+
+## World
+
+### Drawing a marker & Vehicle detection
+
+Drawing markers in the map can be one of the best ways to indicate to the user that there is some form of interaction that they can do there.
+
+Drawing a marker is fairly easy. Here is an example of how the bus route marker is drawn:
+
+```lua
+  local function createBusMarker(markerName)
+    local marker =  createObject('TSStatic')
+    marker:setField('shapeName', 0, "art/shapes/interface/position_marker.dae")
+    marker:setPosition(vec3(0, 0, 0))
+    marker.scale = vec3(1, 1, 1)
+    marker:setField('rotation', 0, '1 0 0 0')
+    marker.useInstanceRenderData = true
+    marker:setField('instanceColor', 0, '1 1 1 0')
+    marker:setField('collisionType', 0, "Collision Mesh")
+    marker:setField('decalType', 0, "Collision Mesh")
+    marker:setField('playAmbient', 0, "1")
+    marker:setField('allowPlayerStep', 0, "1")
+    marker:setField('canSave', 0, "0")
+    marker:setField('canSaveDynamicFields', 0, "1")
+    marker:setField('renderNormals', 0, "0")
+    marker:setField('meshCulling', 0, "0")
+    marker:setField('originSort', 0, "0")
+    marker:setField('forceDetail', 0, "-1")
+    marker.canSave = false
+    marker:registerObject(markerName)
+    scenetree.MissionGroup:addObject(marker)
+    return marker
+  end
+
+  -- this can then be called in a loop to setup your markers. 
+  -- NOTE: You should only do this once as part of your setup and not called on each frame.
+  if #markers == 0 then
+    for k,v in pairs(nameMarkers) do
+      local mk = scenetree.findObject(v)
+      if mk == nil then
+        log('I', logTag,'Creating marker '..tostring(v))
+        mk = createBusMarker(v)
+        ScenarioObjectsGroup:addObject(mk.obj)
+      end
+      table.insert(markers, mk)
+    end
+  end
+```
+
+Here is a custom marker example from [BeamNG-FuelStations](https://github.com/BeamMP/BeamNG-FuelStations/tree/master):
+
+```lua
+  local stations = [
+    { "location": [ -778.813,  485.973, 23.46 ], "type":"gas" },
+    { "location": [  617.164, -192.107, 53.2  ], "type":"ev"  },
+  ]
+
+  local function IsEntityInsideArea(pos1, pos2, radius)
+    return pos1:distance(pos2) < radius
+  end
+
+  local onUpdate = function (dt)
+    for k, spot in pairs(stations) do -- loop through all spots on the current map
+      local bottomPos = vec3(spot.location[1], spot.location[2], spot.location[3])
+      local topPos = bottomPos + vec3(0,0,2) -- offset vec to get top position (2m tall)
+
+      local spotInRange = false -- is this spot in range? used for color
+      local spotCompatible = false -- is this spot compatible?
+
+      if activeVeh then -- we have a car and its ours (if in mp)
+        local vehPos = activeVeh:getPosition()
+
+        spotInRange = IsEntityInsideArea(vec3(vehPos.x, vehPos.y,vehPos.z), bottomPos, 1.5)
+
+        spotCompatible = activeFuelType == "any" or spot.type == "any" or activeFuelType == spot.type
+      end
+
+      local spotColor = (spotInRange and spotCompatible) and activeColorMap[spot.type] or inactiveColorMap[spot.type] or ColorF(1,1,1,0.5)
+
+      debugDrawer:drawCylinder(bottomPos:toPoint3F(), topPos:toPoint3F(), 1, spotColor) --bottom, top, radius, color
+    end
+  end
+```
+
+## User Interface
+
+### Toast Notifications, Top right of screen
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![image](https://github.com/StanleyDudek/Docs/assets/49531350/c8a87842-b95a-4eca-84dc-93072ecc9158)
+</figure>
+
+```lua
+--guihooks.trigger('toastrMsg', {type, title, msg, config = {timeOut}}) 
+guihooks.trigger('toastrMsg', {type = "info", title = "Info Message:", msg = "Info Message Text Here", config = {timeOut = 5000}}) 
+guihooks.trigger('toastrMsg', {type = "warning", title = "Warning Message:", msg = "Warning Message Text Here", config = {timeOut = 5000}}) 
+guihooks.trigger('toastrMsg', {type = "error", title = "Error Message:", msg = "Error Message Text Here", config = {timeOut = 5000}}) 
+```
+
+### Message notifications, top left of screen by default in Messages app
+
+This requires the 'Messages' or 'Messages & Tasks' UI app. Icons can be found at `ui\ui-vue\src\assets\fonts\bngIcons\svg\`
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![image](https://github.com/StanleyDudek/Docs/assets/49531350/6baef813-50cb-43c3-9c59-0de550b014b6)
+</figure>
+
+```lua
+--guihooks.trigger('Message', {msg, ttl, category, icon})
+--ui_message(msg, ttl, category, icon)
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "arrow_upward", icon = "arrow_upward"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "arrow_downward", icon = "arrow_downward"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "flag", icon = "flag"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "check", icon = "check"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "check_circle", icon = "check_circle"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "warning", icon = "warning"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "error", icon = "error"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "directions_car", icon = "directions_car"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "star", icon = "star"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "timeline", icon = "timeline"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "save", icon = "save"}) 
+guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "settings", icon = "settings"}) 
+```
+
+### Center large or small display flash
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![image](https://github.com/StanleyDudek/Docs/assets/49531350/d0cf754f-83f8-4d15-9159-27350da127de)
+</figure>
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![image](https://github.com/StanleyDudek/Docs/assets/49531350/1df6fc9b-756f-484e-b8d9-5df346dc4c26)
+</figure>
+
+```lua
+--guihooks.trigger('ScenarioFlashMessage', {{msg, ttl, sound, big}} ) -- requires RaceCountdown ui app
+guihooks.trigger('ScenarioFlashMessage', {{"Message", 5.0, 0, true}} ) 
+guihooks.trigger('ScenarioFlashMessage', {{"Message Text Here", 5.0, 0, false}} ) 
+
+--countdown example, when all executed at once, the items are queued and will follow eachother after the previous ttl expires
+guihooks.trigger('ScenarioFlashMessage', {{"3", 1.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_Countdown1')", true}}) 
+guihooks.trigger('ScenarioFlashMessage', {{"2", 1.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_Countdown2')", true}}) 
+guihooks.trigger('ScenarioFlashMessage', {{"1", 1.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_Countdown3')", true}}) 
+guihooks.trigger('ScenarioFlashMessage', {{"GO!", 3.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_CountdownGo')", true}}) 
+
+--another sound example
+guihooks.trigger('ScenarioFlashMessage', {{"Teleported!", 3.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_Checkpoint')", false}}) 
+```
+
+### Center mid-size persistent display
+
+This requires the 'Race Realtime Display' UI app.
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![image](https://github.com/StanleyDudek/Docs/assets/49531350/6290e018-6b3d-4674-98f2-34282a723258)
+</figure>
+
+```lua
+--guihooks.trigger('ScenarioRealtimeDisplay', {msg = msg} ) -- requires Race Realtime Display ui app
+guihooks.trigger('ScenarioRealtimeDisplay', {msg = "Message Text Here"} )
+--these messages persist, clear with a blank string
+--if you are running live data, this is a good one to update rapidly (think timers, distance calcs, et cetera)
+guihooks.trigger('ScenarioRealtimeDisplay', {msg = ""} )
+```
+
+### Confirmation Dialog
+
+ConfirmationDialog is a simplistic popup with up to two buttons.
+
+```lua
+-- Open a ConfirmationDialog with a title, body text, and up to two buttons
+guihooks.trigger("ConfirmationDialogOpen",
+    "Example Title",
+    "Example Body Text",
+    "Okay",
+    "", --gelua. empty string
+    "Cancel",
+    "" --gelua
+)
+
+-- Close any open ConfirmationDialog with the provided title
+guihooks.trigger("ConfirmationDialogClose", "Example Title")
+```
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![Example of a ConfirmationDialog](../../assets/content/ConfirmationDialog.png)
+</figure>
+
+Both fields of a button must be strings in order for the button to appear.
+
+If the Okay button is provided, pressing the *OK / Primary action* action is equivalent to pressing the Okay button.
+
+If the Cancel button is provided, pressing the *Menu* action is equivalent to pressing the Cancel button.
+
+HTML is supported and can be used to add images/icons, for example.
+
+Multiple can be displayed at once, displayed sequentially.
+
+!!! bug
+
+    Providing no buttons prevents the player from escaping the dialog without using the console.
+
+!!! bug
+
+    The SDF parts of the Minimap UI app remain visible while a ConfirmationDialog is active.
+
+    `#!lua guihooks.trigger('ShowApps', false)` to hide UI apps can be used as a hacky workaround.
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![ConfirmationDialog being used for an inactivity kick system](../../assets/content/ConfirmationDialog_Example.png)
+</figure>
+
+### introPopupTutorial
+
+introPopupTutorial is a highly customizable popup that is largely defined with embedded HTML. It is standard to load from a standalone HTML file located in `/gameplay/tutorials/pages/*/content.html`.
+
+```lua
+guihooks.trigger("introPopupTutorial", {
+    {
+        content = readFile("/gameplay/tutorials/pages/template/content.html"):gsub("\r\n",""),
+        flavour = "onlyOk"
+    }
+})
+
+guihooks.trigger("introPopupClose")
+```
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![The introPopupTutorial snippet displayed in BeamNG.drive](../../assets/content/introPopupTutorial.png)
+</figure>
+
+`flavour` controls which buttons are displayed. Four flavours exist:
+
+* `withLogbook`
+    * Buttons: Career Logbook, Okay
+* `onlyOk`
+    * Buttons: Okay
+* `onlyLogbook`
+    * Buttons: Career Logbook
+* `noButtons`
+    * Provides no buttons
+
+!!! warning
+
+    When using the noButtons flavour on the page, providing no extra JavaScript in the page content to close the popup causes a softlock. Pages are not combined into one popup in this flavour. It is not recommended to use this flavour.
+
+If multiple pages are provided, or the hook is triggered multiple times, then the pages are combined into the same popup. If the hook is triggered while a introPopup is active, or when a different introPopup type has already been triggered, then it is displayed in a separate popup after the existing popup is closed.
+
+### introPopupCareer
+
+introPopupCareer is an easy to use, but open ended popup that supports embedding HTML, if needed.
+
+Flavours control which buttons are displayed and the default image aspect ratio. Four flavours exist:
+
+* `default`
+  * Default image aspect ratio: 16x9
+  * Buttons: Later, Okay
+* `welcome`
+  * Default image aspect ratio: 16x9
+  * Buttons: Career Logbook, Okay
+* `branch-info`
+  * Default image aspect ratio: 16x9
+  * Buttons: Career Logbook, Okay
+* `garage`
+  * Buttons: Later, Okay
+
+```lua
+guihooks.trigger("introPopupCareer", {
+    {
+        title   = "Example title",
+        text    = "Example text",
+        image   = "/gameplay/tutorials/pages/template/image.jpg",
+        ratio   = "16x9",
+        flavour = "default"
+    }
+})
+
+guihooks.trigger("introPopupClose")
+```
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![The introPopupCareer snippet displayed in BeamNG.drive](../../assets/content/introPopupCareer.png)
+</figure>
+
+If multiple pages are provided, or the hook is triggered multiple times, then the pages are combined into the same popup. If the hook is triggered while a introPopup is active, or when a different introPopup type has already been triggered, then it is displayed in a separate popup after the existing popup is closed.
+
+!!! bug
+
+    The background blur has a minimum height, causing popups with short content to have excess blur below its window. Two main workarounds exist:
+
+    * Repeat `\n` and end with `#!html <div />` until the window covers the blur
+    * Use an empty or missing `image` path and adjust the aspect ratio until the window covers the blur
+
+### introPopupMission
+
+introPopupMission is almost identical to introPopupCareer, but needs buttons to be defined rather than picking a preset for buttons.
+
+Button styles are combined as *bng-button-*`style`. Built-in button styles are:
+
+* `main` - orange
+* `secondary` - cyan
+* `attention` - red
+* `white` - white
+* `link`  - translucent
+* `outline` - orange outline
+
+```lua
+guihooks.trigger('introPopupMission', {
+    title   = "introPopupMission title",
+    text    = "introPopupMission description",
+    image   = "/gameplay/tutorials/pages/template/image.jpg",
+    ratio   = "16x9",
+    buttons = {
+        { default=true,  class="main",      label="main button",      clickLua="" },
+        { default=false, class="secondary", label="secondary button", clickLua="" },
+        { default=false, class="attention", label="attention button", clickLua="" },
+        { default=false, class="white",     label="white button",     clickLua="" },
+        { default=false, class="link",      label="link button",      clickLua="" },
+        { default=false, class="outline",   label="outline button",   clickLua="" }
+    }
+})
+
+guihooks.trigger("introPopupClose")
+```
+
+<figure class="image image_resized" style="width:75%" markdown>
+  ![The introPopupMission snippet displayed in BeamNG.drive](../../assets/content/introPopupMission.png)
+</figure>
+
+If multiple pages are provided, or the hook is triggered multiple times, then the pages are combined into the same popup. If the hook is triggered while a introPopup is active, or when a different introPopup type has already been triggered, then it is displayed in a separate popup after the existing popup is closed.
+
+!!! bug
+
+    The background blur has a minimum height, causing popups with short content to have excess blur below its window. Two main workarounds exist:
+
+    * Repeat `\n` and end with `#!html <div />` until the window covers the blur
+    * Use an empty or missing `image` path and adjust the aspect ratio until the window covers the blur
+
+### Dialogue
+
+todo
diff --git a/mkdocs.yml b/mkdocs.yml
index 5f59f702..8eee9933 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -353,6 +353,8 @@ markdown_extensions:
   - pymdownx.inlinehilite
   - pymdownx.snippets
   - pymdownx.superfences
+  - pymdownx.tabbed:
+      alternate_style: true
 
 nav:
   - Home: index.md
@@ -392,13 +394,16 @@ nav:
       - Introduction: beamng/dev/index.md
       - Programming:
         - UI Apps (HTML): beamng/dev/modding/ui-apps.md
-        - IMGUI Windows (Lua): beamng/dev/modding/imgui-windows.md
+        - ImGui Window Tutorial: beamng/dev/modding/imgui-window-tutorial.md
         - Lua Mods (Scripts): beamng/dev/modding/lua-mods.md
       - Content:
         - Maps: beamng/dev/content/maps.md
         - Props: beamng/dev/content/props.md
         - Vehicles: beamng/dev/content/vehicles.md
-    - Helpful Code Snippets: beamng/snippets.md
+    - Lua Code Snippets: beamng/lua-snippets.md
+    - CSS Code Snippets: beamng/css-snippets.md
+    - ImGui Code Snippets: beamng/imgui-snippets.md
+    - CEF Code Snippets: beamng/cef-snippets.md
   - Scripting Reference:
     - Mod (In-Game): scripting/mod-reference.md
     - Server: