diff --git a/docs/box shadow.md b/docs/box shadow.md
new file mode 100644
index 0000000..ce2d4f6
--- /dev/null
+++ b/docs/box shadow.md
@@ -0,0 +1,37 @@
+---
+title: Box Shadow
+has_toc: false
+back_to_top: true
+back_to_top_text: "Back to top"
+nav_order: 9
+---
+
+# Box-Shadow NEW v1.1.0
+Starting in release `1.1.0`, You can now add a box shadow to your progress bars.
+
+Toggling the box-shadow `on` will reveal a further 4 options:-
+
+## Box-Shadow Type
+If this is toggled `off` you will have a glow shadow that shows around your progress bars container.
+
+
+
+When you toggle this `on` you will be selecting a drop shadow and will additionally add two further settings.
+
+
+
+These two `H-Offset` and `V-Offset` sliders will allow you to set the horizontal and vertical offsets from a range of 1 to 5 pixels.
+
+{: .note }
+The glow shadow option (obtained by toggling this `off`) is effectively setting both of these offsets to zero and is a quicker and simpler way to setup a glow shadow.
+
+## Blur
+Define the blur of the drop-shadow from a range of 0 to 5 pixels. Zero is no blur whilst five gives a nice subtle blur.
+
+## Inset
+When this is toggled `on` you invert the box-shadow so that it runs from the border of your progress bars container inwards rather than the more usual outwards.
+
+
+
+## Box-Shadow Color
+Select your desired custom color for the box-shadow with the colorpicker or use one of the `Light` or `Dark` defaults.
\ No newline at end of file
diff --git a/docs/templates.md b/docs/templates.md
new file mode 100644
index 0000000..d0f79f6
--- /dev/null
+++ b/docs/templates.md
@@ -0,0 +1,132 @@
+---
+title: Templates
+has_toc: false
+back_to_top: true
+back_to_top_text: "Back to top"
+nav_order: 12
+---
+
+## Templates NEW v1.1.0
+Starting in release `1.1.0`, you now have the ability to assign a custom template to each individual progress bar.
+
+This update removed a lot of the color and gradient settings from the `Progress Bar Color` section and instead, moved them to a simplified default template.
+
+The default template will automatically be applied to all progress bars that have not been alocated a specific custom template.
+
+{: .note }
+**All** progress bars will still use all the other defaults set outwith the templating feature. These include, but are not limited to marks, text and tasks.
+
+With the introduction of templates, you can now have gradients with up to 5 equally spaced color stops for greater customisation.
+
+## Add Template
+To add a new template, press the `Add Template` button and a new template row will be added to the bottom of the template list.
+
+Each row will consist of these following settings:-
+
+### Template Name
+Assign a unique, short, and descriptive name to your template. This name will be used in the code block for each progress bar where you want the template applied.
+
+{: .note }
+The template names are case insensative so `My Template` is the same as `mY teMpLATE`.
+
+A normal progress bar code block will look something like this.
+````
+```apb
+My Title: 57/100
+```
+````
+
+If you wish to add a template to the progress bar, you need to add the name of the template encapsulated in curly braces at the end of your data line as shown below.
+
+````
+```apb
+My Title: 57/100{My Template}
+```
+````
+
+You can still do a multi line in the code block, and give each progress bar a different template if you wish.
+
+````
+```apb
+Rainfall: 194/365{rain}
+Wind: 111/365{wind}
+Sunshine: 267/365{sun}
+```
+````
+The above code block will result in three progress bars, each using their own template for styling (as seen below).
+
+
+
+### Gradient Toggle
+Toggle this `on` to make the progress bar into a gradient.
+
+If you toggle this `off`, your progress bar will either be a single color or a series of stepped colors instead of a gradient (see **stepped colors** below).
+
+When a single valid color is specified, your progress bar will display that color uniformly.
+
+If no valid colors are provided (e.g. all set to `#000000`), the progress bar will default to a fallback blue color, ensuring a consistent, single-color appearance.
+
+{: .note }
+For ***all*** templates, assigning either a single valid color or no valid colors will produce a solid-colored progress bar, regardless of whether the gradient option is toggled `on` or `off`.
+
+## Stepped Colors
+If you have the gradient toggled `off`, and you have 2 or more colors defined in your template, your progress bar will step though those colors based on your percentage completed.
+
+**e.g.** If you have the maximum 5 colors defined in your template, your progress bar will switch to the next color every 20%.
+
+So in the case of a template using the default 5 color rainbow palette, the progress bars entire color would change to the following, depending on the percentage completed:-
+
+| Start | End | Color |
+|:------|:---:|:------|
+| 0% | 19% | Red |
+| 20% | 39% | Yellow |
+| 40% | 59% | Green |
+| 60% | 79% | Purple |
+| 80% | 99% | Blue |
+
+
+
+### Gradient Type Toggle
+Use this toggle to switch between a masked-linear (`on`) and linear (`off`) progress bar.
+
+A **masked-linear** gradient will *always* run from 0% to 100% of the progress bars total width.
+ However, depending on your percentage completed, you will only see part of that overall gradient.
+
+**i.e.** from 0% to your current percentage completed (see below). The remaing right portion of the progress bar is masked from view.
+
+
+
+A **linear** gradient will *always* show the complete gradient regardless of percentage completed.
+
+This results in the gradient being stretched to the width of the completed section of the progress bar (see below).
+
+
+
+### Colorpickers (color 1 - 5)
+With the new template system you can have up to 5 color stops for your gradient/stepped progress bar. Any `#000000` pure black colors will be ignored.
+
+So for example, you could press the default rainbow button to populate your template with 5 colors stops: Red, Yellow, Green, Purple and Blue.
+
+
+
+Then you could remove some of them by changing them to `#000000`, let's say Red, Green and Purple.
+
+
+
+This would leave you with two colors, Yellow and Blue in positions 2 and 5.
+
+All the `#000000` colors in postions 1, 3 and 4 would be ignored and your progress bar would use the two valid colors in the order from left to right.
+
+
+
+### Color Presets
+These 3 buttons when pressed, will fill all 5 color pickers with either the `Light`, `Dark` or `Rainbow` presets.
+
+{: .note }
+When pressed these will overwrite any colors you have already assigned and can not be undone.
+
+### Movement Buttons (up & down)
+If you wish to order your templates in the list, use these two buttons to move the row up or down.
+
+### Delete Button
+If you no longer need your template, then press this button. **Note** that this can not be undone.
\ No newline at end of file