Repository: csgoh/roadmapper (language: python)

Issue:
`text_alignment` parameter is not passed to `draw_box_with_text` function
there is a hardcode 'centre' in task.py, line 560


Discussion / hints:
Thank! Well spotted. This will be fixed in the next release.

Fix patch:
diff --git a/.gitignore b/.gitignore
index f174ddd..cef2b12 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,6 +49,7 @@ try*.py
 tempCode*.py
 generated_roadmaps/
 diffs_of_generated_roadmaps/
+release_note.md
 
 
 # C extensions
diff --git a/images/black_roadmap.png b/images/black_roadmap.png
new file mode 100644
index 0000000..e04fea0
Binary files /dev/null and b/images/black_roadmap.png differ
diff --git a/images/black_roadmap.svg b/images/black_roadmap.svg
new file mode 100644
index 0000000..af02a74
--- /dev/null
+++ b/images/black_roadmap.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="227" viewBox="0 0 1200 227">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="500" fill="black" />
+<rect x="0" y="0" width="1200" height="500" fill="black" />
+<text x="409.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Black Background Test Roadmap</text>
+<rect x="278.0" y="99" width="886.5" height="20" fill="#B45F06" />
+<text x="692.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="304.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="377.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="451.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="526.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="598.75" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="674.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="750.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="821.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="895.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="970.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="1043.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="1117.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,142 L351.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,142 L425.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,142 L499.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,142 L573.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,142 L647.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,142 L721.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,142 L795.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,142 L869.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,142 L943.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,142 L1017.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,142 L1091.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="157" width="228.0" height="40" fill="#B45F06" />
+<text x="106.5" y="171.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="278" y="172" width="288" height="20" fill="#F6B26B" />
+<text x="397.5" y="176.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="610" y="172" width="252" height="20" fill="#F6B26B" />
+<text x="712.0" y="176.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<path d="M819.75,169 L832.75,182.0 L819.75,195 L806.75,182.0" fill="#B45F06" />
+<text x="800.0833333333334" y="154" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Milestone 2</text>
+<path d="M502.0,169 L515.0,182.0 L502.0,195 L489.0,182.0" fill="#B45F06" />
+<text x="482.3333333333333" y="154" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Milestone 1</text>
+</svg>
\ No newline at end of file
diff --git a/images/color-theme01.png b/images/color-theme01.png
index ac5f9b6..cf4ab27 100644
Binary files a/images/color-theme01.png and b/images/color-theme01.png differ
diff --git a/images/color-theme01.svg b/images/color-theme01.svg
new file mode 100644
index 0000000..231ae82
--- /dev/null
+++ b/images/color-theme01.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="600" height="438" viewBox="0 0 600 438">
+<defs>
+</defs>
+<rect x="0" y="0" width="600" height="500" fill="#FFFFFF" />
+<text x="185.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">My Demo Roadmap</text>
+<rect x="158.0" y="99" width="414.5" height="20" fill="#000000" />
+<text x="336.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="158.0" y="122" width="102.5" height="20" fill="#000000" />
+<text x="201.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="262.0" y="122" width="102.5" height="20" fill="#000000" />
+<text x="305.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<rect x="366.0" y="122" width="102.5" height="20" fill="#000000" />
+<text x="409.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q3</text>
+<rect x="470.0" y="122" width="102.5" height="20" fill="#000000" />
+<text x="513.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q4</text>
+<path d="M261.0,142 L261.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M365.0,142 L365.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M469.0,142 L469.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="177" width="108.0" height="52" fill="#000000" />
+<text x="46.5" y="197.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="158" y="177" width="135" height="20" fill="#D9D9D9" />
+<text x="201.0" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="312" y="177" width="119" height="20" fill="#D9D9D9" />
+<text x="347.5" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="262" y="202" width="102" height="20" fill="#D9D9D9" />
+<text x="288.5" y="206.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 3-C</text>
+<rect x="30" y="244" width="108.0" height="79" fill="#000000" />
+<text x="46.5" y="278.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 2</text>
+<rect x="262" y="244" width="102" height="20" fill="#D9D9D9" />
+<text x="288.5" y="248.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-A</text>
+<rect x="296" y="269" width="100" height="20" fill="#D9D9D9" />
+<text x="322.0" y="273.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="331" y="294" width="100" height="20" fill="#D9D9D9" />
+<text x="356.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-C</text>
+<text x="370.010989010989" y="155" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M375.010989010989,166.0 L375.010989010989,176.0" stroke="#000000" />
+<path d="M375.010989010989,181.1818181818182 L375.010989010989,191.1818181818182" stroke="#000000" />
+<path d="M375.010989010989,196.36363636363637 L375.010989010989,206.36363636363637" stroke="#000000" />
+<path d="M375.010989010989,211.54545454545456 L375.010989010989,221.54545454545456" stroke="#000000" />
+<path d="M375.010989010989,226.72727272727272 L375.010989010989,236.72727272727272" stroke="#000000" />
+<path d="M375.010989010989,241.9090909090909 L375.010989010989,251.9090909090909" stroke="#000000" />
+<path d="M375.010989010989,257.0909090909091 L375.010989010989,267.0909090909091" stroke="#000000" />
+<path d="M375.010989010989,272.27272727272725 L375.010989010989,282.27272727272725" stroke="#000000" />
+<path d="M375.010989010989,287.45454545454544 L375.010989010989,297.45454545454544" stroke="#000000" />
+<path d="M375.010989010989,302.6363636363636 L375.010989010989,312.6363636363636" stroke="#000000" />
+<path d="M375.010989010989,317.8181818181818 L375.010989010989,327.8181818181818" stroke="#000000" />
+<path d="M375.010989010989,333.0 L375.010989010989,343.0" stroke="#000000" />
+<text x="222.0" y="393" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/color-theme02.png b/images/color-theme02.png
index f19eb9f..1f6142b 100644
Binary files a/images/color-theme02.png and b/images/color-theme02.png differ
diff --git a/images/color-theme02.svg b/images/color-theme02.svg
new file mode 100644
index 0000000..7a61f62
--- /dev/null
+++ b/images/color-theme02.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="600" height="438" viewBox="0 0 600 438">
+<defs>
+</defs>
+<rect x="0" y="0" width="600" height="500" fill="#FFFFFF" />
+<text x="185.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">My Demo Roadmap</text>
+<rect x="158.0" y="99" width="414.5" height="20" fill="#666666" />
+<text x="336.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="158.0" y="122" width="102.5" height="20" fill="#666666" />
+<text x="201.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="262.0" y="122" width="102.5" height="20" fill="#666666" />
+<text x="305.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<rect x="366.0" y="122" width="102.5" height="20" fill="#666666" />
+<text x="409.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q3</text>
+<rect x="470.0" y="122" width="102.5" height="20" fill="#666666" />
+<text x="513.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q4</text>
+<path d="M261.0,142 L261.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M365.0,142 L365.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M469.0,142 L469.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="177" width="108.0" height="52" fill="#666666" />
+<text x="46.5" y="197.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="158" y="177" width="135" height="20" fill="#D9D9D9" />
+<text x="201.0" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="312" y="177" width="119" height="20" fill="#D9D9D9" />
+<text x="347.5" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="262" y="202" width="102" height="20" fill="#D9D9D9" />
+<text x="288.5" y="206.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 3-C</text>
+<rect x="30" y="244" width="108.0" height="79" fill="#666666" />
+<text x="46.5" y="278.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 2</text>
+<rect x="262" y="244" width="102" height="20" fill="#D9D9D9" />
+<text x="288.5" y="248.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-A</text>
+<rect x="296" y="269" width="100" height="20" fill="#D9D9D9" />
+<text x="322.0" y="273.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="331" y="294" width="100" height="20" fill="#D9D9D9" />
+<text x="356.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-C</text>
+<text x="370.010989010989" y="155" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M375.010989010989,166.0 L375.010989010989,176.0" stroke="#000000" />
+<path d="M375.010989010989,181.1818181818182 L375.010989010989,191.1818181818182" stroke="#000000" />
+<path d="M375.010989010989,196.36363636363637 L375.010989010989,206.36363636363637" stroke="#000000" />
+<path d="M375.010989010989,211.54545454545456 L375.010989010989,221.54545454545456" stroke="#000000" />
+<path d="M375.010989010989,226.72727272727272 L375.010989010989,236.72727272727272" stroke="#000000" />
+<path d="M375.010989010989,241.9090909090909 L375.010989010989,251.9090909090909" stroke="#000000" />
+<path d="M375.010989010989,257.0909090909091 L375.010989010989,267.0909090909091" stroke="#000000" />
+<path d="M375.010989010989,272.27272727272725 L375.010989010989,282.27272727272725" stroke="#000000" />
+<path d="M375.010989010989,287.45454545454544 L375.010989010989,297.45454545454544" stroke="#000000" />
+<path d="M375.010989010989,302.6363636363636 L375.010989010989,312.6363636363636" stroke="#000000" />
+<path d="M375.010989010989,317.8181818181818 L375.010989010989,327.8181818181818" stroke="#000000" />
+<path d="M375.010989010989,333.0 L375.010989010989,343.0" stroke="#000000" />
+<text x="222.0" y="393" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/color-theme03.png b/images/color-theme03.png
index 289c3f8..b5ff449 100644
Binary files a/images/color-theme03.png and b/images/color-theme03.png differ
diff --git a/images/color-theme03.svg b/images/color-theme03.svg
new file mode 100644
index 0000000..f3658d0
--- /dev/null
+++ b/images/color-theme03.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="600" height="438" viewBox="0 0 600 438">
+<defs>
+</defs>
+<rect x="0" y="0" width="600" height="500" fill="#FFFFFF" />
+<text x="185.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">My Demo Roadmap</text>
+<rect x="158.0" y="99" width="414.5" height="20" fill="#B45F06" />
+<text x="336.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="158.0" y="122" width="102.5" height="20" fill="#B45F06" />
+<text x="201.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="262.0" y="122" width="102.5" height="20" fill="#B45F06" />
+<text x="305.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<rect x="366.0" y="122" width="102.5" height="20" fill="#B45F06" />
+<text x="409.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q3</text>
+<rect x="470.0" y="122" width="102.5" height="20" fill="#B45F06" />
+<text x="513.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q4</text>
+<path d="M261.0,142 L261.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M365.0,142 L365.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M469.0,142 L469.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="177" width="108.0" height="52" fill="#B45F06" />
+<text x="46.5" y="197.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="158" y="177" width="135" height="20" fill="#F6B26B" />
+<text x="201.0" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="312" y="177" width="119" height="20" fill="#F6B26B" />
+<text x="347.5" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="262" y="202" width="102" height="20" fill="#F6B26B" />
+<text x="288.5" y="206.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 3-C</text>
+<rect x="30" y="244" width="108.0" height="79" fill="#B45F06" />
+<text x="46.5" y="278.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 2</text>
+<rect x="262" y="244" width="102" height="20" fill="#F6B26B" />
+<text x="288.5" y="248.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-A</text>
+<rect x="296" y="269" width="100" height="20" fill="#F6B26B" />
+<text x="322.0" y="273.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="331" y="294" width="100" height="20" fill="#F6B26B" />
+<text x="356.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-C</text>
+<text x="370.010989010989" y="155" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">▼</text>
+<path d="M375.010989010989,166.0 L375.010989010989,176.0" stroke="#B45F06" />
+<path d="M375.010989010989,181.1818181818182 L375.010989010989,191.1818181818182" stroke="#B45F06" />
+<path d="M375.010989010989,196.36363636363637 L375.010989010989,206.36363636363637" stroke="#B45F06" />
+<path d="M375.010989010989,211.54545454545456 L375.010989010989,221.54545454545456" stroke="#B45F06" />
+<path d="M375.010989010989,226.72727272727272 L375.010989010989,236.72727272727272" stroke="#B45F06" />
+<path d="M375.010989010989,241.9090909090909 L375.010989010989,251.9090909090909" stroke="#B45F06" />
+<path d="M375.010989010989,257.0909090909091 L375.010989010989,267.0909090909091" stroke="#B45F06" />
+<path d="M375.010989010989,272.27272727272725 L375.010989010989,282.27272727272725" stroke="#B45F06" />
+<path d="M375.010989010989,287.45454545454544 L375.010989010989,297.45454545454544" stroke="#B45F06" />
+<path d="M375.010989010989,302.6363636363636 L375.010989010989,312.6363636363636" stroke="#B45F06" />
+<path d="M375.010989010989,317.8181818181818 L375.010989010989,327.8181818181818" stroke="#B45F06" />
+<path d="M375.010989010989,333.0 L375.010989010989,343.0" stroke="#B45F06" />
+<text x="222.0" y="393" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/color-theme04.png b/images/color-theme04.png
index 81500c1..154423f 100644
Binary files a/images/color-theme04.png and b/images/color-theme04.png differ
diff --git a/images/color-theme04.svg b/images/color-theme04.svg
new file mode 100644
index 0000000..c9abf02
--- /dev/null
+++ b/images/color-theme04.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="600" height="438" viewBox="0 0 600 438">
+<defs>
+</defs>
+<rect x="0" y="0" width="600" height="500" fill="#FFFFFF" />
+<text x="185.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">My Demo Roadmap</text>
+<rect x="158.0" y="99" width="414.5" height="20" fill="#0B5394" />
+<text x="336.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="158.0" y="122" width="102.5" height="20" fill="#0B5394" />
+<text x="201.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="262.0" y="122" width="102.5" height="20" fill="#0B5394" />
+<text x="305.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<rect x="366.0" y="122" width="102.5" height="20" fill="#0B5394" />
+<text x="409.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q3</text>
+<rect x="470.0" y="122" width="102.5" height="20" fill="#0B5394" />
+<text x="513.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q4</text>
+<path d="M261.0,142 L261.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M365.0,142 L365.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M469.0,142 L469.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="177" width="108.0" height="52" fill="#0B5394" />
+<text x="46.5" y="197.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="158" y="177" width="135" height="20" fill="#9FC5E8" />
+<text x="201.0" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="312" y="177" width="119" height="20" fill="#9FC5E8" />
+<text x="347.5" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="262" y="202" width="102" height="20" fill="#9FC5E8" />
+<text x="288.5" y="206.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 3-C</text>
+<rect x="30" y="244" width="108.0" height="79" fill="#0B5394" />
+<text x="46.5" y="278.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 2</text>
+<rect x="262" y="244" width="102" height="20" fill="#9FC5E8" />
+<text x="288.5" y="248.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-A</text>
+<rect x="296" y="269" width="100" height="20" fill="#9FC5E8" />
+<text x="322.0" y="273.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="331" y="294" width="100" height="20" fill="#9FC5E8" />
+<text x="356.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-C</text>
+<text x="370.010989010989" y="155" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">▼</text>
+<path d="M375.010989010989,166.0 L375.010989010989,176.0" stroke="#0B5394" />
+<path d="M375.010989010989,181.1818181818182 L375.010989010989,191.1818181818182" stroke="#0B5394" />
+<path d="M375.010989010989,196.36363636363637 L375.010989010989,206.36363636363637" stroke="#0B5394" />
+<path d="M375.010989010989,211.54545454545456 L375.010989010989,221.54545454545456" stroke="#0B5394" />
+<path d="M375.010989010989,226.72727272727272 L375.010989010989,236.72727272727272" stroke="#0B5394" />
+<path d="M375.010989010989,241.9090909090909 L375.010989010989,251.9090909090909" stroke="#0B5394" />
+<path d="M375.010989010989,257.0909090909091 L375.010989010989,267.0909090909091" stroke="#0B5394" />
+<path d="M375.010989010989,272.27272727272725 L375.010989010989,282.27272727272725" stroke="#0B5394" />
+<path d="M375.010989010989,287.45454545454544 L375.010989010989,297.45454545454544" stroke="#0B5394" />
+<path d="M375.010989010989,302.6363636363636 L375.010989010989,312.6363636363636" stroke="#0B5394" />
+<path d="M375.010989010989,317.8181818181818 L375.010989010989,327.8181818181818" stroke="#0B5394" />
+<path d="M375.010989010989,333.0 L375.010989010989,343.0" stroke="#0B5394" />
+<text x="222.0" y="393" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/color-theme05.png b/images/color-theme05.png
index 78010a3..fff3970 100644
Binary files a/images/color-theme05.png and b/images/color-theme05.png differ
diff --git a/images/color-theme05.svg b/images/color-theme05.svg
new file mode 100644
index 0000000..89dc609
--- /dev/null
+++ b/images/color-theme05.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="600" height="438" viewBox="0 0 600 438">
+<defs>
+</defs>
+<rect x="0" y="0" width="600" height="500" fill="#FFFFFF" />
+<text x="185.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">My Demo Roadmap</text>
+<rect x="158.0" y="99" width="414.5" height="20" fill="#38761D" />
+<text x="336.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="158.0" y="122" width="102.5" height="20" fill="#38761D" />
+<text x="201.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="262.0" y="122" width="102.5" height="20" fill="#38761D" />
+<text x="305.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<rect x="366.0" y="122" width="102.5" height="20" fill="#38761D" />
+<text x="409.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q3</text>
+<rect x="470.0" y="122" width="102.5" height="20" fill="#38761D" />
+<text x="513.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q4</text>
+<path d="M261.0,142 L261.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M365.0,142 L365.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M469.0,142 L469.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="177" width="108.0" height="52" fill="#38761D" />
+<text x="46.5" y="197.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="158" y="177" width="135" height="20" fill="#93C47D" />
+<text x="201.0" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="312" y="177" width="119" height="20" fill="#93C47D" />
+<text x="347.5" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="262" y="202" width="102" height="20" fill="#93C47D" />
+<text x="288.5" y="206.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 3-C</text>
+<rect x="30" y="244" width="108.0" height="79" fill="#38761D" />
+<text x="46.5" y="278.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 2</text>
+<rect x="262" y="244" width="102" height="20" fill="#93C47D" />
+<text x="288.5" y="248.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-A</text>
+<rect x="296" y="269" width="100" height="20" fill="#93C47D" />
+<text x="322.0" y="273.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="331" y="294" width="100" height="20" fill="#93C47D" />
+<text x="356.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-C</text>
+<text x="370.010989010989" y="155" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">▼</text>
+<path d="M375.010989010989,166.0 L375.010989010989,176.0" stroke="#38761D" />
+<path d="M375.010989010989,181.1818181818182 L375.010989010989,191.1818181818182" stroke="#38761D" />
+<path d="M375.010989010989,196.36363636363637 L375.010989010989,206.36363636363637" stroke="#38761D" />
+<path d="M375.010989010989,211.54545454545456 L375.010989010989,221.54545454545456" stroke="#38761D" />
+<path d="M375.010989010989,226.72727272727272 L375.010989010989,236.72727272727272" stroke="#38761D" />
+<path d="M375.010989010989,241.9090909090909 L375.010989010989,251.9090909090909" stroke="#38761D" />
+<path d="M375.010989010989,257.0909090909091 L375.010989010989,267.0909090909091" stroke="#38761D" />
+<path d="M375.010989010989,272.27272727272725 L375.010989010989,282.27272727272725" stroke="#38761D" />
+<path d="M375.010989010989,287.45454545454544 L375.010989010989,297.45454545454544" stroke="#38761D" />
+<path d="M375.010989010989,302.6363636363636 L375.010989010989,312.6363636363636" stroke="#38761D" />
+<path d="M375.010989010989,317.8181818181818 L375.010989010989,327.8181818181818" stroke="#38761D" />
+<path d="M375.010989010989,333.0 L375.010989010989,343.0" stroke="#38761D" />
+<text x="222.0" y="393" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/demo01.png b/images/demo01.png
index 376e761..4e08574 100644
Binary files a/images/demo01.png and b/images/demo01.png differ
diff --git a/images/demo01.svg b/images/demo01.svg
new file mode 100644
index 0000000..7e72531
--- /dev/null
+++ b/images/demo01.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="400" viewBox="0 0 1200 400">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="400" fill="#FFFFFF" />
+<text x="485.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">My Demo Roadmap</text>
+<text x="497.5" y="64" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Matariki Technologies Ltd</text>
+<rect x="278.0" y="125" width="886.5" height="20" fill="#0B5394" />
+<text x="692.75" y="129.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="304.25" y="152.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="377.75" y="152.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="451.25" y="152.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="526.25" y="151.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="598.75" y="151.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="674.25" y="152.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="750.25" y="152.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="821.25" y="151.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="895.25" y="151.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="970.75" y="152.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="1043.25" y="152.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="148" width="72.5" height="20" fill="#0B5394" />
+<text x="1117.25" y="152.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,168 L351.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,168 L425.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,168 L499.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,168 L573.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,168 L647.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,168 L721.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,168 L795.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,168 L869.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,168 L943.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,168 L1017.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,168 L1091.0,295" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="203" width="228.0" height="82" fill="#0B5394" />
+<text x="71.5" y="238.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="278" y="218" width="720" height="20" fill="#9FC5E8" />
+<text x="588.0" y="221.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="1054" y="218" width="108" height="20" fill="#9FC5E8" />
+<text x="1067.0" y="222.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M390.25,215 L403.25,228.0 L390.25,241 L377.25,228.0" fill="#3D85C6" />
+<text x="380.5833333333333" y="200" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">v.1.0</text>
+<path d="M798.0,215 L811.0,228.0 L798.0,241 L785.0,228.0" fill="#3D85C6" />
+<text x="788.3333333333334" y="200" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">v.1.1</text>
+<rect x="426" y="243" width="158" height="20" fill="#9FC5E8" />
+<text x="468.0" y="247.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="648" y="243" width="158" height="20" fill="#9FC5E8" />
+<text x="690.0" y="247.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<text x="738.75" y="181" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">▼</text>
+<path d="M743.75,192.0 L743.75,202.0" stroke="#0B5394" />
+<path d="M743.75,207.84615384615384 L743.75,217.84615384615384" stroke="#0B5394" />
+<path d="M743.75,223.69230769230768 L743.75,233.69230769230768" stroke="#0B5394" />
+<path d="M743.75,239.53846153846155 L743.75,249.53846153846155" stroke="#0B5394" />
+<path d="M743.75,255.3846153846154 L743.75,265.38461538461536" stroke="#0B5394" />
+<path d="M743.75,271.2307692307692 L743.75,281.2307692307692" stroke="#0B5394" />
+<path d="M743.75,287.0769230769231 L743.75,297.0769230769231" stroke="#0B5394" />
+<text x="522.0" y="355" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Generated by Roadmapper</text>
+<image x="1120" y="30" width="50" height="50" xlink:href="data:image/png;base64,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" />
+</svg>
\ No newline at end of file
diff --git a/images/en_NZ-roadmap.png b/images/en_NZ-roadmap.png
index 028c0a9..7b2b247 100644
Binary files a/images/en_NZ-roadmap.png and b/images/en_NZ-roadmap.png differ
diff --git a/images/en_NZ-roadmap.svg b/images/en_NZ-roadmap.svg
new file mode 100644
index 0000000..0eeef51
--- /dev/null
+++ b/images/en_NZ-roadmap.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800" height="572" viewBox="0 0 800 572">
+<defs>
+</defs>
+<rect x="0" y="0" width="800" height="700" fill="#FFFFFF" />
+<text x="262.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Strategy Roadmap 2023</text>
+<text x="297.5" y="64" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Matariki Technologies Ltd</text>
+<rect x="198.0" y="125" width="574.5" height="20" fill="#4C5B5C" />
+<text x="456.75" y="129.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="198.0" y="148" width="142.5" height="20" fill="#4C5B5C" />
+<text x="261.25" y="152.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="342.0" y="148" width="142.5" height="20" fill="#4C5B5C" />
+<text x="405.25" y="152.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<rect x="486.0" y="148" width="142.5" height="20" fill="#4C5B5C" />
+<text x="549.25" y="152.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q3</text>
+<rect x="630.0" y="148" width="142.5" height="20" fill="#4C5B5C" />
+<text x="693.25" y="152.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q4</text>
+<path d="M341.0,168 L341.0,471" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M485.0,168 L485.0,471" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M629.0,168 L629.0,471" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="203" width="148.0" height="52" fill="#FCA311" />
+<text x="63.5" y="222.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">People Stream</text>
+<rect x="198" y="203" width="187" height="20" fill="#8FBC94" />
+<text x="218.5" y="206.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Develop Inclusion Strategy</text>
+<rect x="389" y="203" width="377" height="20" fill="#8FBC94" />
+<text x="471.5" y="206.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Promote diversity, equity, and inclusion</text>
+<rect x="292" y="228" width="425" height="20" fill="#8FBC94" />
+<text x="401.0" y="231.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Implement a sustainability programme</text>
+<rect x="30" y="270" width="148.0" height="82" fill="#FCA311" />
+<text x="61.0" y="305.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Process Stream</text>
+<rect x="247" y="270" width="469" height="20" fill="#8FBC94" />
+<text x="356.0" y="273.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Implement Business Improvement Programme</text>
+<rect x="486" y="310" width="282" height="20" fill="#8FBC94" />
+<text x="571.5" y="313.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Automate processes</text>
+<path d="M536.5439560439561,307 L549.5439560439561,320.0 L536.5439560439561,333 L523.5439560439561,320.0" fill="#3D6642" />
+<text x="504.5439560439561" y="292" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">30% Automated </text>
+<path d="M727.521978021978,307 L740.521978021978,320.0 L727.521978021978,333 L714.521978021978,320.0" fill="#3D6642" />
+<text x="695.521978021978" y="292" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">60% Automated </text>
+<rect x="30" y="367" width="148.0" height="94" fill="#FCA311" />
+<text x="71.0" y="408.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Tool Stream</text>
+<rect x="198" y="367" width="187" height="20" fill="#8FBC94" />
+<text x="240.0" y="370.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Implement strategy</text>
+<rect x="247" y="392" width="327" height="20" fill="#8FBC94" />
+<text x="368.5" y="396.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Tools Selection</text>
+<rect x="342" y="432" width="377" height="20" fill="#8FBC94" />
+<text x="445.0" y="436.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Centralized Tool Administration</text>
+<path d="M727.521978021978,429 L740.521978021978,442.0 L727.521978021978,455 L714.521978021978,442.0" fill="#3D6642" />
+<text x="691.8553113553114" y="414" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Admin Centralised</text>
+<text x="493.5274725274725" y="181" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M498.5274725274725,192.0 L498.5274725274725,202.0" stroke="#000000" />
+<path d="M498.5274725274725,206.68421052631578 L498.5274725274725,216.68421052631578" stroke="#000000" />
+<path d="M498.5274725274725,221.3684210526316 L498.5274725274725,231.3684210526316" stroke="#000000" />
+<path d="M498.5274725274725,236.05263157894737 L498.5274725274725,246.05263157894737" stroke="#000000" />
+<path d="M498.5274725274725,250.73684210526315 L498.5274725274725,260.7368421052631" stroke="#000000" />
+<path d="M498.5274725274725,265.42105263157896 L498.5274725274725,275.42105263157896" stroke="#000000" />
+<path d="M498.5274725274725,280.10526315789474 L498.5274725274725,290.10526315789474" stroke="#000000" />
+<path d="M498.5274725274725,294.7894736842105 L498.5274725274725,304.7894736842105" stroke="#000000" />
+<path d="M498.5274725274725,309.4736842105263 L498.5274725274725,319.4736842105263" stroke="#000000" />
+<path d="M498.5274725274725,324.1578947368421 L498.5274725274725,334.1578947368421" stroke="#000000" />
+<path d="M498.5274725274725,338.8421052631579 L498.5274725274725,348.8421052631579" stroke="#000000" />
+<path d="M498.5274725274725,353.52631578947364 L498.5274725274725,363.52631578947364" stroke="#000000" />
+<path d="M498.5274725274725,368.2105263157895 L498.5274725274725,378.2105263157895" stroke="#000000" />
+<path d="M498.5274725274725,382.89473684210526 L498.5274725274725,392.89473684210526" stroke="#000000" />
+<path d="M498.5274725274725,397.57894736842104 L498.5274725274725,407.57894736842104" stroke="#000000" />
+<path d="M498.5274725274725,412.2631578947369 L498.5274725274725,422.2631578947369" stroke="#000000" />
+<path d="M498.5274725274725,426.9473684210526 L498.5274725274725,436.9473684210526" stroke="#000000" />
+<path d="M498.5274725274725,441.63157894736844 L498.5274725274725,451.63157894736844" stroke="#000000" />
+<path d="M498.5274725274725,456.3157894736842 L498.5274725274725,466.3157894736842" stroke="#000000" />
+<path d="M498.5274725274725,471.0 L498.5274725274725,481.0" stroke="#000000" />
+<text x="325.0" y="529" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-BLUEMOUNTAIN-monthly.png b/images/gallery/gallery-BLUEMOUNTAIN-monthly.png
index 26f40bb..dbfb1d7 100644
Binary files a/images/gallery/gallery-BLUEMOUNTAIN-monthly.png and b/images/gallery/gallery-BLUEMOUNTAIN-monthly.png differ
diff --git a/images/gallery/gallery-BLUEMOUNTAIN-monthly.svg b/images/gallery/gallery-BLUEMOUNTAIN-monthly.svg
new file mode 100644
index 0000000..f91e36e
--- /dev/null
+++ b/images/gallery/gallery-BLUEMOUNTAIN-monthly.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="435" viewBox="0 0 1200 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="1000" fill="#FFFFFF" />
+<text x="416.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">SAMPLE ROADMAP 2022/2023</text>
+<text x="513.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">GodZone Corporation</text>
+<rect x="278.0" y="120" width="886.5" height="20" fill="#0B5394" />
+<text x="692.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="304.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="377.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="451.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="526.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="598.75" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="674.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="750.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="821.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="895.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="970.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="1043.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="143" width="72.5" height="20" fill="#0B5394" />
+<text x="1117.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,163 L351.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,163 L425.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,163 L499.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,163 L573.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,163 L647.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,163 L721.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,163 L795.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,163 L869.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,163 L943.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,163 L1017.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,163 L1091.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="228.0" height="82" fill="#0B5394" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="278" y="213" width="720" height="20" fill="#9FC5E8" />
+<text x="588.0" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="1054" y="213" width="108" height="20" fill="#9FC5E8" />
+<text x="1067.0" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M390.25,210 L403.25,223.0 L390.25,236 L377.25,223.0" fill="#3D85C6" />
+<text x="380.5833333333333" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">v.1.0</text>
+<path d="M798.0,210 L811.0,223.0 L798.0,236 L785.0,223.0" fill="#3D85C6" />
+<text x="788.3333333333334" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">v.1.1</text>
+<rect x="426" y="238" width="158" height="20" fill="#9FC5E8" />
+<text x="468.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="648" y="238" width="158" height="20" fill="#9FC5E8" />
+<text x="690.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="228.0" height="25" fill="#0B5394" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="352" y="295" width="792" height="20" fill="#9FC5E8" />
+<text x="678.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="738.75" y="176" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">▼</text>
+<path d="M743.75,187.0 L743.75,197.0" stroke="#0B5394" />
+<path d="M743.75,202.05263157894737 L743.75,212.05263157894737" stroke="#0B5394" />
+<path d="M743.75,217.10526315789474 L743.75,227.10526315789474" stroke="#0B5394" />
+<path d="M743.75,232.1578947368421 L743.75,242.1578947368421" stroke="#0B5394" />
+<path d="M743.75,247.21052631578948 L743.75,257.2105263157895" stroke="#0B5394" />
+<path d="M743.75,262.2631578947368 L743.75,272.2631578947368" stroke="#0B5394" />
+<path d="M743.75,277.3157894736842 L743.75,287.3157894736842" stroke="#0B5394" />
+<path d="M743.75,292.36842105263156 L743.75,302.36842105263156" stroke="#0B5394" />
+<path d="M743.75,307.42105263157896 L743.75,317.42105263157896" stroke="#0B5394" />
+<path d="M743.75,322.4736842105263 L743.75,332.4736842105263" stroke="#0B5394" />
+<text x="522.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-DEFAULT-generic-monthly.svg b/images/gallery/gallery-DEFAULT-generic-monthly.svg
new file mode 100644
index 0000000..cbda7cf
--- /dev/null
+++ b/images/gallery/gallery-DEFAULT-generic-monthly.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1400" height="435" viewBox="0 0 1400 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="1400" height="1000" fill="#FFFFFF" />
+<text x="516.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">SAMPLE ROADMAP 2022/2023</text>
+<text x="613.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">GodZone Corporation</text>
+<rect x="318.0" y="120" width="1054.5" height="20" fill="#000000" />
+<text x="827.25" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 1</text>
+<rect x="318.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="339.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 1</text>
+<rect x="406.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="427.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 2</text>
+<rect x="494.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="515.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 3</text>
+<rect x="582.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="603.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 4</text>
+<rect x="670.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="691.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 5</text>
+<rect x="758.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="779.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 6</text>
+<rect x="846.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="867.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 7</text>
+<rect x="934.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="955.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 8</text>
+<rect x="1022.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="1043.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 9</text>
+<rect x="1110.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="1127.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 10</text>
+<rect x="1198.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="1215.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 11</text>
+<rect x="1286.0" y="143" width="86.5" height="20" fill="#000000" />
+<text x="1303.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Month 12</text>
+<path d="M405.0,163 L405.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M493.0,163 L493.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M581.0,163 L581.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M669.0,163 L669.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M757.0,163 L757.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M845.0,163 L845.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M933.0,163 L933.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1021.0,163 L1021.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1109.0,163 L1109.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1197.0,163 L1197.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1285.0,163 L1285.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="268.0" height="82" fill="#000000" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="318" y="213" width="860" height="20" fill="#D9D9D9" />
+<text x="698.0" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="1241" y="213" width="129" height="20" fill="#D9D9D9" />
+<text x="1264.5" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M451.25,210 L464.25,223.0 L451.25,236 L438.25,223.0" fill="#000000" />
+<text x="441.5833333333333" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.0</text>
+<path d="M936.0,210 L949.0,223.0 L936.0,236 L923.0,223.0" fill="#000000" />
+<text x="926.3333333333334" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.1</text>
+<rect x="494" y="238" width="189" height="20" fill="#D9D9D9" />
+<text x="551.5" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="758" y="238" width="189" height="20" fill="#D9D9D9" />
+<text x="815.5" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="268.0" height="25" fill="#000000" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="406" y="295" width="946" height="20" fill="#D9D9D9" />
+<text x="809.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="622.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-DEFAULT-halfyearly.png b/images/gallery/gallery-DEFAULT-halfyearly.png
index 4f6dc9e..8bece38 100644
Binary files a/images/gallery/gallery-DEFAULT-halfyearly.png and b/images/gallery/gallery-DEFAULT-halfyearly.png differ
diff --git a/images/gallery/gallery-DEFAULT-halfyearly.svg b/images/gallery/gallery-DEFAULT-halfyearly.svg
new file mode 100644
index 0000000..05b3da8
--- /dev/null
+++ b/images/gallery/gallery-DEFAULT-halfyearly.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1400" height="435" viewBox="0 0 1400 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="1400" height="1000" fill="#FFFFFF" />
+<text x="516.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">SAMPLE ROADMAP 2022/2023</text>
+<text x="613.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">GodZone Corporation</text>
+<rect x="318.0" y="120" width="526.5" height="20" fill="#000000" />
+<text x="552.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="846.0" y="120" width="526.5" height="20" fill="#000000" />
+<text x="1080.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2024</text>
+<rect x="318.0" y="143" width="262.5" height="20" fill="#000000" />
+<text x="441.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">H1</text>
+<rect x="582.0" y="143" width="262.5" height="20" fill="#000000" />
+<text x="705.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">H2</text>
+<rect x="846.0" y="143" width="262.5" height="20" fill="#000000" />
+<text x="969.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">H1</text>
+<rect x="1110.0" y="143" width="262.5" height="20" fill="#000000" />
+<text x="1233.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">H2</text>
+<path d="M581.0,163 L581.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M845.0,163 L845.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1109.0,163 L1109.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="268.0" height="82" fill="#000000" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="318" y="213" width="437" height="20" fill="#D9D9D9" />
+<text x="486.5" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="778" y="213" width="195" height="20" fill="#D9D9D9" />
+<text x="834.5" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M977.0745856353591,210 L990.0745856353591,223.0 L977.0745856353591,236 L964.0745856353591,223.0" fill="#000000" />
+<text x="967.4079189686925" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.2.0</text>
+<path d="M385.625,210 L398.625,223.0 L385.625,236 L372.625,223.0" fill="#000000" />
+<text x="375.9583333333333" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.0</text>
+<path d="M628.4672131147541,210 L641.4672131147541,223.0 L628.4672131147541,236 L615.4672131147541,223.0" fill="#000000" />
+<text x="618.8005464480875" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.1</text>
+<rect x="404" y="238" width="97" height="20" fill="#D9D9D9" />
+<text x="415.5" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="538" y="238" width="95" height="20" fill="#D9D9D9" />
+<text x="548.5" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="268.0" height="25" fill="#000000" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="363" y="295" width="969" height="20" fill="#D9D9D9" />
+<text x="778.0" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="588.4754098360655" y="176" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M593.4754098360655,187.0 L593.4754098360655,197.0" stroke="#000000" />
+<path d="M593.4754098360655,202.05263157894737 L593.4754098360655,212.05263157894737" stroke="#000000" />
+<path d="M593.4754098360655,217.10526315789474 L593.4754098360655,227.10526315789474" stroke="#000000" />
+<path d="M593.4754098360655,232.1578947368421 L593.4754098360655,242.1578947368421" stroke="#000000" />
+<path d="M593.4754098360655,247.21052631578948 L593.4754098360655,257.2105263157895" stroke="#000000" />
+<path d="M593.4754098360655,262.2631578947368 L593.4754098360655,272.2631578947368" stroke="#000000" />
+<path d="M593.4754098360655,277.3157894736842 L593.4754098360655,287.3157894736842" stroke="#000000" />
+<path d="M593.4754098360655,292.36842105263156 L593.4754098360655,302.36842105263156" stroke="#000000" />
+<path d="M593.4754098360655,307.42105263157896 L593.4754098360655,317.42105263157896" stroke="#000000" />
+<path d="M593.4754098360655,322.4736842105263 L593.4754098360655,332.4736842105263" stroke="#000000" />
+<text x="622.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-DEFAULT-monthly.png b/images/gallery/gallery-DEFAULT-monthly.png
index a4053d7..9db94f2 100644
Binary files a/images/gallery/gallery-DEFAULT-monthly.png and b/images/gallery/gallery-DEFAULT-monthly.png differ
diff --git a/images/gallery/gallery-DEFAULT-monthly.svg b/images/gallery/gallery-DEFAULT-monthly.svg
new file mode 100644
index 0000000..45dbbaf
--- /dev/null
+++ b/images/gallery/gallery-DEFAULT-monthly.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="435" viewBox="0 0 1200 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="1000" fill="#FFFFFF" />
+<text x="416.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">SAMPLE ROADMAP 2022/2023</text>
+<text x="513.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">GodZone Corporation</text>
+<rect x="278.0" y="120" width="886.5" height="20" fill="#000000" />
+<text x="692.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="304.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="377.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="451.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="526.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="598.75" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="674.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="750.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="821.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="895.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="970.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="1043.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="143" width="72.5" height="20" fill="#000000" />
+<text x="1117.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,163 L351.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,163 L425.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,163 L499.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,163 L573.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,163 L647.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,163 L721.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,163 L795.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,163 L869.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,163 L943.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,163 L1017.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,163 L1091.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="228.0" height="82" fill="#000000" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="278" y="213" width="720" height="20" fill="#D9D9D9" />
+<text x="588.0" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="1054" y="213" width="108" height="20" fill="#D9D9D9" />
+<text x="1067.0" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M390.25,210 L403.25,223.0 L390.25,236 L377.25,223.0" fill="#000000" />
+<text x="380.5833333333333" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.0</text>
+<path d="M798.0,210 L811.0,223.0 L798.0,236 L785.0,223.0" fill="#000000" />
+<text x="788.3333333333334" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.1</text>
+<rect x="426" y="238" width="158" height="20" fill="#D9D9D9" />
+<text x="468.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="648" y="238" width="158" height="20" fill="#D9D9D9" />
+<text x="690.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="228.0" height="25" fill="#000000" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="352" y="295" width="792" height="20" fill="#D9D9D9" />
+<text x="678.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="738.75" y="176" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M743.75,187.0 L743.75,197.0" stroke="#000000" />
+<path d="M743.75,202.05263157894737 L743.75,212.05263157894737" stroke="#000000" />
+<path d="M743.75,217.10526315789474 L743.75,227.10526315789474" stroke="#000000" />
+<path d="M743.75,232.1578947368421 L743.75,242.1578947368421" stroke="#000000" />
+<path d="M743.75,247.21052631578948 L743.75,257.2105263157895" stroke="#000000" />
+<path d="M743.75,262.2631578947368 L743.75,272.2631578947368" stroke="#000000" />
+<path d="M743.75,277.3157894736842 L743.75,287.3157894736842" stroke="#000000" />
+<path d="M743.75,292.36842105263156 L743.75,302.36842105263156" stroke="#000000" />
+<path d="M743.75,307.42105263157896 L743.75,317.42105263157896" stroke="#000000" />
+<path d="M743.75,322.4736842105263 L743.75,332.4736842105263" stroke="#000000" />
+<text x="522.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-DEFAULT-quarterly.png b/images/gallery/gallery-DEFAULT-quarterly.png
index d51244c..ec73ffd 100644
Binary files a/images/gallery/gallery-DEFAULT-quarterly.png and b/images/gallery/gallery-DEFAULT-quarterly.png differ
diff --git a/images/gallery/gallery-DEFAULT-quarterly.svg b/images/gallery/gallery-DEFAULT-quarterly.svg
new file mode 100644
index 0000000..dce72d4
--- /dev/null
+++ b/images/gallery/gallery-DEFAULT-quarterly.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1400" height="435" viewBox="0 0 1400 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="1400" height="1000" fill="#FFFFFF" />
+<text x="516.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">SAMPLE ROADMAP 2022/2023</text>
+<text x="613.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">GodZone Corporation</text>
+<rect x="318.0" y="120" width="702.5" height="20" fill="#000000" />
+<text x="640.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="1022.0" y="120" width="350.5" height="20" fill="#000000" />
+<text x="1168.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2024</text>
+<rect x="318.0" y="143" width="174.5" height="20" fill="#000000" />
+<text x="397.25" y="147.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="494.0" y="143" width="174.5" height="20" fill="#000000" />
+<text x="573.25" y="147.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<rect x="670.0" y="143" width="174.5" height="20" fill="#000000" />
+<text x="749.25" y="147.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q3</text>
+<rect x="846.0" y="143" width="174.5" height="20" fill="#000000" />
+<text x="925.25" y="147.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q4</text>
+<rect x="1022.0" y="143" width="174.5" height="20" fill="#000000" />
+<text x="1101.25" y="147.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="1198.0" y="143" width="174.5" height="20" fill="#000000" />
+<text x="1277.25" y="147.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<path d="M493.0,163 L493.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M669.0,163 L669.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M845.0,163 L845.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1021.0,163 L1021.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1197.0,163 L1197.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="268.0" height="82" fill="#000000" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="318" y="213" width="579" height="20" fill="#D9D9D9" />
+<text x="557.5" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="932" y="213" width="262" height="20" fill="#D9D9D9" />
+<text x="1022.0" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M1196.5611111111111,210 L1209.5611111111111,223.0 L1196.5611111111111,236 L1183.5611111111111,223.0" fill="#000000" />
+<text x="1186.8944444444444" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.2.0</text>
+<path d="M408.2303370786517,210 L421.2303370786517,223.0 L408.2303370786517,236 L395.2303370786517,223.0" fill="#000000" />
+<text x="398.563670411985" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.0</text>
+<path d="M731.445054945055,210 L744.445054945055,223.0 L731.445054945055,236 L718.445054945055,223.0" fill="#000000" />
+<text x="721.7783882783883" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.1</text>
+<rect x="433" y="238" width="127" height="20" fill="#D9D9D9" />
+<text x="459.5" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="612" y="238" width="126" height="20" fill="#D9D9D9" />
+<text x="638.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="268.0" height="25" fill="#000000" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="378" y="295" width="983" height="20" fill="#D9D9D9" />
+<text x="800.0" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="680.3406593406594" y="176" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M685.3406593406594,187.0 L685.3406593406594,197.0" stroke="#000000" />
+<path d="M685.3406593406594,202.05263157894737 L685.3406593406594,212.05263157894737" stroke="#000000" />
+<path d="M685.3406593406594,217.10526315789474 L685.3406593406594,227.10526315789474" stroke="#000000" />
+<path d="M685.3406593406594,232.1578947368421 L685.3406593406594,242.1578947368421" stroke="#000000" />
+<path d="M685.3406593406594,247.21052631578948 L685.3406593406594,257.2105263157895" stroke="#000000" />
+<path d="M685.3406593406594,262.2631578947368 L685.3406593406594,272.2631578947368" stroke="#000000" />
+<path d="M685.3406593406594,277.3157894736842 L685.3406593406594,287.3157894736842" stroke="#000000" />
+<path d="M685.3406593406594,292.36842105263156 L685.3406593406594,302.36842105263156" stroke="#000000" />
+<path d="M685.3406593406594,307.42105263157896 L685.3406593406594,317.42105263157896" stroke="#000000" />
+<path d="M685.3406593406594,322.4736842105263 L685.3406593406594,332.4736842105263" stroke="#000000" />
+<text x="622.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-DEFAULT-weekly.png b/images/gallery/gallery-DEFAULT-weekly.png
index 9bd40e0..64d313d 100644
Binary files a/images/gallery/gallery-DEFAULT-weekly.png and b/images/gallery/gallery-DEFAULT-weekly.png differ
diff --git a/images/gallery/gallery-DEFAULT-weekly.svg b/images/gallery/gallery-DEFAULT-weekly.svg
new file mode 100644
index 0000000..bf5a599
--- /dev/null
+++ b/images/gallery/gallery-DEFAULT-weekly.svg
@@ -0,0 +1,199 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="2400" height="435" viewBox="0 0 2400 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="2400" height="1000" fill="#FFFFFF" />
+<text x="1016.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">SAMPLE ROADMAP 2022/2023</text>
+<text x="1113.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">GodZone Corporation</text>
+<rect x="518.0" y="120" width="33.5" height="20" fill="#000000" />
+<text x="521.25" y="117.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year</text>
+<text x="520.75" y="132.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">2022</text>
+<rect x="553.0" y="120" width="1783.5" height="20" fill="#000000" />
+<text x="1416.25" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="518.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="522.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W52</text>
+<rect x="553.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="560.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W1</text>
+<rect x="588.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="595.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W2</text>
+<rect x="623.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="630.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W3</text>
+<rect x="658.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="665.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W4</text>
+<rect x="693.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="700.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W5</text>
+<rect x="728.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="735.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W6</text>
+<rect x="763.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="770.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W7</text>
+<rect x="798.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="805.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W8</text>
+<rect x="833.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="840.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W9</text>
+<rect x="868.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="872.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W10</text>
+<rect x="903.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="907.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W11</text>
+<rect x="938.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="942.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W12</text>
+<rect x="973.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="977.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W13</text>
+<rect x="1008.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1012.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W14</text>
+<rect x="1043.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1047.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W15</text>
+<rect x="1078.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1082.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W16</text>
+<rect x="1113.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1117.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W17</text>
+<rect x="1148.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1152.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W18</text>
+<rect x="1183.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1187.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W19</text>
+<rect x="1218.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1222.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W20</text>
+<rect x="1253.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1257.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W21</text>
+<rect x="1288.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1292.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W22</text>
+<rect x="1323.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1327.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W23</text>
+<rect x="1358.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1362.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W24</text>
+<rect x="1393.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1397.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W25</text>
+<rect x="1428.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1432.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W26</text>
+<rect x="1463.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1467.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W27</text>
+<rect x="1498.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1502.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W28</text>
+<rect x="1533.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1537.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W29</text>
+<rect x="1568.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1572.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W30</text>
+<rect x="1603.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1607.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W31</text>
+<rect x="1638.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1642.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W32</text>
+<rect x="1673.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1677.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W33</text>
+<rect x="1708.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1712.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W34</text>
+<rect x="1743.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1747.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W35</text>
+<rect x="1778.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1782.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W36</text>
+<rect x="1813.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1817.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W37</text>
+<rect x="1848.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1852.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W38</text>
+<rect x="1883.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1887.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W39</text>
+<rect x="1918.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1922.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W40</text>
+<rect x="1953.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1957.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W41</text>
+<rect x="1988.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="1992.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W42</text>
+<rect x="2023.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2027.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W43</text>
+<rect x="2058.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2062.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W44</text>
+<rect x="2093.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2097.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W45</text>
+<rect x="2128.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2132.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W46</text>
+<rect x="2163.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2167.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W47</text>
+<rect x="2198.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2202.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W48</text>
+<rect x="2233.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2237.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W49</text>
+<rect x="2268.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2272.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W50</text>
+<rect x="2303.0" y="143" width="33.5" height="20" fill="#000000" />
+<text x="2307.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">W51</text>
+<path d="M552.0,163 L552.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M587.0,163 L587.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M622.0,163 L622.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M657.0,163 L657.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M692.0,163 L692.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M727.0,163 L727.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M762.0,163 L762.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M797.0,163 L797.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M832.0,163 L832.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M867.0,163 L867.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M902.0,163 L902.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M937.0,163 L937.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M972.0,163 L972.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1007.0,163 L1007.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1042.0,163 L1042.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1077.0,163 L1077.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1112.0,163 L1112.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1147.0,163 L1147.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1182.0,163 L1182.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1217.0,163 L1217.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1252.0,163 L1252.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1287.0,163 L1287.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1322.0,163 L1322.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1357.0,163 L1357.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1392.0,163 L1392.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1427.0,163 L1427.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1462.0,163 L1462.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1497.0,163 L1497.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1532.0,163 L1532.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1567.0,163 L1567.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1602.0,163 L1602.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1637.0,163 L1637.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1672.0,163 L1672.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1707.0,163 L1707.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1742.0,163 L1742.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1777.0,163 L1777.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1812.0,163 L1812.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1847.0,163 L1847.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1882.0,163 L1882.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1917.0,163 L1917.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1952.0,163 L1952.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1987.0,163 L1987.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2022.0,163 L2022.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2057.0,163 L2057.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2092.0,163 L2092.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2127.0,163 L2127.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2162.0,163 L2162.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2197.0,163 L2197.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2232.0,163 L2232.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2267.0,163 L2267.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M2302.0,163 L2302.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="468.0" height="82" fill="#000000" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="518" y="213" width="1456" height="20" fill="#D9D9D9" />
+<text x="1196.0" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="2137" y="213" width="188" height="20" fill="#D9D9D9" />
+<text x="2190.0" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M774.5714285714286,210 L787.5714285714286,223.0 L774.5714285714286,236 L761.5714285714286,223.0" fill="#000000" />
+<text x="764.9047619047619" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.0</text>
+<path d="M1609.7857142857142,210 L1622.7857142857142,223.0 L1609.7857142857142,236 L1596.7857142857142,223.0" fill="#000000" />
+<text x="1600.1190476190475" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.1</text>
+<rect x="842" y="238" width="315" height="20" fill="#D9D9D9" />
+<text x="962.5" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="1302" y="238" width="316" height="20" fill="#D9D9D9" />
+<text x="1423.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="468.0" height="25" fill="#000000" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="702" y="295" width="1541" height="20" fill="#D9D9D9" />
+<text x="1403.0" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="1486.7142857142858" y="176" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M1491.7142857142858,187.0 L1491.7142857142858,197.0" stroke="#000000" />
+<path d="M1491.7142857142858,202.05263157894737 L1491.7142857142858,212.05263157894737" stroke="#000000" />
+<path d="M1491.7142857142858,217.10526315789474 L1491.7142857142858,227.10526315789474" stroke="#000000" />
+<path d="M1491.7142857142858,232.1578947368421 L1491.7142857142858,242.1578947368421" stroke="#000000" />
+<path d="M1491.7142857142858,247.21052631578948 L1491.7142857142858,257.2105263157895" stroke="#000000" />
+<path d="M1491.7142857142858,262.2631578947368 L1491.7142857142858,272.2631578947368" stroke="#000000" />
+<path d="M1491.7142857142858,277.3157894736842 L1491.7142857142858,287.3157894736842" stroke="#000000" />
+<path d="M1491.7142857142858,292.36842105263156 L1491.7142857142858,302.36842105263156" stroke="#000000" />
+<path d="M1491.7142857142858,307.42105263157896 L1491.7142857142858,317.42105263157896" stroke="#000000" />
+<path d="M1491.7142857142858,322.4736842105263 L1491.7142857142858,332.4736842105263" stroke="#000000" />
+<text x="1122.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-DEFAULT-yearly.png b/images/gallery/gallery-DEFAULT-yearly.png
index fca1c17..814e03a 100644
Binary files a/images/gallery/gallery-DEFAULT-yearly.png and b/images/gallery/gallery-DEFAULT-yearly.png differ
diff --git a/images/gallery/gallery-DEFAULT-yearly.svg b/images/gallery/gallery-DEFAULT-yearly.svg
new file mode 100644
index 0000000..32ead5f
--- /dev/null
+++ b/images/gallery/gallery-DEFAULT-yearly.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1400" height="372" viewBox="0 0 1400 372">
+<defs>
+</defs>
+<rect x="0" y="0" width="1400" height="1000" fill="#FFFFFF" />
+<text x="516.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">SAMPLE ROADMAP 2022/2023</text>
+<text x="613.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">GodZone Corporation</text>
+<rect x="318.0" y="80" width="526.5" height="20" fill="#000000" />
+<text x="552.75" y="84.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="846.0" y="80" width="526.5" height="20" fill="#000000" />
+<text x="1080.75" y="84.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2024</text>
+<path d="M845.0,100 L845.0,267" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="135" width="268.0" height="82" fill="#000000" />
+<text x="45" y="170.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="318" y="150" width="438" height="20" fill="#D9D9D9" />
+<text x="487.0" y="153.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="777" y="150" width="195" height="20" fill="#D9D9D9" />
+<text x="833.5" y="154.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M976.3794520547945,147 L989.3794520547945,160.0 L976.3794520547945,173 L963.3794520547945,160.0" fill="#000000" />
+<text x="966.7127853881278" y="132" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.2.0</text>
+<path d="M385.0892857142857,147 L398.0892857142857,160.0 L385.0892857142857,173 L372.0892857142857,160.0" fill="#000000" />
+<text x="375.42261904761904" y="132" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.0</text>
+<path d="M626.6428571428571,147 L639.6428571428571,160.0 L626.6428571428571,173 L613.6428571428571,160.0" fill="#000000" />
+<text x="616.9761904761905" y="132" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.1</text>
+<rect x="403" y="175" width="96" height="20" fill="#D9D9D9" />
+<text x="414.0" y="179.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="536" y="175" width="96" height="20" fill="#D9D9D9" />
+<text x="547.0" y="179.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="232" width="268.0" height="25" fill="#000000" />
+<text x="45" y="238.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="362" y="232" width="972" height="20" fill="#D9D9D9" />
+<text x="778.5" y="235.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="586.375" y="113" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M591.375,124.0 L591.375,134.0" stroke="#000000" />
+<path d="M591.375,139.05263157894737 L591.375,149.05263157894737" stroke="#000000" />
+<path d="M591.375,154.10526315789474 L591.375,164.10526315789474" stroke="#000000" />
+<path d="M591.375,169.1578947368421 L591.375,179.1578947368421" stroke="#000000" />
+<path d="M591.375,184.21052631578948 L591.375,194.21052631578948" stroke="#000000" />
+<path d="M591.375,199.26315789473682 L591.375,209.26315789473682" stroke="#000000" />
+<path d="M591.375,214.31578947368422 L591.375,224.31578947368422" stroke="#000000" />
+<path d="M591.375,229.36842105263156 L591.375,239.36842105263156" stroke="#000000" />
+<path d="M591.375,244.42105263157896 L591.375,254.42105263157896" stroke="#000000" />
+<path d="M591.375,259.4736842105263 L591.375,269.4736842105263" stroke="#000000" />
+<text x="622.0" y="327" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-GREENTURTLE-monthly.png b/images/gallery/gallery-GREENTURTLE-monthly.png
index 32bf0d3..158f063 100644
Binary files a/images/gallery/gallery-GREENTURTLE-monthly.png and b/images/gallery/gallery-GREENTURTLE-monthly.png differ
diff --git a/images/gallery/gallery-GREENTURTLE-monthly.svg b/images/gallery/gallery-GREENTURTLE-monthly.svg
new file mode 100644
index 0000000..b3f5bfa
--- /dev/null
+++ b/images/gallery/gallery-GREENTURTLE-monthly.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="435" viewBox="0 0 1200 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="1000" fill="#FFFFFF" />
+<text x="416.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">SAMPLE ROADMAP 2022/2023</text>
+<text x="513.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">GodZone Corporation</text>
+<rect x="278.0" y="120" width="886.5" height="20" fill="#38761D" />
+<text x="692.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="304.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="377.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="451.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="526.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="598.75" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="674.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="750.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="821.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="895.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="970.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="1043.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="143" width="72.5" height="20" fill="#38761D" />
+<text x="1117.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,163 L351.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,163 L425.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,163 L499.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,163 L573.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,163 L647.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,163 L721.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,163 L795.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,163 L869.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,163 L943.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,163 L1017.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,163 L1091.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="228.0" height="82" fill="#38761D" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="278" y="213" width="720" height="20" fill="#93C47D" />
+<text x="588.0" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="1054" y="213" width="108" height="20" fill="#93C47D" />
+<text x="1067.0" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M390.25,210 L403.25,223.0 L390.25,236 L377.25,223.0" fill="#38761D" />
+<text x="380.5833333333333" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">v.1.0</text>
+<path d="M798.0,210 L811.0,223.0 L798.0,236 L785.0,223.0" fill="#38761D" />
+<text x="788.3333333333334" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">v.1.1</text>
+<rect x="426" y="238" width="158" height="20" fill="#93C47D" />
+<text x="468.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="648" y="238" width="158" height="20" fill="#93C47D" />
+<text x="690.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="228.0" height="25" fill="#38761D" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="352" y="295" width="792" height="20" fill="#93C47D" />
+<text x="678.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="738.75" y="176" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">▼</text>
+<path d="M743.75,187.0 L743.75,197.0" stroke="#38761D" />
+<path d="M743.75,202.05263157894737 L743.75,212.05263157894737" stroke="#38761D" />
+<path d="M743.75,217.10526315789474 L743.75,227.10526315789474" stroke="#38761D" />
+<path d="M743.75,232.1578947368421 L743.75,242.1578947368421" stroke="#38761D" />
+<path d="M743.75,247.21052631578948 L743.75,257.2105263157895" stroke="#38761D" />
+<path d="M743.75,262.2631578947368 L743.75,272.2631578947368" stroke="#38761D" />
+<path d="M743.75,277.3157894736842 L743.75,287.3157894736842" stroke="#38761D" />
+<path d="M743.75,292.36842105263156 L743.75,302.36842105263156" stroke="#38761D" />
+<path d="M743.75,307.42105263157896 L743.75,317.42105263157896" stroke="#38761D" />
+<path d="M743.75,322.4736842105263 L743.75,332.4736842105263" stroke="#38761D" />
+<text x="522.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#38761D">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-GREYWOOF-monthly.png b/images/gallery/gallery-GREYWOOF-monthly.png
index b915dd3..4a49c2c 100644
Binary files a/images/gallery/gallery-GREYWOOF-monthly.png and b/images/gallery/gallery-GREYWOOF-monthly.png differ
diff --git a/images/gallery/gallery-GREYWOOF-monthly.svg b/images/gallery/gallery-GREYWOOF-monthly.svg
new file mode 100644
index 0000000..428f9ef
--- /dev/null
+++ b/images/gallery/gallery-GREYWOOF-monthly.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="435" viewBox="0 0 1200 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="1000" fill="#FFFFFF" />
+<text x="416.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">SAMPLE ROADMAP 2022/2023</text>
+<text x="513.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">GodZone Corporation</text>
+<rect x="278.0" y="120" width="886.5" height="20" fill="#666666" />
+<text x="692.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="304.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="377.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="451.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="526.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="598.75" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="674.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="750.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="821.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="895.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="970.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="1043.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="143" width="72.5" height="20" fill="#666666" />
+<text x="1117.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,163 L351.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,163 L425.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,163 L499.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,163 L573.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,163 L647.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,163 L721.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,163 L795.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,163 L869.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,163 L943.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,163 L1017.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,163 L1091.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="228.0" height="82" fill="#666666" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="278" y="213" width="720" height="20" fill="#D9D9D9" />
+<text x="588.0" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="1054" y="213" width="108" height="20" fill="#D9D9D9" />
+<text x="1067.0" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M390.25,210 L403.25,223.0 L390.25,236 L377.25,223.0" fill="#B7B7B7" />
+<text x="380.5833333333333" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.0</text>
+<path d="M798.0,210 L811.0,223.0 L798.0,236 L785.0,223.0" fill="#B7B7B7" />
+<text x="788.3333333333334" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.1</text>
+<rect x="426" y="238" width="158" height="20" fill="#D9D9D9" />
+<text x="468.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="648" y="238" width="158" height="20" fill="#D9D9D9" />
+<text x="690.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="228.0" height="25" fill="#666666" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="352" y="295" width="792" height="20" fill="#D9D9D9" />
+<text x="678.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="738.75" y="176" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M743.75,187.0 L743.75,197.0" stroke="#000000" />
+<path d="M743.75,202.05263157894737 L743.75,212.05263157894737" stroke="#000000" />
+<path d="M743.75,217.10526315789474 L743.75,227.10526315789474" stroke="#000000" />
+<path d="M743.75,232.1578947368421 L743.75,242.1578947368421" stroke="#000000" />
+<path d="M743.75,247.21052631578948 L743.75,257.2105263157895" stroke="#000000" />
+<path d="M743.75,262.2631578947368 L743.75,272.2631578947368" stroke="#000000" />
+<path d="M743.75,277.3157894736842 L743.75,287.3157894736842" stroke="#000000" />
+<path d="M743.75,292.36842105263156 L743.75,302.36842105263156" stroke="#000000" />
+<path d="M743.75,307.42105263157896 L743.75,317.42105263157896" stroke="#000000" />
+<path d="M743.75,322.4736842105263 L743.75,332.4736842105263" stroke="#000000" />
+<text x="522.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-ORANGEPEEL-monthly.png b/images/gallery/gallery-ORANGEPEEL-monthly.png
index 0637681..538e7c8 100644
Binary files a/images/gallery/gallery-ORANGEPEEL-monthly.png and b/images/gallery/gallery-ORANGEPEEL-monthly.png differ
diff --git a/images/gallery/gallery-ORANGEPEEL-monthly.svg b/images/gallery/gallery-ORANGEPEEL-monthly.svg
new file mode 100644
index 0000000..480a0d2
--- /dev/null
+++ b/images/gallery/gallery-ORANGEPEEL-monthly.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="435" viewBox="0 0 1200 435">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="1000" fill="#FFFFFF" />
+<text x="416.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">SAMPLE ROADMAP 2022/2023</text>
+<text x="513.0" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">GodZone Corporation</text>
+<rect x="278.0" y="120" width="886.5" height="20" fill="#B45F06" />
+<text x="692.75" y="124.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="304.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="377.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="451.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="526.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="598.75" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="674.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="750.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="821.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="895.25" y="146.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="970.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="1043.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="143" width="72.5" height="20" fill="#B45F06" />
+<text x="1117.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,163 L351.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,163 L425.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,163 L499.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,163 L573.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,163 L647.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,163 L721.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,163 L795.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,163 L869.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,163 L943.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,163 L1017.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,163 L1091.0,330" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="198" width="228.0" height="82" fill="#B45F06" />
+<text x="45" y="233.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="278" y="213" width="720" height="20" fill="#F6B26B" />
+<text x="588.0" y="216.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<rect x="1054" y="213" width="108" height="20" fill="#F6B26B" />
+<text x="1067.0" y="217.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Enhancements</text>
+<path d="M390.25,210 L403.25,223.0 L390.25,236 L377.25,223.0" fill="#B45F06" />
+<text x="380.5833333333333" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">v.1.0</text>
+<path d="M798.0,210 L811.0,223.0 L798.0,236 L785.0,223.0" fill="#B45F06" />
+<text x="788.3333333333334" y="195" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">v.1.1</text>
+<rect x="426" y="238" width="158" height="20" fill="#F6B26B" />
+<text x="468.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="648" y="238" width="158" height="20" fill="#F6B26B" />
+<text x="690.0" y="242.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="295" width="228.0" height="25" fill="#B45F06" />
+<text x="45" y="301.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="352" y="295" width="792" height="20" fill="#F6B26B" />
+<text x="678.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="738.75" y="176" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">▼</text>
+<path d="M743.75,187.0 L743.75,197.0" stroke="#B45F06" />
+<path d="M743.75,202.05263157894737 L743.75,212.05263157894737" stroke="#B45F06" />
+<path d="M743.75,217.10526315789474 L743.75,227.10526315789474" stroke="#B45F06" />
+<path d="M743.75,232.1578947368421 L743.75,242.1578947368421" stroke="#B45F06" />
+<path d="M743.75,247.21052631578948 L743.75,257.2105263157895" stroke="#B45F06" />
+<path d="M743.75,262.2631578947368 L743.75,272.2631578947368" stroke="#B45F06" />
+<path d="M743.75,277.3157894736842 L743.75,287.3157894736842" stroke="#B45F06" />
+<path d="M743.75,292.36842105263156 L743.75,302.36842105263156" stroke="#B45F06" />
+<path d="M743.75,307.42105263157896 L743.75,317.42105263157896" stroke="#B45F06" />
+<path d="M743.75,322.4736842105263 L743.75,332.4736842105263" stroke="#B45F06" />
+<text x="522.0" y="390" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-marker-monthly.png b/images/gallery/gallery-marker-monthly.png
index 6438572..ef7e890 100644
Binary files a/images/gallery/gallery-marker-monthly.png and b/images/gallery/gallery-marker-monthly.png differ
diff --git a/images/gallery/gallery-marker-monthly.svg b/images/gallery/gallery-marker-monthly.svg
new file mode 100644
index 0000000..3f6ae18
--- /dev/null
+++ b/images/gallery/gallery-marker-monthly.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="414" viewBox="0 0 1200 414">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="1000" fill="#FFFFFF" />
+<text x="475.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">My Demo Roadmap!!!</text>
+<rect x="278.0" y="99" width="146.5" height="20" fill="#000000" />
+<text x="322.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2022</text>
+<rect x="426.0" y="99" width="738.5" height="20" fill="#000000" />
+<text x="766.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="303.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="352.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="377.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<rect x="426.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="452.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="500.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="525.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="574.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="599.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="648.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="674.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="722.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="746.75" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="796.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="822.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="870.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="898.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="944.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="969.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="1018.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="1043.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="1092.0" y="122" width="72.5" height="20" fill="#000000" />
+<text x="1118.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<path d="M351.0,142 L351.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,142 L425.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,142 L499.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,142 L573.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,142 L647.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,142 L721.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,142 L795.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,142 L869.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,142 L943.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,142 L1017.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,142 L1091.0,309" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="177" width="228.0" height="82" fill="#000000" />
+<text x="71.5" y="212.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Core Product Work Stream</text>
+<rect x="278" y="192" width="864" height="20" fill="#D9D9D9" />
+<text x="660.0" y="195.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Base Functionality</text>
+<path d="M538.25,189 L551.25,202.0 L538.25,215 L525.25,202.0" fill="#000000" />
+<text x="528.5833333333334" y="174" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.0</text>
+<path d="M946.0,189 L959.0,202.0 L946.0,215 L933.0,202.0" fill="#000000" />
+<text x="936.3333333333334" y="174" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">v.1.1</text>
+<rect x="574" y="217" width="158" height="20" fill="#D9D9D9" />
+<text x="616.0" y="221.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #1</text>
+<rect x="796" y="217" width="158" height="20" fill="#D9D9D9" />
+<text x="838.0" y="221.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Showcase #2</text>
+<rect x="30" y="274" width="228.0" height="25" fill="#000000" />
+<text x="86.5" y="280.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobility Work Stream</text>
+<rect x="500" y="274" width="648" height="20" fill="#D9D9D9" />
+<text x="754.5" y="277.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mobile App Development</text>
+<text x="886.75" y="155" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">▼</text>
+<path d="M891.75,166.0 L891.75,176.0" stroke="#000000" />
+<path d="M891.75,181.05263157894737 L891.75,191.05263157894737" stroke="#000000" />
+<path d="M891.75,196.10526315789474 L891.75,206.10526315789474" stroke="#000000" />
+<path d="M891.75,211.1578947368421 L891.75,221.1578947368421" stroke="#000000" />
+<path d="M891.75,226.21052631578948 L891.75,236.21052631578948" stroke="#000000" />
+<path d="M891.75,241.26315789473682 L891.75,251.26315789473682" stroke="#000000" />
+<path d="M891.75,256.3157894736842 L891.75,266.3157894736842" stroke="#000000" />
+<path d="M891.75,271.36842105263156 L891.75,281.36842105263156" stroke="#000000" />
+<path d="M891.75,286.42105263157896 L891.75,296.42105263157896" stroke="#000000" />
+<path d="M891.75,301.4736842105263 L891.75,311.4736842105263" stroke="#000000" />
+<text x="522.0" y="369" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/gallery/gallery-sample-01.svg b/images/gallery/gallery-sample-01.svg
new file mode 100644
index 0000000..8dac483
--- /dev/null
+++ b/images/gallery/gallery-sample-01.svg
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1400" height="666" viewBox="0 0 1400 666">
+<defs>
+</defs>
+<rect x="0" y="0" width="1400" height="1000" fill="#FFFFFF" />
+<text x="530.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">STRATEGY ROADMAP 2023</text>
+<text x="595.5" y="59" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Matariki Technologies Inc.</text>
+<rect x="318.0" y="120" width="1054.5" height="20" fill="#404040" />
+<text x="816.75" y="124.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="318.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="351.25" y="147.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="406.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="438.75" y="147.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="494.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="526.25" y="147.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="582.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="615.25" y="146.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="670.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="701.75" y="146.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="758.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="791.25" y="147.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="846.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="881.25" y="147.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="934.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="966.25" y="146.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="1022.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="1054.25" y="146.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="1110.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="1143.75" y="147.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1198.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="1230.25" y="147.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1286.0" y="143" width="86.5" height="20" fill="#404040" />
+<text x="1318.25" y="147.5" font-size="12" stroke="white" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M405.0,163 L405.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M493.0,163 L493.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M581.0,163 L581.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M669.0,163 L669.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M757.0,163 L757.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M845.0,163 L845.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M933.0,163 L933.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1021.0,163 L1021.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1109.0,163 L1109.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1197.0,163 L1197.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1285.0,163 L1285.0,561" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="178" width="268.0" height="52" fill="#FFC000" />
+<text x="139.5" y="197.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Planning</text>
+<rect x="318" y="178" width="258" height="20" fill="#FFC000" />
+<text x="430.0" y="182.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Vision</text>
+<rect x="449" y="203" width="129" height="20" fill="#FFC000" />
+<text x="497.5" y="207.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Goals</text>
+<rect x="582" y="203" width="172" height="20" fill="#FFC000" />
+<text x="627.0" y="206.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Strategic Intent</text>
+<rect x="758" y="203" width="129" height="20" fill="#FFC000" />
+<text x="785.5" y="206.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sales Budget</text>
+<rect x="889" y="203" width="215" height="20" fill="#FFC000" />
+<text x="956.5" y="207.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Release Plans</text>
+<rect x="30" y="245" width="268.0" height="136" fill="#ED7D31" />
+<text x="141.5" y="306.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Strategy</text>
+<rect x="406" y="260" width="172" height="20" fill="#ED7D31" />
+<text x="449.0" y="263.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Market Analysis</text>
+<rect x="582" y="260" width="86" height="20" fill="#ED7D31" />
+<text x="607.0" y="264.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">SWOT</text>
+<path d="M582.5,257 L595.5,270.0 L582.5,283 L569.5,270.0" fill="#843C0C" />
+<text x="551.5" y="242" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Competitor Review</text>
+<rect x="582" y="300" width="172" height="20" fill="#ED7D31" />
+<text x="624.5" y="304.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Business Model</text>
+<rect x="758" y="300" width="189" height="20" fill="#ED7D31" />
+<text x="812.5" y="304.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Price Reseach</text>
+<path d="M925.85,297 L938.85,310.0 L925.85,323 L912.85,310.0" fill="#843C0C" />
+<text x="899.5166666666667" y="282" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Price List (Final)</text>
+<path d="M760.0,297 L773.0,310.0 L760.0,323 L747.0,310.0" fill="#843C0C" />
+<text x="733.6666666666666" y="282" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Price List (Draft)</text>
+<rect x="818" y="325" width="222" height="20" fill="#ED7D31" />
+<text x="900.5" y="328.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Objectives</text>
+<rect x="977" y="350" width="154" height="20" fill="#ED7D31" />
+<text x="993.5" y="353.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sales Trends Analysis</text>
+<rect x="30" y="396" width="268.0" height="70" fill="#70AD47" />
+<text x="105.0" y="424.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Service Development</text>
+<rect x="449" y="411" width="129" height="20" fill="#70AD47" />
+<text x="464.0" y="414.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Product Roadmap</text>
+<rect x="582" y="411" width="430" height="20" fill="#70AD47" />
+<text x="760.0" y="414.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Development</text>
+<path d="M723.9,408 L736.9,421.0 L723.9,434 L710.9,421.0" fill="#385723" />
+<text x="700.5666666666666" y="393" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Alpha May 20</text>
+<path d="M856.65,408 L869.65,421.0 L856.65,434 L843.65,421.0" fill="#385723" />
+<text x="825.3166666666666" y="393" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Private Beta Jul 02</text>
+<path d="M979.25,408 L992.25,421.0 L979.25,434 L966.25,421.0" fill="#385723" />
+<text x="947.25" y="393" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Public Beta Aug 15</text>
+<rect x="1022" y="411" width="129" height="20" fill="#70AD47" />
+<text x="1033.5" y="415.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Release Candidate</text>
+<rect x="1153" y="411" width="215" height="20" fill="#70AD47" />
+<text x="1210.5" y="415.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Release To Public</text>
+<path d="M1339.9,408 L1352.9,421.0 L1339.9,434 L1326.9,421.0" fill="#385723" />
+<text x="1313.9" y="393" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Go Live Dec 20</text>
+<rect x="30" y="481" width="268.0" height="70" fill="#4472C4" />
+<text x="106.0" y="509.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Business Intelligence</text>
+<rect x="625" y="496" width="731" height="20" fill="#4472C4" />
+<text x="946.5" y="499.5" font-size="12" stroke="black" text-anchor="start" dominant-baseline="hanging" font-family="Arial">BI Development</text>
+<path d="M715.25,493 L728.25,506.0 L715.25,519 L702.25,506.0" fill="#162641" />
+<text x="683.9166666666666" y="478" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Service Dashboard</text>
+<path d="M936.0,493 L949.0,506.0 L936.0,519 L923.0,506.0" fill="#162641" />
+<text x="904.0" y="478" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Real-Time Analytics</text>
+<path d="M1331.25,493 L1344.25,506.0 L1331.25,519 L1318.25,506.0" fill="#162641" />
+<text x="1302.5833333333333" y="478" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="black">Sales Dashboard</text>
+<text x="622.0" y="621" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/ja_JP-roadmap.png b/images/ja_JP-roadmap.png
index d50330a..0ffa9c0 100644
Binary files a/images/ja_JP-roadmap.png and b/images/ja_JP-roadmap.png differ
diff --git a/images/ja_JP-roadmap.svg b/images/ja_JP-roadmap.svg
new file mode 100644
index 0000000..3ddceea
--- /dev/null
+++ b/images/ja_JP-roadmap.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800" height="588" viewBox="0 0 800 588">
+<defs>
+</defs>
+<rect x="0" y="0" width="800" height="700" fill="#FFFFFF" />
+<text x="250.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">戦略的ロードマップ 2023</text>
+<text x="247.0" y="68" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">マタリッチサンテクノロジー株式会社</text>
+<rect x="198.0" y="132" width="574.5" height="20" fill="#4C5B5C" />
+<text x="460.25" y="132.5" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">2023 年</text>
+<rect x="198.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="240.75" y="157.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第1 四半期</text>
+<rect x="342.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="384.25" y="157.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第2 四半期</text>
+<rect x="486.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="528.25" y="157.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第3 四半期</text>
+<rect x="630.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="672.25" y="157.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第4 四半期</text>
+<path d="M341.0,175 L341.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M485.0,175 L485.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M629.0,175 L629.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="213" width="148.0" height="52" fill="#FCA311" />
+<text x="62.0" y="229.5" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">人事プロセス</text>
+<rect x="198" y="213" width="187" height="20" fill="#8FBC94" />
+<text x="201.5" y="215.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">インクルージョン戦略を策定する</text>
+<rect x="389" y="213" width="377" height="20" fill="#8FBC94" />
+<text x="493.5" y="215.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">多様性、公平性、包括性の促進</text>
+<rect x="292" y="238" width="425" height="20" fill="#8FBC94" />
+<text x="432.5" y="240.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">持続可能な開発計画の実施</text>
+<rect x="30" y="280" width="148.0" height="82" fill="#FCA311" />
+<text x="76.0" y="311.0" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">作業過程</text>
+<rect x="247" y="280" width="469" height="20" fill="#8FBC94" />
+<text x="427.5" y="282.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">業務改善計画の実施</text>
+<rect x="486" y="320" width="282" height="20" fill="#8FBC94" />
+<text x="567.0" y="322.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">自動化されたプロセス</text>
+<path d="M536.5439560439561,317 L549.5439560439561,330.0 L536.5439560439561,343 L523.5439560439561,330.0" fill="#3D6642" />
+<text x="514.2106227106227" y="302" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">30%自動化</text>
+<path d="M727.521978021978,317 L740.521978021978,330.0 L727.521978021978,343 L714.521978021978,330.0" fill="#3D6642" />
+<text x="705.1886446886447" y="302" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">60%自動化</text>
+<rect x="30" y="377" width="148.0" height="94" fill="#FCA311" />
+<text x="62.0" y="414.5" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">ツールフロー</text>
+<rect x="198" y="377" width="187" height="20" fill="#8FBC94" />
+<text x="219.5" y="379.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">ツール選択戦略を実装する</text>
+<rect x="247" y="402" width="327" height="20" fill="#8FBC94" />
+<text x="374.5" y="404.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">ツールの選択</text>
+<rect x="342" y="442" width="377" height="20" fill="#8FBC94" />
+<text x="488.5" y="444.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">集中ツール管理</text>
+<path d="M727.521978021978,439 L740.521978021978,452.0 L727.521978021978,465 L714.521978021978,452.0" fill="#3D6642" />
+<text x="693.521978021978" y="424" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">システムは集中型</text>
+<text x="493.5274725274725" y="188" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">▼</text>
+<path d="M498.5274725274725,202.0 L498.5274725274725,212.0" stroke="#000000" />
+<path d="M498.5274725274725,216.68421052631578 L498.5274725274725,226.68421052631578" stroke="#000000" />
+<path d="M498.5274725274725,231.3684210526316 L498.5274725274725,241.3684210526316" stroke="#000000" />
+<path d="M498.5274725274725,246.05263157894737 L498.5274725274725,256.0526315789474" stroke="#000000" />
+<path d="M498.5274725274725,260.7368421052632 L498.5274725274725,270.7368421052632" stroke="#000000" />
+<path d="M498.5274725274725,275.42105263157896 L498.5274725274725,285.42105263157896" stroke="#000000" />
+<path d="M498.5274725274725,290.10526315789474 L498.5274725274725,300.10526315789474" stroke="#000000" />
+<path d="M498.5274725274725,304.7894736842105 L498.5274725274725,314.7894736842105" stroke="#000000" />
+<path d="M498.5274725274725,319.4736842105263 L498.5274725274725,329.4736842105263" stroke="#000000" />
+<path d="M498.5274725274725,334.1578947368421 L498.5274725274725,344.1578947368421" stroke="#000000" />
+<path d="M498.5274725274725,348.8421052631579 L498.5274725274725,358.8421052631579" stroke="#000000" />
+<path d="M498.5274725274725,363.52631578947364 L498.5274725274725,373.52631578947364" stroke="#000000" />
+<path d="M498.5274725274725,378.2105263157895 L498.5274725274725,388.2105263157895" stroke="#000000" />
+<path d="M498.5274725274725,392.89473684210526 L498.5274725274725,402.89473684210526" stroke="#000000" />
+<path d="M498.5274725274725,407.57894736842104 L498.5274725274725,417.57894736842104" stroke="#000000" />
+<path d="M498.5274725274725,422.2631578947369 L498.5274725274725,432.2631578947369" stroke="#000000" />
+<path d="M498.5274725274725,436.9473684210526 L498.5274725274725,446.9473684210526" stroke="#000000" />
+<path d="M498.5274725274725,451.63157894736844 L498.5274725274725,461.63157894736844" stroke="#000000" />
+<path d="M498.5274725274725,466.3157894736842 L498.5274725274725,476.3157894736842" stroke="#000000" />
+<path d="M498.5274725274725,481.0 L498.5274725274725,491.0" stroke="#000000" />
+<text x="322.0" y="542" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">ロードマッパーによって生成</text>
+</svg>
\ No newline at end of file
diff --git a/images/ko-KR-roadmap.png b/images/ko-KR-roadmap.png
index 8b50163..6789e46 100644
Binary files a/images/ko-KR-roadmap.png and b/images/ko-KR-roadmap.png differ
diff --git a/images/ko-KR-roadmap.svg b/images/ko-KR-roadmap.svg
new file mode 100644
index 0000000..77c0fa0
--- /dev/null
+++ b/images/ko-KR-roadmap.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800" height="589" viewBox="0 0 800 589">
+<defs>
+</defs>
+<rect x="0" y="0" width="800" height="700" fill="#FFFFFF" />
+<text x="301.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">전략 로드맵 2023</text>
+<text x="312.5" y="69" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">마타리키 테크놀로지스</text>
+<rect x="198.0" y="133" width="574.5" height="20" fill="#4C5B5C" />
+<text x="460.25" y="133.5" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">2023 년</text>
+<rect x="198.0" y="156" width="142.5" height="20" fill="#4C5B5C" />
+<text x="246.75" y="158.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第1 분기</text>
+<rect x="342.0" y="156" width="142.5" height="20" fill="#4C5B5C" />
+<text x="390.25" y="158.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第2 분기</text>
+<rect x="486.0" y="156" width="142.5" height="20" fill="#4C5B5C" />
+<text x="534.25" y="158.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第3 분기</text>
+<rect x="630.0" y="156" width="142.5" height="20" fill="#4C5B5C" />
+<text x="678.25" y="158.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第4 분기</text>
+<path d="M341.0,176 L341.0,482" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M485.0,176 L485.0,482" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M629.0,176 L629.0,482" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="214" width="148.0" height="52" fill="#FCA311" />
+<text x="60.0" y="230.0" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">인사 프로세스</text>
+<rect x="198" y="214" width="187" height="20" fill="#8FBC94" />
+<text x="246.5" y="216.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">포함 전략을 수립</text>
+<rect x="389" y="214" width="377" height="20" fill="#8FBC94" />
+<text x="503.0" y="216.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">다양성, 공정성, 포괄성 촉진</text>
+<rect x="292" y="239" width="425" height="20" fill="#8FBC94" />
+<text x="432.5" y="241.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">지속 가능한 개발 계획 실시</text>
+<rect x="30" y="281" width="148.0" height="82" fill="#FCA311" />
+<text x="74.0" y="312.0" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">작업 과정</text>
+<rect x="247" y="281" width="469" height="20" fill="#8FBC94" />
+<text x="429.0" y="283.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">업무 개선 계획 실시</text>
+<rect x="486" y="321" width="282" height="20" fill="#8FBC94" />
+<text x="577.5" y="323.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">자동화된 프로세스</text>
+<path d="M536.5439560439561,318 L549.5439560439561,331.0 L536.5439560439561,344 L523.5439560439561,331.0" fill="#3D6642" />
+<text x="513.2106227106227" y="303" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">30% 자동화</text>
+<path d="M727.521978021978,318 L740.521978021978,331.0 L727.521978021978,344 L714.521978021978,331.0" fill="#3D6642" />
+<text x="704.1886446886447" y="303" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">60% 자동화</text>
+<rect x="30" y="378" width="148.0" height="94" fill="#FCA311" />
+<text x="74.0" y="415.0" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">공구 흐름</text>
+<rect x="198" y="378" width="187" height="20" fill="#8FBC94" />
+<text x="239.0" y="380.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">도구 선택 전략 구현</text>
+<rect x="247" y="403" width="327" height="20" fill="#8FBC94" />
+<text x="385.0" y="405.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">도구 선택</text>
+<rect x="342" y="443" width="377" height="20" fill="#8FBC94" />
+<text x="472.0" y="445.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">중앙 집중식 도구 관리</text>
+<path d="M727.521978021978,440 L740.521978021978,453.0 L727.521978021978,466 L714.521978021978,453.0" fill="#3D6642" />
+<text x="687.521978021978" y="425" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">시스템은 중앙 집중식</text>
+<text x="493.5274725274725" y="189" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">▼</text>
+<path d="M498.5274725274725,203.0 L498.5274725274725,213.0" stroke="#000000" />
+<path d="M498.5274725274725,217.68421052631578 L498.5274725274725,227.68421052631578" stroke="#000000" />
+<path d="M498.5274725274725,232.3684210526316 L498.5274725274725,242.3684210526316" stroke="#000000" />
+<path d="M498.5274725274725,247.05263157894737 L498.5274725274725,257.0526315789474" stroke="#000000" />
+<path d="M498.5274725274725,261.7368421052632 L498.5274725274725,271.7368421052632" stroke="#000000" />
+<path d="M498.5274725274725,276.42105263157896 L498.5274725274725,286.42105263157896" stroke="#000000" />
+<path d="M498.5274725274725,291.10526315789474 L498.5274725274725,301.10526315789474" stroke="#000000" />
+<path d="M498.5274725274725,305.7894736842105 L498.5274725274725,315.7894736842105" stroke="#000000" />
+<path d="M498.5274725274725,320.4736842105263 L498.5274725274725,330.4736842105263" stroke="#000000" />
+<path d="M498.5274725274725,335.1578947368421 L498.5274725274725,345.1578947368421" stroke="#000000" />
+<path d="M498.5274725274725,349.8421052631579 L498.5274725274725,359.8421052631579" stroke="#000000" />
+<path d="M498.5274725274725,364.52631578947364 L498.5274725274725,374.52631578947364" stroke="#000000" />
+<path d="M498.5274725274725,379.2105263157895 L498.5274725274725,389.2105263157895" stroke="#000000" />
+<path d="M498.5274725274725,393.89473684210526 L498.5274725274725,403.89473684210526" stroke="#000000" />
+<path d="M498.5274725274725,408.57894736842104 L498.5274725274725,418.57894736842104" stroke="#000000" />
+<path d="M498.5274725274725,423.2631578947369 L498.5274725274725,433.2631578947369" stroke="#000000" />
+<path d="M498.5274725274725,437.9473684210526 L498.5274725274725,447.9473684210526" stroke="#000000" />
+<path d="M498.5274725274725,452.63157894736844 L498.5274725274725,462.63157894736844" stroke="#000000" />
+<path d="M498.5274725274725,467.3157894736842 L498.5274725274725,477.3157894736842" stroke="#000000" />
+<path d="M498.5274725274725,482.0 L498.5274725274725,492.0" stroke="#000000" />
+<text x="350.5" y="543" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">로드매퍼에서 생성</text>
+</svg>
\ No newline at end of file
diff --git a/images/my_roadmap.svg b/images/my_roadmap.svg
new file mode 100644
index 0000000..a5b833a
--- /dev/null
+++ b/images/my_roadmap.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="500" height="371" viewBox="0 0 500 371">
+<defs>
+</defs>
+<rect x="0" y="0" width="500" height="400" fill="#FFFFFF" />
+<text x="173.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">My Roadmap</text>
+<rect x="138.0" y="99" width="110.5" height="20" fill="#000000" />
+<text x="164.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2022</text>
+<rect x="250.0" y="99" width="222.5" height="20" fill="#000000" />
+<text x="332.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="138.0" y="122" width="54.5" height="20" fill="#000000" />
+<text x="154.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="194.0" y="122" width="54.5" height="20" fill="#000000" />
+<text x="210.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<rect x="250.0" y="122" width="54.5" height="20" fill="#000000" />
+<text x="267.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="306.0" y="122" width="54.5" height="20" fill="#000000" />
+<text x="322.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="362.0" y="122" width="54.5" height="20" fill="#000000" />
+<text x="378.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="418.0" y="122" width="54.5" height="20" fill="#000000" />
+<text x="435.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<path d="M193.0,142 L193.0,266" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M249.0,142 L249.0,266" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M305.0,142 L305.0,266" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M361.0,142 L361.0,266" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M417.0,142 L417.0,266" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="177" width="88.0" height="79" fill="#000000" />
+<text x="37.0" y="210.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Development</text>
+<rect x="194" y="177" width="129" height="20" fill="#D9D9D9" />
+<text x="234.5" y="180.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Activity 1</text>
+<rect x="271" y="202" width="118" height="20" fill="#D9D9D9" />
+<text x="306.0" y="205.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Activity 2</text>
+<rect x="288" y="227" width="178" height="20" fill="#D9D9D9" />
+<text x="353.0" y="230.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Activity 3</text>
+<text x="172.0" y="326" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#000000">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/roadmapper-anatomy-base.png b/images/roadmapper-anatomy-base.png
index 93072b7..f8c4efc 100644
Binary files a/images/roadmapper-anatomy-base.png and b/images/roadmapper-anatomy-base.png differ
diff --git a/images/roadmapper-anatomy-base.svg b/images/roadmapper-anatomy-base.svg
new file mode 100644
index 0000000..bce61e4
--- /dev/null
+++ b/images/roadmapper-anatomy-base.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="381" viewBox="0 0 1200 381">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="380" fill="#FFFFFF" />
+<text x="497.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Product Roadmap</text>
+<text x="531.0" y="64" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Matariki Tech Ltd</text>
+<rect x="278.0" y="121" width="889.5" height="20" fill="#0B5394" />
+<text x="694.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="316.75" y="148.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="377.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="415.25" y="148.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="476.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="513.75" y="148.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="575.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="613.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="674.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="711.25" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="773.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="811.75" y="148.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="872.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="912.75" y="148.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="971.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="1008.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="1070.0" y="144" width="97.5" height="20" fill="#0B5394" />
+<text x="1107.75" y="147.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<path d="M376.0,164 L376.0,276" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M475.0,164 L475.0,276" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M574.0,164 L574.0,276" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M673.0,164 L673.0,276" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M772.0,164 L772.0,276" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M871.0,164 L871.0,276" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M970.0,164 L970.0,276" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1069.0,164 L1069.0,276" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="199" width="228.0" height="67" fill="#0B5394" />
+<text x="106.5" y="227.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="278" y="199" width="436" height="20" fill="#9FC5E8" />
+<text x="471.5" y="203.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="722" y="199" width="339" height="20" fill="#9FC5E8" />
+<text x="867.5" y="203.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="575" y="239" width="291" height="20" fill="#9FC5E8" />
+<text x="696.0" y="243.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 3-C</text>
+<path d="M872.5,236 L885.5,249.0 L872.5,262 L859.5,249.0" fill="#3D85C6" />
+<text x="852.8333333333334" y="221" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Milestone 1</text>
+<text x="896.25" y="177" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">▼</text>
+<path d="M901.25,188.0 L901.25,198.0" stroke="#0B5394" />
+<path d="M901.25,204.0 L901.25,214.0" stroke="#0B5394" />
+<path d="M901.25,220.0 L901.25,230.0" stroke="#0B5394" />
+<path d="M901.25,236.0 L901.25,246.0" stroke="#0B5394" />
+<path d="M901.25,252.0 L901.25,262.0" stroke="#0B5394" />
+<path d="M901.25,268.0 L901.25,278.0" stroke="#0B5394" />
+<text x="522.0" y="336" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/theme-demo01.png b/images/theme-demo01.png
index f48a3a1..8ac0ce9 100644
Binary files a/images/theme-demo01.png and b/images/theme-demo01.png differ
diff --git a/images/theme-demo01.svg b/images/theme-demo01.svg
new file mode 100644
index 0000000..9be5e2b
--- /dev/null
+++ b/images/theme-demo01.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="600" height="438" viewBox="0 0 600 438">
+<defs>
+</defs>
+<rect x="0" y="0" width="600" height="380" fill="#FFFFFF" />
+<text x="185.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">My Demo Roadmap</text>
+<rect x="158.0" y="99" width="414.5" height="20" fill="#0B5394" />
+<text x="336.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="158.0" y="122" width="102.5" height="20" fill="#0B5394" />
+<text x="201.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q1</text>
+<rect x="262.0" y="122" width="102.5" height="20" fill="#0B5394" />
+<text x="305.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q2</text>
+<rect x="366.0" y="122" width="102.5" height="20" fill="#0B5394" />
+<text x="409.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q3</text>
+<rect x="470.0" y="122" width="102.5" height="20" fill="#0B5394" />
+<text x="513.25" y="126.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Q4</text>
+<path d="M261.0,142 L261.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M365.0,142 L365.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M469.0,142 L469.0,333" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="177" width="108.0" height="52" fill="#0B5394" />
+<text x="46.5" y="197.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="158" y="177" width="135" height="20" fill="#9FC5E8" />
+<text x="201.0" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="312" y="177" width="119" height="20" fill="#9FC5E8" />
+<text x="347.5" y="181.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="262" y="202" width="102" height="20" fill="#9FC5E8" />
+<text x="288.5" y="206.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 3-C</text>
+<rect x="30" y="244" width="108.0" height="79" fill="#0B5394" />
+<text x="46.5" y="278.0" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 2</text>
+<rect x="262" y="244" width="102" height="20" fill="#9FC5E8" />
+<text x="288.5" y="248.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-A</text>
+<rect x="296" y="269" width="100" height="20" fill="#9FC5E8" />
+<text x="322.0" y="273.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<rect x="331" y="294" width="100" height="20" fill="#9FC5E8" />
+<text x="356.5" y="298.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-C</text>
+<text x="370.010989010989" y="155" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">▼</text>
+<path d="M375.010989010989,166.0 L375.010989010989,176.0" stroke="#0B5394" />
+<path d="M375.010989010989,181.1818181818182 L375.010989010989,191.1818181818182" stroke="#0B5394" />
+<path d="M375.010989010989,196.36363636363637 L375.010989010989,206.36363636363637" stroke="#0B5394" />
+<path d="M375.010989010989,211.54545454545456 L375.010989010989,221.54545454545456" stroke="#0B5394" />
+<path d="M375.010989010989,226.72727272727272 L375.010989010989,236.72727272727272" stroke="#0B5394" />
+<path d="M375.010989010989,241.9090909090909 L375.010989010989,251.9090909090909" stroke="#0B5394" />
+<path d="M375.010989010989,257.0909090909091 L375.010989010989,267.0909090909091" stroke="#0B5394" />
+<path d="M375.010989010989,272.27272727272725 L375.010989010989,282.27272727272725" stroke="#0B5394" />
+<path d="M375.010989010989,287.45454545454544 L375.010989010989,297.45454545454544" stroke="#0B5394" />
+<path d="M375.010989010989,302.6363636363636 L375.010989010989,312.6363636363636" stroke="#0B5394" />
+<path d="M375.010989010989,317.8181818181818 L375.010989010989,327.8181818181818" stroke="#0B5394" />
+<path d="M375.010989010989,333.0 L375.010989010989,343.0" stroke="#0B5394" />
+<text x="222.0" y="393" font-size="13" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#0B5394">Generated by Roadmapper</text>
+</svg>
\ No newline at end of file
diff --git a/images/transparent_roadmap.png b/images/transparent_roadmap.png
new file mode 100644
index 0000000..291d7d6
Binary files /dev/null and b/images/transparent_roadmap.png differ
diff --git a/images/transparent_roadmap.svg b/images/transparent_roadmap.svg
new file mode 100644
index 0000000..51ab1a4
--- /dev/null
+++ b/images/transparent_roadmap.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="227" viewBox="0 0 1200 227">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="500" fill="white" />
+<rect x="0" y="0" width="1200" height="500" fill="white" />
+<text x="372.0" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Transparent Background Test Roadmap</text>
+<rect x="278.0" y="99" width="886.5" height="20" fill="#B45F06" />
+<text x="692.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="304.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="377.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="451.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="526.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="598.75" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="674.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="750.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="821.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="895.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="970.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="1043.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="1117.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,142 L351.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,142 L425.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,142 L499.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,142 L573.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,142 L647.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,142 L721.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,142 L795.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,142 L869.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,142 L943.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,142 L1017.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,142 L1091.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="157" width="228.0" height="40" fill="#B45F06" />
+<text x="106.5" y="171.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="278" y="172" width="288" height="20" fill="#F6B26B" />
+<text x="397.5" y="176.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="610" y="172" width="252" height="20" fill="#F6B26B" />
+<text x="712.0" y="176.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<path d="M819.75,169 L832.75,182.0 L819.75,195 L806.75,182.0" fill="#B45F06" />
+<text x="800.0833333333334" y="154" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Milestone 2</text>
+<path d="M502.0,169 L515.0,182.0 L502.0,195 L489.0,182.0" fill="#B45F06" />
+<text x="482.3333333333333" y="154" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Milestone 1</text>
+</svg>
\ No newline at end of file
diff --git a/images/with_context_manager.svg b/images/with_context_manager.svg
new file mode 100644
index 0000000..491023c
--- /dev/null
+++ b/images/with_context_manager.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="1200" height="227" viewBox="0 0 1200 227">
+<defs>
+</defs>
+<rect x="0" y="0" width="1200" height="500" fill="#FFFFFF" />
+<text x="414.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Context Manager Test Roadmap</text>
+<rect x="278.0" y="99" width="886.5" height="20" fill="#B45F06" />
+<text x="692.75" y="103.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Year 2023</text>
+<rect x="278.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="304.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jan</text>
+<rect x="352.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="377.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Feb</text>
+<rect x="426.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="451.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Mar</text>
+<rect x="500.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="526.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Apr</text>
+<rect x="574.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="598.75" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">May</text>
+<rect x="648.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="674.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jun</text>
+<rect x="722.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="750.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Jul</text>
+<rect x="796.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="821.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Aug</text>
+<rect x="870.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="895.25" y="125.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Sep</text>
+<rect x="944.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="970.75" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Oct</text>
+<rect x="1018.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="1043.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Nov</text>
+<rect x="1092.0" y="122" width="72.5" height="20" fill="#B45F06" />
+<text x="1117.25" y="126.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Dec</text>
+<path d="M351.0,142 L351.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M425.0,142 L425.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M499.0,142 L499.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M573.0,142 L573.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M647.0,142 L647.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M721.0,142 L721.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M795.0,142 L795.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M869.0,142 L869.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M943.0,142 L943.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1017.0,142 L1017.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M1091.0,142 L1091.0,207" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="157" width="228.0" height="40" fill="#B45F06" />
+<text x="106.5" y="171.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Workstream 1</text>
+<rect x="278" y="172" width="288" height="20" fill="#F6B26B" />
+<text x="397.5" y="176.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 1-A</text>
+<rect x="610" y="172" width="252" height="20" fill="#F6B26B" />
+<text x="712.0" y="176.5" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="Arial">Task 2-B</text>
+<path d="M819.75,169 L832.75,182.0 L819.75,195 L806.75,182.0" fill="#B45F06" />
+<text x="800.0833333333334" y="154" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Milestone 2</text>
+<path d="M502.0,169 L515.0,182.0 L502.0,195 L489.0,182.0" fill="#B45F06" />
+<text x="482.3333333333333" y="154" font-size="10" text-anchor="start" dominant-baseline="middle" font-family="Arial" stroke="#B45F06">Milestone 1</text>
+</svg>
\ No newline at end of file
diff --git a/images/zh_TW-roadmap.png b/images/zh_TW-roadmap.png
index 199845b..ede3ee7 100644
Binary files a/images/zh_TW-roadmap.png and b/images/zh_TW-roadmap.png differ
diff --git a/images/zh_TW-roadmap.svg b/images/zh_TW-roadmap.svg
new file mode 100644
index 0000000..e43399f
--- /dev/null
+++ b/images/zh_TW-roadmap.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800" height="590" viewBox="0 0 800 590">
+<defs>
+</defs>
+<rect x="0" y="0" width="800" height="700" fill="#FFFFFF" />
+<text x="302.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">戰略路線圖 2023</text>
+<text x="292.0" y="68" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">瑪塔里奇太陽科技有限公司</text>
+<rect x="198.0" y="132" width="574.5" height="20" fill="#4C5B5C" />
+<text x="460.25" y="132.5" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">2023 年</text>
+<rect x="198.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="248.25" y="157.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第1季度</text>
+<rect x="342.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="391.75" y="157.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第2季度</text>
+<rect x="486.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="535.75" y="157.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第3季度</text>
+<rect x="630.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="679.75" y="157.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">第4季度</text>
+<path d="M341.0,175 L341.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M485.0,175 L485.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M629.0,175 L629.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="213" width="148.0" height="52" fill="#FCA311" />
+<text x="76.0" y="229.0" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">人員流程</text>
+<rect x="198" y="213" width="187" height="20" fill="#8FBC94" />
+<text x="255.5" y="215.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">制定包容戰略</text>
+<rect x="389" y="213" width="377" height="20" fill="#8FBC94" />
+<text x="499.5" y="215.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">促進多樣性、公平性和包容性</text>
+<rect x="292" y="238" width="425" height="20" fill="#8FBC94" />
+<text x="450.5" y="240.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">實施可持續發展計劃</text>
+<rect x="30" y="280" width="148.0" height="82" fill="#FCA311" />
+<text x="76.0" y="311.0" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">工作流程</text>
+<rect x="247" y="280" width="469" height="20" fill="#8FBC94" />
+<text x="433.5" y="282.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">實施業務改進計劃</text>
+<rect x="486" y="320" width="282" height="20" fill="#8FBC94" />
+<text x="597.0" y="322.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">自動化流程</text>
+<path d="M536.5439560439561,317 L549.5439560439561,330.0 L536.5439560439561,343 L523.5439560439561,330.0" fill="#3D6642" />
+<text x="513.2106227106227" y="302" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">30%自動化 </text>
+<path d="M727.521978021978,317 L740.521978021978,330.0 L727.521978021978,343 L714.521978021978,330.0" fill="#3D6642" />
+<text x="704.1886446886447" y="302" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">60%自動化 </text>
+<rect x="30" y="377" width="148.0" height="94" fill="#FCA311" />
+<text x="76.0" y="413.5" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">工具流程</text>
+<rect x="198" y="377" width="187" height="20" fill="#8FBC94" />
+<text x="243.5" y="379.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">實施工具選擇策略</text>
+<rect x="247" y="402" width="327" height="20" fill="#8FBC94" />
+<text x="386.5" y="404.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">工具選擇</text>
+<rect x="342" y="442" width="377" height="20" fill="#8FBC94" />
+<text x="494.5" y="444.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">集中工具管理</text>
+<path d="M727.521978021978,439 L740.521978021978,452.0 L727.521978021978,465 L714.521978021978,452.0" fill="#3D6642" />
+<text x="701.521978021978" y="424" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">系統集中完成</text>
+<text x="493.5274725274725" y="188" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">▼</text>
+<path d="M498.5274725274725,202.0 L498.5274725274725,212.0" stroke="#000000" />
+<path d="M498.5274725274725,216.68421052631578 L498.5274725274725,226.68421052631578" stroke="#000000" />
+<path d="M498.5274725274725,231.3684210526316 L498.5274725274725,241.3684210526316" stroke="#000000" />
+<path d="M498.5274725274725,246.05263157894737 L498.5274725274725,256.0526315789474" stroke="#000000" />
+<path d="M498.5274725274725,260.7368421052632 L498.5274725274725,270.7368421052632" stroke="#000000" />
+<path d="M498.5274725274725,275.42105263157896 L498.5274725274725,285.42105263157896" stroke="#000000" />
+<path d="M498.5274725274725,290.10526315789474 L498.5274725274725,300.10526315789474" stroke="#000000" />
+<path d="M498.5274725274725,304.7894736842105 L498.5274725274725,314.7894736842105" stroke="#000000" />
+<path d="M498.5274725274725,319.4736842105263 L498.5274725274725,329.4736842105263" stroke="#000000" />
+<path d="M498.5274725274725,334.1578947368421 L498.5274725274725,344.1578947368421" stroke="#000000" />
+<path d="M498.5274725274725,348.8421052631579 L498.5274725274725,358.8421052631579" stroke="#000000" />
+<path d="M498.5274725274725,363.52631578947364 L498.5274725274725,373.52631578947364" stroke="#000000" />
+<path d="M498.5274725274725,378.2105263157895 L498.5274725274725,388.2105263157895" stroke="#000000" />
+<path d="M498.5274725274725,392.89473684210526 L498.5274725274725,402.89473684210526" stroke="#000000" />
+<path d="M498.5274725274725,407.57894736842104 L498.5274725274725,417.57894736842104" stroke="#000000" />
+<path d="M498.5274725274725,422.2631578947369 L498.5274725274725,432.2631578947369" stroke="#000000" />
+<path d="M498.5274725274725,436.9473684210526 L498.5274725274725,446.9473684210526" stroke="#000000" />
+<path d="M498.5274725274725,451.63157894736844 L498.5274725274725,461.63157894736844" stroke="#000000" />
+<path d="M498.5274725274725,466.3157894736842 L498.5274725274725,476.3157894736842" stroke="#000000" />
+<path d="M498.5274725274725,481.0 L498.5274725274725,491.0" stroke="#000000" />
+<text x="339.5" y="543" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">由 Roadmapper 生成</text>
+</svg>
\ No newline at end of file
diff --git a/images/zh_TW-timeline-roadmap.png b/images/zh_TW-timeline-roadmap.png
index ac90c59..4edca58 100644
Binary files a/images/zh_TW-timeline-roadmap.png and b/images/zh_TW-timeline-roadmap.png differ
diff --git a/images/zh_TW-timeline-roadmap.svg b/images/zh_TW-timeline-roadmap.svg
new file mode 100644
index 0000000..cd80728
--- /dev/null
+++ b/images/zh_TW-timeline-roadmap.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800" height="590" viewBox="0 0 800 590">
+<defs>
+</defs>
+<rect x="0" y="0" width="800" height="700" fill="#FFFFFF" />
+<text x="302.5" y="30" font-size="26" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">戰略路線圖 2023</text>
+<text x="292.0" y="68" font-size="18" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">瑪塔里奇太陽科技有限公司</text>
+<rect x="198.0" y="132" width="574.5" height="20" fill="#4C5B5C" />
+<text x="451.25" y="133.5" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">Year 2023</text>
+<rect x="198.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="261.75" y="156.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">Q1</text>
+<rect x="342.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="405.25" y="156.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">Q2</text>
+<rect x="486.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="549.25" y="156.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">Q3</text>
+<rect x="630.0" y="155" width="142.5" height="20" fill="#4C5B5C" />
+<text x="693.25" y="156.5" font-size="12" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">Q4</text>
+<path d="M341.0,175 L341.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M485.0,175 L485.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<path d="M629.0,175 L629.0,481" width="1" fill="(230, 230, 230, 12750)" />
+<rect x="30" y="213" width="148.0" height="52" fill="#FCA311" />
+<text x="76.0" y="229.0" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">人員流程</text>
+<rect x="198" y="213" width="187" height="20" fill="#8FBC94" />
+<text x="255.5" y="215.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">制定包容戰略</text>
+<rect x="389" y="213" width="377" height="20" fill="#8FBC94" />
+<text x="499.5" y="215.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">促進多樣性、公平性和包容性</text>
+<rect x="292" y="238" width="425" height="20" fill="#8FBC94" />
+<text x="450.5" y="240.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">實施可持續發展計劃</text>
+<rect x="30" y="280" width="148.0" height="82" fill="#FCA311" />
+<text x="76.0" y="311.0" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">工作流程</text>
+<rect x="247" y="280" width="469" height="20" fill="#8FBC94" />
+<text x="433.5" y="282.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">實施業務改進計劃</text>
+<rect x="486" y="320" width="282" height="20" fill="#8FBC94" />
+<text x="597.0" y="322.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">自動化流程</text>
+<path d="M536.5439560439561,317 L549.5439560439561,330.0 L536.5439560439561,343 L523.5439560439561,330.0" fill="#3D6642" />
+<text x="513.2106227106227" y="302" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">30%自動化 </text>
+<path d="M727.521978021978,317 L740.521978021978,330.0 L727.521978021978,343 L714.521978021978,330.0" fill="#3D6642" />
+<text x="704.1886446886447" y="302" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">60%自動化 </text>
+<rect x="30" y="377" width="148.0" height="94" fill="#FCA311" />
+<text x="76.0" y="413.5" font-size="14" stroke="#FFFFFF" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Bold.otf">工具流程</text>
+<rect x="198" y="377" width="187" height="20" fill="#8FBC94" />
+<text x="243.5" y="379.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">實施工具選擇策略</text>
+<rect x="247" y="402" width="327" height="20" fill="#8FBC94" />
+<text x="386.5" y="404.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">工具選擇</text>
+<rect x="342" y="442" width="377" height="20" fill="#8FBC94" />
+<text x="494.5" y="444.0" font-size="12" stroke="#000000" text-anchor="start" dominant-baseline="hanging" font-family="../fonts/SourceHanSerifTC-Regular.otf">集中工具管理</text>
+<path d="M727.521978021978,439 L740.521978021978,452.0 L727.521978021978,465 L714.521978021978,452.0" fill="#3D6642" />
+<text x="701.521978021978" y="424" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">系統集中完成</text>
+<text x="493.5274725274725" y="188" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">▼</text>
+<path d="M498.5274725274725,202.0 L498.5274725274725,212.0" stroke="#000000" />
+<path d="M498.5274725274725,216.68421052631578 L498.5274725274725,226.68421052631578" stroke="#000000" />
+<path d="M498.5274725274725,231.3684210526316 L498.5274725274725,241.3684210526316" stroke="#000000" />
+<path d="M498.5274725274725,246.05263157894737 L498.5274725274725,256.0526315789474" stroke="#000000" />
+<path d="M498.5274725274725,260.7368421052632 L498.5274725274725,270.7368421052632" stroke="#000000" />
+<path d="M498.5274725274725,275.42105263157896 L498.5274725274725,285.42105263157896" stroke="#000000" />
+<path d="M498.5274725274725,290.10526315789474 L498.5274725274725,300.10526315789474" stroke="#000000" />
+<path d="M498.5274725274725,304.7894736842105 L498.5274725274725,314.7894736842105" stroke="#000000" />
+<path d="M498.5274725274725,319.4736842105263 L498.5274725274725,329.4736842105263" stroke="#000000" />
+<path d="M498.5274725274725,334.1578947368421 L498.5274725274725,344.1578947368421" stroke="#000000" />
+<path d="M498.5274725274725,348.8421052631579 L498.5274725274725,358.8421052631579" stroke="#000000" />
+<path d="M498.5274725274725,363.52631578947364 L498.5274725274725,373.52631578947364" stroke="#000000" />
+<path d="M498.5274725274725,378.2105263157895 L498.5274725274725,388.2105263157895" stroke="#000000" />
+<path d="M498.5274725274725,392.89473684210526 L498.5274725274725,402.89473684210526" stroke="#000000" />
+<path d="M498.5274725274725,407.57894736842104 L498.5274725274725,417.57894736842104" stroke="#000000" />
+<path d="M498.5274725274725,422.2631578947369 L498.5274725274725,432.2631578947369" stroke="#000000" />
+<path d="M498.5274725274725,436.9473684210526 L498.5274725274725,446.9473684210526" stroke="#000000" />
+<path d="M498.5274725274725,451.63157894736844 L498.5274725274725,461.63157894736844" stroke="#000000" />
+<path d="M498.5274725274725,466.3157894736842 L498.5274725274725,476.3157894736842" stroke="#000000" />
+<path d="M498.5274725274725,481.0 L498.5274725274725,491.0" stroke="#000000" />
+<text x="339.5" y="543" font-size="12" text-anchor="start" dominant-baseline="middle" font-family="../fonts/SourceHanSerifTC-Regular.otf" stroke="#000000">由 Roadmapper 生成</text>
+</svg>
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index ca7e1e1..cd6e9d6 100644
Binary files a/requirements.txt and b/requirements.txt differ
diff --git a/src/debug.py b/src/debug.py
new file mode 100644
index 0000000..e37a38f
--- /dev/null
+++ b/src/debug.py
@@ -0,0 +1,59 @@
+import os
+from datetime import datetime
+from roadmapper.roadmap import Roadmap
+from roadmapper.timelinemode import TimelineMode
+
+
+def colour_theme_demo_without_locale(
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    file_name: str = "demo01.png",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    roadmap = Roadmap(
+        1200,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=True,
+        painter_type="SVG",
+    )
+    roadmap.set_background_colour("lightblue")
+    roadmap.add_logo("images/logo/matariki-tech-logo.png", "top-left", 50, 50)
+    roadmap.set_title("SAMPLE ROADMAP 2022/2023")
+    roadmap.set_subtitle("ABC Corporation")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+    )
+
+    group = roadmap.add_group("Core Product Work Stream", text_alignment="left")
+    task = group.add_task("Base Functionality", "2022-11-01", "2023-10-31")
+    task.add_milestone("v.1.0", "2023-02-15")
+    task.add_milestone("v.1.1", "2023-08-01")
+    parellel_task = task.add_parallel_task("Enhancements", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("v.2.0", "2024-03-30")
+
+    task = group.add_task("Showcase #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("Showcase #2", "2023-06-01", "2023-08-07")
+
+    group = roadmap.add_group("Mobility Work Stream", text_alignment="left")
+    group.add_task("Mobile App Development", "2023-02-01", "2024-12-07")
+
+    roadmap.set_footer("Updated on " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+
+    roadmap.save(file_name)
+
+
+if __name__ == "__main__":
+    output_file = "images/test/colour_theme_demo_without_locale.svg"
+    colour_theme_demo_without_locale(
+        file_name=output_file,
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=14,
+    )
diff --git a/src/roadmapper/painter.py b/src/roadmapper/painter.py
index afc554c..2a01adf 100644
--- a/src/roadmapper/painter.py
+++ b/src/roadmapper/painter.py
@@ -25,12 +25,16 @@
 import sys
 from .colourtheme import ColourTheme
 from PIL import Image, ImageDraw, ImageFont, ImageColor
+import drawsvg as dw
+
 import textwrap
 
 
-class Painter:
-    """A wrapper class for Pillow library"""
+class UnsupportedOSException(Exception):
+    pass
+
 
+class Painter:
     width = 0
     height = 0
     next_y_pos = 0
@@ -102,7 +106,6 @@ class Painter:
     font: str
     font_size: int
 
-    # initialise code
     def __init__(self, width: int, height: int):
         """__init__ method
 
@@ -114,16 +117,6 @@ def __init__(self, width: int, height: int):
         self.height = height
         self.next_y_pos = 0
 
-        # Default file format
-        self.output_type = "PNG"
-
-        self.__surface = Image.new("RGBA", (width, height), (0, 0, 0, 0))
-
-        self.__cr = ImageDraw.Draw(self.__surface)
-
-        self.__new_cr = None
-        self.__new_surface = None
-
     def set_colour_theme(self, colour_theme: str) -> None:
         """Set colour palette
 
@@ -194,28 +187,77 @@ def get_font_path(self, font_name: str) -> str:
                 "/", "System", "Library", "Fonts", "Supplemental", f"{font_name}.ttf"
             )
         elif sys.platform.startswith("linux"):  # Linux
-            font_dir = f"/usr/share/fonts/truetype/msttcorefonts"
+            font_dir = "/usr/share/fonts/truetype/msttcorefonts"
 
             if os.path.exists(os.path.join(font_dir, f"{font_name}.ttf")):
                 return os.path.join(font_dir, f"{font_name}.ttf")
-            else:
-                ### This is cater for cases where msttcorefonts is not installed
-                linux_font_name = "DejaVuSans"  # Default font for Linux
-                return os.path.join(
-                    "/",
-                    "usr",
-                    "share",
-                    "fonts",
-                    "truetype",
-                    "dejavu",  # Use the DejaVu font directory instead of msttcorefonts
-                    f"{linux_font_name}.ttf",
-                )
+            ### This is cater for cases where msttcorefonts is not installed
+            linux_font_name = "DejaVuSans"  # Default font for Linux
+            return os.path.join(
+                "/",
+                "usr",
+                "share",
+                "fonts",
+                "truetype",
+                "dejavu",  # Use the DejaVu font directory instead of msttcorefonts
+                f"{linux_font_name}.ttf",
+            )
         else:
-            raise Exception("Unsupported operating system")
+            raise UnsupportedOSException("Unsupported operating system")
+
+    def get_display_text_position(
+        self,
+        x: int,
+        y: int,
+        width: int,
+        height: int,
+        text: str,
+        alignment: str,
+        text_font: str,
+        text_font_size: int,
+    ) -> tuple:
+        """Get text position relative to the rectangle box
+
+        Args:
+            x (int): Rectangle X coordinate
+            y (int): Rectangle Y coordinate
+            width (int): Rectangle width
+            height (int): Rectangle height
+            text (str): Text used to calculate position
+            alignment (str): Text alignment. Eg. left, center, right
+
+        Returns:
+            (text_x (int), text_y (int)): Text x and y coordinates
+        """
+        text_width, text_height = self.get_text_dimension(
+            text, text_font, text_font_size
+        )
+
+        if alignment == "centre":
+            text_x_pos = (width / 2) - (text_width / 2)
+        elif alignment == "right":
+            text_x_pos = width - text_width - 5
+        elif alignment == "left":
+            text_x_pos = 0 + 5
+
+        text_y_pos = (height / 2) + (text_height / 2)
+
+        return x + text_x_pos, y + text_y_pos
+
+    def get_text_dimension(self, text: str, font: str, font_size: int) -> tuple:
+        raise NotImplementedError
+
+    def set_line_style(self, style: str = "solid") -> None:
+        """Set line style
+
+        Args:
+            style (str, optional): Line style. Defaults to "solid". Options: "solid", "dashed"
+        """
+        self.dash = (10.0, 5.0) if style == "dashed" else None
 
     def draw_box(
         self, x: int, y: int, width: int, height: int, box_fill_colour: str
-    ) -> None:
+    ) -> list:
         """Draw a rectagle
 
         Args:
@@ -225,12 +267,11 @@ def draw_box(
             height (int): Rectangle height
             box_fill_colour (str: HTML colour name or hex code. Eg. #FFFFFF or LightGreen)
         """
-        shape = [(x, y), (x + width, y + height)]
-        self.__cr.rectangle(shape, fill=box_fill_colour)
+        return [(x, y), (x + width, y + height)]
 
     def draw_rounded_box(
         self, x: int, y: int, width: int, height: int, box_fill_colour: str
-    ) -> None:
+    ) -> list:
         """Draw a rounded rectagle
 
         Args:
@@ -240,13 +281,11 @@ def draw_rounded_box(
             height (int): Rectangle height
             box_fill_colour (str: HTML colour name or hex code. Eg. #FFFFFF or LightGreen)
         """
