diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml
new file mode 100644
index 0000000..2d2c6e3
--- /dev/null
+++ b/.idea/jsLinters/eslint.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <custom-configuration-file used="true" path="C:\know-your-nation\KnowYourNationFrontEnd\package.json" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
new file mode 100644
index 0000000..f8b4888
--- /dev/null
+++ b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
new file mode 100644
index 0000000..c93d862
Binary files /dev/null and b/.vs/slnx.sqlite differ
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..f6b35a0
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f35a7a9..67a8039 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -884,6 +884,31 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@react-bootstrap/react-popper": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz",
+      "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "@svgr/core": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@svgr/core/-/core-2.4.1.tgz",
@@ -3071,6 +3096,12 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
+      "dev": true
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -3467,6 +3498,16 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-env": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
@@ -4362,6 +4403,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -4500,6 +4550,15 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -5521,6 +5580,38 @@
         "bser": "^2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "dev": true,
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
+          "dev": true
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "dev": true,
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6106,7 +6197,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6124,11 +6216,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6146,7 +6240,8 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -6278,6 +6373,7 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6467,7 +6563,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6515,6 +6612,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6553,11 +6651,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
@@ -6782,6 +6882,12 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==",
+      "dev": true
+    },
     "gzip-size": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@@ -8019,6 +8125,16 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "dev": true,
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -8935,6 +9051,12 @@
         "topo": "2.x.x"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
+      "dev": true
+    },
     "js-base64": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@@ -9085,6 +9207,12 @@
       "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
       "integrity": "sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI="
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=",
+      "dev": true
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -10798,6 +10926,16 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "dev": true,
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -11577,6 +11715,12 @@
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.1.0.tgz",
       "integrity": "sha512-CPCdcFxx7fEcDMWTDjXe2Wypt4JuMt4q5Q2UrpTcyBBkLiCIyPEh/mCGmUWIcNkKGyXwQ9Y2wVhlKm6ketiBNQ=="
     },
+    "popper.js": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
+      "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==",
+      "dev": true
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -15045,9 +15189,9 @@
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
     "prettier": {
-      "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.2.tgz",
-      "integrity": "sha512-vBMdCn1LjrFi2CpBsiWVKOq+WP9poXDTIGPe2sG3eE33LQ3b6IUgmaMjLZKKY+frD/8FqPeEK1qAx9mOV8iruA=="
+      "version": "1.16.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.4.tgz",
+      "integrity": "sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g=="
     },
     "pretty-bytes": {
       "version": "4.0.2",
@@ -15138,6 +15282,27 @@
         "reflect.ownkeys": "^0.2.0"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
+      "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
+      "dev": true,
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
@@ -15349,6 +15514,52 @@
         }
       }
     },
+    "react-bootstrap": {
+      "version": "1.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.5.tgz",
+      "integrity": "sha512-Osm0OtTbYwfsT1rpu88ESWuAHZxfaHFNKFiW8w3w+6YY9/bLEPHbGRZA6W21fg5yvcuKN9hJKT857TTHgY7SoQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@react-bootstrap/react-popper": "1.2.1",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "invariant": "^2.2.3",
+        "keycode": "^2.1.2",
+        "popper.js": "^1.14.6",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "react-context-toolbox": "^2.0.2",
+        "react-overlays": "^1.0.0",
+        "react-prop-types": "^0.4.0",
+        "react-transition-group": "^2.5.1",
+        "uncontrollable": "^6.0.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
+          "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        }
+      }
+    },
+    "react-context-toolbox": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz",
+      "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A==",
+      "dev": true
+    },
     "react-dev-utils": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-7.0.1.tgz",
@@ -15453,11 +15664,115 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-flags-select": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/react-flags-select/-/react-flags-select-1.1.10.tgz",
+      "integrity": "sha512-8bGih8XVIXwXpuio0I7MqU3nqh82Hdj28rS21HzNUAVdKGtO3lqY6TLDNSTpanAupXSXGfkajkpFQv5XsRvUfA==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
+    "react-geocode": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/react-geocode/-/react-geocode-0.1.2.tgz",
+      "integrity": "sha512-XEJkEPmwufeGykul/eqJyA1WduXa3IGxJam5BA0jzYfs/KMjCrtQjJl1FcH9Cybn05oQnRVUsRW8OGwEmTER5g=="
+    },
     "react-is": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
       "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "dev": true
+    },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "^0.2.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        }
+      }
+    },
+    "react-overlays": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.1.1.tgz",
+      "integrity": "sha512-acL+HwhD1I/AY1Hz7qWQvnBaXEZt5K+huZ2AySdBtJORKNSxnLrd6j2FL3KOEM3rQQWuzAubCYiinlrm2XxXFA==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "react-context-toolbox": "^2.0.2",
+        "react-popper": "^1.3.2",
+        "uncontrollable": "^6.0.0",
+        "warning": "^4.0.2"
+      }
+    },
+    "react-popper": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",
+      "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "<=0.2.2",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+          "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+          "dev": true,
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        },
+        "typed-styles": {
+          "version": "0.0.7",
+          "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+          "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==",
+          "dev": true
+        }
+      }
+    },
+    "react-prop-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz",
+      "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=",
+      "dev": true,
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-redux": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.0.tgz",
@@ -15606,6 +15921,14 @@
         "topojson-client": "2.1.0"
       }
     },
+    "react-social-login-buttons": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-social-login-buttons/-/react-social-login-buttons-2.3.0.tgz",
+      "integrity": "sha512-5+4jGSXKrC3+rCKTWiP7ETOKd72dLrqsbdbvZOXMcmOdVuBWRzZolbFVtWTC3SGrAKWlTQIXMl0sDpwiVhrf0A==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-test-renderer": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.7.0.tgz",
@@ -15618,6 +15941,18 @@
         "scheduler": "^0.12.0"
       }
     },
+    "react-transition-group": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz",
+      "integrity": "sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg==",
+      "dev": true,
+      "requires": {
+        "dom-helpers": "^3.3.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -16027,9 +16362,9 @@
       }
     },
     "redux-devtools-extension": {
-      "version": "2.13.7",
-      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.7.tgz",
-      "integrity": "sha512-F2GlWMWxCTJGRjJ+GSZcGDcVAj6Pbf77FKb4C9S8eni5Eah6UBGNwxNj8K1MTtmItdZH1Wx+EvIifHN2KKcQrw=="
+      "version": "2.13.8",
+      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz",
+      "integrity": "sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg=="
     },
     "reflect.ownkeys": {
       "version": "0.2.0",
@@ -16732,9 +17067,9 @@
       }
     },
     "sass": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.16.1.tgz",
-      "integrity": "sha512-lKoiOI/zsAHrdYAdcWBM0pynYCmK0t7N9OAVjxAoYvo0mDBQmlhM6w+zNuFQYeS6d3VF+7KVWwkX6oWNMJxVag==",
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.17.0.tgz",
+      "integrity": "sha512-aFi9RQqrCYkHB2DaLKBBbdUhos1N5o3l1ke9N5JqWzgSPmYwZsdmA+ViPVatUy/RPA21uejgYVUXM7GCh8lcdw==",
       "requires": {
         "chokidar": "^2.0.0"
       }
@@ -18279,11 +18614,23 @@
         "mime-types": "~2.1.18"
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==",
+      "dev": true
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
@@ -18404,6 +18751,15 @@
         }
       }
     },
+    "uncontrollable": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.0.0.tgz",
+      "integrity": "sha512-gmy2ESW40LGbijSbW5piBGiPv55IgyDbjQcMr7LkDR5icpw/06UgMqULAGDBAcFn2a9d/SRPgcb3oo8hdEUfIw==",
+      "dev": true,
+      "requires": {
+        "invariant": "^2.2.4"
+      }
+    },
     "unfetch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-3.0.0.tgz",
diff --git a/package.json b/package.json
index efb2262..63fb93d 100644
--- a/package.json
+++ b/package.json
@@ -6,23 +6,28 @@
     "bootstrap": "^4.2.1",
     "next": "^7.0.2",
     "node-sass": "^4.11.0",
