diff --git a/Presets/INFORMATION.md b/Presets/INFORMATION.md
new file mode 100644
index 00000000..ccb0b393
--- /dev/null
+++ b/Presets/INFORMATION.md
@@ -0,0 +1,193 @@
+> [!important]
+>This page combines all current information on elements and their triggers. It should be used as an information bank for when you are creating your own presets to be used with Splatoon.
+>Each section of the document is split up into different parts so you can focus on reading information you want to know about. You can click the arrow underneath each section labelled `information`.
+
+## Element Types
+
+
+
+Information
+
+This area lists the common types of draws that you can find within Splatoon. Before creating your own presets, it is important you understand each type of draw and what it can do.
+
+## Circles at fixed co-ordinates.
+
+Circle draws can mark areas of the map with a circular shape. They can be used in a variety of ways such as marking an area to stand that you know is safe or reminding you where a tower is going to spawn that you need to take. They can be permanent draws, which stay on the map for the entire fight or they can be triggered by a specific mechanic in a fight. Support on understanding triggers and how to use them can be found [here](/Presets/TRIGGERTYPES.md).
+
+![circlefixed](/docs/images/walkthrough/ccfixed.jpg)
+
+## Circles relative to an object
+
+Circle draws can also be used so that they are relative to an object or NPC. This means that, as the NPC moves, the circle draw can move with them. This is particularly useful in fights that are boss relative, where you are having difficulty finding your position and need a quick reminder. They can also rotate with the NPC/Object, so they are always at a fixed position relative to the NPC/Object you need.
+
+![circlerelative](/docs/images/walkthrough/ccmovement.gif)
+
+## Lines at fixed co-ordinates
+
+Line draws can start at one part of the map and end at another. These can be used on mechanics where the line could tell you where you need to go to be safe for the next mechanic. It is possible to have an arrow at the end of the line to make this even more obvious.
+
+![linefixed](/docs/images/walkthrough/lfixed.jpg)
+![linearrow](/docs/images/walkthrough/larrow.jpg)
+
+## Lines relative to an object
+
+Line draws can also be used so that they are relative to an object or NPC. Much like the circles, they move as the NPC moves and can also be configured to rotate so they are always at a fixed position relative to the NPC/Object you need.
+
+![Line Movement](/docs/images/walkthrough/lmovement.gif)
+
+## Cone relative to an object
+
+Cone draws can be extremely useful to show you how far an NPC attack reaches or how wide it is. These are particularly useful if the NPC attack is not usually telegraphed.
+
+![conerelative](/docs/images/walkthrough/ccone.png)
+
+
+
+## Editing Elements
+
+
+
+ Information
+
+Once you have selected a draw type that you want, the next step is to edit the draw so it is more effective for what you want it to do.
+
+Depending on the element you have chosen, different editing options become available.
+
+![ccediting](/docs/images/walkthrough/ccediting.png)
+![ccrelativeediting](/docs/images/walkthrough/ccrelativeediting.png)
+
+- **Reference Position and Offsets**
+ - These two options move the element along the X,Y and Z axis. These can be changed independently to enable you to precisely put the element where you want. The cursor icon allows you to place the element on the screen at the location of your cursor. This makes placing circular elements particularly easy.
+- **Stroke**
+ - This enables you to change the colour of the element. You might find it useful to colour the element green for a safespot, for example.
+
+![stroke](/docs/images/walkthrough/ccolours.png)
+- **Thickness**
+ - This changes the thickness of the line surrounding the element. Thicker lines might be easier to see on different maps.
+
+![thickness](/docs/images/walkthrough/cthick.png)
+- **Fill**
+ - This changes the amount of colour within the element. At higher fill levels, you may not be able to see the floor at all.
+
+ ![fill](/docs/images/walkthrough/cfill.png)
+- **Radius**
+ - This changes the size of the element. A higher value makes the element bigger and a smaller value makes it smaller.
+
+ ![radius](/docs/images/walkthrough/esize.png)
+- **Account for rotation**
+ - This option ensures that the element rotates fixed to the object if it changes its direction. For example, if you want an element to be pointing east from an NPC and the NPC turns, this option will keep the element east.
+- **Targetted Object**
+ - Game object with specific data is *usually* the option you want to use when drawing object relative elements. You can either type the name of the NPC, use an NPC ID number or target the NPC in game and press the "target" button.
+- **Single attribute**
+ - For basic element drawing, NPC IDs will perform most of what you are looking for. However, for draws that you want to be shown when the boss uses a certain skill or animation, other options such as "VFX Path" are available. For elements you want to show during mechanics with debuffs, Icon ID can work particularly well.
+- **Overlay Text**
+ - This will enable you to write on the element and can be drawn on any element to provide information.
+
+ ![safespot](/docs/images/walkthrough/ssexample.png)
+
+
+
+## Conditions
+
+
+
+ Information
+
+This area gives additional information on some of the conditions you can set when creating your elements.
+
+![Trigger Types](/docs/images/walkthrough/ttypes.png)
+
+- **Display Conditions**
+ - Always shown draws the element on the screen permanently.
+ - Only in combat draws the element when you begin combat with an NPC.
+ - Only in instance draws the element when you enter a particular instance.
+ - On trigger only draws the element on the screen when certain conditions are met, such as a boss using a certain skill. This is particularly power as it enables elements to be drawn that are not permanent throughout the fight. This reduces on screen clutter and can be used in some cases to draw multiple things at once.
+
+- **Zone whitelist and blacklist**
+ - Zone whitelist makes the elements only appear in certain instances, such as a particular fight.
+ - Zone blacklist ensures the elements do not appear in certain instances.
+
+- **Job Lock**
+ - Job lock enables you to make certain elements appear only when you are on a particular class. For example, where a boss fight might have different safe spots for healer and red mage, you can create a draw that shows the healer safe spots or red mage safe spots depending on what class you are on.
+
+The triggers listed below are advanced triggers and results can vary. You should experiment with these and understand them fully before using them in your presets.
+
+- **Distance Limit**
+ - This option can allow you to draw an element when you are close to it. For example, an element could be triggered when you are within a certain distance to remind you that you need to SPREAD and are too close to your partner.
+
+![distancetrig](/docs/images/walkthrough/distancetrigger.gif)
+
+- **Freeze**
+ - This option allows you to trigger a draw and then redraw that draw in the same location every X seconds. For example, where AoEs are usually not drawn for you and alternate in a pattern, this trigger can allow you to draw the pattern each time it changes.
+
+![freezetrig](/docs/images/walkthrough/freezetrigger.gif)
+
+- **Enable Trigger**
+ - This option allows you to trigger a draw when a certain condition is met. For example, when the boss casts a certain skil, when a debuff applies on you or when a certain map object appears. They can be used one after the other to draw different elements too.
+
+ ![triggerexample](/docs/images/walkthrough/triggerexample.gif)
+
+
+
+## Relative Objects Additional Settings
+
+
+
+Information
+
+This information area details the different settings you can use when creating elements that are relative to an object. There are more settings available but these are the ones I have used personally. These settings do not apply when you are creating fixed elements!
+
+![robjectsettings](/docs/images/walkthrough/robjectssettings.png)
+
+- **Single Attribute**
+ - Name (case-insensitive, partial) will allow you to search for the NPC you want your element to be relative to. This is their name shown in the game. Splatoon will offer you the chance to convert the name into their NPC ID, which is recommended when creating international presets.
+ - Model ID will allow you to draw the element from a certain model that matches the ID you put in.
+ - Object ID will allow you to draw the element from a certain object that matches the ID you put in. This has very rare use case scenarios as object ID tends to change on each instance.
+ - Data ID will allow you to draw the element from a certain piece of data that matches the ID you put in.
+ - NPC ID will allow you to draw the element from a certain NPC that matches the ID you put in. This is useful for NPCs that are invisible and cannot be targetted but exist to cast spells during fights.
+ - VFX Path will allow you to draw the element using a VFX that occurs within a fight. This is useful for spells that do not have different IDs but are triggered when the boss activates a directional attack that uses different VFXs.
+ - Icon ID will allow you to draw the element when an Icon appears, whether it be a debuff, status effect or positive effect you place on yourself or the boss.
+
+- **Targetability**
+ - Targetable only will mean the element will only be drawn when a targetable ID placed in the "single attribute" section has been spawned.
+ - Untargetable only will mean the element will only be drawn when an untargetable ID placed in the "single attribute" section has been spawned.
+ - Visible characters only will mean the element appears when a matching ID placed in the "single attribute" section has been spawned and is also visible to the player.
+ - Unticking the `visible characters only` option is necessary when you want to draw elements from invisble NPCs.
+
+- **While casting**
+ - This option enables you to set the element to be drawn when the ID placed in `single attribute` has cast a certain spell. You can place the spell in the box by using its written name or the spell ID.
+ - `Limit by cast time` becomes available when you tick `while casting`. This means that you can set the element to be drawn within a set amount of time. For example, if a spell has a 7 second cast time and you set it to 0 - 1, the element will be drawn as long as all other condiitions are met. This is particularly useful when you want to `freeze` an element within a certain time period.
+
+- **Status Requirement**
+ - This option enables you to set the element to be drawn when a character or NPC is affected by a certain status. For example, they have a poison stack or a certain status debuff that they need to solve a mechanic.
+
+- **Distance limit**
+ - This option enables you to set the element to be drawn when you are within a certain distance away from the `single attribute`. This is useful if you want something to be draw when you enter a tower or a knockback area.
+
+- **Rotation Limit**
+ - This option sets a minimum and maximum limit on the amount an element can move when the boss moves. This prevents the draw from being incorrect if the boss turns a certain amount.
+
+- **Object life time**
+ - This option links the element drawn to the lifetime of an object. For example, if the object lasts 7 seconds and creates a knockback, the element can be drawn for 7 seconds and then be removed.
+
+- **Tether info**
+ - This option links the element to the creation or expiration of a tether. This is useful in mechanics where the boss tethers an NPC to delay an AOE being cast or where you are tethered to an NPC and must stay within a certain range.
+
+- **Offset**
+ - These co-ordinates can be changed so the element is drawn away from the ID in `Single attribute`. This is useful for invisible actors where the spell ID may originate at the boss location but the safe area is actually a certain distance away.
+
+- **Radius**
+ - This option changes how much space the element you are drawing covers. It can be useful when trying to account for the bosses hitbox.
+ - `+targethitbox` is useful when the spell hit box is only as wide as the boss itself. This means you don't need to fiddle with radius values.
+ - `Donut` changes the way radius works by drawing the element outside of the radius rather than inside it. This is useful where danger areas might be outside of a specific spot and you want to show people the radius of that danger area.
+ - `line end style` only becomes applicable if you have set the radius of the element to 0. It enables you to change the end of the element into a shape, such as an arrow. This is useful if you need to tell somebody where to go.
+
+- **Overlay text**
+ - This option draws text on your element and can be useful if you want to highlight a `safespot` or the fact that someone has `1 stack` of a particular debuff.
+
+
+
+
+
+
+
diff --git a/Presets/WALKTHROUGH.md b/Presets/WALKTHROUGH.md
new file mode 100644
index 00000000..14d6ef19
--- /dev/null
+++ b/Presets/WALKTHROUGH.md
@@ -0,0 +1,337 @@
+# Walkthrough
+> [!caution]
+>This walkthrough assumes you have read all of the information located in the `Reading Requirements` section below.
+
+
+Reading Requirements
+
+[Information](/Presets/INFORMATION.md)
+
+
+
+
+Programme Requirements
+
+[Dalamud](https://github.com/goatcorp/Dalamud)
+
+[Splatoon](https://github.com/PunishXIV/Splatoon)
+
+[A Realm Recorded](https://github.com/UnknownX7/ARealmRecorded) with a recording of different bosses or dungeons you want to use.
+
+[ACT](https://advancedcombattracker.com/download.php) and [Trigevent](https://triggevent.io/) with a log of the recording from A Realm Recorded.
+
+
+
+> [!important]
+> Each section of the walkthrough is split up into different parts so you can focus on which element you want to draw. You can access each part of the walkthrough by looking at the heading and pressing the arrow underneath. Each part of the walkthrough uses different fights to give examples because not every fight will need each type of draw.
+
+## Creating your preset
+
+
+
+Walkthrough
+
+ -
+
+ Step 1: Create a layout and call it EX - The Bowl Of Embers.
+ ![layoutcreation](/docs/images/walkthrough/createlayout.png)
+
+
+
+ -
+
+ Step 2: Add an element and name it something that will enable you to identify which element it is later on.
+ ![elementcreation](/docs/images/walkthrough/elementcreate.png)
+
+
+
+
+
+
+## Using Splatoon Logs
+
+
+
+Walkthrough
+
+The `logger`, `explorer` and `log` functions of Splatoon will become your best friends when creating your own presets. They can be found under the `Tools` section of Splatoon's settings menu.
+
+![tools](/docs/images/walkthrough/toolex.png)
+
+## Logger
+
+![loggerfunction](/docs/images/walkthrough/loggerex.png)
+
+Logger shows you all of the NPCs, objects and data within your current instance. Ticking the `viewer mode` ensures that only current npcs,objects and data are shown. This particular option is important when dealing with invisible NPCs that cast spells. Pressing the `find` button next to the Object ID allows you to figure out what NPC/Object is doing an action and to draw the element you want from the correct NPC. You will be surprised to see many different npcs that have the same name as the boss but are actually invisible. This is because they are `helpers` and are typically responsible for any aoe you see that is not coming from the boss themselves.
+
+## Explorer
+
+![explorerex](/docs/images/walkthrough/explorerex.png)
+
+Explorer enables you to pick any of the NPCs, Objects or Items viewable in the `viewer mode` of `logger` and get additional information on it. This typically includes information that is already available in the `logger` function but at a more indepth level and specifically for the object you select. This includes the `position` of an object, which could help you draw your elements on the map or `rotation` which might help you figure out what angle your elements need to be drawn. `Rotation` can specifically be useful when determining how much of an angle you need to give to your element when drawing AOEs that do not come directly out from the boss or the boss is constantly turning/moving.
+
+## Logs
+
+![logs](/docs/images/walkthrough/splatoonlogex.png)
+
+Logs provide you with all the information you need to create your draws. They list every single event that occurs during an instance and can provide invaluable information such as spell IDs, enemy position and the time between two events. For example, where a boss casts a spell with a length of 8 seconds but there are multiple events that happen within that time, the log can help you unpick what is happening and at what time. For bosses that use multiple `hidden helpers`, it can also help you determine which `hidden helper` is casting first and where they are on the map. It cannot be understated how useful the `log` feature in Splatoon is.
+
+
+
+## Creating a line AOE element
+
+
+
+Walkthrough
+
+This section will teach you how to create a line element. For this particular section, we will be using the skill 'Crimson Cyclone'.
+
+![lines](/docs/images/walkthrough/ifritlines.gif)
+
+
+
+ -
+
+Step 1: Set your element type to 'line relative to object'. This will make the line attach to an object, rather than a set of points on the map.
+![coneoption](/docs/images/walkthrough/lineobject.png)
+
+-
+
+Step2: Find the NPC ID
+ - We need to find the NPC ID to enable splatoon to know which NPC the skill is going to be cast from. In this case, the NPC is Ifrit. Splatoon enables you to grab the NPC ID by targetting the NPC and clicking the target button once you have set the Single attribute to NPC. This shows us that Ifrit has an NPC ID of 0x4A1.
+![target](/docs/images/walkthrough/targetoption.png)
+
+-
+
+Step 3: While casting and Skill ID
+ - Using the Splatoon `log` feature described previously, we can see that Ifrit readies the spell Crimson Cyclone and afterwards, a skill of 1532 is being cast by ifrit. We can assume that this skill ID 1532 relates to Crimson Cyclone. For some fights, Splatoon already gives us the ID of the skill when we type it in. By ticking the box next to 'While casting', we are telling Splatoon that we want this element to draw when Ifrit is casting this skill.
+![whilecasting](/docs/images/walkthrough/whilecasting.png)
+
+-
+
+Step 4: Setting the width and length of the element
+ - We know that Ifrit charges across the battle field so the radius of this must be the length of the map. If you play around with the Y axis co-ordinates, you will see that the end of the map is around the 44 mark. We can keep this at 44 so that the drawn is the entire length of the arena. We then need to set the radius of the skill. We know that the AOE line includes the body of Ifrit so we can assume that it is as wide as him. If you tick the `+targethitbox` option, you should notice that your element is now as wide as him. Sometimes this works and sometimes it is not based on the target hitbox and you will have to experiment on the radius yourself. In this case, the radius is approximately 6.
+ - We want to make sure that we have accounted for rotation by ticking the "account for rotation" box, which can be found under the element type box.
+
+![account for rotation](/docs/images/walkthrough/accountrotate.png)
+
+ - We then want to make Point A have Y:44 (the length) and , if not using the `+targethitbox` option, set the radius to 6.
+![yandradius](/docs/images/walkthrough/yandradius.png)
+
+
+
+
+If you did everything correctly, your Crimson Cyclone element should draw correctly when Ifrit begins to cast, giving you time to find the safe spots.
+
+![ifritlinedraw](/docs/images/walkthrough/ifritlinecomplete.gif)
+
+
+
+## Improving a line AOE element using triggers.
+
+
+
+Walkthrough
+
+This section will teach you how to expand upon the created line AOE using triggers.
+
+![ifritlinedraw](/docs/images/walkthrough/ifritlinecomplete.gif)
+
+A big issue with the line AOE created above is that it requires Ifrit to be casting to display. In a mechanic where there are several NPCS that all cast the same spell ID and you are required to find multiple safe spots, it can be tricky. To this end, a trigger can be used to effectively draw ALL of the Ifrit line AOEs at the same time. This can create scenarios where there are evident safe spots within the mechanic that are not usually seen when solving them naturally.
+
+
+ -
+
+ Step 1: Press the layout name you made earlier and press the group menu at the top of the page.
+
+ ![groupname](/docs/images/walkthrough/groupname.png)
+
+
+
+ -
+
+ Step 2: Scroll down to the bottom and type the name you want your grop of elements to be called and press "add".
+
+ ![creategroup](/docs/images/walkthrough/creategroup.png)
+
+
+
+ -
+
+ Step 3: The layout should now be under the group you created. From now on, when creating new layouts, you can assign them to this group so they appear under the heading. This is useful when creating more advanced elements, where some need triggers and some do not.
+
+ ![grouped](/docs/images/walkthrough/grouped.png)
+
+
+
+ -
+
+ Step 4: Change the display condition to "on trigger only" and down the bottom of the page, tick the "Enable Trigger" button. Make sure you change the option to "Show at log message" and put the log message to 1532 - the skill ID for crimson Cyclone.
+
+ ![grouped](/docs/images/walkthrough/enabletrigger.png)
+
+
+
+ -
+
+ Step 5: Now make sure you untick "While casting" and tick "Visible characters only" in the element options as we are now using a trigger rather than a cast to draw these elements.
+
+
+
+
+If you did all the steps correctly, you should now notice that your elements draw on all of the Ifrits the moment the first begins their cast. This means you can see the safe spots instantly, rather than running around the arena dodging each ifrit!
+
+![ifritlinedraw](/docs/images/walkthrough/infrittrigger.gif)
+
+
+
+## Creating a circle AOE element
+
+
+
+Walkthrough
+
+Occasionally, a simple circle AOE element can be used to show the unsafe areas of a skill. A good example of this is in `The Strayborough Deadwalk` first boss, where heads spawn above you and drop down to deal damage and a status effect.
+
+![circlestray](/docs/images/walkthrough/circlestray.png)
+
+For this, we need to look in our `log` to see what happens when one of these heads appear.
+
+![circlestray2](/docs/images/walkthrough/circlelog.png)
+
+As shown, an NPC appears in our `log` called `The noble noggin`. We can guess this is the head because there are four players and each player receives one of these heads above them.
+We can also guess that the skill that is responsible for the heads falling and causing the damage is `36532`, as this also occurs 4 times.
+
+In my `logger` under `Tools` within Splatoon, I can see that each `The noble noggin` has a DATA ID of `4205`. I can put this in my `single attribute` box and set it to show on `Visible characters only`.
+I can either set the radius to `+target hitbox` or a number value. Since its circular and the AOE effect may extend past the target, i'm going to tick `+target hitbox` and also add a radius of 1.
+Your element settings should look identical to these ones and the circle will draw each time the heads appear. Since these heads only appear to deliver the AOE and not for any other mechanic, we do not need to set a trigger. We can simply show the AOE each time the DATA ID appears and goes away.
+
+![circlestray3](/docs/images/walkthrough/straysettings.png)
+
+
+
+
+
+
+
+## Creating an element using helpers.
+
+
+
+Walkthrough
+
+In some cases, the boss will use `hidden actors` to cast spells for them. This is typical in fights where AOEs appear as if they are coming from outside of the boss. In some fights there can be dozens of `hidden actors` that are casting these skills. The `logger` is particularly useful here to determine which of the NPCs is casting the spell so you can retrieve the spell ID. Sometimes, the same NPC ID might be casting different spells as there could be more than one `hidden actor` active at that time.
+
+![firepeaks](/docs/images/walkthrough/firepeaks.png)
+
+As you can see above, there are four AOEs that have been cast around an object. However, my log is telling me that the Boss NPC, `Gurfurlur`, has cast four different spells at the same time as the AOEs appearing.
+
+![gurfurlurlog](/docs/images/walkthrough/gurgurlur36303.png)
+
+In game, Gurfurlur did nothing but cast the initial spell, one time. Even more bizarre, my `logger` with `viewer mode` on is showing lots of different NPCs that have the same name.
+
+![gurfurnpc](/docs/images/walkthrough/gurfurlurlog.png)
+
+If you look closely, you can see all of them share the same Data ID `0x233c` except one, which has the Data ID `0x415F`. If you press the `Find` option next to the Object ID of the 0x415F, you can see that it points to the boss.
+
+![findgurfur](/docs/images/walkthrough/gurfurlurfind.png)
+
+If you press `Find` on one of the Data ID `0x233c` NPCs, you can see that it points right under the AOE marker. Data ID `0x233c` is what is known as an invisible actor, or `helper`. They are invisible for the whole fight but they have the same NPC Name. They are responsible for the majority of the AOEs you see in fights, particularly ones that do not come from the boss itself. In this case, we want to use the Data ID in the `single attribute` box for our element settings.
+
+You will also notice in the log picture above that the NPCs are each casting a different spell. That is because for this mechanic, they each cast a spell that looks identicle but last a certain amount of time each. This creates a safe spot after the first explosion that you need to get into.
+After ticking `while casting` and putting in the spell IDs `36303, 36304, 36305` one at a time, I found that the first four NPCs all cast `36303`. This enables me to draw a unsafe element on those NPCs only and not the other NPCs who are casting the delayed mechanic.
+
+![firepeaks3](/docs/images/walkthrough/firepeaksdraw.png)
+
+![firepeaksgif](/docs/images/walkthrough/peaks.gif)
+
+
+
+## Creating an element using a VFX condition.
+
+
+
+Walkthrough
+
+A VFX condition is useful in a few scenarios. The scenario described in this section refers to a boss who summons four NPCs, all of which have the same NPC ID and spell ID. Usually, a situation like this makes it difficult to draw elements for as if we just follow the steps in `Creating an element using helpers` and `Improving a line AOE element using triggers`, Splatoon will draw an element over all of the AOEs at the same time, which is not what we want.
+
+![vftogether](/docs/images/walkthrough/vfxexample1.png)
+
+To make element draws, it is important to know the mechanic you are trying to draw for. In this case, there are four AOE markers being painted onto the floor by four NPCs. A few seconds after this, the boss will cast a tether on two of the minions, encasing them in ice and delaying their AOE. This means that two untethered NPCs are the safe zone, atleast for a few seconds.
+
+![tetherexample](/docs/images/walkthrough/tetherexample.png)
+
+Looking at the `log` feature, I can see that there was a tether created at the exact moment it appeared in the game. However, the tether is not linked to a spell. The only other log entry that appears is a sudden VFX, which occurs twice. I don't think its a coincidence that two VFX elements are created at the same time as two tethers being shown, do you?
+
+![tetherlog](/docs/images/walkthrough/tethercreate.png)
+
+So, instead of an `NPC ID` being used in the `single attribute` box, we are going to choose `VFX Path` and copy the useful part of the log into this box. That would be `vfx/channeling/eff/chn_m0320_ice_0c2.avfx`. You'll notice `age` and two boxes next to where you put `vfx/channeling/eff/chn_m0320_ice_0c2.avfx`. You want to include the total time the tether exists ingame, which is from 0 seconds (when it appears) to 11 seconds (when it vanishes). I also want to make sure that the NPC is casting the current spell, which is Ice Scream as shown in the `log`. This has an ID of 36270 so I make sure I tick `while casting` and put in the correct spell ID.
+
+I then make sure I tick `account for rotation` and that my drawn element is covering the side of the untethered minion, this is because it will be the first to explode. Remember, to be in line with the [Contribution](/Presets/CONTRIBUTING.md) document, you want to create an element that shows the UNSAFE area, not the SAFESPOT. In this mechanic, the tether causes the AOE in that area to become safe, so you want to draw an element that covers the unfrozen NPC. In this mechanic, a frozen and unfrozen NPC are always either N/S or W/E so the unsafe AOE can be drawn correctly without worrying about different patterns existing.
+
+![finalexample](/docs/images/walkthrough/finalvfxex.png)
+
+
+
+## Creating an element using a status condition and overlay text.
+
+
+
+Walkthrough
+
+A status condition can be placed upon you in many of the fights in Final Fantasy. Sometimes, in specific fights, these status conditions can tell you how to resolve a mechanic. In other cases, they simply increase the damage you take. In this scenario, we are going to look at the debuff `Vulnerability Up` and how we can create an element which warns us when we have one of these debuffs.
+
+In this example, my character has been inflicted with one stack of `Vulnerability Up`. I know this because of the debuff icon that appears on my bar.
+
+![vuln1](/docs/images/walkthrough/vuln1.png)
+
+After creating a new layout and adding a blank element, I change the element to `circle relative to object position` and change the target to `self` because I want the element to appear under my feet. I then tick the `Status Requirement` box and type in `Vulnerability Up` into the `Add all by name` box. It registers 21 elements for me which I can add to my list of status requirements.
+
+Since I just want text to appear, I change the value of my `Stroke Thickness` to 0 and in my `Overlay text` box I simply type `one stack`. I name the element one stack so I can keep track of it later.
+It appears like this when I have 1 stack of `Vulnerability Up`
+
+![1stack](/docs/images/walkthrough/1stack.png)
+
+However, what if I gain another stack and want the overlay text to change to show 2 stacks?
+
+![2stack](/docs/images/walkthrough/2vuln.png)
+
+To save me a job, I'm going to press the `copy to clipboard` button at the top of my 1 vuln stack element and then, instead of pressing `add element`, I'm going to press `Paste`. This pastes another identical element to the one you have already created. I'm going to name this '2 Vuln Stack'.
+
+Now, to make it register that you have two stacks of the debuff, you need to check the `Check for status param` box and then type in `2`. You want to change the overlay text to say `two stacks`.
+
+You now want to go back to the element you created earlier and click the same `Check for status param` box but include a `1` instead of a 2, so the elements are not overlapping.
+
+![2stack](/docs/images/walkthrough/2stack.png)
+
+
+>What do you think you would do if you have 3 vuln stacks? Why don't you try creating your own element to show on 3 stacks, following the steps above?
+
+
+
+
+## Creating a donut element.
+
+
+
+Walkthrough
+
+Sometimes, an NPC may cast a spell that renders the entire battle field dangerous except for one small section. Naturally, you would want to just paint the safe spot with a colour. However, to be in line with the contributions document and to make sure your preset is allowed to be uploaded, you need to ensure you are painting the UNSAFE portion of the AOE. To do this, we use something called a donut.
+
+![donut](/docs/images/walkthrough/unsafearena.png)
+
+As the screenshot above shows, there is a small circle that is free from any dangerous area. This would be the safe spot. For this particular mechanic, the position of the safe spot does not change. This means that, however many dungeon runs you do, this safe spot will always be the same. This allows us to be slightly lazy in our design and we can create a circle element at that spot which is `triggered` on the cast of this particular spell.
+
+Firstly, I created a circular element at my cursor position using the mouse button next to `reference position` which appears when I have selected `circle at fixed cordinates` as my element type.I changed the radius of the element so it filled the dangerous circle.
+
+![circlular](/docs/images/walkthrough/dangercircle.png)
+
+After that, next to the radius, is the option `Donut`. This inverts my dangerous radius outwards, covering the map rather than the circle inside. This type of draw would comply with the requirements of the contributions document, as it is drawing the unsafe area. I make the radius as large as the arena.
+
+![uncirclular](/docs/images/walkthrough/unsafecircle.png)
+
+Since `triggers` were covered in a previous area of the page, you should know that you are looking for the skill ID that the bird casts just as the dangerous area appears. Looking at `log`, I can see that the NPC casts `36284 - Windshot` just as the dangerous area appears. I can then go and tick `enable trigger` and type in the spell ID `36284`. However, to ensure that the element does not last forever, I am going to give it a duration of 5.5 seconds. I am then left with a draw as seen below.
+
+![donutexample](/docs/images/walkthrough/donutexample.gif)
+
+
diff --git a/docs/images/walkthrough/1stack.png b/docs/images/walkthrough/1stack.png
new file mode 100644
index 00000000..adda883c
Binary files /dev/null and b/docs/images/walkthrough/1stack.png differ
diff --git a/docs/images/walkthrough/2stack.png b/docs/images/walkthrough/2stack.png
new file mode 100644
index 00000000..be582d05
Binary files /dev/null and b/docs/images/walkthrough/2stack.png differ
diff --git a/docs/images/walkthrough/2vuln.png b/docs/images/walkthrough/2vuln.png
new file mode 100644
index 00000000..650b3730
Binary files /dev/null and b/docs/images/walkthrough/2vuln.png differ
diff --git a/docs/images/walkthrough/accountrotate.png b/docs/images/walkthrough/accountrotate.png
new file mode 100644
index 00000000..148d46a5
Binary files /dev/null and b/docs/images/walkthrough/accountrotate.png differ
diff --git a/docs/images/walkthrough/ccediting.png b/docs/images/walkthrough/ccediting.png
new file mode 100644
index 00000000..7eb543b0
Binary files /dev/null and b/docs/images/walkthrough/ccediting.png differ
diff --git a/docs/images/walkthrough/ccfixed.jpg b/docs/images/walkthrough/ccfixed.jpg
new file mode 100644
index 00000000..f8b45297
Binary files /dev/null and b/docs/images/walkthrough/ccfixed.jpg differ
diff --git a/docs/images/walkthrough/ccmovement.gif b/docs/images/walkthrough/ccmovement.gif
new file mode 100644
index 00000000..7a1af90a
Binary files /dev/null and b/docs/images/walkthrough/ccmovement.gif differ
diff --git a/docs/images/walkthrough/ccolours.png b/docs/images/walkthrough/ccolours.png
new file mode 100644
index 00000000..e217a5c6
Binary files /dev/null and b/docs/images/walkthrough/ccolours.png differ
diff --git a/docs/images/walkthrough/ccone.png b/docs/images/walkthrough/ccone.png
new file mode 100644
index 00000000..f8236e26
Binary files /dev/null and b/docs/images/walkthrough/ccone.png differ
diff --git a/docs/images/walkthrough/ccrelativeediting.png b/docs/images/walkthrough/ccrelativeediting.png
new file mode 100644
index 00000000..c088c2ff
Binary files /dev/null and b/docs/images/walkthrough/ccrelativeediting.png differ
diff --git a/docs/images/walkthrough/cfill.png b/docs/images/walkthrough/cfill.png
new file mode 100644
index 00000000..54826c5f
Binary files /dev/null and b/docs/images/walkthrough/cfill.png differ
diff --git a/docs/images/walkthrough/circlelog.png b/docs/images/walkthrough/circlelog.png
new file mode 100644
index 00000000..2afc0527
Binary files /dev/null and b/docs/images/walkthrough/circlelog.png differ
diff --git a/docs/images/walkthrough/circlestray.png b/docs/images/walkthrough/circlestray.png
new file mode 100644
index 00000000..616feda9
Binary files /dev/null and b/docs/images/walkthrough/circlestray.png differ
diff --git a/docs/images/walkthrough/coneoption.png b/docs/images/walkthrough/coneoption.png
new file mode 100644
index 00000000..3155669e
Binary files /dev/null and b/docs/images/walkthrough/coneoption.png differ
diff --git a/docs/images/walkthrough/creategroup.png b/docs/images/walkthrough/creategroup.png
new file mode 100644
index 00000000..57561b72
Binary files /dev/null and b/docs/images/walkthrough/creategroup.png differ
diff --git a/docs/images/walkthrough/createlayout.png b/docs/images/walkthrough/createlayout.png
new file mode 100644
index 00000000..930fb9e0
Binary files /dev/null and b/docs/images/walkthrough/createlayout.png differ
diff --git a/docs/images/walkthrough/cthick.png b/docs/images/walkthrough/cthick.png
new file mode 100644
index 00000000..4669f05b
Binary files /dev/null and b/docs/images/walkthrough/cthick.png differ
diff --git a/docs/images/walkthrough/dangercircle.png b/docs/images/walkthrough/dangercircle.png
new file mode 100644
index 00000000..8fd24ba3
Binary files /dev/null and b/docs/images/walkthrough/dangercircle.png differ
diff --git a/docs/images/walkthrough/distancetrigger.gif b/docs/images/walkthrough/distancetrigger.gif
new file mode 100644
index 00000000..527891fa
Binary files /dev/null and b/docs/images/walkthrough/distancetrigger.gif differ
diff --git a/docs/images/walkthrough/donutexample.gif b/docs/images/walkthrough/donutexample.gif
new file mode 100644
index 00000000..fd3258a7
Binary files /dev/null and b/docs/images/walkthrough/donutexample.gif differ
diff --git a/docs/images/walkthrough/elementcreate.png b/docs/images/walkthrough/elementcreate.png
new file mode 100644
index 00000000..4fab025a
Binary files /dev/null and b/docs/images/walkthrough/elementcreate.png differ
diff --git a/docs/images/walkthrough/enabletrigger.png b/docs/images/walkthrough/enabletrigger.png
new file mode 100644
index 00000000..8c374031
Binary files /dev/null and b/docs/images/walkthrough/enabletrigger.png differ
diff --git a/docs/images/walkthrough/esize.png b/docs/images/walkthrough/esize.png
new file mode 100644
index 00000000..871089fa
Binary files /dev/null and b/docs/images/walkthrough/esize.png differ
diff --git a/docs/images/walkthrough/explorerex.png b/docs/images/walkthrough/explorerex.png
new file mode 100644
index 00000000..14a1b63d
Binary files /dev/null and b/docs/images/walkthrough/explorerex.png differ
diff --git a/docs/images/walkthrough/finalvfxex.png b/docs/images/walkthrough/finalvfxex.png
new file mode 100644
index 00000000..4a13b447
Binary files /dev/null and b/docs/images/walkthrough/finalvfxex.png differ
diff --git a/docs/images/walkthrough/firepeaks.png b/docs/images/walkthrough/firepeaks.png
new file mode 100644
index 00000000..1cd5a471
Binary files /dev/null and b/docs/images/walkthrough/firepeaks.png differ
diff --git a/docs/images/walkthrough/firepeaksdraw.png b/docs/images/walkthrough/firepeaksdraw.png
new file mode 100644
index 00000000..a70ab7a6
Binary files /dev/null and b/docs/images/walkthrough/firepeaksdraw.png differ
diff --git a/docs/images/walkthrough/freezetrigger.gif b/docs/images/walkthrough/freezetrigger.gif
new file mode 100644
index 00000000..79e4220d
Binary files /dev/null and b/docs/images/walkthrough/freezetrigger.gif differ
diff --git a/docs/images/walkthrough/grouped.png b/docs/images/walkthrough/grouped.png
new file mode 100644
index 00000000..6858c38f
Binary files /dev/null and b/docs/images/walkthrough/grouped.png differ
diff --git a/docs/images/walkthrough/groupname.png b/docs/images/walkthrough/groupname.png
new file mode 100644
index 00000000..13b2b4e8
Binary files /dev/null and b/docs/images/walkthrough/groupname.png differ
diff --git a/docs/images/walkthrough/gurfurlurfind.png b/docs/images/walkthrough/gurfurlurfind.png
new file mode 100644
index 00000000..ebe659d9
Binary files /dev/null and b/docs/images/walkthrough/gurfurlurfind.png differ
diff --git a/docs/images/walkthrough/gurfurlurlog.png b/docs/images/walkthrough/gurfurlurlog.png
new file mode 100644
index 00000000..f5f1b04c
Binary files /dev/null and b/docs/images/walkthrough/gurfurlurlog.png differ
diff --git a/docs/images/walkthrough/gurgurlur36303.png b/docs/images/walkthrough/gurgurlur36303.png
new file mode 100644
index 00000000..4e1b89a3
Binary files /dev/null and b/docs/images/walkthrough/gurgurlur36303.png differ
diff --git a/docs/images/walkthrough/ifritaoeline.png b/docs/images/walkthrough/ifritaoeline.png
new file mode 100644
index 00000000..79fdb808
Binary files /dev/null and b/docs/images/walkthrough/ifritaoeline.png differ
diff --git a/docs/images/walkthrough/ifritcone.gif b/docs/images/walkthrough/ifritcone.gif
new file mode 100644
index 00000000..3c6f67ec
Binary files /dev/null and b/docs/images/walkthrough/ifritcone.gif differ
diff --git a/docs/images/walkthrough/ifritlinecomplete.gif b/docs/images/walkthrough/ifritlinecomplete.gif
new file mode 100644
index 00000000..4cd7ad18
Binary files /dev/null and b/docs/images/walkthrough/ifritlinecomplete.gif differ
diff --git a/docs/images/walkthrough/ifritlines.gif b/docs/images/walkthrough/ifritlines.gif
new file mode 100644
index 00000000..d8fd7f01
Binary files /dev/null and b/docs/images/walkthrough/ifritlines.gif differ
diff --git a/docs/images/walkthrough/infrittrigger.gif b/docs/images/walkthrough/infrittrigger.gif
new file mode 100644
index 00000000..69133041
Binary files /dev/null and b/docs/images/walkthrough/infrittrigger.gif differ
diff --git a/docs/images/walkthrough/larrow.jpg b/docs/images/walkthrough/larrow.jpg
new file mode 100644
index 00000000..4f7b6301
Binary files /dev/null and b/docs/images/walkthrough/larrow.jpg differ
diff --git a/docs/images/walkthrough/lfixed.jpg b/docs/images/walkthrough/lfixed.jpg
new file mode 100644
index 00000000..463665ae
Binary files /dev/null and b/docs/images/walkthrough/lfixed.jpg differ
diff --git a/docs/images/walkthrough/lineobject.png b/docs/images/walkthrough/lineobject.png
new file mode 100644
index 00000000..6a84768b
Binary files /dev/null and b/docs/images/walkthrough/lineobject.png differ
diff --git a/docs/images/walkthrough/lmovement.gif b/docs/images/walkthrough/lmovement.gif
new file mode 100644
index 00000000..c81dced1
Binary files /dev/null and b/docs/images/walkthrough/lmovement.gif differ
diff --git a/docs/images/walkthrough/loggerex.png b/docs/images/walkthrough/loggerex.png
new file mode 100644
index 00000000..e211f354
Binary files /dev/null and b/docs/images/walkthrough/loggerex.png differ
diff --git a/docs/images/walkthrough/peaks.gif b/docs/images/walkthrough/peaks.gif
new file mode 100644
index 00000000..ad14a643
Binary files /dev/null and b/docs/images/walkthrough/peaks.gif differ
diff --git a/docs/images/walkthrough/placeholder b/docs/images/walkthrough/placeholder
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/docs/images/walkthrough/placeholder
@@ -0,0 +1 @@
+
diff --git a/docs/images/walkthrough/robjectssettings.png b/docs/images/walkthrough/robjectssettings.png
new file mode 100644
index 00000000..c9688124
Binary files /dev/null and b/docs/images/walkthrough/robjectssettings.png differ
diff --git a/docs/images/walkthrough/splatoonlogex.png b/docs/images/walkthrough/splatoonlogex.png
new file mode 100644
index 00000000..9f16209f
Binary files /dev/null and b/docs/images/walkthrough/splatoonlogex.png differ
diff --git a/docs/images/walkthrough/ssexample.png b/docs/images/walkthrough/ssexample.png
new file mode 100644
index 00000000..56b6e754
Binary files /dev/null and b/docs/images/walkthrough/ssexample.png differ
diff --git a/docs/images/walkthrough/straysettings.png b/docs/images/walkthrough/straysettings.png
new file mode 100644
index 00000000..c293a5a8
Binary files /dev/null and b/docs/images/walkthrough/straysettings.png differ
diff --git a/docs/images/walkthrough/targetoption.png b/docs/images/walkthrough/targetoption.png
new file mode 100644
index 00000000..734b7f2c
Binary files /dev/null and b/docs/images/walkthrough/targetoption.png differ
diff --git a/docs/images/walkthrough/tethercreate.png b/docs/images/walkthrough/tethercreate.png
new file mode 100644
index 00000000..bb10eaca
Binary files /dev/null and b/docs/images/walkthrough/tethercreate.png differ
diff --git a/docs/images/walkthrough/tetherexample.png b/docs/images/walkthrough/tetherexample.png
new file mode 100644
index 00000000..9a4a5de4
Binary files /dev/null and b/docs/images/walkthrough/tetherexample.png differ
diff --git a/docs/images/walkthrough/toolex.png b/docs/images/walkthrough/toolex.png
new file mode 100644
index 00000000..c4292a3a
Binary files /dev/null and b/docs/images/walkthrough/toolex.png differ
diff --git a/docs/images/walkthrough/triggerexample.gif b/docs/images/walkthrough/triggerexample.gif
new file mode 100644
index 00000000..5d539606
Binary files /dev/null and b/docs/images/walkthrough/triggerexample.gif differ
diff --git a/docs/images/walkthrough/ttypes.png b/docs/images/walkthrough/ttypes.png
new file mode 100644
index 00000000..d8483794
Binary files /dev/null and b/docs/images/walkthrough/ttypes.png differ
diff --git a/docs/images/walkthrough/unsafearena.png b/docs/images/walkthrough/unsafearena.png
new file mode 100644
index 00000000..0e5e5336
Binary files /dev/null and b/docs/images/walkthrough/unsafearena.png differ
diff --git a/docs/images/walkthrough/unsafecircle.png b/docs/images/walkthrough/unsafecircle.png
new file mode 100644
index 00000000..8436a9e5
Binary files /dev/null and b/docs/images/walkthrough/unsafecircle.png differ
diff --git a/docs/images/walkthrough/vfxexample1.png b/docs/images/walkthrough/vfxexample1.png
new file mode 100644
index 00000000..6d6ebbe3
Binary files /dev/null and b/docs/images/walkthrough/vfxexample1.png differ
diff --git a/docs/images/walkthrough/vuln1.png b/docs/images/walkthrough/vuln1.png
new file mode 100644
index 00000000..b504c7b5
Binary files /dev/null and b/docs/images/walkthrough/vuln1.png differ
diff --git a/docs/images/walkthrough/whilecasting.png b/docs/images/walkthrough/whilecasting.png
new file mode 100644
index 00000000..8cbd1dd1
Binary files /dev/null and b/docs/images/walkthrough/whilecasting.png differ
diff --git a/docs/images/walkthrough/yandradius.png b/docs/images/walkthrough/yandradius.png
new file mode 100644
index 00000000..b86a1786
Binary files /dev/null and b/docs/images/walkthrough/yandradius.png differ