-        shape = [(x, y), (x + width, y + height)]
-        radius = 20
-        self.__cr.rounded_rectangle(shape, radius, fill=box_fill_colour)
+        return [(x, y), (x + width, y + height)]
 
     def draw_arrowhead_box(
         self, x: int, y: int, width: int, height: int, box_fill_colour: str
-    ) -> None:
+    ) -> list:
         """Draw a rounded rectagle
 
         Args:
@@ -257,23 +296,19 @@ def draw_arrowhead_box(
             box_fill_colour (str: HTML colour name or hex code. Eg. #FFFFFF or LightGreen)
         """
         arrowhead_width = 10
-        width = width - arrowhead_width
-        shape = [(x, y), (x + width, y + height)]
-
-        # Draw the rectangle
-        self.__cr.rectangle(shape, fill=box_fill_colour)
+        width -= arrowhead_width
+        box_shape = [(x, y), (x + width, y + height)]
 
         # Set the coordinates of the arrowhead
         vertical_midpoint = (height / 2) + y
         arrowhead_endpoint = x + width + arrowhead_width
-        arrowhead = [
+        arrowhead_shape = [
             (x + width, y),
             (arrowhead_endpoint, vertical_midpoint),
             (x + width, y + height),
         ]
 
-        # Draw the arrowhead
-        self.__cr.polygon(arrowhead, fill=box_fill_colour)
+        return box_shape, arrowhead_shape
 
     def draw_box_with_text(
         self,
@@ -288,27 +323,181 @@ def draw_box_with_text(
         text_font_size: int,
         text_font_colour: str,
         style: str = "rectangle",
+    ) -> tuple:
+        return (
+            box_x,
+            box_y,
+            box_x + box_width,
+            box_y + box_height,
+        )
+
+    def draw_diamond(
+        self, x: int, y: int, width: int, height: int, fill_colour: str
+    ) -> list:
+        """Draw a diamond
+
+        Args:
+            x (int): X coordinate
+            y (int): Y coordinate
+            width (int): Diamond width
+            height (int): Diamond height
+            fill_colour (str): Diamond fill colour in HTML colour name or hex code. Eg. #FFFFFF or LightGreen
+        """
+
+        # Calculate the coordinates of the four points of the diamond.
+        return [
+            (x + width / 2, y),
+            (x + width, y + height / 2),
+            (x + width / 2, y + height),
+            (x, y + height / 2),
+        ]
+
+    def draw_text(
+        self, x: int, y: int, text: str, font: str, font_size: int, font_colour: str
     ) -> None:
-        font = ImageFont.truetype(self.get_font_path(text_font), size=text_font_size)
+        raise NotImplementedError
 
-        multi_lines = []
-        wrap_lines = []
+    def draw_line(
+        self,
+        x1: int,
+        y1: int,
+        x2: int,
+        y2: int,
+        line_colour: str,
+        line_transparency: int,
+        line_width: int,
+        line_style: str = "dashed",
+    ) -> None:
+        raise NotImplementedError
 
-        ### Make '\n' work
-        multi_lines = text.splitlines()
+    def draw_cross_on_box(
+        self, x1: int, y1: int, x2: int, y2: int, colour: str
+    ) -> None:
+        raise NotImplementedError
 
-        left, _, right, bottom = font.getbbox("a")
-        single_char_width = right - left
+    def draw_logo(self, image: str, x: int, y: int, width: int, height: int) -> None:
+        raise NotImplementedError
 
-        ### wrap text
-        for line in multi_lines:
-            wrap_lines.extend(textwrap.wrap(line, int(box_width / single_char_width)))
+    def get_text_dimension(self, text: str, font: str, font_size: int) -> tuple:
+        raise NotImplementedError
+
+    def set_background_colour(self) -> None:
+        raise NotImplementedError
 
-        box_x1, box_y1, box_x2, box_y2 = (
+    def set_surface_size(self, width: int, height: int) -> tuple:
+        """Set surface size
+
+        Args:
+            width (int): Surface width
+            height (int): Surface height
+        """
+        height += self.bottom_margin
+        return 0, 0, width, height
+
+    def get_image_size(self, image: str) -> tuple:
+        raise NotImplementedError
+
+    def save_surface(self, filename: str) -> None:
+        raise NotImplementedError
+
+
+class PNGPainter(Painter):
+    """A wrapper class for Pillow library"""
+
+    # initialise code
+    def __init__(self, width: int, height: int):
+        """__init__ method
+
+        Args:
+            width (int): Width of the surface
+            height (int): Height of the surface
+        """
+        super().__init__(width, height)
+
+        self.__surface = Image.new("RGBA", (width, height), (0, 0, 0, 0))
+
+        self.__cr = ImageDraw.Draw(self.__surface)
+
+    def draw_box(
+        self, x: int, y: int, width: int, height: int, box_fill_colour: str
+    ) -> None:
+        """Draw a rectagle
+
+        Args:
+            x (int): X coordinate
+            y (int): Y coordinate
+            width (int): Rectangle width
+            height (int): Rectangle height
+            box_fill_colour (str: HTML colour name or hex code. Eg. #FFFFFF or LightGreen)
+        """
+
+        shape = super().draw_box(x, y, width, height, box_fill_colour)
+        self.__cr.rectangle(shape, fill=box_fill_colour)
+
+    def draw_rounded_box(
+        self, x: int, y: int, width: int, height: int, box_fill_colour: str
+    ) -> None:
+        """Draw a rounded rectagle
+
+        Args:
+            x (int): X coordinate
+            y (int): Y coordinate
+            width (int): Rectangle width
+            height (int): Rectangle height
+            box_fill_colour (str: HTML colour name or hex code. Eg. #FFFFFF or LightGreen)
+        """
+        shape = super().draw_rounded_box(x, y, width, height, box_fill_colour)
+        radius = 20
+        self.__cr.rounded_rectangle(shape, radius, fill=box_fill_colour)
+
+    def draw_arrowhead_box(
+        self, x: int, y: int, width: int, height: int, box_fill_colour: str
+    ) -> None:
+        """Draw a rounded rectagle
+
+        Args:
+            x (int): X coordinate
+            y (int): Y coordinate
+            width (int): Rectangle width
+            height (int): Rectangle height
+            box_fill_colour (str: HTML colour name or hex code. Eg. #FFFFFF or LightGreen)
+        """
+        box_shape, arrowhead_shape = super().draw_arrowhead_box(
+            x, y, width, height, box_fill_colour
+        )
+
+        # Draw the rectangle
+        self.__cr.rectangle(box_shape, fill=box_fill_colour)
+
+        # Draw the arrowhead
+        self.__cr.polygon(arrowhead_shape, fill=box_fill_colour)
+
+    def draw_box_with_text(
+        self,
+        box_x: int,
+        box_y: int,
+        box_width: int,
+        box_height: int,
+        box_fill_colour: int,
+        text: str,
+        text_alignment: str,
+        text_font: str,
+        text_font_size: int,
+        text_font_colour: str,
+        style: str = "rectangle",
+    ) -> None:
+        box_x1, box_y1, box_x2, box_y2 = super().draw_box_with_text(
             box_x,
             box_y,
-            box_x + box_width,
-            box_y + box_height,
+            box_width,
+            box_height,
+            box_fill_colour,
+            text,
+            text_alignment,
+            text_font,
+            text_font_size,
+            text_font_colour,
+            style,
         )
         match style:
             case "rectangle":
@@ -330,6 +519,21 @@ def draw_box_with_text(
             case _:
                 raise ValueError("Invalid style")
 
+        font = ImageFont.truetype(self.get_font_path(text_font), size=text_font_size)
+
+        multi_lines = []
+        wrap_lines = []
+
+        ### Make '\n' work
+        multi_lines = text.splitlines()
+
+        left, _, right, _ = font.getbbox("a")
+        single_char_width = right - left
+
+        ### wrap text
+        for line in multi_lines:
+            wrap_lines.extend(textwrap.wrap(line, int(box_width / single_char_width)))
+
         pad = 4
         line_count = len(wrap_lines)
 
@@ -374,12 +578,7 @@ def draw_diamond(
         """
 
         # Calculate the coordinates of the four points of the diamond.
-        points = [
-            (x + width / 2, y),
-            (x + width, y + height / 2),
-            (x + width / 2, y + height),
-            (x, y + height / 2),
-        ]
+        points = super().draw_diamond(x, y, width, height, fill_colour)
 
         # Use Pillow's ImageDraw module to draw a polygon with the given points and fill color.
         self.__cr.polygon(points, fill=fill_colour)
@@ -402,19 +601,6 @@ def draw_text(
             fill=(font_colour),
         )
 
-    def set_line_style(self, style: str = "solid") -> None:
-        """Set line style
-
-        Args:
-            style (str, optional): Line style. Defaults to "solid". Options: "solid", "dashed"
-        """
-        if style == "solid":
-            self.dash = None
-        elif style == "dashed":
-            self.dash = (10.0, 5.0)
-        else:
-            self.dash = None
-
     def draw_line(
         self,
         x1: int,
@@ -528,8 +714,6 @@ def get_text_dimension(self, text: str, font: str, font_size: int) -> tuple:
         # Use Pillow's ImageFont module to get the dimensions of the text.
         image_font = ImageFont.truetype(self.get_font_path(font), font_size)
 
-        ascent, descent = image_font.getmetrics()
-
         left, _, right, bottom = image_font.getbbox(text)
         font_width = right
         font_height = bottom
@@ -538,48 +722,13 @@ def get_text_dimension(self, text: str, font: str, font_size: int) -> tuple:
 
     def set_background_colour(self) -> None:
         """Set surface background colour"""
-        self.__cr.rectangle(
-            (0, 0, self.width, self.height), fill=self.background_colour
-        )
-
-    def get_display_text_position(
-        self,
-        x: int,
-        y: int,
-        width: int,
-        height: int,
-        text: str,
-        alignment: str,
-        text_font: str,
-        text_font_size: int,
-    ) -> tuple:
-        """Get text position relative to the rectangle box
-
-        Args:
-            x (int): Rectangle X coordinate
-            y (int): Rectangle Y coordinate
-            width (int): Rectangle width
-            height (int): Rectangle height
-            text (str): Text used to calculate position
-            alignment (str): Text alignment. Eg. left, center, right
-
-        Returns:
-            (text_x (int), text_y (int)): Text x and y coordinates
-        """
-        text_width, text_height = self.get_text_dimension(
-            text, text_font, text_font_size
-        )
-
-        if alignment == "centre":
-            text_x_pos = (width / 2) - (text_width / 2)
-        elif alignment == "right":
-            text_x_pos = width - text_width - 5
-        elif alignment == "left":
-            text_x_pos = 0 + 5
-
-        text_y_pos = (height / 2) + (text_height / 2)
-
-        return x + text_x_pos, y + text_y_pos
+        if self.background_colour == "transparent":
+            # Set transparent background
+            self.__cr.rectangle((0, 0, self.width, self.height), fill=(0, 0, 0, 0))
+        else:
+            self.__cr.rectangle(
+                (0, 0, self.width, self.height), fill=self.background_colour
+            )
 
     def set_surface_size(self, width: int, height: int) -> None:
         """Set surface size
@@ -588,8 +737,7 @@ def set_surface_size(self, width: int, height: int) -> None:
             width (int): Surface width
             height (int): Surface height
         """
-        height += self.bottom_margin
-        left, top, right, bottom = 0, 0, width, height
+        left, top, right, bottom = super().set_surface_size(width, height)
         self.__surface = self.__surface.crop((left, top, right, bottom))
 
     def get_image_size(self, image: str) -> tuple:
@@ -610,6 +758,327 @@ def save_surface(self, filename: str) -> None:
         Args:
             filename (str): PNG file name
         """
-        if self.output_type == "PNG":
-            if self.__surface is not None:
-                self.__surface.save(filename)
+
+        if self.__surface is not None:
+            self.__surface.save(filename)
+
+
+class SVGPainter(Painter):
+    def __init__(self, width: int, height: int):
+        """__init__ method
+
+        Args:
+            width (int): Width of the surface
+            height (int): Height of the surface
+        """
+        super().__init__(width, height)
+        self.__cr = None
+        self.elements = []
+
+    def draw_box(
+        self, x: int, y: int, width: int, height: int, box_fill_colour: str
+    ) -> None:
+        """Draw a rectagle"""
+
+        # Create a rectangle shape
+        rectangle = dw.Rectangle(x, y, width, height, fill=box_fill_colour)
+
+        self.elements.append(rectangle)
+
+    def draw_rounded_box(
+        self, x: int, y: int, width: int, height: int, box_fill_colour: str
+    ) -> None:
+        """Draw a rounded rectagle"""
+        shape = super().draw_rounded_box(x, y, width, height, box_fill_colour)
+        radius = 20
+        rectangle = dw.Rectangle(
+            x, y, width, height, rx=radius, ry=radius, fill=box_fill_colour
+        )
+
+        self.elements.append(rectangle)
+
+    def draw_arrowhead_box(
+        self, x: int, y: int, width: int, height: int, box_fill_colour: str
+    ) -> None:
+        """Draw a rounded rectagle"""
+        box_shape, arrowhead_shape = super().draw_arrowhead_box(
+            x, y, width, height, box_fill_colour
+        )
+
+        # Draw the rectangle
+        rectangle = dw.Rectangle(x, y, width, height, fill=box_fill_colour)
+
+        # Draw the arrowhead
+        poly = dw.Lines(arrowhead_shape, fill=box_fill_colour)
+        self.elements.append(rectangle)
+        self.elements.append(poly)
+
+    def draw_box_with_text(
+        self,
+        box_x: int,
+        box_y: int,
+        box_width: int,
+        box_height: int,
+        box_fill_colour: int,
+        text: str,
+        text_alignment: str,
+        text_font: str,
+        text_font_size: int,
+        text_font_colour: str,
+        style: str = "rectangle",
+    ) -> None:
+        box_x1, box_y1, box_x2, box_y2 = super().draw_box_with_text(
+            box_x,
+            box_y,
+            box_width,
+            box_height,
+            box_fill_colour,
+            text,
+            text_alignment,
+            text_font,
+            text_font_size,
+            text_font_colour,
+            style,
+        )
+        match style:
+            case "rectangle":
+                self.draw_box(
+                    box_x1,
+                    box_y1,
+                    box_width,
+                    box_height,
+                    box_fill_colour=box_fill_colour,
+                )
+            case "rounded":
+                self.draw_rounded_box(
+                    box_x1, box_y1, box_width, box_height, box_fill_colour
+                )
+            case "arrowhead":
+                self.draw_arrowhead_box(
+                    box_x1, box_y1, box_width, box_height, box_fill_colour
+                )
+            case _:
+                raise ValueError("Invalid style")
+
+        font = ImageFont.truetype(self.get_font_path(text_font), size=text_font_size)
+
+        multi_lines = []
+        wrap_lines = []
+
+        ### Make '\n' work
+        multi_lines = text.splitlines()
+
+        left, _, right, _ = font.getbbox("a")
+        single_char_width = right - left
+
+        ### wrap text
+        for line in multi_lines:
+            wrap_lines.extend(textwrap.wrap(line, int(box_width / single_char_width)))
+
+        pad = 4
+        line_count = len(wrap_lines)
+
+        for i, line in enumerate(wrap_lines):
+            font_width, font_height = self.get_text_dimension(
+                line, text_font, text_font_size
+            )
+
+            match text_alignment:
+                case "centre":
+                    x = box_x1 + (box_width - font_width) / 2
+                case "left":
+                    x = box_x1 + 15
+                case "right":
+                    x = box_x2 - font_width - 15
+                case _:
+                    x = box_x1 + (box_width - font_width) / 2
+
+            total_line_height = (font_height * line_count) + (pad * (line_count - 1))
+
+            single_line_height = font_height
+
+            y = (
+                box_y1
+                + ((box_height - total_line_height) / 2)
+                + ((single_line_height * i) + (pad * i))
+            )
+
+            txt = dw.Text(
+                line,
+                x=x,
+                y=y,
+                font_size=text_font_size,
+                stroke=text_font_colour,
+                text_anchor="start",
+                dominant_baseline="hanging",
+                font_family=text_font,
+            )
+            self.elements.append(txt)
+
+    def draw_diamond(
+        self, x: int, y: int, width: int, height: int, fill_colour: str
+    ) -> None:
+        """Draw a diamond"""
+
+        # Calculate the coordinates of the four points of the diamond.
+        points = super().draw_diamond(x, y, width, height, fill_colour)
+
+        # Use Pillow's ImageDraw module to draw a polygon with the given points and fill color.
+        x1, y1 = points[0]
+        x2, y2 = points[1]
+        x3, y3 = points[2]
+        x4, y4 = points[3]
+        diamond = dw.Lines(x1, y1, x2, y2, x3, y3, x4, y4, fill=fill_colour)
+        self.elements.append(diamond)
+
+    def draw_text(
+        self,
+        x: int,
+        y: int,
+        text: str,
+        font: str,
+        font_size: int,
+        font_colour: str,
+    ) -> None:
+        """Draw text"""
+        txt = dw.Text(
+            text,
+            x=x,
+            y=y,
+            font_size=font_size,
+            text_anchor="start",
+            dominant_baseline="middle",
+            font_family=font,
+            stroke=font_colour,
+        )
+        self.elements.append(txt)
+
+    def draw_line(
+        self,
+        x1: int,
+        y1: int,
+        x2: int,
+        y2: int,
+        line_colour: str,
+        line_transparency: int,
+        line_width: int,
+        line_style: str = "dashed",
+    ) -> None:
+        """Draw a line"""
+        r, g, b = ImageColor.getrgb(line_colour)
+
+        def linspace(start, stop, n):
+            if n == 1:
+                yield stop
+                return
+            h = (stop - start) / (n - 1)
+            for i in range(n):
+                yield start + h * i
+
+        if line_style == "solid":
+            line = dw.Line(
+                x1,
+                y1,
+                x2,
+                y2,
+                width=line_width,
+                fill=(r, g, b, int(255 * line_transparency)),
+            )
+            self.elements.append(line)
+        elif line_style == "dashed":
+            # given a line between x1, y1 and x2, y2, divide it into multiple shorter lines
+            # and draw them with a gap in between.
+
+            ### Calculate the number of dashes
+            gap_counts = int((y2 - y1) / 7)
+
+            for i, (x, y) in enumerate(
+                zip(
+                    linspace(x1, x2, gap_counts),
+                    linspace(y1, y2, gap_counts),
+                )
+            ):
+                if i % 2 == 0:
+                    line = dw.Line(x, y, x, y + 10, stroke=line_colour)
+                    self.elements.append(line)
+
+    def draw_cross_on_box(
+        self, x1: int, y1: int, x2: int, y2: int, colour: str
+    ) -> None:
+        """Draw a cross (vertical and horizontal lines) on a box"""
+
+        cross = dw.Line(
+            x1 + ((x2 - x1) / 2), y1, x1 + ((x2 - x1) / 2), y2, stroke="red"
+        )
+        self.elements.append(cross)
+
+    def draw_logo(self, image: str, x: int, y: int, width: int, height: int) -> None:
+        """Draw a logo"""
+        logo = Image.open(image)
+        logo = logo.resize((width, height))
+        logo = logo.convert("RGBA")
+
+        logo_image = dw.Image(x, y, width, height, image, embed=True)
+        # self.__cr.apped(logo_image)
+        self.elements.append(logo_image)
+
+    def get_text_dimension(self, text: str, font: str, font_size: int) -> tuple:
+        """Get text dimension"""
+        # Use Pillow's ImageFont module to get the dimensions of the text.
+        image_font = ImageFont.truetype(self.get_font_path(font), font_size)
+
+        left, _, right, bottom = image_font.getbbox(text)
+        font_width = right
+        font_height = bottom
+
+        return font_width, font_height
+
+    def set_background_colour(self) -> None:
+        """Set surface background colour"""
+        if self.background_colour == "transparent":
+            # Set transparent background
+            bg = dw.Rectangle(0, 0, self.width, self.height, fill="white")
+        else:
+            bg = dw.Rectangle(
+                0, 0, self.width, self.height, fill=self.background_colour
+            )
+
+        # self.__cr.append(bg)
+        self.elements.append(bg)
+
+    def set_surface_size(self, width: int, height: int) -> None:
+        """Set surface size"""
+        left, top, right, bottom = super().set_surface_size(width, height)
+
+        self.__cr = dw.Drawing(right, bottom)
+        for element in self.elements:
+            self.__cr.append(element)
+
+    def get_image_size(self, image: str) -> tuple:
+        """Get image size"""
+        with Image.open(image) as img:
+            return img.size
+
+    def save_surface(self, filename: str) -> None:
+        """Save surface to PNG file"""
+
+        if self.__cr is not None:
+            self.__cr.save_svg(filename)
+
+
+class PainterFactory:
+    """A factory class to create painter objects"""
+
+    def __init__(self):
+        self._painters = {}
+
+    def get_painter(self, painter_name, width, height):
+        if painter_name not in self._painters:
+            self._painters[painter_name] = self._create_painter(
+                painter_name, width, height
+            )
+        return self._painters[painter_name]
+
+    def _create_painter(self, painter_name, width, height):
+        # Return a painter object based on the painter_name without using if statement
+        return globals()[f"{painter_name.upper()}Painter"](width, height)
diff --git a/src/roadmapper/roadmap.py b/src/roadmapper/roadmap.py
index d395283..5102906 100644
--- a/src/roadmapper/roadmap.py
+++ b/src/roadmapper/roadmap.py
@@ -24,7 +24,7 @@
 from dataclasses import dataclass, field
 import time
 
-from .painter import Painter
+from .painter import PainterFactory
 from .title import Title
 from .subtitle import SubTitle
 from .footer import Footer
@@ -44,6 +44,7 @@ class Roadmap:
     auto_height: bool = field(default=True, init=True)
     colour_theme: str = field(default="DEFAULT", init=True)
     show_marker: bool = field(default=True, init=True)
+    painter_type: str = field(default="png", init=True)
 
     _title: Title = field(default=None, init=False)
     _subtitle: SubTitle = field(default=None, init=False)
@@ -57,7 +58,8 @@ class Roadmap:
     def __post_init__(self):
         """This method is called after __init__() is called"""
         self.start_time = time.time()
-        self._painter = Painter(self.width, self.height)
+        factory = PainterFactory()
+        self._painter = factory.get_painter(self.painter_type, self.width, self.height)
         self._set_colour_theme(self.colour_theme)
         self._groups = []
         if self.show_marker == True:
@@ -66,6 +68,11 @@ def __post_init__(self):
     def _set_colour_theme(self, palette: str) -> None:
         """This method sets the colour palette"""
         self._painter.set_colour_theme(palette)
+        
+    def set_background_colour(self, colour: str) -> None:
+        """This method sets the background colour"""
+        self._painter.background_colour = colour
+        self._painter.set_background_colour()
 
     def _create_marker(
         self,
diff --git a/src/roadmapper/subtitle.py b/src/roadmapper/subtitle.py
index 4d7f5f5..014d5ad 100644
--- a/src/roadmapper/subtitle.py
+++ b/src/roadmapper/subtitle.py
@@ -68,6 +68,7 @@ def draw(self, painter: Painter) -> None:
         Args:
             painter (Painter): Pillow wrapper class instance
         """
+
         painter.draw_text(
             self.x, self.y, self.text, self.font, self.font_size, self.font_colour
         )
diff --git a/src/roadmapper/task.py b/src/roadmapper/task.py
index 81ac680..02cbc79 100644
--- a/src/roadmapper/task.py
+++ b/src/roadmapper/task.py
@@ -549,7 +549,7 @@ def draw(self, painter: Painter) -> None:
             height,
         )
 
-        if (box_x == 0 and box_y == 0 and box_width == 0 and box_height == 0) != True:
+        if box_x != 0 or box_y != 0 or box_width != 0 or box_height != 0:
             painter.draw_box_with_text(
                 box_x,
                 box_y,
@@ -557,7 +557,7 @@ def draw(self, painter: Painter) -> None:
                 box_height,
                 self.fill_colour,
                 self.text,
-                "centre",
+                self.text_alignment,
                 self.font,
                 self.font_size,
                 self.font_colour,


Test patch:
diff --git a/src/tests/test_cases.py b/src/tests/test_cases.py
index 9e8a7a6..78c8553 100644
--- a/src/tests/test_cases.py
+++ b/src/tests/test_cases.py
@@ -1326,3 +1326,55 @@ def test_with_context_manager():
                 )
         my_roadmap.draw()
         my_roadmap.save("../../images/with_context_manager.png")
+        
+def test_black_blackground():
+    with Roadmap(
+        1200, 500, show_marker=False, auto_height=True, colour_theme="ORANGEPEEL"
+    ) as my_roadmap:
+        my_roadmap.set_background_colour("black")
+        my_roadmap.set_title("Black Background Test Roadmap")
+        my_roadmap.set_timeline(TimelineMode.MONTHLY, start="2023-01-01")
+        with my_roadmap.add_group("Workstream 1") as group1:
+            with group1.add_task(
+                "Task 1-A",
+                "2023-01-01",
+                "2023-04-30",
+            ) as task1:
+                with task1.add_parallel_task(
+                    "Task 2-B",
+                    "2023-05-15",
+                    "2023-08-30",
+                ) as parallel_task1:
+                    parallel_task1.add_milestone("Milestone 2", "2023-08-10")
+                task1.add_milestone(
+                    "Milestone 1",
+                    "2023-04-01",
+                )
+        my_roadmap.draw()
+        my_roadmap.save("../../images/black_roadmap.png")
+        
+def test_transparent_blackground():
+    with Roadmap(
+        1200, 500, show_marker=False, auto_height=True, colour_theme="ORANGEPEEL"
+    ) as my_roadmap:
+        my_roadmap.set_background_colour("transparent")
+        my_roadmap.set_title("Transparent Background Test Roadmap")
+        my_roadmap.set_timeline(TimelineMode.MONTHLY, start="2023-01-01")
+        with my_roadmap.add_group("Workstream 1") as group1:
+            with group1.add_task(
+                "Task 1-A",
+                "2023-01-01",
+                "2023-04-30",
+            ) as task1:
+                with task1.add_parallel_task(
+                    "Task 2-B",
+                    "2023-05-15",
+                    "2023-08-30",
+                ) as parallel_task1:
+                    parallel_task1.add_milestone("Milestone 2", "2023-08-10")
+                task1.add_milestone(
+                    "Milestone 1",
+                    "2023-04-01",
+                )
+        my_roadmap.draw()
+        my_roadmap.save("../../images/transparent_roadmap.png")
diff --git a/src/tests/test_cases_svg.py b/src/tests/test_cases_svg.py
new file mode 100644
index 0000000..abef327
--- /dev/null
+++ b/src/tests/test_cases_svg.py
@@ -0,0 +1,1429 @@
+import os
+from datetime import datetime
+from src.roadmapper.roadmap import Roadmap
+from src.roadmapper.timelinemode import TimelineMode
+
+import pytest
+
+### Roadmap Tests ###
+
+
+def colour_theme_demo(
+    width: int = 1200,
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    file_name: str = "colour_theme_demo.svg",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    output_file = file_name
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        width,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=False,
+        painter_type="SVG",
+    )
+    roadmap.set_title("STRATEGY ROADMAP 2023")
+    roadmap.set_subtitle("Mars Software Inc.")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+        year_fill_colour="#404040",
+        item_fill_colour="#404040",
+        year_font_colour="white",
+        item_font_colour="white",
+    )
+
+    group = roadmap.add_group("Planning", fill_colour="#FFC000", font_colour="black")
+    task = group.add_task(
+        "Vision", "2023-01-01", "2023-03-31", fill_colour="#FFC000", font_colour="black"
+    )
+    task = group.add_task(
+        "Goals", "2023-02-15", "2023-03-31", fill_colour="#FFC000", font_colour="black"
+    )
+    task.add_parallel_task(
+        "Strategic Intent",
+        "2023-04-01",
+        "2023-05-31",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+    task.add_parallel_task(
+        "Sales Budget",
+        "2023-06-01",
+        "2023-07-15",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+    task.add_parallel_task(
+        "Release Plans",
+        "2023-07-16",
+        "2023-09-30",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+
+    group = roadmap.add_group("Strategy", fill_colour="#ED7D31", font_colour="black")
+    task = group.add_task(
+        "Market Analysis",
+        "2023-02-01",
+        "2023-03-30",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    task.add_milestone(
+        "Competitor Review", "2023-03-30", fill_colour="#843C0C", font_colour="black"
+    )
+    task.add_parallel_task(
+        "SWOT", "2023-04-01", "2023-04-30", fill_colour="#ED7D31", font_colour="black"
+    )
+    task = group.add_task(
+        "Business Model",
+        "2023-04-01",
+        "2023-05-31",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    task.add_milestone(
+        "Price List (Draft)", "2023-06-01", fill_colour="#843C0C", font_colour="black"
+    )
+    parallel_task = task.add_parallel_task(
+        "Price Reseach",
+        "2023-06-01",
+        "2023-08-05",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    parallel_task.add_milestone(
+        "Price List (Final)", "2023-07-28", fill_colour="#843C0C", font_colour="black"
+    )
+    group.add_task(
+        "Objectives",
+        "2023-06-20",
+        "2023-09-10",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+
+    group.add_task(
+        "Sales Trends Analysis",
+        "2023-08-15",
+        "2023-10-10",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+
+    group = roadmap.add_group(
+        "Service Development", fill_colour="#70AD47", font_colour="black"
+    )
+    task = group.add_task(
+        "Product Roadmap",
+        "2023-02-15",
+        "2023-03-31",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+    parallel_task = task.add_parallel_task(
+        "Development",
+        "2023-04-01",
+        "2023-08-30",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+    parallel_task.add_milestone(
+        "Alpha May 20", "2023-05-20", fill_colour="#385723", font_colour="black"
+    )
+    parallel_task.add_milestone(
+        "Private Beta Jun 30", "2023-06-30", fill_colour="#385723", font_colour="black"
+    )
+    parallel_task.add_milestone(
+        "Public Beta Jun 30", "2023-08-10", fill_colour="#385723", font_colour="black"
+    )
+
+    parallel_task = task.add_parallel_task(
+        "Release Candidate",
+        "2023-09-01",
+        "2023-10-15",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+
+    parallel_task = task.add_parallel_task(
+        "Release To Public",
+        "2023-10-16",
+        "2023-12-31",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+
+    parallel_task.add_milestone(
+        "Go Live Dec 20", "2023-12-20", fill_colour="#385723", font_colour="black"
+    )
+
+    group = roadmap.add_group(
+        "Business Intelligence",
+        fill_colour="#4472C4",
+        font_colour="black",
+    )
+    task = group.add_task(
+        "BI Development",
+        "2023-04-15",
+        "2023-12-31",
+        fill_colour="#4472C4",
+        font_colour="black",
+    )
+
+    task.add_milestone(
+        "Service Dashboard", "2023-05-15", fill_colour="#162641", font_colour="black"
+    )
+
+    task.add_milestone(
+        "Real-Time Analytics", "2023-08-01", fill_colour="#162641", font_colour="black"
+    )
+
+    task.add_milestone(
+        "Sales Dashboard", "2023-12-15", fill_colour="#162641", font_colour="black"
+    )
+
+    roadmap.set_footer(
+        "Generated by Roadmapper on " + datetime.now().strftime("%Y-%m-%d")
+    )
+    roadmap.draw()
+
+    roadmap.save(output_file)
+
+    assert os.path.exists(output_file)
+
+
+def unicode_demo(
+    width: int = 1200,
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    file_name: str = "unicode_demo.svg",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    output_file = file_name
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        width,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=False,
+        painter_type="SVG",
+    )
+    roadmap.set_title("2023 年戰略路線圖")
+    roadmap.set_subtitle("火星科技公司")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+        year_fill_colour="#404040",
+        item_fill_colour="#404040",
+        year_font_colour="white",
+        item_font_colour="white",
+    )
+
+    group = roadmap.add_group("規劃", fill_colour="#FFC000", font_colour="black")
+    task = group.add_task(
+        "願景", "2023-01-01", "2023-03-31", fill_colour="#FFC000", font_colour="black"
+    )
+    task = group.add_task(
+        "目標", "2023-02-15", "2023-03-31", fill_colour="#FFC000", font_colour="black"
+    )
+    task.add_parallel_task(
+        "戰略意圖",
+        "2023-04-01",
+        "2023-05-31",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+    task.add_parallel_task(
+        "銷售預算",
+        "2023-06-01",
+        "2023-07-15",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+    task.add_parallel_task(
+        "發布計劃",
+        "2023-07-16",
+        "2023-09-30",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+
+    group = roadmap.add_group("戰略", fill_colour="#ED7D31", font_colour="black")
+    task = group.add_task(
+        "市場分析",
+        "2023-02-01",
+        "2023-03-30",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    task.add_milestone(
+        "競爭對手審查", "2023-03-30", fill_colour="#843C0C", font_colour="black"
+    )
+    task.add_parallel_task(
+        "SWOT", "2023-04-01", "2023-04-30", fill_colour="#ED7D31", font_colour="black"
+    )
+    task = group.add_task(
+        "商業模式",
+        "2023-04-01",
+        "2023-05-31",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    task.add_milestone(
+        "價目表（草稿）", "2023-06-01", fill_colour="#843C0C", font_colour="black"
+    )
+    parallel_task = task.add_parallel_task(
+        "價格研究",
+        "2023-06-01",
+        "2023-08-05",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    parallel_task.add_milestone(
+        "價目表（最終）", "2023-07-28", fill_colour="#843C0C", font_colour="black"
+    )
+    group.add_task(
+        "目標",
+        "2023-06-20",
+        "2023-09-10",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+
+    group.add_task(
+        "銷售趨勢分析",
+        "2023-08-15",
+        "2023-10-10",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+
+    group = roadmap.add_group("服務發展", fill_colour="#70AD47", font_colour="black")
+    task = group.add_task(
+        "產品路線圖",
+        "2023-02-15",
+        "2023-03-31",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+    parallel_task = task.add_parallel_task(
+        "軟件開發",
+        "2023-04-01",
+        "2023-08-30",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+    parallel_task.add_milestone(
+        "阿尔法 5月20", "2023-05-20", fill_colour="#385723", font_colour="black"
+    )
+    parallel_task.add_milestone(
+        "私人測試 6月30", "2023-06-30", fill_colour="#385723", font_colour="black"
+    )
+    parallel_task.add_milestone(
+        "公開測試 8月30", "2023-08-10", fill_colour="#385723", font_colour="black"
+    )
+
+    parallel_task = task.add_parallel_task(
+        "候选版本",
+        "2023-09-01",
+        "2023-10-15",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+
+    parallel_task = task.add_parallel_task(
+        "公開發布",
+        "2023-10-16",
+        "2023-12-31",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+
+    parallel_task.add_milestone(
+        "上綫 12月20", "2023-12-20", fill_colour="#385723", font_colour="black"
+    )
+
+    group = roadmap.add_group(
+        "商業智能",
+        fill_colour="#4472C4",
+        font_colour="black",
+    )
+    task = group.add_task(
+        "商業智能開發",
+        "2023-04-15",
+        "2023-12-31",
+        fill_colour="#4472C4",
+        font_colour="black",
+    )
+
+    task.add_milestone(
+        "服務儀表板", "2023-05-15", fill_colour="#162641", font_colour="black"
+    )
+
+    task.add_milestone("實時分析", "2023-08-01", fill_colour="#162641", font_colour="black")
+
+    task.add_milestone(
+        "Sales Dashboard", "2023-12-15", fill_colour="#162641", font_colour="black"
+    )
+
+    roadmap.set_footer("由 Roadmapper 生成於 " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+
+    roadmap.save(output_file)
+    assert os.path.exists(output_file)
+
+
+def sample_roadmap(
+    width: int = 1200,
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    file_name: str = "sample_roadmap.svg",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    output_file = file_name
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        width,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=False,
+        painter_type="SVG",
+    )
+    roadmap.set_title("STRATEGY ROADMAP 2023")
+    roadmap.set_subtitle("Matariki Technologies Inc.")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+        year_fill_colour="#404040",
+        year_font_colour="white",
+        item_fill_colour="#404040",
+        item_font_colour="white",
+    )
+
+    group = roadmap.add_group("Planning", fill_colour="#FFC000", font_colour="black")
+    task = group.add_task(
+        "Vision", "2023-01-01", "2023-03-31", fill_colour="#FFC000", font_colour="black"
+    )
+    task = group.add_task(
+        "Goals", "2023-02-15", "2023-03-31", fill_colour="#FFC000", font_colour="black"
+    )
+    task.add_parallel_task(
+        "Strategic Intent",
+        "2023-04-01",
+        "2023-05-31",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+    task.add_parallel_task(
+        "Sales Budget",
+        "2023-06-01",
+        "2023-07-15",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+    task.add_parallel_task(
+        "Release Plans",
+        "2023-07-16",
+        "2023-09-30",
+        fill_colour="#FFC000",
+        font_colour="black",
+    )
+
+    group = roadmap.add_group("Strategy", fill_colour="#ED7D31", font_colour="black")
+    task = group.add_task(
+        "Market Analysis",
+        "2023-02-01",
+        "2023-03-30",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    task.add_milestone(
+        "Competitor Review", "2023-03-30", fill_colour="#843C0C", font_colour="black"
+    )
+    task.add_parallel_task(
+        "SWOT", "2023-04-01", "2023-04-30", fill_colour="#ED7D31", font_colour="black"
+    )
+    task = group.add_task(
+        "Business Model",
+        "2023-04-01",
+        "2023-05-31",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    task.add_milestone(
+        "Price List (Draft)", "2023-06-01", fill_colour="#843C0C", font_colour="black"
+    )
+    parallel_task = task.add_parallel_task(
+        "Price Reseach",
+        "2023-06-01",
+        "2023-08-05",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+    parallel_task.add_milestone(
+        "Price List (Final)", "2023-07-28", fill_colour="#843C0C", font_colour="black"
+    )
+    group.add_task(
+        "Objectives",
+        "2023-06-20",
+        "2023-09-10",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+
+    group.add_task(
+        "Sales Trends Analysis",
+        "2023-08-15",
+        "2023-10-10",
+        fill_colour="#ED7D31",
+        font_colour="black",
+    )
+
+    group = roadmap.add_group(
+        "Service Development", fill_colour="#70AD47", font_colour="black"
+    )
+    task = group.add_task(
+        "Product Roadmap",
+        "2023-02-15",
+        "2023-03-31",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+    parallel_task = task.add_parallel_task(
+        "Development",
+        "2023-04-01",
+        "2023-08-30",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+    parallel_task.add_milestone(
+        "Alpha May 20", "2023-05-20", fill_colour="#385723", font_colour="black"
+    )
+    parallel_task.add_milestone(
+        "Private Beta Jul 02", "2023-07-02", fill_colour="#385723", font_colour="black"
+    )
+    parallel_task.add_milestone(
+        "Public Beta Aug 15", "2023-08-15", fill_colour="#385723", font_colour="black"
+    )
+
+    parallel_task = task.add_parallel_task(
+        "Release Candidate",
+        "2023-09-01",
+        "2023-10-15",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+
+    parallel_task = task.add_parallel_task(
+        "Release To Public",
+        "2023-10-16",
+        "2023-12-31",
+        fill_colour="#70AD47",
+        font_colour="black",
+    )
+
+    parallel_task.add_milestone(
+        "Go Live Dec 20", "2023-12-20", fill_colour="#385723", font_colour="black"
+    )
+
+    group = roadmap.add_group(
+        "Business Intelligence",
+        fill_colour="#4472C4",
+        font_colour="black",
+    )
+    task = group.add_task(
+        "BI Development",
+        "2023-04-15",
+        "2023-12-31",
+        fill_colour="#4472C4",
+        font_colour="black",
+    )
+
+    task.add_milestone(
+        "Service Dashboard", "2023-05-15", fill_colour="#162641", font_colour="black"
+    )
+
+    task.add_milestone(
+        "Real-Time Analytics", "2023-08-01", fill_colour="#162641", font_colour="black"
+    )
+
+    task.add_milestone(
+        "Sales Dashboard", "2023-12-15", fill_colour="#162641", font_colour="black"
+    )
+
+    roadmap.set_footer("Generated by Roadmapper")
+    roadmap.draw()
+
+    roadmap.save(output_file)
+
+    assert os.path.exists(output_file)
+
+
+def colour_theme_roadmap(
+    width: int = 1200,
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    file_name: str = "colour_theme_roadmap.svg",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    output_file = file_name
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        width,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=True,
+        painter_type="SVG",
+    )
+    roadmap.set_title("SAMPLE ROADMAP 2022/2023")
+    roadmap.set_subtitle("GodZone Corporation")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+    )
+
+    group = roadmap.add_group("Core Product Work Stream", text_alignment="left")
+    task = group.add_task("Base Functionality", "2022-11-01", "2023-10-31")
+    task.add_milestone("v.1.0", "2023-02-15")
+    task.add_milestone("v.1.1", "2023-08-01")
+    parellel_task = task.add_parallel_task("Enhancements", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("v.2.0", "2024-03-30")
+
+    task = group.add_task("Showcase #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("Showcase #2", "2023-06-01", "2023-08-07")
+
+    group = roadmap.add_group("Mobility Work Stream", text_alignment="left")
+    group.add_task("Mobile App Development", "2023-02-01", "2024-12-07")
+
+    roadmap.set_footer("Generated by Roadmapper")
+    roadmap.draw()
+
+    roadmap.save(output_file)
+
+    assert os.path.exists(output_file)
+
+
+def custom_colour_roadmap(
+    width: int = 1200,
+    height: int = 1000,
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-11-01",
+    number_of_items: int = 24,
+    show_marker: bool = False,
+    show_generic_dates: bool = False,
+    file_name: str = "custom_colour_roadmap.svg",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    output_file = file_name
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        width,
+        height,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=show_marker,
+        painter_type="SVG",
+    )
+    roadmap.set_title("My Demo Roadmap!!!")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+    )
+
+    group = roadmap.add_group("Core Product Work Stream")
+    task = group.add_task("Base Functionality", "2022-11-01", "2023-10-31")
+    task.add_milestone("v.1.0", "2023-02-15")
+    task.add_milestone("v.1.1", "2023-08-01")
+    parellel_task = task.add_parallel_task("Enhancements", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("v.2.0", "2024-03-30")
+
+    task = group.add_task("Showcase #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("Showcase #2", "2023-06-01", "2023-08-07")
+
+    group = roadmap.add_group("Mobility Work Stream")
+    group.add_task("Mobile App Development", "2023-02-01", "2024-12-07")
+
+    roadmap.set_footer("Generated by Roadmapper")
+    roadmap.draw()
+    roadmap.save(output_file)
+
+    assert os.path.exists(output_file)
+
+
+def banner_roadmap():
+    color_theme_roadmap("../../images/color-theme01.svg", "DEFAULT")
+    color_theme_roadmap("../../images/color-theme02.svg", "GREYWOOF")
+    color_theme_roadmap("../../images/color-theme03.svg", "ORANGEPEEL")
+    color_theme_roadmap("../../images/color-theme04.svg", "BLUEMOUNTAIN")
+    color_theme_roadmap("../../images/color-theme05.svg", "GREENTURTLE")
+
+
+def multilingual_roadmap():
+    en_NZ_roadmap("../../images/en_NZ-roadmap.svg", "../json/rainbow.json", "en_US")
+    zh_TW_with_locale_roadmap(
+        "../../images/zh_TW-roadmap.svg",
+        "../json/rainbow-unicode.json",
+        "../json/zh_TW_timeline_settings.json",
+    )
+    zh_TW_roadmap(
+        "../../images/zh_TW-timeline-roadmap.svg",
+        "../json/rainbow-unicode.json",
+    )
+    ja_JP_roadmap(
+        "../../images/ja_JP-roadmap.svg",
+        "../json/rainbow-unicode.json",
+        "../json/ja_JP_timeline_settings.json",
+    )
+    ko_KR_roadmap(
+        "../../images/ko-KR-roadmap.svg",
+        "../json/rainbow-unicode.json",
+        "../json/ko_KR_timeline_settings.json",
+    )
+
+
+### Wiki Images
+def home_roadmap():
+    if not os.path.exists("images"):
+        os.mkdir("images")
+
+    output_file = "../../images/my_roadmap.svg"
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    my_roadmap = Roadmap(width=500, height=400, painter_type="SVG")
+    my_roadmap.set_title("My Roadmap")
+    my_roadmap.set_timeline(
+        mode=TimelineMode.MONTHLY, start="2022-11-14", number_of_items=6
+    )
+
+    group = my_roadmap.add_group("Development")
+    group.add_task("Activity 1", "2022-12-01", "2023-02-10")
+    group.add_task("Activity 2", "2023-01-11", "2023-03-20")
+    group.add_task("Activity 3", "2023-01-21", "2023-06-30")
+
+    my_roadmap.set_footer("Generated by Roadmapper")
+    my_roadmap.draw()
+    my_roadmap.save(output_file)
+    assert os.path.exists(output_file)
+
+
+def readme_roadmap():
+    if not os.path.exists("images"):
+        os.mkdir("images")
+
+    output_file = "../../images/demo01.svg"
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(1200, 400, colour_theme="BLUEMOUNTAIN", painter_type="SVG")
+    roadmap.set_title("My Demo Roadmap")
+    roadmap.set_subtitle("Matariki Technologies Ltd")
+    roadmap.set_timeline(TimelineMode.MONTHLY, start="2023-01-01", number_of_items=12)
+    roadmap.add_logo(
+        "../../images/logo/matariki-tech-logo.png",
+        position="top-right",
+        width=50,
+        height=50,
+    )
+
+    group = roadmap.add_group("Core Product Work Stream")
+
+    task = group.add_task("Base Functionality", "2023-01-01", "2023-10-31")
+    task.add_milestone("v.1.0", "2023-02-15")
+    task.add_milestone("v.1.1", "2023-08-01")
+
+    parellel_task = task.add_parallel_task("Enhancements", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("v.2.0", "2024-03-30")
+
+    task = group.add_task("Showcase #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("Showcase #2", "2023-06-01", "2023-08-07")
+
+    roadmap.set_footer("Generated by Roadmapper")
+    roadmap.draw()
+    roadmap.save(output_file)
+    assert os.path.exists(output_file)
+
+
+def color_theme_roadmap(filename: str, colour_theme: str):
+    output_file = filename
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        600, 500, colour_theme=colour_theme, show_marker=True, painter_type="SVG"
+    )
+    roadmap.set_title("My Demo Roadmap")
+    roadmap.set_timeline(TimelineMode.QUARTERLY, start="2023-01-01", number_of_items=4)
+    roadmap.set_footer("Generated by Roadmapper")
+
+    group = roadmap.add_group("Workstream 1")
+    task = group.add_task("Task 1-A", "2023-01-01", "2023-04-30")
+    task.add_parallel_task("Task 2-B", "2023-05-15", "2023-08-30")
+    group.add_task("Task 3-C", "2023-04-01", "2023-06-30")
+
+    group = roadmap.add_group("Workstream 2")
+    group.add_task("Task 2-A", "2023-04-01", "2023-06-30")
+    group.add_task("Task 2-B", "2023-05-01", "2023-07-30")
+    group.add_task("Task 2-C", "2023-06-01", "2023-08-30")
+
+    roadmap.draw()
+    roadmap.save(filename)
+    assert os.path.exists(output_file)
+
+
+def en_NZ_roadmap(filename: str, colour_theme: str, locale_name: str):
+    output_file = filename
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        800, 700, colour_theme=colour_theme, show_marker=True, painter_type="SVG"
+    )
+    roadmap.set_title("Strategy Roadmap 2023")
+    roadmap.set_subtitle("Matariki Technologies Ltd")
+    roadmap.set_timeline(
+        TimelineMode.QUARTERLY,
+        start="2023-01-01",
+        number_of_items=4,
+        timeline_locale=locale_name,
+    )
+    roadmap.set_footer("Generated by Roadmapper")
+
+    group = roadmap.add_group("People Stream")
+    task = group.add_task("Develop Inclusion Strategy", "2023-01-01", "2023-04-30")
+    task.add_parallel_task(
+        "Promote diversity, equity, and inclusion", "2023-05-01", "2023-12-30"
+    )
+    group.add_task("Implement a sustainability programme", "2023-03-01", "2023-11-30")
+
+    group = roadmap.add_group("Process Stream")
+    group.add_task(
+        "Implement Business Improvement Programme", "2023-02-01", "2023-11-30"
+    )
+    task = group.add_task("Automate processes", "2023-07-01", "2023-12-30")
+    task.add_milestone("30% Automated ", "2023-8-01")
+    task.add_milestone("60% Automated ", "2023-12-01")
+
+    group = roadmap.add_group("Tool Stream")
+    group.add_task("Implement strategy", "2023-01-01", "2023-04-30")
+    group.add_task("Tools Selection", "2023-02-01", "2023-08-30")
+    task = group.add_task("Centralized Tool Administration", "2023-04-01", "2023-11-30")
+    task.add_milestone("Admin Centralised", "2023-12-01")
+
+    roadmap.draw()
+    roadmap.save(filename)
+    assert os.path.exists(output_file)
+
+
+def zh_TW_with_locale_roadmap(filename: str, colour_theme: str, locale_name: str):
+    output_file = filename
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        800, 700, colour_theme=colour_theme, show_marker=True, painter_type="SVG"
+    )
+    roadmap.set_title("戰略路線圖 2023")
+    roadmap.set_subtitle("瑪塔里奇太陽科技有限公司")
+    roadmap.set_timeline(
+        TimelineMode.QUARTERLY,
+        start="2023-01-01",
+        number_of_items=4,
+        timeline_locale=locale_name,
+    )
+    roadmap.set_footer("由 Roadmapper 生成")
+
+    group = roadmap.add_group("人員流程")
+    task = group.add_task("制定包容戰略", "2023-01-01", "2023-04-30")
+    task.add_parallel_task("促進多樣性、公平性和包容性", "2023-05-01", "2023-12-30")
+    group.add_task("實施可持續發展計劃", "2023-03-01", "2023-11-30")
+
+    group = roadmap.add_group("工作流程")
+    group.add_task("實施業務改進計劃", "2023-02-01", "2023-11-30")
+    task = group.add_task("自動化流程", "2023-07-01", "2023-12-30")
+    task.add_milestone("30%自動化 ", "2023-8-01")
+    task.add_milestone("60%自動化 ", "2023-12-01")
+
+    group = roadmap.add_group("工具流程")
+    group.add_task("實施工具選擇策略", "2023-01-01", "2023-04-30")
+    group.add_task("工具選擇", "2023-02-01", "2023-08-30")
+    task = group.add_task("集中工具管理", "2023-04-01", "2023-11-30")
+    task.add_milestone("系統集中完成", "2023-12-01")
+
+    roadmap.draw()
+    roadmap.save(filename)
+    assert os.path.exists(output_file)
+
+
+def zh_TW_roadmap(filename: str, colour_theme: str):
+    output_file = filename
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        800, 700, colour_theme=colour_theme, show_marker=True, painter_type="SVG"
+    )
+    roadmap.set_title("戰略路線圖 2023")
+    roadmap.set_subtitle("瑪塔里奇太陽科技有限公司")
+    roadmap.set_timeline(TimelineMode.QUARTERLY, start="2023-01-01", number_of_items=4)
+    roadmap.set_footer("由 Roadmapper 生成")
+
+    group = roadmap.add_group("人員流程")
+    task = group.add_task("制定包容戰略", "2023-01-01", "2023-04-30")
+    task.add_parallel_task("促進多樣性、公平性和包容性", "2023-05-01", "2023-12-30")
+    group.add_task("實施可持續發展計劃", "2023-03-01", "2023-11-30")
+
+    group = roadmap.add_group("工作流程")
+    group.add_task("實施業務改進計劃", "2023-02-01", "2023-11-30")
+    task = group.add_task("自動化流程", "2023-07-01", "2023-12-30")
+    task.add_milestone("30%自動化 ", "2023-8-01")
+    task.add_milestone("60%自動化 ", "2023-12-01")
+
+    group = roadmap.add_group("工具流程")
+    group.add_task("實施工具選擇策略", "2023-01-01", "2023-04-30")
+    group.add_task("工具選擇", "2023-02-01", "2023-08-30")
+    task = group.add_task("集中工具管理", "2023-04-01", "2023-11-30")
+    task.add_milestone("系統集中完成", "2023-12-01")
+
+    roadmap.draw()
+    roadmap.save(filename)
+    assert os.path.exists(output_file)
+
+
+def ja_JP_roadmap(filename: str, colour_theme: str, locale_name: str):
+    output_file = filename
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        800, 700, colour_theme=colour_theme, show_marker=True, painter_type="SVG"
+    )
+    roadmap.set_title("戦略的ロードマップ 2023")
+    roadmap.set_subtitle("マタリッチサンテクノロジー株式会社")
+    roadmap.set_timeline(
+        TimelineMode.QUARTERLY,
+        start="2023-01-01",
+        number_of_items=4,
+        timeline_locale=locale_name,
+    )
+    roadmap.set_footer("ロードマッパーによって生成")
+
+    group = roadmap.add_group("人事プロセス")
+    task = group.add_task("インクルージョン戦略を策定する", "2023-01-01", "2023-04-30")
+    task.add_parallel_task("多様性、公平性、包括性の促進", "2023-05-01", "2023-12-30")
+    group.add_task("持続可能な開発計画の実施", "2023-03-01", "2023-11-30")
+
+    group = roadmap.add_group("作業過程")
+    group.add_task("業務改善計画の実施", "2023-02-01", "2023-11-30")
+    task = group.add_task("自動化されたプロセス", "2023-07-01", "2023-12-30")
+    task.add_milestone("30%自動化", "2023-8-01")
+    task.add_milestone("60%自動化", "2023-12-01")
+
+    group = roadmap.add_group("ツールフロー")
+    group.add_task("ツール選択戦略を実装する", "2023-01-01", "2023-04-30")
+    group.add_task("ツールの選択", "2023-02-01", "2023-08-30")
+    task = group.add_task("集中ツール管理", "2023-04-01", "2023-11-30")
+    task.add_milestone("システムは集中型", "2023-12-01")
+
+    roadmap.draw()
+    roadmap.save(filename)
+    assert os.path.exists(output_file)
+
+
+def ko_KR_roadmap(filename: str, colour_theme: str, locale_name: str):
+    output_file = filename
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        800, 700, colour_theme=colour_theme, show_marker=True, painter_type="SVG"
+    )
+    roadmap.set_title("전략 로드맵 2023")
+    roadmap.set_subtitle("마타리키 테크놀로지스")
+    roadmap.set_timeline(
+        TimelineMode.QUARTERLY,
+        start="2023-01-01",
+        number_of_items=4,
+        timeline_locale=locale_name,
+    )
+    roadmap.set_footer("로드매퍼에서 생성")
+
+    group = roadmap.add_group("인사 프로세스")
+    task = group.add_task("포함 전략을 수립", "2023-01-01", "2023-04-30")
+    task.add_parallel_task("다양성, 공정성, 포괄성 촉진", "2023-05-01", "2023-12-30")
+    group.add_task("지속 가능한 개발 계획 실시", "2023-03-01", "2023-11-30")
+
+    group = roadmap.add_group("작업 과정")
+    group.add_task("업무 개선 계획 실시", "2023-02-01", "2023-11-30")
+    task = group.add_task("자동화된 프로세스", "2023-07-01", "2023-12-30")
+    task.add_milestone("30% 자동화", "2023-8-01")
+    task.add_milestone("60% 자동화", "2023-12-01")
+
+    group = roadmap.add_group("공구 흐름")
+    group.add_task("도구 선택 전략 구현", "2023-01-01", "2023-04-30")
+    group.add_task("도구 선택", "2023-02-01", "2023-08-30")
+    task = group.add_task("중앙 집중식 도구 관리", "2023-04-01", "2023-11-30")
+    task.add_milestone("시스템은 중앙 집중식", "2023-12-01")
+
+    roadmap.draw()
+    roadmap.save(filename)
+    assert os.path.exists(output_file)
+
+
+### Test case functions ###
+
+
+def test_sample_case1():
+    if not os.path.exists("../../images/test"):
+        os.mkdir("../../images/test")
+    colour_theme_demo(
+        width=2500,
+        file_name="../../images/test/test-ORANGEPEEL-weekly.svg",
+        colour_theme="ORANGEPEEL",
+        timelinemode=TimelineMode.WEEKLY,
+        number_of_items=52,
+        start_date="2023-01-01",
+    )
+
+
+def test_sample_case2():
+    if not os.path.exists("../../images/test"):
+        os.mkdir("../../images/test")
+    colour_theme_demo(
+        file_name="../../images/test/test-ORANGEPEEL-monthly.svg",
+        colour_theme="ORANGEPEEL",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+    )
+
+
+def test_sample_case3():
+    if not os.path.exists("../../images/test"):
+        os.mkdir("../../images/test")
+    colour_theme_demo(
+        file_name="../../images/test/test-ORANGEPEEL-quarter.svg",
+        colour_theme="ORANGEPEEL",
+        timelinemode=TimelineMode.QUARTERLY,
+        number_of_items=4,
+        start_date="2023-01-01",
+    )
+
+
+def test_sample_unicase1():
+    if not os.path.exists("../../images/test"):
+        os.mkdir("../../images/test")
+    unicode_demo(
+        file_name="../../images/test/test-unicode-monthly.svg",
+        # colour_theme="ORANGEPEEL",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+    )
+    assert True
+
+
+def test_draw_anatomy():
+    if not os.path.exists("images"):
+        os.mkdir("images")
+
+    output_file = "../../images/roadmapper-anatomy-base.svg"
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        1200, 380, colour_theme="BLUEMOUNTAIN", show_marker=True, painter_type="SVG"
+    )
+    roadmap.set_title("Product Roadmap")
+    roadmap.set_subtitle("Matariki Tech Ltd")
+    roadmap.set_timeline(TimelineMode.MONTHLY, start="2023-01-01", number_of_items=9)
+    roadmap.set_footer("Generated by Roadmapper")
+
+    group = roadmap.add_group("Workstream 1")
+    task = group.add_task("Task 1-A", "2023-01-01", "2023-05-15")
+    task.add_parallel_task("Task 2-B", "2023-05-16", "2023-08-30")
+    task = group.add_task("Task 3-C", "2023-04-01", "2023-06-30")
+    task.add_milestone("Milestone 1", "2023-06-30")
+
+    roadmap.draw()
+
+    roadmap.save(output_file)
+    assert os.path.exists(output_file)
+
+
+def test_draw_banner_theme():
+    if not os.path.exists("images"):
+        os.mkdir("images")
+
+    output_file = "../../images/theme-demo01.svg"
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(
+        600, 380, colour_theme="BLUEMOUNTAIN", show_marker=True, painter_type="SVG"
+    )
+    roadmap.set_title("My Demo Roadmap")
+    roadmap.set_timeline(TimelineMode.QUARTERLY, start="2023-01-01", number_of_items=4)
+    roadmap.set_footer("Generated by Roadmapper")
+
+    group = roadmap.add_group("Workstream 1")
+    task = group.add_task("Task 1-A", "2023-01-01", "2023-04-30")
+    task.add_parallel_task("Task 2-B", "2023-05-15", "2023-08-30")
+    group.add_task("Task 3-C", "2023-04-01", "2023-06-30")
+
+    group = roadmap.add_group("Workstream 2")
+    group.add_task("Task 2-A", "2023-04-01", "2023-06-30")
+    group.add_task("Task 2-B", "2023-05-01", "2023-07-30")
+    group.add_task("Task 2-C", "2023-06-01", "2023-08-30")
+
+    roadmap.draw()
+    roadmap.save(output_file)
+    assert os.path.exists(output_file)
+
+
+def test_draw_banner():
+    if not os.path.exists("images"):
+        os.mkdir("images")
+
+    output_file = "../../images/demo01.svg"
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    roadmap = Roadmap(600, 500, show_marker=False, auto_height=True, painter_type="SVG")
+    roadmap.set_title("My Demo Roadmap")
+    roadmap.set_timeline(
+        TimelineMode.QUARTERLY,
+        start="2023-01-01",
+        number_of_items=3,
+        year_fill_colour="#7CC1AC",
+        year_font_colour="black",
+        item_fill_colour="#7CC1AC",
+        item_font_colour="black",
+    )
+    roadmap.set_footer("Generated by Roadmapper")
+    group = roadmap.add_group(
+        "Workstream 1", font_colour="black", fill_colour="#C38D9D", font_size=12
+    )
+    task = group.add_task(
+        "Task 1-A",
+        "2023-01-01",
+        "2023-04-30",
+        font_colour="black",
+        fill_colour="#D7B3BD",
+    )
+    task.add_parallel_task(
+        "Task 2-B",
+        "2023-05-15",
+        "2023-08-30",
+        font_colour="black",
+        fill_colour="#D7B3BD",
+    )
+    group.add_task(
+        "Task 3-C",
+        "2023-04-01",
+        "2023-06-30",
+        font_colour="black",
+        fill_colour="#D7B3BD",
+    )
+
+    group = roadmap.add_group(
+        "Workstream 2", font_colour="black", fill_colour="#E8A87C", font_size=12
+    )
+    group.add_task(
+        "Task 2-A",
+        "2023-04-01",
+        "2023-06-30",
+        font_colour="black",
+        fill_colour="#EFC5A7",
+    )
+    group.add_task(
+        "Task 2-B",
+        "2023-05-01",
+        "2023-07-30",
+        font_colour="black",
+        fill_colour="#EFC5A7",
+    )
+    group.add_task(
+        "Task 2-C",
+        "2023-06-01",
+        "2023-08-30",
+        font_colour="black",
+        fill_colour="#EFC5A7",
+    )
+
+    roadmap.draw()
+    roadmap.save(output_file)
+    assert os.path.exists(output_file)
+
+
+def test_gallery_images():
+    ### Sample Roadmap ###
+    sample_roadmap(
+        width=1400,
+        file_name="../../images/gallery/gallery-sample-01.svg",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+    )
+
+    ### Colour Theme Roadmap ###
+
+    colour_theme_roadmap(
+        file_name="../../images/gallery/gallery-DEFAULT-monthly.svg",
+        # colour_theme="ORANGEPEEL",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+    )
+
+    colour_theme_roadmap(
+        file_name="../../images/gallery/gallery-ORANGEPEEL-monthly.svg",
+        colour_theme="ORANGEPEEL",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+    )
+
+    colour_theme_roadmap(
+        file_name="../../images/gallery/gallery-BLUEMOUNTAIN-monthly.svg",
+        colour_theme="BLUEMOUNTAIN",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+    )
+
+    colour_theme_roadmap(
+        file_name="../../images/gallery/gallery-GREENTURTLE-monthly.svg",
+        colour_theme="GREENTURTLE",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+    )
+
+    colour_theme_roadmap(
+        file_name="../../images/gallery/gallery-GREYWOOF-monthly.svg",
+        colour_theme="GREYWOOF",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+    )
+
+    ### Marker Roadmap ###
+    custom_colour_roadmap(
+        width=1200,
+        file_name="../../images/gallery/gallery-marker-monthly.svg",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2022-11-01",
+        show_marker=True,
+        show_generic_dates=False,
+    )
+
+    ### WEEKLY Timeline Roadmap ###
+    colour_theme_roadmap(
+        width=2400,
+        file_name="../../images/gallery/gallery-DEFAULT-weekly.svg",
+        colour_theme="DEFAULT",
+        timelinemode=TimelineMode.WEEKLY,
+        number_of_items=52,
+        start_date="2023-01-01",
+        show_generic_dates=False,
+    )
+
+    ### QUARTERLY Timeline Roadmap ###
+    colour_theme_roadmap(
+        width=1400,
+        file_name="../../images/gallery/gallery-DEFAULT-quarterly.svg",
+        colour_theme="DEFAULT",
+        timelinemode=TimelineMode.QUARTERLY,
+        number_of_items=6,
+        start_date="2023-01-01",
+        show_generic_dates=False,
+    )
+
+    ### HALF-YEARLY Timeline Roadmap ###
+    colour_theme_roadmap(
+        width=1400,
+        file_name="../../images/gallery/gallery-DEFAULT-halfyearly.svg",
+        colour_theme="DEFAULT",
+        timelinemode=TimelineMode.HALF_YEARLY,
+        number_of_items=4,
+        start_date="2023-01-01",
+        show_generic_dates=False,
+    )
+
+    ### YEARLY Timeline Roadmap ###
+    colour_theme_roadmap(
+        width=1400,
+        file_name="../../images/gallery/gallery-DEFAULT-yearly.svg",
+        colour_theme="DEFAULT",
+        timelinemode=TimelineMode.YEARLY,
+        number_of_items=2,
+        start_date="2023-01-01",
+        show_generic_dates=False,
+    )
+
+    ### Generic Dates Roadmap ###
+    colour_theme_roadmap(
+        width=1400,
+        file_name="../../images/gallery/gallery-DEFAULT-generic-monthly.svg",
+        colour_theme="DEFAULT",
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=12,
+        start_date="2023-01-01",
+        show_generic_dates=True,
+    )
+
+
+def test_draw_wiki_roadmap():
+    readme_roadmap()
+    home_roadmap()
+    banner_roadmap()
+    multilingual_roadmap()
+
+
+def test_with_context_manager():
+    with Roadmap(
+        1200,
+        500,
+        show_marker=False,
+        auto_height=True,
+        colour_theme="ORANGEPEEL",
+        painter_type="SVG",
+    ) as my_roadmap:
+        my_roadmap.set_title("Context Manager Test Roadmap")
+        my_roadmap.set_timeline(TimelineMode.MONTHLY, start="2023-01-01")
+        with my_roadmap.add_group("Workstream 1") as group1:
+            with group1.add_task(
+                "Task 1-A",
+                "2023-01-01",
+                "2023-04-30",
+            ) as task1:
+                with task1.add_parallel_task(
+                    "Task 2-B",
+                    "2023-05-15",
+                    "2023-08-30",
+                ) as parallel_task1:
+                    parallel_task1.add_milestone("Milestone 2", "2023-08-10")
+                task1.add_milestone(
+                    "Milestone 1",
+                    "2023-04-01",
+                )
+        my_roadmap.draw()
+        my_roadmap.save("../../images/with_context_manager.svg")
+
+
+def test_black_blackground():
+    with Roadmap(
+        1200,
+        500,
+        show_marker=False,
+        auto_height=True,
+        colour_theme="ORANGEPEEL",
+        painter_type="SVG",
+    ) as my_roadmap:
+        my_roadmap.set_background_colour("black")
+        my_roadmap.set_title("Black Background Test Roadmap")
+        my_roadmap.set_timeline(TimelineMode.MONTHLY, start="2023-01-01")
+        with my_roadmap.add_group("Workstream 1") as group1:
+            with group1.add_task(
+                "Task 1-A",
+                "2023-01-01",
+                "2023-04-30",
+            ) as task1:
+                with task1.add_parallel_task(
+                    "Task 2-B",
+                    "2023-05-15",
+                    "2023-08-30",
+                ) as parallel_task1:
+                    parallel_task1.add_milestone("Milestone 2", "2023-08-10")
+                task1.add_milestone(
+                    "Milestone 1",
+                    "2023-04-01",
+                )
+        my_roadmap.draw()
+        my_roadmap.save("../../images/black_roadmap.svg")
+
+
+def test_transparent_blackground():
+    with Roadmap(
+        1200,
+        500,
+        show_marker=False,
+        auto_height=True,
+        colour_theme="ORANGEPEEL",
+        painter_type="SVG",
+    ) as my_roadmap:
+        my_roadmap.set_background_colour("transparent")
+        my_roadmap.set_title("Transparent Background Test Roadmap")
+        my_roadmap.set_timeline(TimelineMode.MONTHLY, start="2023-01-01")
+        with my_roadmap.add_group("Workstream 1") as group1:
+            with group1.add_task(
+                "Task 1-A",
+                "2023-01-01",
+                "2023-04-30",
+            ) as task1:
+                with task1.add_parallel_task(
+                    "Task 2-B",
+                    "2023-05-15",
+                    "2023-08-30",
+                ) as parallel_task1:
+                    parallel_task1.add_milestone("Milestone 2", "2023-08-10")
+                task1.add_milestone(
+                    "Milestone 1",
+                    "2023-04-01",
+                )
+        my_roadmap.draw()
+        my_roadmap.save("../../images/transparent_roadmap.svg")
diff --git a/src/tests/test_painter.py b/src/tests/test_painter.py
index 71eb354..e86e4ab 100644
--- a/src/tests/test_painter.py
+++ b/src/tests/test_painter.py
@@ -1,15 +1,15 @@
-from src.roadmapper.painter import Painter
+from src.roadmapper.painter import PNGPainter
 
 
 class TestPainter:
     def test_init(self):
-        painter = Painter(800, 600)
+        painter = PNGPainter(800, 600)
         assert painter.width == 800
         assert painter.height == 600
 
     # Tests that the colour theme is correctly set and that subsequent shapes and text are drawn with the correct colours.
     def test_set_colour_theme(self):
-        painter = Painter(500, 500)
+        painter = PNGPainter(500, 500)
         painter.set_colour_theme("ORANGEPEEL")
         assert painter.title_font == "Arial"
         assert painter.title_font_size == 26
@@ -48,7 +48,7 @@ def test_set_colour_theme(self):
 
     # Tests that the get_text_dimension() method correctly calculates the dimensions of text for different fonts and font sizes.
     def test_get_text_dimension(self):
-        painter = Painter(100, 100)
+        painter = PNGPainter(100, 100)
         text = "Hello World"
         font = "Arial"
         font_size = 12
@@ -57,9 +57,9 @@ def test_get_text_dimension(self):
         assert height > 0
 
     def test_get_text_dimension2(self):
-        painter = Painter(800, 600)
+        painter = PNGPainter(800, 600)
         text_width, text_height = painter.get_text_dimension("Hello World", "Arial", 12)
         print(f"text_width: {text_width}, text_height: {text_height}")
         # Linux returns different text width
-        assert (text_width == 62) or (text_width == 64)
+        assert text_width in [62, 64]
         assert text_height == 11
diff --git a/src/tests/test_roadmapper.py b/src/tests/test_roadmapper.py
index 9049111..4cf8206 100644
--- a/src/tests/test_roadmapper.py
+++ b/src/tests/test_roadmapper.py
@@ -1,5 +1,6 @@
 import os
 from datetime import datetime
+
 from src.roadmapper.roadmap import Roadmap
 from src.roadmapper.timelinemode import TimelineMode
 import inspect
@@ -373,3 +374,14 @@ def test_dev():
     )
 
     assert os.path.exists(output_file)
+
+
+
+# check if calling from main
+if __name__ == "__main__":
+    output_file = "../../images/test/colour_theme_demo_without_locale.png"
+    colour_theme_demo_without_locale(
+        file_name=output_file,
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=14,
+    )
\ No newline at end of file
diff --git a/src/tests/test_roadmapper_svg.py b/src/tests/test_roadmapper_svg.py
new file mode 100644
index 0000000..73bf3c9
--- /dev/null
+++ b/src/tests/test_roadmapper_svg.py
@@ -0,0 +1,410 @@
+import os
+from datetime import datetime
+
+from src.roadmapper.roadmap import Roadmap
+from src.roadmapper.timelinemode import TimelineMode
+import inspect
+
+
+def colour_theme_demo(
+    mode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    file_name: str = "demo01.svg",
+    colour_theme: str = "DEFAULT",
+    locale_name: str = "en_US",
+) -> None:
+    roadmap = Roadmap(
+        1200,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=True,
+        painter_type="svg",
+    )
+    roadmap.set_title("SAMPLE ROADMAP 2022/2023")
+    roadmap.set_subtitle("ABC Corporation")
+    roadmap.set_timeline(
+        mode,
+        start_date,
+        number_of_items,
+        show_generic_dates=show_generic_dates,
+        timeline_locale=locale_name,
+    )
+
+    group = roadmap.add_group("Core Product Work Stream", text_alignment="left")
+    task = group.add_task("Base Functionality", "2022-11-01", "2023-10-31")
+    task.add_milestone("v.1.0", "2023-02-15")
+    task.add_milestone("v.1.1", "2023-08-01")
+    parellel_task = task.add_parallel_task("Enhancements", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("v.2.0", "2024-03-30")
+
+    task = group.add_task("Showcase #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("Showcase #2", "2023-06-01", "2023-08-07")
+
+    group = roadmap.add_group("Mobility Work Stream", text_alignment="left")
+    group.add_task("Mobile App Development", "2023-02-01", "2024-12-07")
+
+    roadmap.set_footer("Updated on " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+
+    roadmap.save(file_name)
+
+
+def colour_theme_demo_without_locale(
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    file_name: str = "demo01.svg",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    roadmap = Roadmap(
+        1200,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=True,
+        painter_type="svg",
+    )
+    roadmap.set_title("SAMPLE ROADMAP 2022/2023")
+    roadmap.set_subtitle("ABC Corporation")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+    )
+
+    group = roadmap.add_group("Core Product Work Stream", text_alignment="left")
+    task = group.add_task("Base Functionality", "2022-11-01", "2023-10-31")
+    task.add_milestone("v.1.0", "2023-02-15")
+    task.add_milestone("v.1.1", "2023-08-01")
+    parellel_task = task.add_parallel_task("Enhancements", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("v.2.0", "2024-03-30")
+
+    task = group.add_task("Showcase #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("Showcase #2", "2023-06-01", "2023-08-07")
+
+    group = roadmap.add_group("Mobility Work Stream", text_alignment="left")
+    group.add_task("Mobile App Development", "2023-02-01", "2024-12-07")
+
+    roadmap.set_footer("Updated on " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+
+    roadmap.save(file_name)
+
+
+def chinese_theme_demo(
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    show_first_day_of_week=False,
+    file_name: str = "demo01.svg",
+    colour_theme: str = "DEFAULT",
+    locale_name: str = "en_US",
+) -> None:
+    roadmap = Roadmap(
+        1200,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=True,
+        painter_type="svg",
+    )
+    roadmap.set_title("示例路線圖 2022/2023")
+    roadmap.set_subtitle("甲乙丙有限公司")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+        timeline_locale=locale_name,
+        show_first_day_of_week=show_first_day_of_week,
+    )
+
+    group = roadmap.add_group("核心產品工作流程", text_alignment="left")
+    task = group.add_task("基本功能", "2022-11-01", "2023-10-31")
+    task.add_milestone("版本 1.0", "2023-02-15")
+    task.add_milestone("版本 1.1", "2023-08-01")
+    parellel_task = task.add_parallel_task("增強功能", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("版本 2.0", "2024-01-30")
+
+    task = group.add_task("陳列 #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("陳列 #2", "2023-06-01", "2023-08-07")
+
+    group = roadmap.add_group("移動工作流程", text_alignment="left")
+    group.add_task("移動應用程序開發", "2023-02-01", "2024-12-07")
+
+    roadmap.set_footer("更新於 " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+
+    roadmap.save(file_name)
+
+
+def japanese_theme_demo(
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 12,
+    show_generic_dates: bool = False,
+    show_first_day_of_week=False,
+    file_name: str = "demo01.svg",
+    colour_theme: str = "DEFAULT",
+    locale_name: str = "en_US",
+) -> None:
+    roadmap = Roadmap(
+        1200,
+        1000,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=True,
+        painter_type="svg",
+    )
+    roadmap.set_title("ロードマップの例 2022/2023")
+    roadmap.set_subtitle("株式会社エー・ビー・シー")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+        timeline_locale=locale_name,
+        show_first_day_of_week=show_first_day_of_week,
+    )
+
+    group = roadmap.add_group("コア製品のワークフロー", text_alignment="left")
+    task = group.add_task("基本的なスキル", "2022-11-01", "2023-10-31")
+    task.add_milestone("バージョン 1.0", "2023-02-15")
+    task.add_milestone("バージョン 1.1", "2023-08-01")
+    parellel_task = task.add_parallel_task("強化", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("バージョン 2.0", "2024-01-30")
+
+    task = group.add_task("ショーケース #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("ショーケース #2", "2023-06-01", "2023-08-07")
+
+    group = roadmap.add_group("モバイル ワークフロー", text_alignment="left")
+    group.add_task("モバイルアプリ開発", "2023-02-01", "2024-12-07")
+
+    roadmap.set_footer("更新日 " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+
+    roadmap.save(file_name)
+
+
+def generic_date_test(
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-11-01",
+    number_of_items: int = 24,
+    show_generic_dates: bool = False,
+    show_first_day_of_week: bool = False,
+    file_name: str = "demo01.svg",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    roadmap = Roadmap(
+        4400, 2000, colour_theme=colour_theme, show_marker=True, painter_type="svg"
+    )
+    roadmap.set_title("My Demo Roadmap!!!")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=show_generic_dates,
+        show_first_day_of_week=show_first_day_of_week,
+    )
+
+    group = roadmap.add_group("Core Product Work Stream")
+    task = group.add_task("Base Functionality", "2022-11-01", "2023-10-31")
+    task.add_milestone("v.1.0", "2023-02-15")
+    task.add_milestone("v.1.1", "2023-08-01")
+    parellel_task = task.add_parallel_task("Enhancements", "2023-11-15", "2024-03-31")
+    parellel_task.add_milestone("v.2.0", "2024-03-30")
+
+    task = group.add_task("Showcase #1", "2023-03-01", "2023-05-07")
+    task.add_parallel_task("Showcase #2", "2023-06-01", "2023-08-07")
+
+    group = roadmap.add_group("Mobility Work Stream")
+    group.add_task("Mobile App Development", "2023-02-01", "2024-12-07")
+
+    roadmap.set_footer("Generated by Roadmapper")
+    roadmap.draw()
+    roadmap.save(file_name)
+
+
+def parallel_task_demo(
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2022-12-01",
+    number_of_items: int = 14,
+    file_name: str = "demo01.svg",
+    colour_theme: str = "DEFAULT",
+) -> None:
+    roadmap = Roadmap(
+        1200,
+        612,
+        auto_height=False,
+        colour_theme=colour_theme,
+        show_marker=True,
+        painter_type="svg",
+    )
+    roadmap.set_title("ROADMAP EXAMPLE 2022/2023")
+    roadmap.set_subtitle("This is a subtitle")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=False,
+    )
+
+    group = roadmap.add_group("Core Product Work Stream")
+
+    task = group.add_task("Base Functionality", "2022-11-01", "2023-01-31")
+    parellel_task = task.add_parallel_task("Enhancements", "2023-02-15", "2024-03-31")
+    parellel_task.add_milestone("v.2.0", "2023-04-30")
+
+    task = group.add_task("Showcase #1", "2023-01-01", "2023-01-31")
+    parellel_task = task.add_parallel_task("Showcase #2", "2023-02-02", "2023-03-15")
+    parellel_task.add_milestone("v.2.0", "2023-04-15")
+
+    # group = roadmap.add_group("Core Product Work Stream 2")
+    # task = group.add_task("Base Functionality", "2022-11-01", "2023-01-31")
+
+    roadmap.set_footer("Author: CS Goh " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+    roadmap.save(file_name)
+
+
+def singleton_demo(
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2023-01-01",
+    number_of_items: int = 2,
+    file_name: str = "demo01.svg",
+    colour_theme: str = "BLUEMOUNTAIN",
+) -> None:
+    roadmap = Roadmap(
+        600,
+        612,
+        auto_height=True,
+        colour_theme=colour_theme,
+        show_marker=False,
+        painter_type="svg",
+    )
+    roadmap.set_title("ROADMAP EXAMPLE")
+    # roadmap.set_subtitle("This is a subtitle")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=False,
+    )
+
+    group = roadmap.add_group("Showcase Task Styles")
+
+    task = group.add_task("Rectangle Style", "2023-01-15", "2023-02-15")
+    task = group.add_task("Rounded Style", "2023-01-15", "2023-02-15", style="rounded")
+    task = group.add_task(
+        "Arrowhead Style", "2023-01-15", "2023-02-15", style="arrowhead"
+    )
+
+    # roadmap.set_footer("Author: CS Goh " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+    roadmap.save(file_name)
+
+
+def logo_demo(
+    timelinemode: TimelineMode = TimelineMode.MONTHLY,
+    start_date: str = "2023-01-01",
+    number_of_items: int = 2,
+    file_name: str = "demo01.svg",
+    colour_theme: str = "BLUEMOUNTAIN",
+    auto_height: bool = True,
+    logo_position: str = "top-left",
+) -> None:
+    file_name = "T_" + file_name
+    roadmap = Roadmap(
+        800,
+        612,
+        auto_height=auto_height,
+        colour_theme=colour_theme,
+        show_marker=False,
+        painter_type="svg",
+    )
+    frameinfo = inspect.getframeinfo(inspect.currentframe())
+    title = f"{frameinfo.function}(), theme={colour_theme}, mode={timelinemode}"
+
+    roadmap.add_logo("../../images/logo/matariki-tech-logo.png", logo_position, 50, 50)
+    roadmap.set_title(title)
+    roadmap.set_subtitle("This is a subtitle")
+    roadmap.set_timeline(
+        timelinemode,
+        start=start_date,
+        number_of_items=number_of_items,
+        show_generic_dates=False,
+    )
+
+    group = roadmap.add_group("Showcase Task Styles")
+
+    text = "I love Python"
+    # emojized_text = emojize(text)
+    task = group.add_task(text, "2023-01-15", "2023-02-15")
+
+    roadmap.set_footer("Author: CS Goh " + datetime.now().strftime("%Y-%m-%d"))
+    roadmap.draw()
+    roadmap.save(file_name)
+
+
+def test_dev():
+    if not os.path.exists("images"):
+        os.mkdir("images")
+
+    if not os.path.exists("../../images/test"):
+        os.mkdir("../../images/test")
+
+    output_file = "../../images/test/colour_theme_demo_without_locale.svg"
+    # if file exist, then delete it first
+    if os.path.exists(output_file):
+        os.remove(output_file)
+
+    colour_theme_demo_without_locale(
+        file_name=output_file,
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=14,
+    )
+
+    assert os.path.exists(output_file)
+
+    output_file = "../../images/test/demo-my-colour-chinese.svg"
+    chinese_theme_demo(
+        file_name=output_file,
+        colour_theme="../json/chinese.json",
+        timelinemode=TimelineMode.WEEKLY,
+        start_date="2023-01-01",
+        number_of_items=14,
+        locale_name="../json/zh_TW_timeline_settings.json",
+        show_generic_dates=False,
+        show_first_day_of_week=True,
+    )
+    assert os.path.exists(output_file)
+
+    output_file = "../../images/test/demo-my-colour-japanese.svg"
+    japanese_theme_demo(
+        file_name=output_file,
+        colour_theme="../json/chinese.json",
+        timelinemode=TimelineMode.MONTHLY,
+        start_date="2023-01-01",
+        number_of_items=14,
+        locale_name="../json/ja_JP_timeline_settings.json",
+        show_generic_dates=False,
+        show_first_day_of_week=True,
+    )
+
+    assert os.path.exists(output_file)
+
+
+# check if calling from main
+if __name__ == "__main__":
+    output_file = "../../images/test/colour_theme_demo_without_locale.svg"
+    colour_theme_demo_without_locale(
+        file_name=output_file,
+        timelinemode=TimelineMode.MONTHLY,
+        number_of_items=14,
+    )