diff --git a/src/images/backgroundsharkycoin.png b/src/images/backgroundsharkycoin.png
new file mode 100644
index 0000000..48a2362
--- /dev/null
+++ b/src/images/backgroundsharkycoin.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6aa92476b2064576b1db1a13f14e4cef1016010e4c9f4d9af62a67ba9af76300
+size 41493
diff --git a/src/images/sharky_vector_svg.svg b/src/images/sharky_vector_svg.svg
new file mode 100644
index 0000000..c864050
--- /dev/null
+++ b/src/images/sharky_vector_svg.svg
@@ -0,0 +1,193 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 980.7 549.1" style="enable-background:new 0 0 980.7 549.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0B0B0B;}
+	.st1{fill:#7F7F7F;}
+	.st2{fill:#F9F9F9;}
+</style>
+<g id="XMLID_1_">
+	<path id="XMLID_138_" class="st0" d="M246.1,481.3c2.9,8.5,6.7,16.7,7.7,25.7c0.2,2,0.2,4-0.2,5.9c-1.5,8.1-6.5,10.7-13.7,6.9
+		c-8.2-4.3-13.9-11.3-19.6-18.3c-1.1-1.4-2.3-2.7-4.3-5.1c0.4,5.1,0.6,8.9,1,12.8c0.3,3.3,0.5,6.6-0.2,9.9
+		c-1.4,6.8-5.4,9.5-12.3,8.1c-6.7-1.4-12.4-5-17.8-8.9c-10.2-7.2-20.2-14.8-28-24.7c-1.9-2.4-3.6-1.5-5.7-0.9
+		c-27.4,7.7-55.1,14.1-83.4,17.4c-13.9,1.6-27.9,2.2-41.6-2.1c-14.7-4.7-22.3-15-23-30.3c-0.8-16.5,3.5-31.6,11.8-45.7
+		c14.6-24.8,34.1-45.5,54.6-65.4c6-5.8,6.2-5.7,0.3-11.5c-1.1-1.1-2.1-2.1-3.1-3.2c-6.2-7.2-4.5-17.4,4-21.9
+		c2.4-1.3,4.9-1.5,7.6-0.1c5.6,2.9,10.3,6.9,14,11.8c2.1,2.8,3.2,2.3,5.7,0.4c24.3-18.1,48-37.1,74.7-51.7c4.1-2.2,8.3-4.2,12.5-6.2
+		c1.6-0.8,2.8-1.3,1.7-3.6c-8.8-18.2-7-36.9-1.7-55.5c6-21.1,17.6-39.4,30.5-56.8c6-8,14.1-13.7,22.5-18.8
+		c21.7-13,41.8-10.2,59.4,8.6c3.1,3.3,4.7,3.3,7.5-0.1c3.4-4.1,7.6-7.4,11.9-10.6c16.6-12.3,34-10.7,51.3-2.1
+		c10.7,5.4,19,14,26.7,23.1c3.4,4,11.6,3.6,14.3-1c4.5-7.6,8.7-15.3,13.4-23.5c-3.9,0.3-7-0.5-9.2-3.7c-1.9-2.9-2.7-6-2.9-9.4
+		c-0.8-15.1-8.1-25.7-22.1-31.6c-4-1.7-8.1-1.6-12.3-1.1c-2.1,0.3-4.3,0.4-6.5,0.7c-7.2,0.8-14-6.4-11.5-14.5
+		c3.3-10.3,14.4-21,24.8-21c10.9,0,19.4,5.6,26,13.9c9.4,11.9,13,26,15.5,40.6c1.1,6.5,1.8,13.1,1.8,20c4.2-6.3,8.4-12.6,12.5-19
+		c23.4-36.2,52.8-66.4,90-88.5c20.9-12.4,44.2-18.1,67.8-22.5C614.1,5,629.4,5,644.7,9.1c0.6,0.2,1.2,0.5,2.3,0.9
+		c-3.6,6.9-8.3,12.8-12.9,18.8c-15.3,20.2-26.5,42.4-34,66.8c-10.6,34.4-10.7,68.4,0.2,102.6c0.2,0.5,0.4,1,0.4,1.4
+		c0.9,12.3,8.3,19.1,18.7,25c33.7,19.4,63.8,44.1,96,65.7c17.6,11.8,36.2,21.7,56.1,29.3c23.7,9,45.8,8.3,68.3-5
+		c39.3-23.2,80.5-42.7,121.8-62c4.7-2.2,9.7-3.3,15.3-4c-4.8,4.3-9.3,9-14.3,13c-27.7,22-49.2,49-66,80c-6.6,12.1-13.2,24.3-20.4,36
+		c-12.2,19.8-9.6,38.7,1.7,57.9c12.2,20.7,28.2,38.3,44.3,55.8c14.7,16.1,29.7,32.1,39.7,51.7c0.3,0.5,1,1,0.3,2.1
+		c-10.9-0.5-21.6-3.4-31.2-8.6c-37-20.4-72.1-43.7-101.6-74.3c-5.3-5.5-9.6-11.9-14.9-17.5c-15.6-16.4-34.5-19.8-56.7-10.7
+		c-3.2,1.3-6.3,3.3-9.6,4.2c-6.2,1.6-7.1,5.6-6.3,11.1c1.1,7.7,1.1,15.6,0.8,23.4c-0.2,5.6-2.4,10-7.8,12.4
+		c-5.3,2.3-10.1,1-14.4-2.5c-4.4-3.6-7-8.4-10.1-13c-0.5-0.8-0.8-2-2.1-1.6c-1,0.3-0.7,1.4-0.9,2.1c-0.1,0.3-0.2,0.6-0.2,1
+		c-1.2,4.8-2.4,9.7-8,11.1c-6,1.5-10.4-1.7-13.9-5.9c-4.8-5.8-9.2-11.8-12.7-18.5c-0.8-1.6-1.3-3.3-3.8-3.3c-11,0.1-22,0.2-33-0.1
+		c-11-0.3-21.9-1.2-33.3-1.9c1.1,3.8,3.5,6.1,5.5,8.6c11.6,14,26.5,24.2,40.9,35c9.2,6.9,19.2,12.6,27.6,20.6c1.1,1,2.1,2.1,2.9,3.4
+		c6.4,10.3,4.3,15.5-7.9,18.7c-10,2.6-19.8,0-29.6-1.7c-18.6-3.2-34.3-13.3-50.8-21.6c-27-13.6-51.5-31.2-75.8-49
+		c-3-2.2-5.9-2.9-9.6-2.9c-14.6,0.1-29.3,0.8-44-0.6c-5.8-0.5-5.9-0.5-5.1,5.5c1.2,8.4,4,16.1,10,22.4c7.1,7.5,13.4,15.7,21,22.8
+		c1.5,1.4,3,3.2,2.4,5.1c-0.7,2.1-3.1,2-5.1,2.1c-4.2,0.2-8.3-0.1-12.3-1.5c-18.1-6.2-35.7-13.8-52.3-23.4
+		c-12.2-7-21.1-17.3-26.8-30.1c-3.5-8-9-14.8-13.6-22.1c-1.2-1.9-2.9-2.7-5-2.9c-7.6-0.9-15.3,0.6-22.9-1c-2.4-0.5-1.5,1.5-1.4,2.7
+		c0.5,4.5,1,8.9,1.6,13.4c0.5,3.8-1,5.3-4.9,5.6c-6.8,0.5-12.3-2.6-17.5-6.1c-3.6-2.4-6-2.2-9.6,0.4c-6.5,4.7-12.4,10.1-17.3,16.4
+		c-1.8,2.3-2.5,4.5-2.3,7.3c0.5,9.1,0.8,18.3,1.3,27.4c0.3,5.7-3.3,8.4-8.7,6.3c-5.1-2-9.9-4.9-14.2-8.2
+		c-10.6-8.3-21.2-16.7-31.8-25c-0.5-0.3-1-0.6-1.4-0.9C245.2,480,245.6,480.7,246.1,481.3z M403.9,316.5c-0.6-0.1-1.5-0.6-1.7-0.4
+		c-0.6,0.8,0.4,1,0.8,1.3c4.6,4.8,9.2,9.7,13.7,14.5c3.8,4,7.4,8.2,8.5,13.9c0.3,1.3,1,3.3-1.1,3.8c-2.3,0.6-2.2-1.5-2.4-2.9
+		c-0.5-3.2-1.9-6.1-4.1-8.5c-6.4-7-13-13.8-19.5-20.7c-1.7-1.8-3-1.7-4.3,0.4c-2,3.3-3.9,6.6-6.2,9.6c-2,2.6-2,4.1,0.7,6.4
+		c9.6,8,18.7,16.6,27.1,25.8c7.4,8.1,12.4,17.4,10.1,29c-1.4,6.8-5.9,11.9-12.5,12.6c-11.8,1.3-22.7-0.9-30.1-11.5
+		c-5.5-7.8-12.5-14.3-19.4-20.8c-4.6-4.3-10.3-5.9-16.5-6.1c-4.9-0.1-10.5,5.7-9.6,10c3.5,18.1,6.9,36.3,10.6,54.4
+		c1.8,9.1,2,9,11,9.7c8.2,0.7,16.6-1.1,24.5,2.9c21.5,10.8,44.9,14.4,68.2,18.3c17,2.8,34.2,2.2,51.3,2.3c4.5,0,5.8-1.3,3.8-5.8
+		c-1.9-4.4-2.4-9.3-2.3-14.2c0.2-7,2.3-13.4,7-18.8c0.8-0.9,1.5-2.9,3-1.9c1.8,1.2-0.4,2.1-0.9,3.2c-0.1,0.1-0.2,0.3-0.3,0.4
+		c-8.8,11.1-6.9,23-2.8,35.1c0.4,1.2,1.5,1.7,2.5,2.4c24,17.4,48,34.8,74.3,48.8c22.8,12.1,45.1,25.2,72,26.7
+		c6.3,0.3,11.8-0.9,17.3-3.5c3.1-1.5,3.3-3.6,2.2-6.6c-1.9-5.1-5.3-8.8-9.6-11.8c-7.4-5.2-14.8-10.2-22.1-15.5
+		c-15-11.1-30.4-21.7-42.3-36.3c-6.2-7.6-11-15.3-8.6-25.8c1.4-6.3-0.8-11.9-5.7-16.7c-10.4-10.5-23.1-12.3-36.9-10.9
+		c-7.1,0.7-14,2.7-20.9,4.6c-1,0.3-2.5,1.4-2.9-0.3c-0.4-1.7,1.4-1.5,2.4-1.8c2.5-0.8,5.1-1.6,7.7-2.3c13.5-3.4,26.9-4.7,40.2,0.6
+		c13,5.1,19.4,15.1,18.5,29c-0.2,2.7-0.1,5.3-0.2,8c-0.1,2.1,0.7,2.8,2.9,2.9c23.5,0.5,46.9,2.1,70.4,1.4
+		c14.5-0.4,28.8-2.4,43.1-5.2c15.3-2.9,28.9-9.9,43.1-15.7c23.8-9.8,45.6-4.2,61.9,15.5c8,9.6,16,19.2,25.4,27.5
+		c18.5,16.4,38.6,30.7,59.3,44c13.6,8.7,27.2,17.6,43,21.8c2.8,0.7,5.5,2.1,9,1.4c-0.7-1.3-1.2-2.4-1.8-3.3
+		c-10-15.8-22.3-29.9-35-43.6c-15.3-16.5-30.3-33.2-42.5-52.2c-14.4-22.5-17.9-44.9-2.6-68.7c8.1-12.6,14.8-26.1,22.3-39
+		c14-24,30.2-46.3,51.6-64.5c4-3.4,7.8-7.1,12.3-11.2c-4.3-0.5-6.6,1.8-9.1,3.1c-17.2,8.8-35.3,15.6-52.4,24.8
+		c-22.7,12.2-45.6,24.2-68.3,36.6c-13.3,7.3-27.2,8.4-41.7,5.5c-20.6-4.2-39.4-13.1-57.5-23.5c-26.5-15.2-50.2-34.5-75.3-51.8
+		c-35.7-24.6-72.1-48.1-113.4-62.5c-30.2-10.6-60.9-19.4-93.3-20.3c-15.9-0.4-31.5,1.1-47.5,5.2c1.4,2,2.4,3.6,3.6,5.2
+		c5.8,7.5,10.6,15.5,12.4,24.8c3.5,17.7,3.2,35.5,0.4,53.2c-2.8,17.5-10.2,33.3-18.5,48.8c-0.9,1.7-3.1,3.4,0.8,4.7
+		c13.6,4.3,25.5,12.1,37.6,19.4c12.6,7.6,24.2,16.7,31.9,29.6c10.5,17.5,8.3,32.8-6.7,46.6c-21.2,19.4-64.2,26.3-94.5,7.2
+		c-1.7-1-3-2.6-4.3-4.1c-0.8-0.8-1.6-2-0.3-3c1.3-1.1,2.1-0.1,2.9,0.9c2.1,2.7,5,4.3,8,5.8c26.6,12.7,52.8,10.8,78-3.5
+		c11.2-6.3,19.8-15.7,19.8-29.8c0-9.5-4.4-17.8-10.4-24.9C447.2,337.2,425.8,326.5,403.9,316.5z M8.5,472.9
+		c0,20.6,7.6,29.8,27.7,33.9c9.1,1.8,18.2,1.5,27.4,0.8c17-1.5,33.5-5.1,50.2-8.4c37.8-7.4,73.7-20.6,108.6-36.6
+		c34.6-15.9,64.3-38.8,91-65.8c8.2-8.3,14.7-17.6,20.7-27.4c7.5-12.3,17.5-14,28.9-5c3.3,2.6,6.3,5.5,9.3,8.3
+		c7.5,6.8,13.4,15.3,21.6,21.5c6.4,4.8,18.7,5.4,24.4,0.8c5.1-4,5.9-12.6,2-20.8c-3.3-6.9-7.9-12.7-13.4-17.9
+		c-33.7-32.2-71.5-57.5-117.1-69.8c-17.7-4.8-35.5-9-53.8-10.3c-19-1.3-35.9,5.6-52.5,13.7c-29.8,14.6-55.2,35.9-81.9,55.3
+		c-2.2,1.6-2.3,3.1-1,5.4c3.8,6.9,7,14,9.7,21.4c1.3,3.5,2.3,7,2.1,10.7c-0.3,3.5-1,7.2-4.9,8.5c-3.9,1.4-7.3-0.2-9.9-3.1
+		c-2.9-3.2-5.1-7-7.1-10.9c-2.1-4.2-5.1-7.8-8.1-11.3c-1.6-1.9-2.9-2.1-4.9-0.2c-18.6,18-36.6,36.5-51.2,57.9
+		C16,438.3,8.1,454.2,8.5,472.9z M599.5,212.1c0.1-1.3,0.2-1.8,0.1-2.2c-1.1-4.5-1.9-9.1-3.3-13.6c-15.7-49.7-6-96.3,16.8-141.4
+		c6.7-13.3,16-24.9,24.8-36.9c4.6-6.3,4.7-6.3-3.1-7.7c-18.1-3.3-35.8,0.3-53.4,4.1c-35.8,7.6-65.7,26.4-92,50.9
+		c-30.6,28.4-52.5,63.5-72.9,99.5c-1.8,3.2-0.7,3.6,2.4,3.3c5.1-0.6,10.3-1,15.4-1.3c37.3-2.2,72.6,7,107.4,19.1
+		C561.6,192.8,580.7,201.3,599.5,212.1z M311.5,226.2c3.8,0,7.6-0.2,11.4-0.8c28-4.3,55.4-10.9,82.7-18.3c9.1-2.5,9.2-2.4,5.4-11
+		c-0.2-0.5-0.5-0.9-0.7-1.3c-8.5-15.9-18.6-30.4-33.3-41.1c-20.6-15-42.9-17.2-62.8,2.1c-15.3,14.9-26,33.1-35.6,52
+		c-2.1,4.2-0.8,6.6,2.5,9.1C290.1,223.7,300.4,226.1,311.5,226.2z M273.8,215c-0.8,3-1.4,5.1-1.9,7.2c-4,16.7-8.6,33.2-7.2,50.6
+		c0.2,2.7,0.8,3.9,3.8,4.5c40.4,8.6,77.4,24.9,110.7,49.4c2.6,1.9,3.9,1.7,5.7-1.1c8-12.1,15.2-24.6,21.1-37.9
+		c1.9-4.3,4.1-8.6,4.8-13.3c-1.4-0.3-2.2,0.5-2.9,1c-14.6,10.1-30.8,14.4-48.5,13.8c-5.5-0.2-10.5-1.7-15-4.8
+		c-11.9-8.3-17.5-19.4-16.2-34.2c0.7-7.1,2.1-14.1,3.4-21.6C310.7,231.1,290.6,231.3,273.8,215z M243.3,207.1
+		c7.4,0.3,17.5-0.3,27.6-1.1c3-0.2,4.7-1.3,6.2-3.9c5.6-9.8,11.1-19.8,17.8-28.9c7.6-10.3,8.4-7.3-1.5-16.5
+		c-11.4-10.6-24.3-14.8-39.4-9.8c-7.2,2.4-13.6,6.2-19.8,10.5c-13.8,9.5-21.9,23.5-30,37.5c-3.6,6.3-3,7.8,4,10.2
+		c1.3,0.4,2.6,0.6,3.9,0.9C221.5,207.8,231,206.9,243.3,207.1z M232.8,461.6c1.2,1.3,2,2.1,2.8,3c11.8,12.5,25.8,22.6,39,33.4
+		c5.6,4.6,11.6,8.9,18.4,11.8c5.4,2.3,5.8,2,5.6-4c0-1.7-0.1-3.3-0.1-5c-0.4-19.8-2.8-39.5-1.6-59.3c0.2-3-0.6-4.4-3.1-5.8
+		c-10.3-5.9-10.3-6.1-19.5,1.2C261.8,447,247.2,453.6,232.8,461.6z M486.6,517.4c-7.5-7.1-13.2-15-20-21.7
+		c-8.1-8.1-12.4-17.6-13.5-28.7c-0.4-3.4-1.6-4.8-5.1-5.3c-15.3-2.2-30.5-5-45.2-9.9c-5.6-1.9-11.1-4.1-16.6-6.1
+		c3.9,7.2,8.2,13.6,11.4,20.8c4.9,10.9,12.7,19.7,22.9,25.8c16.3,9.8,33.8,17.3,51.7,23.6C476.4,517.4,480.9,518.8,486.6,517.4z
+		 M223,211.1c-7-0.4-14.2-0.8-20-4.9c-4.1-2.8-5.3-1.2-6.6,2.2c-4.3,11.5-9,22.9-9.8,35.4c-0.8,11.7-0.7,23.3,4.4,34.2
+		c1.2,2.6,2.2,3.4,5.2,2c8.8-4.1,18.1-6.4,27.8-7.1c9.5-0.7,19,0.3,29.4,0.9C225.8,259.1,218.4,243.5,223,211.1z M285.4,427.4
+		c17.9,9.9,35.4,19.5,52.9,29.1c1.6,0.9,3.3,1.7,5,2.1c4.5,1.1,5.7,0,5.3-4.6c-1.2-17-5.6-33.4-8.6-50.1c-1.7-9.1-3.4-18.2-5.1-27.3
+		C322.5,397.7,302.3,410.8,285.4,427.4z M160.2,491.1c9.5,10.8,20.4,19.3,31.9,26.9c3.9,2.6,7.9,4.9,12.5,6c5.8,1.3,8.4-0.2,8.9-6
+		c0.6-7.3,0-14.6-1.4-21.8c-1.5-7.7-7.2-12.1-12.2-17.2c-0.9-0.9-1.8-1.2-3.1-0.8C184.9,482.5,172.8,486.7,160.2,491.1z
+		 M201.8,476.4c9.9,9,17.6,19.1,25.9,28.9c3.9,4.7,8.2,9.2,13.9,11.9c4.9,2.3,7.5,1.1,8.7-4.2c0.7-3.1,0.6-6.3-0.1-9.4
+		c-2.3-10.2-6.6-19.8-10.6-29.5c-1.7-4.1-5.7-6.4-8.6-9.6c-1.2-1.3-2.4-0.5-3.6,0.1C219.1,468.5,210.8,472.3,201.8,476.4z
+		 M739.7,465.9c-0.1,0-0.1,0-0.2,0c-0.3-6.1-0.8-12.3-0.9-18.4c-0.1-3.2-1-4.2-4.2-3c-6.9,2.5-13.9,4.4-21.1,5.6
+		c-2.4,0.4-3.6,1.5-3.9,4.2c-0.6,7.5,8.7,24.4,15.5,27.5c6.6,3,12.4,0.2,13.9-7C739.5,471.9,739.4,468.9,739.7,465.9z M674.1,455
+		c5.8,8,9.6,16,16.3,21.8c5.4,4.7,10.7,2.9,12.6-3.7c1.8-5.9,2.1-12.1,2.8-18.2c0.4-3.1-1.3-3.4-3.6-2.9
+		C693.5,453.9,684.5,454.5,674.1,455z M300.6,470.1c5.5-7.6,11.9-12.9,18.9-17.5c1.2-0.8,1.3-1.9-0.1-2.7
+		c-6.1-3.3-12.1-6.6-18.8-10.2C300.6,449.9,300.6,459.3,300.6,470.1z M961.2,257.6c-0.1-0.1-0.2-0.3-0.3-0.3c-0.1,0-0.2,0.2-0.4,0.3
+		c0.1,0.1,0.2,0.3,0.3,0.3C961,257.9,961.1,257.7,961.2,257.6z M411.2,273.6c-0.1-0.1-0.2-0.2-0.2-0.3c-0.1,0.1-0.2,0.2-0.2,0.3
+		s0.1,0.2,0.2,0.3C411.1,273.7,411.1,273.7,411.2,273.6z"/>
+	<path id="XMLID_137_" class="st0" d="M154.7,142.2c0.3-14.5,4.3-27.9,12.5-39.8c8.1-11.8,19.5-18.5,33.8-19.3
+		c11.2-0.6,18.4,7,17.3,17.5c-0.3,3.3-1.6,5.7-5.1,6.5c-2.1,0.5-4.1,1.4-6.2,1.7c-20.6,2.5-35.4,16.6-38.6,36.9
+		c-0.6,3.6-1.1,7.3-2.7,10.6c-1,2-2.1,3.8-4.7,3.9c-2.6,0-3.2-2.1-4-3.8C154.8,151.9,154.5,147.1,154.7,142.2z"/>
+	<path id="XMLID_134_" class="st1" d="M403.9,316.5c21.9,10,43.3,20.7,59.3,39.5c6,7.1,10.4,15.4,10.4,24.9
+		c0,14.1-8.7,23.4-19.8,29.8c-25.2,14.3-51.4,16.2-78,3.5c-3-1.4-5.9-3.1-8-5.8c-0.7-0.9-1.6-1.9-2.9-0.9c-1.3,1.1-0.5,2.2,0.3,3
+		c1.3,1.5,2.7,3.1,4.3,4.1c30.3,19.1,73.2,12.2,94.5-7.2c15.1-13.8,17.2-29.1,6.7-46.6c-7.8-12.9-19.3-22-31.9-29.6
+		c-12.1-7.3-24-15.1-37.6-19.4c-3.9-1.2-1.7-2.9-0.8-4.7c8.3-15.5,15.8-31.3,18.5-48.8c2.8-17.7,3.1-35.5-0.4-53.2
+		c-1.8-9.3-6.6-17.3-12.4-24.8c-1.2-1.6-2.2-3.2-3.6-5.2c16-4,31.6-5.6,47.5-5.2c32.4,0.9,63,9.8,93.3,20.3
+		c41.3,14.4,77.7,37.9,113.4,62.5c25.1,17.3,48.8,36.6,75.3,51.8c18.1,10.4,36.9,19.3,57.5,23.5c14.4,2.9,28.4,1.8,41.7-5.5
+		c22.6-12.4,45.5-24.4,68.3-36.6c17-9.1,35.2-16,52.4-24.8c2.5-1.3,4.8-3.6,9.1-3.1c-4.5,4.1-8.3,7.8-12.3,11.2
+		c-21.4,18.1-37.5,40.5-51.6,64.5c-7.6,12.9-14.2,26.4-22.3,39c-15.3,23.7-11.9,46.1,2.6,68.7c12.2,19.1,27.2,35.7,42.5,52.2
+		c12.7,13.7,25,27.7,35,43.6c0.6,1,1.1,2,1.8,3.3c-3.5,0.7-6.2-0.7-9-1.4c-15.9-4.2-29.5-13.1-43-21.8c-20.7-13.3-40.8-27.6-59.3-44
+		c-9.4-8.3-17.4-17.9-25.4-27.5c-16.3-19.7-38.2-25.2-61.9-15.5c-14.2,5.8-27.8,12.7-43.1,15.7c-14.3,2.8-28.6,4.8-43.1,5.2
+		c-23.5,0.7-46.9-0.9-70.4-1.4c-2.2,0-3-0.8-2.9-2.9c0.1-2.7,0-5.3,0.2-8c0.9-13.9-5.4-23.9-18.5-29c-13.3-5.2-26.8-4-40.2-0.6
+		c-2.6,0.7-5.1,1.4-7.7,2.3c-1,0.3-2.8,0.1-2.4,1.8c0.5,1.8,1.9,0.6,2.9,0.3c6.9-1.8,13.8-3.8,20.9-4.6c13.8-1.4,26.5,0.4,36.9,10.9
+		c4.8,4.8,7.1,10.4,5.7,16.7c-2.4,10.6,2.4,18.3,8.6,25.8c12,14.6,27.3,25.3,42.3,36.3c7.2,5.3,14.7,10.4,22.1,15.5
+		c4.3,3,7.7,6.7,9.6,11.8c1.1,3,0.9,5.1-2.2,6.6c-5.5,2.7-11,3.9-17.3,3.5c-26.8-1.5-49.2-14.6-72-26.7
+		c-26.3-13.9-50.3-31.4-74.3-48.8c-0.9-0.7-2.1-1.1-2.5-2.4c-4.1-12.1-6-24,2.8-35.1c0.1-0.1,0.2-0.2,0.3-0.4c0.5-1,2.6-2,0.9-3.2
+		c-1.5-1-2.1,1-3,1.9c-4.7,5.4-6.8,11.8-7,18.8c-0.1,4.9,0.3,9.8,2.3,14.2c1.9,4.5,0.6,5.8-3.8,5.8c-17.1,0-34.3,0.6-51.3-2.3
+		c-23.3-3.9-46.8-7.5-68.2-18.3c-7.9-4-16.3-2.2-24.5-2.9c-9-0.8-9.2-0.7-11-9.7c-3.6-18.1-7.1-36.3-10.6-54.4
+		c-0.8-4.3,4.8-10.1,9.6-10c6.2,0.1,11.9,1.7,16.5,6.1c6.9,6.5,13.9,12.9,19.4,20.8c7.4,10.6,18.3,12.7,30.1,11.5
+		c6.6-0.7,11.1-5.7,12.5-12.6c2.3-11.6-2.7-20.9-10.1-29c-8.4-9.2-17.6-17.8-27.1-25.8c-2.7-2.3-2.7-3.8-0.7-6.4
+		c2.3-3,4.2-6.4,6.2-9.6c1.3-2.1,2.6-2.2,4.3-0.4c6.5,6.9,13.1,13.8,19.5,20.7c2.2,2.4,3.5,5.2,4.1,8.5c0.2,1.4,0.1,3.4,2.4,2.9
+		c2.1-0.5,1.3-2.5,1.1-3.8c-1.1-5.6-4.7-9.8-8.5-13.9c-4.5-4.9-9.1-9.7-13.7-14.5C403.3,317.2,403.6,316.8,403.9,316.5z
+		 M499.8,357.2c-0.2-0.2-0.4-0.4-0.6-0.6c1-9.4,1.6-18.9,3-28.3c2.1-13.2,1.7-25.6-8.3-35.9c-1.1-1.2-2-3.9-4.2-2.2
+		c-2,1.6,0.5,2.9,1.4,4c4.8,6.1,9.3,12.2,8.6,20.6c-1.2,12.9-1.7,25.9-4,38.7c-1.1,6.5-2.2,12.9-3.4,19.4c13-15.6,22.8-32.5,26-52.6
+		c0.4-2.6-0.2-7,2.5-7.1c2.8-0.1,3.6,4.3,4.4,7.2c3.3,10.9,2.5,22,1.9,33.2c-0.4,7-0.3,14-0.3,21c0,3.7,1.7,3.7,4.5,2.2
+		c4.2-2.4,5.9-6.7,8.1-10.5c8.1-14.2,7.5-29.7,6.8-45.3c-0.1-1.6,0.7-4.3-2.2-4c-2.5,0.3-1.5,2.7-1.3,4.1c1.1,8.2,0.7,16.3-0.3,24.4
+		c-1.1,10.1-5.2,18.9-11.5,26.9c-0.3-7.4-0.9-14.6-0.1-21.8c1.1-9.7,0.7-19.3-1.5-28.8c-1.3-5.6-4-10.6-8.4-14.5
+		c-1.9-1.7-3.1-1.8-3.6,1.1c-0.6,3.1-1.5,6.2-2,9.3C512.9,331.9,508.5,345.4,499.8,357.2z"/>
+	<path id="XMLID_131_" class="st1" d="M8.5,472.9c-0.4-18.7,7.5-34.7,17.7-49.5c14.6-21.4,32.7-39.9,51.2-57.9
+		c1.9-1.9,3.2-1.7,4.9,0.2c3,3.5,6,7.2,8.1,11.3c2,3.9,4.2,7.6,7.1,10.9c2.6,2.9,6,4.5,9.9,3.1c3.9-1.4,4.7-5,4.9-8.5
+		c0.3-3.7-0.8-7.3-2.1-10.7c-2.7-7.4-5.9-14.5-9.7-21.4c-1.3-2.4-1.2-3.8,1-5.4c26.6-19.4,52-40.7,81.9-55.3
+		c16.5-8.1,33.5-15,52.5-13.7c18.4,1.3,36.1,5.5,53.8,10.3c45.6,12.3,83.4,37.6,117.1,69.8c5.4,5.2,10.1,11,13.4,17.9
+		c3.9,8.2,3.1,16.7-2,20.8c-5.8,4.6-18.1,4.1-24.4-0.8c-8.2-6.2-14-14.7-21.6-21.5c-3.1-2.8-6.1-5.7-9.3-8.3
+		c-11.3-8.9-21.3-7.3-28.9,5c-6,9.9-12.5,19.2-20.7,27.4c-26.7,27-56.4,49.9-91,65.8c-34.8,16-70.7,29.2-108.6,36.6
+		c-16.7,3.3-33.3,6.9-50.2,8.4c-9.1,0.8-18.3,1-27.4-0.8C16.1,502.8,8.5,493.5,8.5,472.9z M174.5,335.7c-6.8,0.1-13.1,2.9-18.4,7.3
+		c-13.7,11.3-20.9,26.1-22.3,43.7c-0.5,6.4,4,12.7,9.3,13.9c5.3,1.2,9.6-1.9,12.4-9.2c1.5-4,2.9-8.2,3.8-12.4
+		c2.5-10.6,8.5-16.8,19.7-18.2c7.3-0.9,12-6.8,11.8-13.3c-0.2-5.9-5.1-10.5-12.5-11.5C177.2,335.8,176,335.8,174.5,335.7z"/>
+	<path id="XMLID_130_" class="st1" d="M599.5,212.1c-18.8-10.8-38-19.3-57.7-26.2c-34.7-12.1-70.1-21.3-107.4-19.1
+		c-5.1,0.3-10.3,0.7-15.4,1.3c-3,0.3-4.2-0.1-2.4-3.3c20.4-36.1,42.3-71.1,72.9-99.5c26.3-24.4,56.2-43.2,92-50.9
+		c17.6-3.7,35.2-7.4,53.4-4.1c7.8,1.4,7.6,1.5,3.1,7.7c-8.8,11.9-18,23.6-24.8,36.9c-22.9,45-32.6,91.7-16.8,141.4
+		c1.4,4.4,2.3,9,3.3,13.6C599.7,210.3,599.6,210.8,599.5,212.1z"/>
+	<path id="XMLID_129_" class="st1" d="M311.5,226.2c-11.1-0.1-21.4-2.5-30.4-9.3c-3.3-2.5-4.7-4.9-2.5-9.1
+		c9.6-18.9,20.3-37.2,35.6-52c19.9-19.3,42.3-17.1,62.8-2.1c14.7,10.7,24.9,25.3,33.3,41.1c0.2,0.4,0.5,0.9,0.7,1.3
+		c3.8,8.6,3.8,8.5-5.4,11c-27.3,7.4-54.7,14-82.7,18.3C319.1,226,315.3,226.2,311.5,226.2z"/>
+	<path id="XMLID_128_" class="st2" d="M273.8,215c16.7,16.3,36.9,16.1,57.7,13.7c-1.4,7.6-2.8,14.5-3.4,21.6
+		c-1.4,14.7,4.2,25.9,16.2,34.2c4.5,3.1,9.5,4.6,15,4.8c17.7,0.6,33.9-3.7,48.5-13.8c0.8-0.5,1.5-1.4,2.9-1c-0.7,4.8-2.9,9-4.8,13.3
+		c-5.9,13.3-13.1,25.8-21.1,37.9c-1.8,2.8-3.1,3-5.7,1.1c-33.3-24.5-70.3-40.9-110.7-49.4c-3-0.6-3.5-1.8-3.8-4.5
+		c-1.4-17.4,3.2-34,7.2-50.6C272.4,220.1,273,218,273.8,215z"/>
+	<path id="XMLID_127_" class="st1" d="M243.3,207.1c-12.3-0.3-21.8,0.6-31.2-1.2c-1.3-0.2-2.6-0.5-3.9-0.9c-7-2.3-7.6-3.8-4-10.2
+		c8.1-14,16.1-28,30-37.5c6.2-4.2,12.6-8.1,19.8-10.5c15.2-5,28.1-0.8,39.4,9.8c9.8,9.2,9.1,6.2,1.5,16.5
+		c-6.7,9.2-12.2,19.1-17.8,28.9c-1.5,2.6-3.1,3.7-6.2,3.9C260.8,206.9,250.6,207.4,243.3,207.1z"/>
+	<path id="XMLID_126_" class="st2" d="M232.8,461.6c14.4-8,29-14.6,41.5-24.7c9.2-7.3,9.2-7.2,19.5-1.2c2.5,1.4,3.3,2.8,3.1,5.8
+		c-1.3,19.8,1.2,39.5,1.6,59.3c0,1.7,0,3.3,0.1,5c0.2,5.9-0.3,6.3-5.6,4c-6.8-2.9-12.8-7.2-18.4-11.8c-13.2-10.9-27.2-20.9-39-33.4
+		C234.8,463.7,234,462.9,232.8,461.6z"/>
+	<path id="XMLID_125_" class="st1" d="M486.6,517.4c-5.7,1.3-10.2,0-14.5-1.6c-17.9-6.4-35.4-13.8-51.7-23.6
+		c-10.2-6.2-17.9-14.9-22.9-25.8c-3.2-7.1-7.5-13.6-11.4-20.8c5.5,2.1,11,4.3,16.6,6.1c14.7,4.9,29.9,7.8,45.2,9.9
+		c3.5,0.5,4.7,1.9,5.1,5.3c1.2,11.1,5.4,20.7,13.5,28.7C473.4,502.5,479.1,510.3,486.6,517.4z"/>
+	<path id="XMLID_124_" class="st2" d="M223,211.1c-4.6,32.4,2.8,48,30.4,62.7c-10.5-0.5-19.9-1.6-29.4-0.9c-9.7,0.7-19,3-27.8,7.1
+		c-3,1.4-4,0.6-5.2-2c-5.1-11-5.2-22.5-4.4-34.2c0.9-12.5,5.5-23.9,9.8-35.4c1.3-3.4,2.5-5,6.6-2.2
+		C208.9,210.3,216.1,210.7,223,211.1z"/>
+	<path id="XMLID_123_" class="st2" d="M285.4,427.4c17-16.6,37.1-29.7,49.5-50.8c1.7,9.1,3.4,18.2,5.1,27.3
+		c3,16.7,7.5,33.1,8.6,50.1c0.3,4.6-0.9,5.7-5.3,4.6c-1.7-0.4-3.4-1.3-5-2.1C320.8,447,303.3,437.3,285.4,427.4z"/>
+	<path id="XMLID_122_" class="st2" d="M160.2,491.1c12.6-4.4,24.6-8.6,36.7-12.9c1.3-0.5,2.2-0.2,3.1,0.8c5,5.1,10.6,9.5,12.2,17.2
+		c1.4,7.3,2,14.5,1.4,21.8c-0.5,5.8-3.1,7.3-8.9,6c-4.6-1.1-8.7-3.4-12.5-6C180.6,510.4,169.8,501.9,160.2,491.1z"/>
+	<path id="XMLID_121_" class="st2" d="M201.8,476.4c9.1-4.1,17.3-7.9,25.6-11.7c1.2-0.6,2.4-1.4,3.6-0.1c2.9,3.2,6.9,5.5,8.6,9.6
+		c4,9.7,8.2,19.2,10.6,29.5c0.7,3.1,0.9,6.3,0.1,9.4c-1.3,5.2-3.8,6.5-8.7,4.2c-5.7-2.7-9.9-7.3-13.9-11.9
+		C219.4,495.6,211.7,485.4,201.8,476.4z"/>
+	<path id="XMLID_120_" class="st1" d="M739.7,465.9c-0.3,3-0.2,6-0.8,8.9c-1.5,7.2-7.3,10-13.9,7c-6.8-3.1-16.1-20-15.5-27.5
+		c0.2-2.7,1.5-3.8,3.9-4.2c7.2-1.3,14.3-3.1,21.1-5.6c3.1-1.2,4.1-0.2,4.2,3c0.1,6.1,0.6,12.3,0.9,18.4
+		C739.5,465.9,739.6,465.9,739.7,465.9z"/>
+	<path id="XMLID_119_" class="st1" d="M674.1,455c10.4-0.5,19.3-1.1,28.1-2.9c2.3-0.5,4-0.2,3.6,2.9c-0.7,6.1-1.1,12.3-2.8,18.2
+		c-2,6.6-7.2,8.4-12.6,3.7C683.7,471,679.9,462.9,674.1,455z"/>
+	<path id="XMLID_118_" class="st1" d="M300.6,470.1c0-10.7,0-20.1,0-30.4c6.6,3.6,12.7,6.9,18.8,10.2c1.5,0.8,1.4,1.9,0.1,2.7
+		C312.5,457.2,306.2,462.5,300.6,470.1z"/>
+	<path id="XMLID_117_" class="st1" d="M403,317.5c-0.4-0.4-1.4-0.6-0.8-1.3c0.1-0.2,1.1,0.2,1.7,0.4
+		C403.6,316.8,403.3,317.2,403,317.5z"/>
+	<path id="XMLID_116_" class="st2" d="M246.1,481.3c-0.5-0.6-0.9-1.3-0.4-2.1c0.5,0.3,1,0.6,1.4,0.9
+		C246.8,480.5,246.4,480.9,246.1,481.3z"/>
+	<path id="XMLID_115_" class="st1" d="M961.2,257.6c-0.1,0.1-0.3,0.3-0.4,0.3c-0.1,0-0.2-0.2-0.3-0.3c0.1-0.1,0.3-0.3,0.4-0.3
+		C961,257.2,961.1,257.4,961.2,257.6z"/>
+	<path id="XMLID_114_" class="st2" d="M411.2,273.6c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1-0.1-0.2-0.2-0.2-0.3s0.2-0.2,0.2-0.3
+		C411.1,273.4,411.2,273.5,411.2,273.6z"/>
+	<path id="XMLID_113_" class="st0" d="M499.8,357.2c8.7-11.8,13.1-25.3,15.6-39.5c0.5-3.1,1.4-6.2,2-9.3c0.5-2.9,1.7-2.8,3.6-1.1
+		c4.4,3.9,7.1,8.8,8.4,14.5c2.2,9.5,2.6,19.1,1.5,28.8c-0.8,7.3-0.2,14.5,0.1,21.8c6.3-8,10.4-16.8,11.5-26.9
+		c0.9-8.1,1.3-16.3,0.3-24.4c-0.2-1.4-1.2-3.9,1.3-4.1c2.9-0.3,2.2,2.4,2.2,4c0.7,15.5,1.3,31.1-6.8,45.3c-2.2,3.8-3.9,8.2-8.1,10.5
+		c-2.7,1.5-4.5,1.5-4.5-2.2c0.1-7-0.1-14,0.3-21c0.6-11.2,1.4-22.3-1.9-33.2c-0.9-2.8-1.6-7.2-4.4-7.2c-2.7,0.1-2.1,4.5-2.5,7.1
+		c-3.2,20.2-13,37.1-26,52.6c1.1-6.5,2.2-12.9,3.4-19.4c2.3-12.8,2.8-25.8,4-38.7c0.8-8.4-3.8-14.5-8.6-20.6c-0.9-1.1-3.4-2.4-1.4-4
+		c2.1-1.7,3.1,1,4.2,2.2c9.9,10.3,10.3,22.7,8.3,35.9c-1.5,9.4-2.1,18.8-3,28.3c-0.1,0.6-0.2,1.1-0.3,1.7
+		C499.8,358.4,499.5,357.6,499.8,357.2z"/>
+	<path id="XMLID_112_" class="st0" d="M174.5,335.7c1.5,0.1,2.7,0.1,3.8,0.3c7.3,1,12.3,5.6,12.5,11.5c0.2,6.5-4.5,12.4-11.8,13.3
+		c-11.1,1.4-17.2,7.6-19.7,18.2c-1,4.2-2.3,8.4-3.8,12.4c-2.8,7.3-7.1,10.4-12.4,9.2c-5.3-1.2-9.8-7.5-9.3-13.9
+		c1.3-17.6,8.6-32.4,22.3-43.7C161.4,338.6,167.7,335.8,174.5,335.7z"/>
+	<path id="XMLID_111_" class="st1" d="M499.8,357.2c-0.3,0.4,0,1.2-0.9,1.1c0.1-0.5,0.2-1.1,0.3-1.7
+		C499.4,356.8,499.6,357,499.8,357.2z"/>
+</g>
+</svg>
diff --git a/src/index.html b/src/index.html
index c8519f0..a1c4fcc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,11 +4,27 @@
     <meta charset="UTF-8"/>
     <title>Skynet</title>
     <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/>
+    <link rel="stylesheet" type="text/css" href="stylesheets/index.css"/>
 </head>
 <body>
-<h1>Skynet Password Reset & Sign-up service</h1>
-<h2><a href="password.html">Password Change</a></h2>
-<p>Please use this service if you ever need to change your skynet password</p>
+<div id="title">
+    <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" height="81.56"/> </a>
+    <h1>Skynet Password Reset & Sign-up service</h1>
+</div>
+<div class="boxes">
+    <h2><a href="./signup.html">Sign-up Page</a></h2>
+    <p>Please use this if you have yet to activate an account on Skynet before.</p>
+    <h2><a href="password.html">Change Password</a></h2>
+    <p>Please use this service to change your skynet password</p>
+    <h2><a href="modify.html">User modification</a></h2>
+    <p>
+        Please use this service to modify your user data (email, login ssh key, etc.)
+    </p>
+    <h2><a href="./recovery/username.html">Forgot your username?</a></h2>
+    <p>
+        Please use this service to get a reminder email with your skynet username
+    </p>
+</div>
 
 <h2><a href="modify.html">User modification</a></h2>
 <p>
diff --git a/src/modify.html b/src/modify.html
index 3c160fc..eff3b0c 100644
--- a/src/modify.html
+++ b/src/modify.html
@@ -4,28 +4,51 @@
     <meta charset="UTF-8"/>
     <title>Modify user</title>
     <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/>
+    <link rel="stylesheet" type="text/css" href="stylesheets/index.css"/>
 </head>
 <body>
-<form id="reset">
-    <label for="user">Username</label>
-    <input type="text" id="user" name="user"/> <br/>
-    <label for="pass">Password</label>
-    <input type="password" id="pass" name="pass"/> <br/>
-    <label for="field">Field</label>
-    <select onchange="selectField()" id="field">
-        <option value="" selected="selected">Please select an option</option>
-        <option value="mail">Email</option>
-        <option value="sshPublicKey">SSH key</option>
-        <option value="cn">First name & Surname</option>
-        <option value="sn">Surname</option>
-        <option value="skDiscord">Discord username</option>
-    </select>
-    <br/>
-    <label for="value">Value</label>
-    <input type="text" id="value" name="value"/> <br/>
-    <input type="Submit" value="Submit"/>
-</form>
-<p id="formStatus"></p>
+<div id="title">
+    <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
+                      height="81.56"/> </a>
+    <h1>Skynet Password Reset & Sign-up service</h1>
+</div>
+<div class="boxes">
+    <h2>User modification page</h2>
+    <p>Use this page to modify your account. Please remember to select a field before submitting the form</p>
+    <form id="reset">
+        <table id="table">
+            <tr>
+                <td><label for="user">Username</label></td>
+                <td><input type="text" id="user" name="user"/> <br/></td>
+            </tr>
+            <tr>
+                <td><label for="pass">Password</label></td>
+                <td><input type="password" id="pass" name="pass"/> <br/></td>
+            </tr>
+            <tr>
+                <td><label for="field">Field</label></td>
+                <td>
+                    <select onchange="selectField()" id="field">
+                        <option value="" selected="selected">Please select an option</option>
+                        <option value="mail">Email</option>
+                        <option value="sshPublicKey">SSH key</option>
+                        <option value="cn">First name & Surname</option>
+                        <option value="sn">Surname</option>
+                        <option value="skDiscord">Discord username</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td><label for="value">Value</label></td>
+                <td><input type="text" id="value" name="value"/> <br/></td>
+            </tr>
+            <tr>
+                <td colspan="2"><input type="Submit" value="Submit"/></td>
+            </tr>
+        </table>
+    </form>
+    <p id="formStatus"></p>
+</div>
 <footer>
     UL Computer Society 2023-<span id="year">2023</span>
 </footer>
@@ -49,7 +72,7 @@
             }).then(res => {
                 if (res.status === 200) {
                     let temp = res.json();
-                    if(temp.result === 'error'){
+                    if (temp.result === 'error') {
                         document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
                     } else {
                         document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
@@ -65,10 +88,10 @@
         }
     }
 
-    function selectField(){
+    function selectField() {
         const field = document.getElementById('field').value;
         const value = document.getElementById('value');
-        if(field === 'mail'){
+        if (field === 'mail') {
             value.type = 'email';
         } else {
             value.type = 'text';
diff --git a/src/password.html b/src/password.html
index 067c2c3..90612d9 100644
--- a/src/password.html
+++ b/src/password.html
@@ -1,23 +1,45 @@
 <!DOCTYPE html>
 <html lang="en-ie">
 <head>
-    <meta charset="UTF-8" />
-    <title>Password change</title>
-    <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png" />
+    <meta charset="UTF-8"/>
+    <title>Password reset</title>
+    <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/>
+    <link rel="stylesheet" type="text/css" href="stylesheets/index.css"/>
 </head>
 <body>
-<form id="reset">
-    <label for="user">Username</label>
-    <input type="text" id="user" name="user" /> <br />
-    <label for="pass">Old Password</label>
-    <input type="password" id="pass" name="pass" /> <br />
-    <label for="newPW1">New Password</label>
-    <input type="password" id="newPW1" name="newPW" /> <br />
-    <label for="newPW2">Confirm</label>
-    <input type="password" id="newPW2" name="newPWConfirm" /> <br />
-    <input type="Submit" value="Submit" />
-</form>
-<p id="formStatus"></p>
+<div id="title">
+    <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
+                      height="81.56"/> </a>
+    <h1>Skynet Password Reset & Sign-up service</h1>
+</div>
+<div class="boxes">
+    <h2>Password Change</h2>
+    <p>Please use this page to change your Skynet password.</p>
+    <form id="reset">
+        <table id="table">
+            <tr>
+                <td><label for="user">Username</label></td>
+                <td><input type="text" id="user" name="user"/> <br/></td>
+            </tr>
+            <tr>
+                <td><label for="pass">Old Password</label></td>
+                <td><input type="password" id="pass" name="pass"/> <br/></td>
+            </tr>
+            <tr>
+                <td><label for="newPW1">New Password</label></td>
+                <td><input type="password" id="newPW1" name="newPW"/> <br/></td>
+            </tr>
+            <tr>
+                <td><label for="newPW2">Confirm</label></td>
+                <td><input type="password" id="newPW2" name="newPWConfirm"/> <br/></td>
+            </tr>
+            <tr>
+                <td colspan="2"><input type="Submit" value="Submit"/></td>
+            </tr>
+        </table>
+    </form>
+    <p id="formStatus"></p>
+</div>
 <footer>
     UL Computer Society 2023-<span id="year">2023</span>
 </footer>
@@ -25,22 +47,22 @@
     const formEl = document.getElementById("reset");
     formEl.addEventListener('submit', (listener) => formHandler(listener));
 
-    function formHandler(listener){
+    function formHandler(listener) {
         listener.preventDefault();
         const formData = new FormData(formEl);
         const user = formData.get("user");
         const pass = formData.get("pass");
         const newPW = formData.get("newPW");
-        if(newPW === formData.get("newPWConfirm")){
+        if (newPW === formData.get("newPWConfirm")) {
             const object = {user: user, pass: pass, field: "userPassword", value: newPW}
             fetch('https://api.account.skynet.ie/ldap/update', {
                 method: 'POST',
                 body: JSON.stringify(object),
                 mode: "cors"
             }).then(res => {
-                if(res.status === 200) {
+                if (res.status === 200) {
                     document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
-                } else if (res.status === 500){
+                } else if (res.status === 500) {
                     document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
                 } else {
                     document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
@@ -55,4 +77,4 @@
 <script>
     document.getElementById('year').textContent = new Date().getFullYear().toString();
 </script>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/recovery/.gitkeep b/src/recovery/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/recovery/username.html b/src/recovery/username.html
new file mode 100644
index 0000000..6a47c70
--- /dev/null
+++ b/src/recovery/username.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en-ie">
+<head>
+    <meta charset="UTF-8"/>
+    <title>Forgot Username</title>
+    <link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/>
+</head>
+<body>
+<div id="title">
+    <a href="../"><img src="../images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
+                      height="81.56"/> </a>
+    <h1>Skynet Password Reset & Sign-up service</h1>
+</div>
+<div class="boxes">
+    <h2>Forgot Username</h2>
+    <p>Please use this page to get a reminder email with your skynet username in it.</p>
+    <form id="reset">
+        <table id="table">
+            <tr>
+                <td><label for="email">Email Address</label></td>
+                <td><input type="text" id="email" name="email"/> <br/></td>
+            </tr>
+            <tr>
+                <td colspan="2"><input type="Submit" value="Submit"/></td>
+            </tr>
+        </table>
+    </form>
+    <p id="formStatus"></p>
+</div>
+<footer>
+    UL Computer Society 2023-<span id="year">2023</span>
+</footer>
+<script>
+    const formEl = document.getElementById("reset");
+    formEl.addEventListener('submit', (listener) => formHandler(listener));
+
+    function formHandler(listener) {
+        listener.preventDefault();
+        const formData = new FormData(formEl);
+        const email = formData.get("email");
+        const object = {email: email};
+        fetch('https://api.account.skynet.ie/ldap/recover/username', {
+            method: 'POST',
+            body: JSON.stringify(object),
+            mode: "cors"
+        }).then(res => {
+            if (res.status === 200) {
+                document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
+            } else if (res.status === 500) {
+                document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
+            } else {
+                document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
+            }
+        }).catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>"); 
+    }
+</script>
+</body>
+<script></script>
+</html>
diff --git a/src/register.html b/src/register.html
index 6311225..37b85d6 100644
--- a/src/register.html
+++ b/src/register.html
@@ -2,20 +2,40 @@
 <html lang="en-ie">
 <head>
     <meta charset="UTF-8"/>
-    <title>Skynet Sign-up</title>
+    <title>Skynet Register</title>
     <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/>
+    <link rel="stylesheet" type="text/css" href="stylesheets/index.css"/>
 </head>
 <body>
-<h1>Sign-up</h1>
-<form id="register">
-    <label for="user">Username</label>
-    <input type="text" id="user" name="user"/> <br/>
-    <label for="pass">Password</label>
-    <input type="password" id="pass" name="pass"/> <br/>
-    <label for="confirm">Confirm</label>
-    <input type="password" id="confirm" name="confirm"/>
-    <input type="Submit" value="Submit"/>
-</form>
+<div id="title">
+    <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
+                      height="81.56"/> </a>
+    <h1>Skynet Password Reset & Sign-up service</h1>
+</div>
+<div class="boxes">
+    <h2>Register</h2>
+    <p>Thank you for signing up for your free skynet account. Please complete the process by filling in the form
+        below</p>
+    <form id="register">
+        <table id="table">
+            <tr>
+                <td><label for="user">Username</label></td>
+                <td><input type="text" id="user" name="user"/> <br/></td>
+            </tr>
+            <tr>
+                <td><label for="pass">Password</label></td>
+                <td><input type="password" id="pass" name="pass" minlength="8" maxlength="254"/> <br/></td>
+            </tr>
+            <tr>
+                <td><label for="confirm">Confirm</label></td>
+                <td><input type="password" id="confirm" name="confirm"/></td>
+            </tr>
+            <tr>
+                <td colspan="2"><input type="Submit" value="Submit"/></td>
+            </tr>
+        </table>
+    </form>
+</div>
 <p id="formStatus"></p>
 <footer>
     UL Computer Society 2023-<span id="year">2023</span>
diff --git a/src/signup.html b/src/signup.html
new file mode 100644
index 0000000..5293929
--- /dev/null
+++ b/src/signup.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en-ie">
+<head>
+    <meta charset="UTF-8"/>
+    <title>Skynet Sign-up</title>
+    <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/>
+    <link rel="stylesheet" type="text/css" href="stylesheets/index.css"/>
+    <style>
+        /* Taken from the W3 schools loader tutorial */
+        .loader {
+            border: 16px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 16px solid #3498db;
+            width: 60px;
+            height: 60px;
+            -webkit-animation: spin 2s linear infinite; /* Safari */
+            animation: spin 20s linear;
+        }
+
+        /* Safari */
+        @-webkit-keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+            }
+            100% {
+                -webkit-transform: rotate(360deg);
+            }
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+<body>
+<div id="title">
+    <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
+                      height="81.56"/> </a>
+    <h1>Skynet Password Reset & Sign-up service</h1>
+</div>
+<div class="boxes">
+    <h2>Welcome to Skynet</h2>
+    <p>
+        Skynet is a server cluster that the UL Computer Society runs. If you previously had an account and need to
+        activate <br/>
+        it please click <a href="./modify.html">here</a> to set a contact email address for your account. IF you are a
+        new <br/>
+        user, please fill in the form below with the email that you use on ul wolves.
+    </p>
+    <form id="register">
+        <label for="mail">Email address</label>
+        <input type="email" id="mail" name="email"/> <br/>
+        <input type="submit" value="Submit"/>
+    </form>
+    <p id="formStatus"></p>
+</div>
+<footer>
+    UL Computer Society 2023-<span id="year">2023</span>
+</footer>
+<script>
+    const formEl = document.getElementById('register');
+    formEl.addEventListener('submit', (listener) => formHandler(listener));
+
+    function formHandler(listener) {
+        listener.preventDefault();
+        //HTML below taken from the W3 schools tutorial ()
+        document.getElementById('formStatus').innerHTML = "<div class='loader'></div>"
+        const formData = new FormData(formEl);
+        const email = formData.get("email");
+        const object = {email: email};
+        fetch('https://api.account.skynet.ie/ldap/new/email', {
+            method: 'POST',
+            body: JSON.stringify(object),
+            mode: "cors"
+        }).then(res => {
+            if (res.status === 200) {
+                document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
+            } else if (res.status === 500) {
+                document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
+            } else {
+                document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
+            }
+        }).catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>");
+    }
+</script>
+</body>
+<script>
+    document.getElementById('year').textContent = new Date().getFullYear().toString()
+</script>
+</html>
\ No newline at end of file
diff --git a/src/stylesheets/index.css b/src/stylesheets/index.css
new file mode 100644
index 0000000..eea55a1
--- /dev/null
+++ b/src/stylesheets/index.css
@@ -0,0 +1,28 @@
+/* General styling */
+body {
+    background-image: url(../images/backgroundsharkycoin.png);
+    text-align: center;
+}
+
+/* Title bar */
+#title {
+    display: inline-flex;
+    background-color: white;
+    height: auto;
+}
+
+#title img {
+    float: left;
+}
+
+.boxes {
+    display: -moz-flex;
+    background-color: #008B8B;
+    margin-left: 20%;
+    margin-right: 20%;
+    margin-bottom: 3%;
+}
+
+#table {
+    display: inline;
+}
\ No newline at end of file