+    "prettier": "^1.16.4",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-flags-select": "^1.1.10",
+    "react-geocode": "^0.1.2",
+    "react-motion": "^0.5.2",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-script": "^2.0.5",
     "react-scripts": "^2.1.3",
     "react-simple-maps": "^0.12.1",
+    "react-social-login-buttons": "^2.3.0",
     "redux": "^4.0.1",
-    "redux-devtools-extension": "^2.13.7",
-    "sass": "^1.16.1",
+    "redux-devtools-extension": "^2.13.8",
+    "sass": "^1.17.0",
     "serve": "^10.1.1",
     "victory": "^31.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "cross-env CI=true react-scripts test --env=jsdom",
+    "test": "cross-env CI=true react-scripts test",
     "dev": "next",
     "eject": "react-scripts eject"
   },
@@ -37,9 +42,10 @@
   ],
   "devDependencies": {
     "cross-env": "^5.2.0",
+    "jquery": "^3.3.1",
+    "react-bootstrap": "^1.0.0-beta.5",
     "react-test-renderer": "^16.7.0",
     "redux": "^4.0.1",
     "uuid": "^3.3.2"
   }
 }
-
diff --git a/public/index.html b/public/index.html
index ff63965..c8bdd93 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -14,6 +15,9 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
diff --git a/src/App.js b/src/App.js
index 3aa3dcc..8aee4dd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,37 @@
 import React, { Component } from "react";
-import logo from "./logo.svg";
+//import logo from "./logo.svg";
 import "./App.scss";
-import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";
-
+import { BrowserRouter, Route, Switch /*, NavLink */ } from "react-router-dom";
 import "./App.sass";
-import Dummy from "./js/components/Dummy";
+//import Dummy from "./js/components/Dummy";
 import Home from "./js/components/Home/Home";
-import Navbar from "./js/components/Navbar/Navbar";
+//import Navbar from "./js/components/Navbar/Navbar";
+//import { Provider } from "react-redux";
+import Books from "./js/components/Books/Books";
+import Login from "./js/components/LoginPage/Login";
+import SignUp from "./js/components/RegisterPage/SignUp";
+import ForgotSignIn from "./js/components/ForgotSignIn/ForgotSignIn";
+import Volunteer from "./js/components/Volunteer/Volunteer";
+import VolunteerEvent from "./js/components/VolunteerEvent/volunteerEvent";
 
 class App extends Component {
   render() {
+    var loc_navBarTitle = "KnowYourNation";
+    var loc_navbarItems = [false, true, true, true];
+
     return (
       <div className="App">
         <BrowserRouter>
           <div>
-            <Navbar />
             <Switch>
-              <Route path="/Dummy" component={Dummy} />
+              <Route path="/login" component={Login} />
+              <Route path="/register" component={SignUp} />
+              <Route path="/resetpassword" component={ForgotSignIn} />
+              <Route path="/Books" component={Books} />
+              <Route path="/Volunteer" component={Volunteer} />
+              <Route path="/volunteerEvent/:id" component={VolunteerEvent} />
+              
+
               <Route component={Home} />
             </Switch>
           </div>
diff --git a/src/App.sass b/src/App.sass
index 5808562..0fe4756 100644
--- a/src/App.sass
+++ b/src/App.sass
@@ -1,6 +1,19 @@
 $font-stack:    Helvetica, sans-serif
 $primary-color: #111
 
-div
-  font: 100% $font-stack
-  color: $primary-color
\ No newline at end of file
+.borderRed
+  border: 1px solid red
+  width: 100%
+
+.borderGreen
+  border: 1px solid green
+  
+.borderYellow
+  border: 1px solid yellow
+
+.minheight200
+  min-height: 200px
+.width100
+  width: 100%
+.colorWhite
+  color: white
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ed532f5..f66bd5a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,11 @@
-import React from "react";
+import React, { Component } from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
 import store from "./js/store/index";
 import App from "./App.js";
 import 'bootstrap/dist/css/bootstrap.css';
 import * as serviceWorker from './serviceWorker';
+import 'react-flags-select/scss/react-flags-select.scss';
 
 render(
     <Provider store={store}>
diff --git a/src/js/actions/volunteer-action.js b/src/js/actions/volunteer-action.js
new file mode 100644
index 0000000..d17c46b
--- /dev/null
+++ b/src/js/actions/volunteer-action.js
@@ -0,0 +1,6 @@
+import {VOLUNTEERINFO} from ".././constants/volunteer-constants"
+
+export const logVolunteer = function logVolunteer(volunteer)
+{
+    return dispatch => dispatch({type:VOLUNTEERINFO,volunteer});
+}
\ No newline at end of file
diff --git a/src/js/components/Books/Book.sass b/src/js/components/Books/Book.sass
new file mode 100644
index 0000000..66a2463
--- /dev/null
+++ b/src/js/components/Books/Book.sass
@@ -0,0 +1,7 @@
+.bookCardFrame
+    min-height: 150px
+.minHeight150
+    min-height: 150px
+.noPaddMar
+    padding: 3px !important;
+    margin: 0 !important;
\ No newline at end of file
diff --git a/src/js/components/Books/Bookcard/Bookcard.js b/src/js/components/Books/Bookcard/Bookcard.js
new file mode 100644
index 0000000..58df83c
--- /dev/null
+++ b/src/js/components/Books/Bookcard/Bookcard.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+
+import './Bookcard.sass';
+
+class  Bookcard extends Component {
+  render() {
+    return (
+    <div className="Bookcard ">
+        <div className="bookcardImage borderYellow ">
+            Book Name
+        </div>
+        <div className="container-fluid  bookcardAccessory borderYellow ">
+            <div className="row ">
+                <div className="col-8  fontsize8px noPaddMar">
+                    Book Name
+                </div>
+                <div className="col-4 fontsize8px  height100">
+                    <i className="far fa-bookmark"></i>
+                </div>
+                <div className="col-8  noPaddMar">
+                    <i className="far fontsize10px fa-star"></i>
+                    <i className="far fontsize10px fa-star"></i>
+                    <i className="far fontsize10px fa-star"></i>
+                    <i className="far fontsize10px fa-star"></i>
+                    <i className="far fontsize10px fa-star"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    // <div className="col-12 Bookcard">
+    //    <div className="row bookcarddiv">
+    //         <div className="col-12 bookcardImage colorWhite"> 
+    //             sdfsf
+    //         </div>
+    //         <div className="col-12 bookcardAccessory">
+    //             <div className="row">
+    //                 <div className="col-12 "> 
+    //                     Book Name
+    //                 </div>
+    //                 <div className="col-12">
+    //                     <div className="row">
+    //                         <div className="col-8 borderRed">
+    //                                 <i className="far fontsize10px fa-star"></i>
+    //                                 <i className="far fontsize10px fa-star"></i>
+    //                                 <i className="far fontsize10px fa-star"></i>
+    //                                 <i className="far fontsize10px fa-star"></i>
+    //                                 <i className="far fontsize10px fa-star"></i>
+    //                             </div>
+    //                             <div className="col-4 borderRed">
+    //                                 <i className="far fa-bookmark"></i>
+    //                             </div>
+    //                         </div>
+    //                     </div>
+                        
+    //                 </div>
+    //             </div> 
+    //     </div>
+    // </div>
+    );
+  }
+}
+
+export default Bookcard;
diff --git a/src/js/components/Books/Bookcard/Bookcard.sass b/src/js/components/Books/Bookcard/Bookcard.sass
new file mode 100644
index 0000000..fbb87ed
--- /dev/null
+++ b/src/js/components/Books/Bookcard/Bookcard.sass
@@ -0,0 +1,26 @@
+.Bookcard
+    height: 150px
+    min-height: 100px
+    width: 100%
+.bookcardImage
+    background-color: black
+    height: 60%
+    min-height: 10px
+.bookcardAccessory
+    height: 40%
+    min-height: 10px
+    background-color: grey
+    width: 100%
+.fontsize10px
+    font-size: 10px
+.fontsize8px
+    font-size: 8px
+    height: 20px
+
+.backcol
+    background-color: grey
+
+.height100
+    height: 100%
+    margin-top: 10px
+
diff --git a/src/js/components/Books/Books.js b/src/js/components/Books/Books.js
new file mode 100644
index 0000000..3419d49
--- /dev/null
+++ b/src/js/components/Books/Books.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import Navbar from '../Navbar/Navbar';
+import Bookcard from '../Books/Bookcard/Bookcard';
+
+import './Book.sass';
+class  Books extends Component {
+  render() {
+    var loc_navBarTitle  = "BOOKS";
+    var loc_navbarItems = [true,true,true,true];
+
+    return (
+      <div className="Books">
+        <Navbar titleFromParent={loc_navBarTitle} navbarItems={loc_navbarItems}/>
+        <br/>
+        <div className="container ">
+            <div className="row">
+                <div className="col-4  noPaddMar"><Bookcard/></div>           
+                <div className="col-4  noPaddMar"><Bookcard/></div>           
+                <div className="col-4  noPaddMar"><Bookcard/></div>           
+                <div className="col-4  noPaddMar"><Bookcard/></div>           
+            </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Books;
diff --git a/src/js/components/ForgotSignIn/ForgotSignIn.js b/src/js/components/ForgotSignIn/ForgotSignIn.js
new file mode 100644
index 0000000..da14886
--- /dev/null
+++ b/src/js/components/ForgotSignIn/ForgotSignIn.js
@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+
+class ForgotSignIn extends Component {
+  render() {
+    return (
+      <div className="ForgotSign">
+        <h1> ForgotSign Page </h1>
+      </div>
+    );
+  }
+}
+
+export default ForgotSignIn;
diff --git a/src/js/components/Home/Countries.js b/src/js/components/Home/Countries.js
new file mode 100644
index 0000000..65f6df8
--- /dev/null
+++ b/src/js/components/Home/Countries.js
@@ -0,0 +1,60 @@
+import React, {Component} from "react";
+import Map from "./Map";
+import ReactFlagsSelect from 'react-flags-select';
+import  countries from 'react-flags-select/es/countries';
+import Geocode from "react-geocode";
+
+Geocode.setApiKey("AIzaSyBiCz9njYP8nYxEUEQLzltCM8kAnm7z6To");
+
+class Mapbuttons extends Component {
+    constructor() {
+        super()
+        this.state = {
+            center: [0, 0]
+        }
+        this.getCountryCode = this.getCountryCode.bind(this);
+        this.setCountry = this.setCountry.bind(this);
+    }
+
+    setCountry(countryCode) {
+        this.getCountryCode( countries[countryCode]);
+    }
+
+    getCountryCode(country) {
+        Geocode.fromAddress(country).then(
+            response => {
+                const { lat, lng } = response.results[0].geometry.location;
+                this.setState({center: [lng,lat] });
+            },
+            error => {
+                console.error(error);
+            }
+        );
+    }
+
+    render() {
+        return (
+            <div className="container-fluid">
+                <div className="row">
+                    <div className="col-md-9 col-12">
+                        <Map center={this.state.center}/>
+                    </div>
+                    <div className="col-md-2 col-12">
+                        {/*DropDown option where country is selected, with configuration */}
+                        <ReactFlagsSelect  searchable={true}
+                                           defaultCountry= "ZA"
+                                           searchPlaceholder="Know Your Nation"
+                                           selectedSize={16}
+                                           optionsSize={14}
+                                           className="menu-flags"
+                                           alignOptions="right"
+                                           onSelect={this.setCountry}/>
+                    </div>
+                    <div className="col-md-1"/>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Mapbuttons
\ No newline at end of file
diff --git a/src/js/components/Home/Home.js b/src/js/components/Home/Home.js
index 1eea5ae..01a49be 100644
--- a/src/js/components/Home/Home.js
+++ b/src/js/components/Home/Home.js
@@ -1,23 +1,27 @@
-import React, { Component } from 'react';
-import ArticleApp from "../App";
-// import worker from "../../other/workerz";
-import MyWorker from '../../other/workerz';
+import React, { Component } from "react";
+import Mapbuttons from "./Countries";
+import Navbar from "../Navbar/Navbar";
+import { NavLink } from "react-router-dom";
+import "./Home.scss";
 
 class Home extends Component {
-  
-  render() {
 
-    var myWorker = new Worker(MyWorker);
-    
-    myWorker.onmessage = (m) => {
-        console.log("msg from worker: ", m.data);
-    };
-    myWorker.postMessage('im from main');
+  constructor() {
+    super();
+    this.state = { center: [0, 0] };
+  }
+
+  render() {
+    var loc_navBarTitle = "KnowYourNation";
+    var loc_navbarItems = [false, true, true, false];
 
     return (
-      <div className="Home">
-      <h4> Home Component </h4>
-      <ArticleApp/>
+      <div className="home">
+        <Navbar titleFromParent={loc_navBarTitle} navbarItems={loc_navbarItems}/>
+        <NavLink to="/Books">
+          <button className="btn btn-success"> Books </button>
+        </NavLink>
+        <Mapbuttons />
       </div>
     );
   }
diff --git a/src/js/components/Home/Home.scss b/src/js/components/Home/Home.scss
new file mode 100644
index 0000000..d840013
--- /dev/null
+++ b/src/js/components/Home/Home.scss
@@ -0,0 +1,3 @@
+.home {
+    background-color: #ccc;
+}
\ No newline at end of file
diff --git a/src/js/components/Home/Map.js b/src/js/components/Home/Map.js
new file mode 100644
index 0000000..3daef0a
--- /dev/null
+++ b/src/js/components/Home/Map.js
@@ -0,0 +1,70 @@
+import React from "react";
+import {
+    ComposableMap,
+    ZoomableGlobe,
+    Geographies,
+    Geography
+} from "react-simple-maps";
+import { Motion, spring } from "react-motion";
+
+const mapStyles = {
+    width: "60%",       // Where the globe width size on the page is set. TODO: need a dynmic scale to adjust globe size
+    height: "100%",
+    outline: "#888888"
+};
+
+const Map = ({ center }) => (
+    <div>
+        <Motion
+            defaultStyle={{
+                x: center[0],
+                y: center[1]
+            }}
+            style={{
+                x: spring(center[0]),
+                y: spring(center[1])
+            }}>
+            {({ x, y }) => (
+                <ComposableMap
+                    width={500}
+                    height={500}
+                    projection="orthographic"
+                    projectionConfig={{ scale: 220 }}
+                    style={mapStyles}>
+                    <ZoomableGlobe center={[x, y]}>
+                        <circle
+                            cx={250}
+                            cy={250}
+                            r={220}
+                            fill="#26BAF2" //ocean colour fill
+                            stroke = "#000"
+                            strokeWidth = "6"
+                        />
+                        <Geographies
+                            disableOptimization
+                            geography="https://unpkg.com/world-atlas@1.1.4/world/110m.json"
+                        >
+                            {(geos, proj) =>
+                                geos.map((geo, i) => (
+                                    <Geography
+                                        key={geo.id + i}
+                                        geography={geo}
+                                        projection={proj}
+                                        style={{
+                                            default: { fill: "#9BC214",
+                                                stroke: "#000",
+                                                strokeWidth: 0.4}, //countries styling specifications
+                                            // hover : {fill: "#f258e9"} // TODO: Onhover to be set at a later stage waiting for design
+                                        }}
+                                    />
+                                ))
+                            }
+                        </Geographies>
+                    </ZoomableGlobe>
+                </ComposableMap>
+            )}
+        </Motion>
+    </div>
+);
+
+export default Map;
diff --git a/src/js/components/Home/MapStyles.sass b/src/js/components/Home/MapStyles.sass
new file mode 100644
index 0000000..61b03c2
--- /dev/null
+++ b/src/js/components/Home/MapStyles.sass
@@ -0,0 +1,21 @@
+body
+  margin: 0
+
+.btn
+  display: inline-block
+  background: #ff5722
+  color: #ff553e
+  font-family: sans-serif
+  font-size: inherit
+  line-height: 1.2
+  padding: 0.5rem 1rem
+  border: 2px solid rebeccapurple
+  margin: 0.5rem
+  border-radius: 0.1875rem
+  cursor: pointer
+
+.btn:hover
+  background: #e6e121
+.btn:focus
+  background: #e6e121
+
diff --git a/src/js/components/LoginPage/ButtonStyles.css b/src/js/components/LoginPage/ButtonStyles.css
new file mode 100644
index 0000000..531030b
--- /dev/null
+++ b/src/js/components/LoginPage/ButtonStyles.css
@@ -0,0 +1,9 @@
+.btn-circle {
+  width: 30px;
+  height: 30px;
+  padding: 6px 0px;
+  border-radius: 15px;
+  text-align: center;
+  font-size: 12px;
+  line-height: 1.42857;
+}
diff --git a/src/js/components/LoginPage/Login.js b/src/js/components/LoginPage/Login.js
new file mode 100644
index 0000000..155d374
--- /dev/null
+++ b/src/js/components/LoginPage/Login.js
@@ -0,0 +1,146 @@
+import { Link } from "react-router-dom";
+import Row from "react-bootstrap/Row";
+import FormGroup from "react-bootstrap/FormGroup";
+import React, { Component } from "react";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import FormLabel from "react-bootstrap/FormLabel";
+import "./Login.sass";
+import "./ButtonStyles.css";
+import FacebookLoginButton from "react-social-login-buttons/lib/buttons/FacebookLoginButton";
+import GoogleLoginButton from "react-social-login-buttons/lib/buttons/GoogleLoginButton";
+import TwitterLoginButton from "react-social-login-buttons/lib/buttons/TwitterLoginButton";
+
+import {
+  isEmail,
+  isEmpty,
+  isLength,
+  isContainWhiteSpace
+} from "../../helpers/validator";
+
+class Login extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      formData: {}, // Contains login form data
+      errors: {}, // Contains login field errors
+      formSubmitted: false, // Indicates submit status of login form
+      loading: false // Indicates in progress state of login form
+    };
+  }
+
+  handleInputChange = event => {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+
+    let { formData } = this.state;
+    formData[name] = value;
+
+    this.setState({
+      formData: formData
+    });
+  };
+
+  validateLoginForm = e => {
+    let errors = {};
+    const { formData } = this.state;
+
+    if (isEmpty(formData.email)) {
+      errors.email = "Email can't be blank";
+    } else if (!isEmail(formData.email)) {
+      errors.email = "Please enter a valid email";
+    }
+
+    if (isEmpty(formData.password)) {
+      errors.password = "Password can't be blank";
+    } else if (isContainWhiteSpace(formData.password)) {
+      errors.password = "Password should not contain white spaces";
+    } else if (!isLength(formData.password, { gte: 6, lte: 16, trim: true })) {
+      errors.password = "Password's length must between 6 to 16";
+    }
+
+    if (isEmpty(errors)) {
+      return true;
+    } else {
+      return errors;
+    }
+  };
+
+  login = e => {
+    e.preventDefault();
+
+    let errors = this.validateLoginForm();
+
+    if (errors === true) {
+      alert("You are successfully signed in...");
+      window.location.reload();
+    } else {
+      this.setState({
+        errors: errors,
+        formSubmitted: true
+      });
+    }
+  };
+
+  render() {
+    const { errors, formSubmitted } = this.state;
+
+    return (
+      <div className="Login">
+        <Row>
+          <Form onSubmit={this.login}>
+            <FormGroup
+              controlId="email"
+              validationState={
+                formSubmitted ? (errors.email ? "error" : "success") : null
+              }
+            >
+              <FormLabel>Email</FormLabel>
+              <Form.Control
+                type="text"
+                name="email"
+                placeholder="Enter your email"
+                onChange={this.handleInputChange}
+              />
+              {errors.email && <Form>{errors.email}</Form>}
+            </FormGroup>
+            <FormGroup
+              controlId="password"
+              validationState={
+                formSubmitted ? (errors.password ? "error" : "success") : null
+              }
+            >
+              <FormLabel>Password</FormLabel>
+              <Form.Control
+                type="password"
+                name="password"
+                placeholder="Enter your password"
+                onChange={this.handleInputChange}
+              />
+              {errors.password && <Form>{errors.password}</Form>}
+
+              <Link to="/resetpassword">Forget Password or UserName?</Link>
+              <Link to="/register"> Not Registered? Sign Up </Link>
+              <div className="d-flex flex-column">
+                <ButtonGroup className="mt-3">
+                  <FormLabel>OR Login with </FormLabel>
+                  <FacebookLoginButton> </FacebookLoginButton>
+                  <GoogleLoginButton> </GoogleLoginButton>
+                  <TwitterLoginButton> </TwitterLoginButton>
+                </ButtonGroup>
+              </div>
+            </FormGroup>
+            <Button variant="primary" type="submit">
+              Sign-In
+            </Button>
+          </Form>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Login;
diff --git a/src/js/components/LoginPage/Login.sass b/src/js/components/LoginPage/Login.sass
new file mode 100644
index 0000000..c3c6f32
--- /dev/null
+++ b/src/js/components/LoginPage/Login.sass
@@ -0,0 +1,8 @@
+.Login
+    margin: 0 auto
+    margin-top: 70px
+    max-width: 400px
+    padding: 40px 40px
+    background: #fff
+
+
diff --git a/src/js/components/Navbar/Navbar.js b/src/js/components/Navbar/Navbar.js
index 7aee2e7..c5536e5 100644
--- a/src/js/components/Navbar/Navbar.js
+++ b/src/js/components/Navbar/Navbar.js
@@ -1,19 +1,26 @@
 import React, { Component } from 'react';
-import { BrowserRouter, Route, Switch,NavLink } from "react-router-dom";
+import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";
 
-import './Navbar.sass';
-import Dummy from "../Dummy";
-import Home from "../Home/Home";
+import "./Navbar.sass";
+
+/*
+  loc_navBarTitle: String passed to object for the title
+navbarItems: Visibility of the search, user and (bars / cross) icons.
+*/
 class Navbar extends Component {
-    render() {
+  render() {
     return (
-      <div className="Navbar">
-        <h3> Navbar </h3>
-        <hr/>
-        
-          <NavLink to="/"> Home </NavLink>
-          <NavLink to="/Dummy"> Dummy </NavLink>
-      </div>
+<nav className="navbar borderRed navbar-expand-lg navbar-dark bg-dark">
+  {this.props.navbarItems[0] === true ?<NavLink to="/"><div className="fas"><i class="fas fa-chevron-circle-left"></i></div></NavLink>:null}
+  <a className="navbar-brand" href="#">{this.props.titleFromParent}</a>
+    <ul className="nav navbar-right ml-auto">
+      {this.props.navbarItems[1] === true ? <li><i className="fas fa-search"></i></li> : null}
+      {this.props.navbarItems[2] === true ? (<NavLink to="/login"><li><i className="fas fa-user-circle"></i></li> </NavLink>): null}
+      {this.props.navbarItems[3] === true ? <li><i className="fas fa-bars"></i></li> : null}
+      {this.props.navbarItems[3] === false ? <i className="fas fa-times"></i> : null}
+    </ul>
+</nav>
+
     );
   }
 }
diff --git a/src/js/components/Navbar/Navbar.sass b/src/js/components/Navbar/Navbar.sass
index 988f05e..d488beb 100644
--- a/src/js/components/Navbar/Navbar.sass
+++ b/src/js/components/Navbar/Navbar.sass
@@ -2,7 +2,17 @@ $font-stack:    Helvetica, sans-serif
 $navbarprimary-color: #EEE
 
 .Navbar
-  font: 100% $font-stack
-  border: 2px solid red
+  max-height: 50px
+  border: 1px solid black
   background-color: grey
-  color: $navbarprimary-color
\ No newline at end of file
+  color: $navbarprimary-color
+
+.fas
+  color: white
+  margin-left: 5px
+  margin-right: 5px
+  &:hover
+    cursor: pointer
+
+.marginleft5
+  margin-left: 5px
\ No newline at end of file
diff --git a/src/js/components/RegisterPage/SignUp.js b/src/js/components/RegisterPage/SignUp.js
new file mode 100644
index 0000000..24157f4
--- /dev/null
+++ b/src/js/components/RegisterPage/SignUp.js
@@ -0,0 +1,139 @@
+import React, { Component } from "react";
+import FormGroup from "react-bootstrap/FormGroup";
+import Row from "react-bootstrap/Row";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+import FormLabel from "react-bootstrap/FormLabel";
+import "./SignUp.sass";
+
+export default class Signup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLoading: false,
+      email: "",
+      password: "",
+      confirmPassword: "",
+      confirmationCode: "",
+      newUser: null
+    };
+  }
+
+  validateForm() {
+    return (
+      this.state.email.length > 0 &&
+      this.state.password.length > 0 &&
+      this.state.password === this.state.confirmPassword
+    );
+  }
+
+  validateConfirmationForm() {
+    return this.state.confirmationCode.length > 0;
+  }
+
+  handleChange = event => {
+    this.setState({
+      [event.target.id]: event.target.value
+    });
+  };
+
+  handleSubmit = async event => {
+    event.preventDefault();
+
+    this.setState({ isLoading: true });
+
+    this.setState({ newUser: "test" });
+
+    this.setState({ isLoading: false });
+  };
+
+  handleConfirmationSubmit = async event => {
+    event.preventDefault();
+
+    this.setState({ isLoading: true });
+  };
+
+  renderConfirmationForm() {
+    return (
+      <Row>
+        <Form onSubmit={this.handleConfirmationSubmit}>
+          <FormGroup controlId="confirmationCode" bsSize="large">
+            <FormLabel>Confirmation Code</FormLabel>
+            <Form.Control
+              autoFocus
+              type="tel"
+              value={this.state.confirmationCode}
+              onChange={this.handleChange}
+            />
+            <Form.HelpBlock>
+              Please check your email for the code.
+            </Form.HelpBlock>
+          </FormGroup>
+          <Button
+            block
+            bsSize="large"
+            disabled={!this.validateConfirmationForm()}
+            type="submit"
+            isLoading={this.state.isLoading}
+            text="Verify"
+            loadingText="Verifying…"
+          />
+        </Form>
+      </Row>
+    );
+  }
+
+  renderForm() {
+    return (
+      <Row>
+        <Form onSubmit={this.handleSubmit}>
+          <FormGroup controlId="email" bsSize="large">
+            <FormLabel>Email</FormLabel>
+            <Form.Control
+              autoFocus
+              type="email"
+              value={this.state.email}
+              onChange={this.handleChange}
+            />
+          </FormGroup>
+          <FormGroup controlId="password" bsSize="large">
+            <FormLabel>Password</FormLabel>
+            <Form.Control
+              value={this.state.password}
+              onChange={this.handleChange}
+              type="password"
+            />
+          </FormGroup>
+          <FormGroup controlId="confirmPassword" bsSize="large">
+            <FormLabel>Confirm Password</FormLabel>
+            <Form.Control
+              value={this.state.confirmPassword}
+              onChange={this.handleChange}
+              type="password"
+            />
+          </FormGroup>
+          <Button
+            block
+            bsSize="large"
+            disabled={!this.validateForm()}
+            type="submit"
+            isLoading={this.state.isLoading}
+            text="Signup"
+            loadingText="Signing up…"
+          />
+        </Form>
+      </Row>
+    );
+  }
+
+  render() {
+    return (
+      <div className="Signup">
+        {this.state.newUser === null
+          ? this.renderForm()
+          : this.renderConfirmationForm()}
+      </div>
+    );
+  }
+}
diff --git a/src/js/components/RegisterPage/SignUp.sass b/src/js/components/RegisterPage/SignUp.sass
new file mode 100644
index 0000000..8f2ac2f
--- /dev/null
+++ b/src/js/components/RegisterPage/SignUp.sass
@@ -0,0 +1,6 @@
+.SignUp
+    margin: 0 auto
+    margin-top: 70px
+    max-width: 400px
+    padding: 40px 40px
+    background: #fff
\ No newline at end of file
diff --git a/src/js/components/Volunteer/Volunteer.js b/src/js/components/Volunteer/Volunteer.js
new file mode 100644
index 0000000..0017ef2
--- /dev/null
+++ b/src/js/components/Volunteer/Volunteer.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import Navbar from "../Navbar/Navbar";
+import { NavLink } from "react-router-dom";
+import "./volunteer.scss";
+
+class Volunteer extends Component {
+
+
+
+
+    componentWillMount() {
+        fetch('https://localhost:44311/api/volunteer/events')
+            .then((response) => response.json())
+            .then(
+                (data) => {
+                    console.log(data);
+                    this.projects = data.map((item) => {
+
+
+                        return (
+                            <tr>
+                                  <NavLink to={`/volunteerEvent/${item.id}`} ><button   type="button" class="btn btn-secondary btn-lg btn-block btn-volunteer-title" >{item.name}</button></NavLink>  
+                            </tr>
+                        )
+                    })
+                    this.setState({
+                        projects: this.projects
+                    })
+                },
+                (error) => {
+                    console.log(error);
+                });
+    }
+    render() {
+
+        let navBarTitle = "Volunteering";
+        let navbarItems = [true, false, false, true];
+
+        return (
+            <div className="volunteer">
+                <Navbar titleFromParent={navBarTitle} navbarItems={navbarItems} />
+                <img src="http://placehold.it/150x150" class="img-responsive center-block"></img>
+                <h1> volunteer</h1>
+                <p>Speedy's longs suffering wife, Miriam is a solid, livel-handed partner to her fun-loving husband</p>
+                <table align="center" width="90%"   >
+
+                    <tbody >
+                        {this.projects}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}
+export default Volunteer;
\ No newline at end of file
diff --git a/src/js/components/Volunteer/volunteer.scss b/src/js/components/Volunteer/volunteer.scss
new file mode 100644
index 0000000..ba504f8
--- /dev/null
+++ b/src/js/components/Volunteer/volunteer.scss
@@ -0,0 +1,9 @@
+.btn-volunteer-title{
+    border-radius: 100px !important;
+    margin-bottom: 15px;
+}
+
+.volunteer{
+    background: grey;
+    min-height: 100vh;
+}
\ No newline at end of file
diff --git a/src/js/components/VolunteerEvent/volunteerEvent.js b/src/js/components/VolunteerEvent/volunteerEvent.js
new file mode 100644
index 0000000..e822341
--- /dev/null
+++ b/src/js/components/VolunteerEvent/volunteerEvent.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import Navbar from "../Navbar/Navbar";
+import { NavLink } from "react-router-dom";
+import "./volunteerEvent.scss";
+
+class volunteerEvent extends Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            data: {}
+        }
+    }
+    componentWillMount() {
+        fetch(`https://localhost:44311/api/Volunteer/getevents?id=${this.props.match.params.id}`)
+            .then((response) => response.json())
+            .then(
+                (data) => {
+                    console.log(data);
+                    this.setState({
+                        data
+                    })
+                },
+                (error) => {
+                    console.log(error);
+                });
+    }
+    render() {
+
+        let navBarTitle = "Volunteering";
+        let navbarItems = [true, false, false, true];
+
+        return (
+            !this.state.data ? <p>Loading ...</p> : 
+            <div className="volunteerEvent">
+               {/*this.props.match.params.description*/}
+                <Navbar titleFromParent={navBarTitle} navbarItems={navbarItems} />
+                <img src="http://placehold.it/150x150" class="img-responsive center-block"></img>
+                <h1> volunteer event</h1>
+                <p>{this.state.data.description}</p>
+                
+       
+                <table    >
+                    <tbody >
+                        <tr>
+                        <td >
+
+                            <p>{this.state.data.postalcode}</p>
+                            <p>{this.state.data.suburb} , {this.state.data.city}, {this.state.data.street} </p>
+                           <p> {this.state.data.postalCode}</p>
+                            <p>{this.state.data.date}</p>
+                       
+                        </td>
+                       
+                        </tr>
+                        <tr> <button   type="button" class="btn btn-secondary  btn-volunteer-title" >Volunteer</button>  </tr>
+                    </tbody>
+                </table> 
+                
+            </div>
+        );
+    }
+}
+
+export default volunteerEvent;
\ No newline at end of file
diff --git a/src/js/components/VolunteerEvent/volunteerEvent.scss b/src/js/components/VolunteerEvent/volunteerEvent.scss
new file mode 100644
index 0000000..1de7e3b
--- /dev/null
+++ b/src/js/components/VolunteerEvent/volunteerEvent.scss
@@ -0,0 +1,56 @@
+$primary-color: #fff;
+
+.volunteerEvent{
+    
+        background: grey;
+        min-height: 100vh;
+}
+
+.btn-volunteerEvent-title{
+    border-radius: 100px !important;
+    margin-bottom: 15px;
+}
+
+
+label {
+  float: left
+}
+
+.amd-label{
+ display: block;
+ width: 100%;
+}
+
+
+
+.marginTop20px{
+  margin-top: 20px;
+}
+.marginLeft20px{
+  margin-left: 20px;
+}
+
+.marginTop40px{
+  margin-top: 40px;
+}
+
+.marginTop30px{
+  margin-top: 30px;
+}
+
+.btnLoginOptions{
+  border-radius: 100%;
+  border: 1px solid grey;
+  margin-right: 8px;
+  width: 30px;
+  height: 30px;
+  &.facebook{
+    background-color: $primary-color;
+  }
+  &.google{
+    background-color: $primary-color;
+  }
+  &.twitter{
+    background-color: $primary-color;
+  }
+}
\ No newline at end of file
diff --git a/src/js/constants/countries.json b/src/js/constants/countries.json
new file mode 100644
index 0000000..7e75637
--- /dev/null
+++ b/src/js/constants/countries.json
@@ -0,0 +1,245 @@
+[
+  {"name": "Afghanistan", "code": "AF"},
+  {"name": "Åland Islands", "code": "AX"},
+  {"name": "Albania", "code": "AL"},
+  {"name": "Algeria", "code": "DZ"},
+  {"name": "American Samoa", "code": "AS"},
+  {"name": "AndorrA", "code": "AD"},
+  {"name": "Angola", "code": "AO"},
+  {"name": "Anguilla", "code": "AI"},
+  {"name": "Antarctica", "code": "AQ"},
+  {"name": "Antigua and Barbuda", "code": "AG"},
+  {"name": "Argentina", "code": "AR"},
+  {"name": "Armenia", "code": "AM"},
+  {"name": "Aruba", "code": "AW"},
+  {"name": "Australia", "code": "AU"},
+  {"name": "Austria", "code": "AT"},
+  {"name": "Azerbaijan", "code": "AZ"},
+  {"name": "Bahamas", "code": "BS"},
+  {"name": "Bahrain", "code": "BH"},
+  {"name": "Bangladesh", "code": "BD"},
+  {"name": "Barbados", "code": "BB"},
+  {"name": "Belarus", "code": "BY"},
+  {"name": "Belgium", "code": "BE"},
+  {"name": "Belize", "code": "BZ"},
+  {"name": "Benin", "code": "BJ"},
+  {"name": "Bermuda", "code": "BM"},
+  {"name": "Bhutan", "code": "BT"},
+  {"name": "Bolivia", "code": "BO"},
+  {"name": "Bosnia and Herzegovina", "code": "BA"},
+  {"name": "Botswana", "code": "BW"},
+  {"name": "Bouvet Island", "code": "BV"},
+  {"name": "Brazil", "code": "BR"},
+  {"name": "British Indian Ocean Territory", "code": "IO"},
+  {"name": "Brunei Darussalam", "code": "BN"},
+  {"name": "Bulgaria", "code": "BG"},
+  {"name": "Burkina Faso", "code": "BF"},
+  {"name": "Burundi", "code": "BI"},
+  {"name": "Cambodia", "code": "KH"},
+  {"name": "Cameroon", "code": "CM"},
+  {"name": "Canada", "code": "CA"},
+  {"name": "Cape Verde", "code": "CV"},
+  {"name": "Cayman Islands", "code": "KY"},
+  {"name": "Central African Republic", "code": "CF"},
+  {"name": "Chad", "code": "TD"},
+  {"name": "Chile", "code": "CL"},
+  {"name": "China", "code": "CN"},
+  {"name": "Christmas Island", "code": "CX"},
+  {"name": "Cocos (Keeling) Islands", "code": "CC"},
+  {"name": "Colombia", "code": "CO"},
+  {"name": "Comoros", "code": "KM"},
+  {"name": "Congo", "code": "CG"},
+  {"name": "Congo, The Democratic Republic of the", "code": "CD"},
+  {"name": "Cook Islands", "code": "CK"},
+  {"name": "Costa Rica", "code": "CR"},
+  {"name": "Cote D'Ivoire", "code": "CI"},
+  {"name": "Croatia", "code": "HR"},
+  {"name": "Cuba", "code": "CU"},
+  {"name": "Cyprus", "code": "CY"},
+  {"name": "Czech Republic", "code": "CZ"},
+  {"name": "Denmark", "code": "DK"},
+  {"name": "Djibouti", "code": "DJ"},
+  {"name": "Dominica", "code": "DM"},
+  {"name": "Dominican Republic", "code": "DO"},
+  {"name": "Ecuador", "code": "EC"},
+  {"name": "Egypt", "code": "EG"},
+  {"name": "El Salvador", "code": "SV"},
+  {"name": "Equatorial Guinea", "code": "GQ"},
+  {"name": "Eritrea", "code": "ER"},
+  {"name": "Estonia", "code": "EE"},
+  {"name": "Ethiopia", "code": "ET"},
+  {"name": "Falkland Islands (Malvinas)", "code": "FK"},
+  {"name": "Faroe Islands", "code": "FO"},
+  {"name": "Fiji", "code": "FJ"},
+  {"name": "Finland", "code": "FI"},
+  {"name": "France", "code": "FR"},
+  {"name": "French Guiana", "code": "GF"},
+  {"name": "French Polynesia", "code": "PF"},
+  {"name": "French Southern Territories", "code": "TF"},
+  {"name": "Gabon", "code": "GA"},
+  {"name": "Gambia", "code": "GM"},
+  {"name": "Georgia", "code": "GE"},
+  {"name": "Germany", "code": "DE"},
+  {"name": "Ghana", "code": "GH"},
+  {"name": "Gibraltar", "code": "GI"},
+  {"name": "Greece", "code": "GR"},
+  {"name": "Greenland", "code": "GL"},
+  {"name": "Grenada", "code": "GD"},
+  {"name": "Guadeloupe", "code": "GP"},
+  {"name": "Guam", "code": "GU"},
+  {"name": "Guatemala", "code": "GT"},
+  {"name": "Guernsey", "code": "GG"},
+  {"name": "Guinea", "code": "GN"},
+  {"name": "Guinea-Bissau", "code": "GW"},
+  {"name": "Guyana", "code": "GY"},
+  {"name": "Haiti", "code": "HT"},
+  {"name": "Heard Island and Mcdonald Islands", "code": "HM"},
+  {"name": "Holy See (Vatican City State)", "code": "VA"},
+  {"name": "Honduras", "code": "HN"},
+  {"name": "Hong Kong", "code": "HK"},
+  {"name": "Hungary", "code": "HU"},
+  {"name": "Iceland", "code": "IS"},
+  {"name": "India", "code": "IN"},
+  {"name": "Indonesia", "code": "ID"},
+  {"name": "Iran, Islamic Republic Of", "code": "IR"},
+  {"name": "Iraq", "code": "IQ"},
+  {"name": "Ireland", "code": "IE"},
+  {"name": "Isle of Man", "code": "IM"},
+  {"name": "Israel", "code": "IL"},
+  {"name": "Italy", "code": "IT"},
+  {"name": "Jamaica", "code": "JM"},
+  {"name": "Japan", "code": "JP"},
+  {"name": "Jersey", "code": "JE"},
+  {"name": "Jordan", "code": "JO"},
+  {"name": "Kazakhstan", "code": "KZ"},
+  {"name": "Kenya", "code": "KE"},
+  {"name": "Kiribati", "code": "KI"},
+  {"name": "Korea, Democratic People'S Republic of", "code": "KP"},
+  {"name": "Korea, Republic of", "code": "KR"},
+  {"name": "Kuwait", "code": "KW"},
+  {"name": "Kyrgyzstan", "code": "KG"},
+  {"name": "Lao People'S Democratic Republic", "code": "LA"},
+  {"name": "Latvia", "code": "LV"},
+  {"name": "Lebanon", "code": "LB"},
+  {"name": "Lesotho", "code": "LS"},
+  {"name": "Liberia", "code": "LR"},
+  {"name": "Libyan Arab Jamahiriya", "code": "LY"},
+  {"name": "Liechtenstein", "code": "LI"},
+  {"name": "Lithuania", "code": "LT"},
+  {"name": "Luxembourg", "code": "LU"},
+  {"name": "Macao", "code": "MO"},
+  {"name": "Macedonia, The Former Yugoslav Republic of", "code": "MK"},
+  {"name": "Madagascar", "code": "MG"},
+  {"name": "Malawi", "code": "MW"},
+  {"name": "Malaysia", "code": "MY"},
+  {"name": "Maldives", "code": "MV"},
+  {"name": "Mali", "code": "ML"},
+  {"name": "Malta", "code": "MT"},
+  {"name": "Marshall Islands", "code": "MH"},
+  {"name": "Martinique", "code": "MQ"},
+  {"name": "Mauritania", "code": "MR"},
+  {"name": "Mauritius", "code": "MU"},
+  {"name": "Mayotte", "code": "YT"},
+  {"name": "Mexico", "code": "MX"},
+  {"name": "Micronesia, Federated States of", "code": "FM"},
+  {"name": "Moldova, Republic of", "code": "MD"},
+  {"name": "Monaco", "code": "MC"},
+  {"name": "Mongolia", "code": "MN"},
+  {"name": "Montserrat", "code": "MS"},
+  {"name": "Morocco", "code": "MA"},
+  {"name": "Mozambique", "code": "MZ"},
+  {"name": "Myanmar", "code": "MM"},
+  {"name": "Namibia", "code": "NA"},
+  {"name": "Nauru", "code": "NR"},
+  {"name": "Nepal", "code": "NP"},
+  {"name": "Netherlands", "code": "NL"},
+  {"name": "Netherlands Antilles", "code": "AN"},
+  {"name": "New Caledonia", "code": "NC"},
+  {"name": "New Zealand", "code": "NZ"},
+  {"name": "Nicaragua", "code": "NI"},
+  {"name": "Niger", "code": "NE"},
+  {"name": "Nigeria", "code": "NG"},
+  {"name": "Niue", "code": "NU"},
+  {"name": "Norfolk Island", "code": "NF"},
+  {"name": "Northern Mariana Islands", "code": "MP"},
+  {"name": "Norway", "code": "NO"},
+  {"name": "Oman", "code": "OM"},
+  {"name": "Pakistan", "code": "PK"},
+  {"name": "Palau", "code": "PW"},
+  {"name": "Palestinian Territory, Occupied", "code": "PS"},
+  {"name": "Panama", "code": "PA"},
+  {"name": "Papua New Guinea", "code": "PG"},
+  {"name": "Paraguay", "code": "PY"},
+  {"name": "Peru", "code": "PE"},
+  {"name": "Philippines", "code": "PH"},
+  {"name": "Pitcairn", "code": "PN"},
+  {"name": "Poland", "code": "PL"},
+  {"name": "Portugal", "code": "PT"},
+  {"name": "Puerto Rico", "code": "PR"},
+  {"name": "Qatar", "code": "QA"},
+  {"name": "Reunion", "code": "RE"},
+  {"name": "Romania", "code": "RO"},
+  {"name": "Russian Federation", "code": "RU"},
+  {"name": "RWANDA", "code": "RW"},
+  {"name": "Saint Helena", "code": "SH"},
+  {"name": "Saint Kitts and Nevis", "code": "KN"},
+  {"name": "Saint Lucia", "code": "LC"},
+  {"name": "Saint Pierre and Miquelon", "code": "PM"},
+  {"name": "Saint Vincent and the Grenadines", "code": "VC"},
+  {"name": "Samoa", "code": "WS"},
+  {"name": "San Marino", "code": "SM"},
+  {"name": "Sao Tome and Principe", "code": "ST"},
+  {"name": "Saudi Arabia", "code": "SA"},
+  {"name": "Senegal", "code": "SN"},
+  {"name": "Serbia and Montenegro", "code": "CS"},
+  {"name": "Seychelles", "code": "SC"},
+  {"name": "Sierra Leone", "code": "SL"},
+  {"name": "Singapore", "code": "SG"},
+  {"name": "Slovakia", "code": "SK"},
+  {"name": "Slovenia", "code": "SI"},
+  {"name": "Solomon Islands", "code": "SB"},
+  {"name": "Somalia", "code": "SO"},
+  {"name": "South Africa", "code": "ZA"},
+  {"name": "South Georgia and the South Sandwich Islands", "code": "GS"},
+  {"name": "Spain", "code": "ES"},
+  {"name": "Sri Lanka", "code": "LK"},
+  {"name": "Sudan", "code": "SD"},
+  {"name": "Suriname", "code": "SR"},
+  {"name": "Svalbard and Jan Mayen", "code": "SJ"},
+  {"name": "Swaziland", "code": "SZ"},
+  {"name": "Sweden", "code": "SE"},
+  {"name": "Switzerland", "code": "CH"},
+  {"name": "Syrian Arab Republic", "code": "SY"},
+  {"name": "Taiwan, Province of China", "code": "TW"},
+  {"name": "Tajikistan", "code": "TJ"},
+  {"name": "Tanzania, United Republic of", "code": "TZ"},
+  {"name": "Thailand", "code": "TH"},
+  {"name": "Timor-Leste", "code": "TL"},
+  {"name": "Togo", "code": "TG"},
+  {"name": "Tokelau", "code": "TK"},
+  {"name": "Tonga", "code": "TO"},
+  {"name": "Trinidad and Tobago", "code": "TT"},
+  {"name": "Tunisia", "code": "TN"},
+  {"name": "Turkey", "code": "TR"},
+  {"name": "Turkmenistan", "code": "TM"},
+  {"name": "Turks and Caicos Islands", "code": "TC"},
+  {"name": "Tuvalu", "code": "TV"},
+  {"name": "Uganda", "code": "UG"},
+  {"name": "Ukraine", "code": "UA"},
+  {"name": "United Arab Emirates", "code": "AE"},
+  {"name": "United Kingdom", "code": "GB"},
+  {"name": "United States", "code": "US"},
+  {"name": "United States Minor Outlying Islands", "code": "UM"},
+  {"name": "Uruguay", "code": "UY"},
+  {"name": "Uzbekistan", "code": "UZ"},
+  {"name": "Vanuatu", "code": "VU"},
+  {"name": "Venezuela", "code": "VE"},
+  {"name": "Viet Nam", "code": "VN"},
+  {"name": "Virgin Islands, British", "code": "VG"},
+  {"name": "Virgin Islands, U.S.", "code": "VI"},
+  {"name": "Wallis and Futuna", "code": "WF"},
+  {"name": "Western Sahara", "code": "EH"},
+  {"name": "Yemen", "code": "YE"},
+  {"name": "Zambia", "code": "ZM"},
+  {"name": "Zimbabwe", "code": "ZW"}
+]
\ No newline at end of file
diff --git a/src/js/constants/volunteer-constants.js b/src/js/constants/volunteer-constants.js
new file mode 100644
index 0000000..461331c
--- /dev/null
+++ b/src/js/constants/volunteer-constants.js
@@ -0,0 +1 @@
+export const VOLUNTEERINFO = "VOLUNTEER";
\ No newline at end of file
diff --git a/src/js/helpers/history.js b/src/js/helpers/history.js
new file mode 100644
index 0000000..629039e
--- /dev/null
+++ b/src/js/helpers/history.js
@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export const history = createBrowserHistory();
\ No newline at end of file
diff --git a/src/js/helpers/index.js b/src/js/helpers/index.js
new file mode 100644
index 0000000..980c5a0
--- /dev/null
+++ b/src/js/helpers/index.js
@@ -0,0 +1 @@
+export * from "./history";
diff --git a/src/js/helpers/validator.js b/src/js/helpers/validator.js
new file mode 100644
index 0000000..da4ba82
--- /dev/null
+++ b/src/js/helpers/validator.js
@@ -0,0 +1,98 @@
+/**
+ * Chek if email is valid
+ * @prop String email
+ * @returns Boolean
+ */
+export const isEmail = email => {
+  const re = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@\"]+)*)|(\".+\"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(email);
+};
+
+/**
+ * Chek if vatiable is empty
+ * @prop String thing
+ * @returns Boolean
+ */
+export const isEmpty = thing => {
+  let empty = false;
+
+  switch (typeof thing) {
+    case "undefined":
+      empty = true;
+      break;
+    case "string":
+      if (thing.trim().length === 0) {
+        empty = true;
+      }
+      break;
+    case "object":
+      if (thing === null) {
+        empty = true;
+      } else if (Object.keys(thing).length === 0) {
+        empty = true;
+      }
+  }
+
+  return empty;
+};
+
+/**
+ * Check length of the string greater than
+ * @prop String|Integer str
+ * @prop boolean|options.trim Trim input before validating
+ * @prop number|options.lt Check if length less than lt
+ * @prop number|options.lte Check if length is less than or equals to lte
+ * @prop number|options.gt Check if length is greater than gt
+ * @prop number|options.gte Check if length is greater than or equals to gte
+ * @returns Boolean
+ */
+export const isLength = (str, options) => {
+  if (isEmpty(options)) {
+    throw "Please provide your email address";
+  }
+
+  let isValid = true;
+
+  if (["string", "number"].indexOf(typeof str) === -1) {
+    isValid = false;
+  } else {
+    // Convert to string incase it's number
+    let len = 0;
+
+    if (options.trim) {
+      len = str.toString().trim().length;
+    } else {
+      len = str.toString().length;
+    }
+
+    if (typeof options.lt === "number" && len >= options.lt) {
+      isValid = false;
+    } else if (typeof options.lte === "number" && len > options.lte) {
+      isValid = false;
+    } else if (typeof options.gt === "number" && len <= options.gt) {
+      isValid = false;
+    } else if (typeof options.gte === "number" && len < options.gte) {
+      isValid = false;
+    }
+  }
+
+  return isValid;
+};
+
+/**
+ * Check if string contains whitespaces
+ * @prop String str
+ * @returns Boolean
+ */
+export const isContainWhiteSpace = str => {
+  if (typeof str === "string" || typeof str === "number") {
+    return (
+      str
+        .toString()
+        .trim()
+        .indexOf(" ") !== -1
+    );
+  } else {
+    return false;
+  }
+};
diff --git a/src/js/reducers/index.js b/src/js/reducers/index.js
index c7a13a9..5a4a23a 100644
--- a/src/js/reducers/index.js
+++ b/src/js/reducers/index.js
@@ -1,17 +1,19 @@
-import { ADD_ARTICLE} from "../constants/action-types";
+import {VOLUNTEERINFO} from "../constants/volunteer-constants";
 
 const initialState = {
-    articles: []
+    volunteers: []
 };
 
 function rootReducer(state = initialState, action) {
-    if (action.type === ADD_ARTICLE)
-    {
-        return Object.assign({}, state, {
-            articles: state.articles.concat(action.payload)
-        });
+    switch(action.type){
+        case VOLUNTEERINFO:
+        return{
+            ...state,
+            volunteers: action.volunteer
+        };
+        default:
+        return state
     }
-    return state;
-};
+}
 
 export default rootReducer;
\ No newline at end of file
diff --git a/src/js/services/index.js b/src/js/services/index.js
new file mode 100644
index 0000000..e17ee5c
--- /dev/null
+++ b/src/js/services/index.js
@@ -0,0 +1 @@
+export * from './user.service';
diff --git a/src/js/services/user.service.js b/src/js/services/user.service.js
new file mode 100644
index 0000000..90f1ae1
--- /dev/null
+++ b/src/js/services/user.service.js
@@ -0,0 +1,108 @@
+import config from "config";
+import { authHeader } from "../helpers";
+
+export const userService = {
+  login,
+  logout,
+  register,
+  getAll,
+  getById,
+  update,
+  delete: _delete
+};
+
+function login(username, password) {
+  const requestOptions = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username, password })
+  };
+
+  return fetch(`${config.apiUrl}/users/authenticate`, requestOptions)
+    .then(handleResponse)
+    .then(user => {
+      // store user details and jwt token in local storage to keep user logged in between page refreshes
+      localStorage.setItem("user", JSON.stringify(user));
+
+      return user;
+    });
+}
+
+function logout() {
+  // remove user from local storage to log user out
+  localStorage.removeItem("user");
+}
+
+function getAll() {
+  const requestOptions = {
+    method: "GET",
+    headers: authHeader()
+  };
+
+  return fetch(`${config.apiUrl}/users`, requestOptions).then(handleResponse);
+}
+
+function getById(id) {
+  const requestOptions = {
+    method: "GET",
+    headers: authHeader()
+  };
+
+  return fetch(`${config.apiUrl}/users/${id}`, requestOptions).then(
+    handleResponse
+  );
+}
+
+function register(user) {
+  const requestOptions = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(user)
+  };
+
+  return fetch(`${config.apiUrl}/users/register`, requestOptions).then(
+    handleResponse
+  );
+}
+
+function update(user) {
+  const requestOptions = {
+    method: "PUT",
+    headers: { ...authHeader(), "Content-Type": "application/json" },
+    body: JSON.stringify(user)
+  };
+
+  return fetch(`${config.apiUrl}/users/${user.id}`, requestOptions).then(
+    handleResponse
+  );
+}
+
+// prefixed function name with underscore because delete is a reserved word in javascript
+function _delete(id) {
+  const requestOptions = {
+    method: "DELETE",
+    headers: authHeader()
+  };
+
+  return fetch(`${config.apiUrl}/users/${id}`, requestOptions).then(
+    handleResponse
+  );
+}
+
+function handleResponse(response) {
+  return response.text().then(text => {
+    const data = text && JSON.parse(text);
+    if (!response.ok) {
+      if (response.status === 401) {
+        // auto logout if 401 response returned from api
+        logout();
+        location.reload(true);
+      }
+
+      const error = (data && data.message) || response.statusText;
+      return Promise.reject(error);
+    }
+
+    return data;
+  });
+}
diff --git a/src/js/store/index.js b/src/js/store/index.js
index c9b9d3f..4ca2307 100644
--- a/src/js/store/index.js
+++ b/src/js/store/index.js
@@ -1,7 +1,4 @@
 import { createStore, applyMiddleware, compose } from 'redux'
-// import { routerMiddleware } from 'react-router-redux'
-// import thunk from 'redux-thunk'
-// import createHistory from 'history/createBrowserHistory'
 import rootReducer from '../reducers/index'
 import { forbiddenWordsMiddleware} from "../middleware";