diff --git a/package.json b/package.json
index f0caa1a..c79e84c 100755
--- a/package.json
+++ b/package.json
@@ -13,7 +13,9 @@
     "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
     "lint": "npm run lint:js && npm run lint:scss"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "html-loader": "^0.5.5"
+  },
   "dependencies": {
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
@@ -34,7 +36,6 @@
     "extract-text-webpack-plugin": "^3.0.1",
     "html-webpack-plugin": "^2.30.1",
     "html-includes": "^4.0.0",
-    "html-loader": "^0.5.5",
     "imagemin-webpack-plugin": "^1.5.2",
     "node-sass": "^4.5.3",
     "postcss-cssnext": "^3.0.2",
diff --git a/src/ad-details.html b/src/ad-details.html
new file mode 100644
index 0000000..660f314
--- /dev/null
+++ b/src/ad-details.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/styles/style.css">
+
+    <title>About the Job</title>
+
+    <!-- Fonts -->
+    <style>
+      @import url('https://fonts.googleapis.com/css?family=Fredoka+One|Source+Sans+Pro');
+    </style>
+    
+  </head>
+    
+  <body class="app">
+      <!-- @TOC -->
+      <!-- =================================================== -->
+      <!--
+        + @Page Loader
+        + @App Content
+            - #Left Sidebar
+                > $Sidebar Header
+                > $Sidebar Menu
+  
+            - #Main
+                > $Topbar
+                > $App Screen Content
+      -->
+  
+      <!-- @Page Loader -->
+      <!-- =================================================== -->
+      <div id='loader'>
+        <div class="spinner"></div>
+      </div> 
+  
+      <script>
+        window.addEventListener('load', () => {
+          const loader = document.getElementById('loader');
+          setTimeout(() => {
+            loader.classList.add('fadeOut');
+          }, 300);
+        });
+      </script>
+  
+      <!-- @App Content -->
+      <!-- =================================================== -->
+      <div>
+        
+        ${require('html-loader!./_sidebar.html')}
+
+        <!-- #Main ============================ -->
+        <div class="page-container">
+  
+            ${require('html-loader!./_topbar.html')}
+
+          <!-- ### $App Screen Content ### -->
+          <main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;">
+              <div class="col-8 mb-3">
+                  <h1>About the Job</h1>
+                </div>   
+            <!-- ### Job Details Cards ### -->
+            <div class="row">
+                    <div class="col-sm-6">
+                      <div class="card">
+                         <div class="row">
+                            <div class="col-3 mt-4 ">
+                              <img class="img-fluid ml-4 mb-4 rounded-circle img-responsive"  style="height: 100px" src="assets/static/images/nomit-logo.png" alt="company" class="avatar">
+                            </div>
+                            <div class="col-9 card-body">
+                              <h2 class="card-title mt-4 mr-4">Graphic Design Internship</h2>
+                              <h6 class="card-title mr-4">Great Southern Press</h6>
+                            </div>
+                         </div>
+                      </div>
+                      <div class="card">
+                        <div class="card-body">
+                          <h5 class="card-title mt-4 ml-4 mr-4">About the business:</h5>
+                          <p class="card-text ml-4 mr-4">Great Southern Press is a leading B2B publishing and events company built on partnerships with industry. We deliver quality business information to our industries and great marketing results to our clients.
+
+                                We build long-lasting partnerships with our industry partners in the energy and infrastructure sectors, aligning the success of our business with the continued growth and expansion of the industries we publish for.
+                                </p>
+                                <h5 class="card-title mt-4 ml-4 mr-4">About the role:</h5>
+                          <p class="card-text ml-4 mb-4 mr-4">This part-time role will suit a university graduate or someone looking for an entry-level design position. The successful candidate will be involved in all areas of design including:<br><br>
+
+                                • Publication layout (annual directories, books etc).<br>
+                                • Creation of artwork for print and online advertisements.<br>
+                                • Wallcharts, flyers, brochures and other print design as required.<br>
+                                • Event collateral including branding, signage, handbooks etc.<br>
+                                • Designs for website, email communications and social media.<br><br>
+                                
+                                Reporting to the Head of Design, you will have an opportunity to work with and be mentored by someone with more than 10 years’ industry experience.
+                                </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6">
+                      <div class="card">
+                        <div class="card-body">
+                          <h5 class="card-title mt-4 ml-4 mr-4">Reviews</h5>
+                          <p class="card-text ml-4 mb-4 mr-4">With supporting text below as a natural lead-in to additional content.</p>
+                          <p class="card-text  ml-4 mb-4 mr-4"><small class="text-muted">Last updated 3 mins ago</small></p>
+                        </div>
+                      </div>
+                      <div class="row mt-3">
+                            <button class="col-5 btn" href="#">
+                                    <span>Apply Now</span>
+                              </button>
+                              <button class="col-5 btn-border" href="#">
+                                    <span>Sign in</span>
+                              </button>
+                      </div>
+
+                    </div>
+                  </div>
+          </main>
+        </div><!-- page-container -->
+      </div>  <!-- App Content -->
+
+          
+
+
+          <!-- ### $App Screen Footer ### -->
+          <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
+            <span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          </footer>
+
+
+          <!-- Optional JavaScript -->
+          <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+          <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    </body>  
+
+
+</html>
\ No newline at end of file
diff --git a/src/assets/static/images/user-testing.jpg b/src/assets/static/images/user-testing.jpg
new file mode 100644
index 0000000..230af27
Binary files /dev/null and b/src/assets/static/images/user-testing.jpg differ
diff --git a/src/assets/styles/spec/settings/baseColors.scss b/src/assets/styles/spec/settings/baseColors.scss
index 067c95a..a42fd4f 100755
--- a/src/assets/styles/spec/settings/baseColors.scss
+++ b/src/assets/styles/spec/settings/baseColors.scss
@@ -107,8 +107,9 @@ $theme-success        : desaturate($default-success, 5%);
 // @Nomit WISP Color System
 // ---------------------------------------------------------
 
-$nomit-purple         : #501DB9;
+$nomit-purple         : #8B00B1;
 $nomit-pink           : #EE38A4;
+$nomit-dark-purple    : #501DB9;
 $nomit-gradient       : linear-gradient(-45deg, #501DB9, #EE38A4);
 $grey-dark            : #454545;
 $grey-light           : #888888;
diff --git a/src/assets/styles/spec/settings/fonts.scss b/src/assets/styles/spec/settings/fonts.scss
index 687b23f..4e79816 100755
--- a/src/assets/styles/spec/settings/fonts.scss
+++ b/src/assets/styles/spec/settings/fonts.scss
@@ -2,3 +2,8 @@ $font-primary:
   Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 $font-secondary: $font-primary;
 $font-size-base:              0.875rem;
+
+h2{
+  font-family: 'Fredoka One', cursive;
+  color: #501D89;
+}
\ No newline at end of file
diff --git a/src/assets/styles/style.css b/src/assets/styles/style.css
new file mode 100644
index 0000000..cb88085
--- /dev/null
+++ b/src/assets/styles/style.css
@@ -0,0 +1,97 @@
+/* FONT SETTINGS */
+body{
+  background-color: #F4F4F4;
+  }
+
+*{
+    font-family: 'Source Sans Pro', sans-serif;
+    color: #454545;
+    font-size: 14px;
+}
+
+h1{
+  font-family: 'Fredoka One', cursive;
+  color: #501D89;
+  font-size: 28px;
+}
+
+h2{
+  font-family: 'Fredoka One', cursive;
+  color: #454545;
+  font-size: 24px;
+}
+
+h3{
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #454545;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+
+h5{
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #454545;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+h6{
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 16px;
+  color: #888888;
+}
+
+/* BUTTONS */
+.btn span{
+  color: #FFFFFF;
+  font-weight: bold;
+}
+
+.btn-border span {
+  color: #501DB9;
+  font-weight: bold;
+	align-items: center;
+	background: #F4F4F4;
+	border-radius: 23px;
+	display: flex;
+	justify-content: center;
+	height: 100%;
+	transition: background .5s ease;
+	width: 100%;
+}
+
+.btn-border:hover {
+	color: #FFFFFF;
+}
+
+.btn-border:hover span {
+  background: transparent;
+  color: #FFFFFF;
+}
+
+.btn, .btn-border {
+  background-image: linear-gradient(-45deg, #501DB9 0%, #EE38A4 100%);
+	border-radius: 23px;
+  box-sizing: border-box;
+	height: 40px;
+	margin: 0 auto;
+	padding: 4px;
+	position: relative;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* REPORTS PAGE */
+.table .thead-purple-border th{
+  border-top: transparent;
+  border-bottom-color: #8B00B1;
+  border-width: 3px;
+} 
+
+.table {
+  background-color: #FFFFFF;
+  }
+
+
diff --git a/src/reports.html b/src/reports.html
new file mode 100644
index 0000000..85145a2
--- /dev/null
+++ b/src/reports.html
@@ -0,0 +1,135 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/styles/style.css">
+
+    <title>Reports</title>
+
+    <style>
+      @import url('https://fonts.googleapis.com/css?family=Fredoka+One|Source+Sans+Pro');
+    </style>
+    
+  </head>
+    
+  <body class="app">
+      <!-- @TOC -->
+      <!-- =================================================== -->
+      <!--
+        + @Page Loader
+        + @App Content
+            - #Left Sidebar
+                > $Sidebar Header
+                > $Sidebar Menu
+  
+            - #Main
+                > $Topbar
+                > $App Screen Content
+      -->
+  
+      <!-- @Page Loader -->
+      <!-- =================================================== -->
+      <div id='loader'>
+        <div class="spinner"></div>
+      </div> 
+  
+      <script>
+        window.addEventListener('load', () => {
+          const loader = document.getElementById('loader');
+          setTimeout(() => {
+            loader.classList.add('fadeOut');
+          }, 300);
+        });
+      </script>
+  
+      <!-- @App Content -->
+      <!-- =================================================== -->
+      <div>
+        
+        ${require('html-loader!./_sidebar.html')}
+
+        <!-- #Main ============================ -->
+        <div class="page-container">
+  
+            ${require('html-loader!./_topbar.html')}
+
+          <!-- ### $App Screen Content ### -->
+          <main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;">
+              <div class="col-8 ml-1 mb-3">
+                  <h1>Reports</h1>
+                </div>   
+            <!-- ### Table ### -->
+          <div class="container">
+              <table class="table table-hover">
+                <thead class="thead-purple-border">
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Last Name</th>
+                    <th scope="col">Username</th>
+                    <th scope="col">State</th>
+                    <th scope="col">Language</th>
+                    <th scope="col">Fields</th>
+                    <th scope="col">Member Since</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                      <tr>
+                        <th scope="row">1</th>
+                        <td>Tony</td>
+                        <td>Stark</td>
+                        <td>tonystark</td>
+                        <td>VIC</td>
+                        <td>English</td>
+                        <td>Hospitality</td>
+                        <td>Feb 2019</td>
+                      </tr>
+                      <tr>
+                        <th scope="row">2</th>
+                        <td>David</td>
+                        <td>James</td>
+                        <td>davidjames</td>
+                        <td>VIC</td>
+                        <td>English, Italian</td>
+                        <td>Design</td>
+                        <td>Feb 2019</td>
+                      </tr>
+                      <tr>
+                        <th scope="row">3</th>
+                        <td>Miro</td>
+                        <td>Kirov</td>
+                        <td>mirokirov</td>
+                        <td>VIC</td>
+                        <td>English, Japanese</td>
+                        <td>IT</td>
+                        <td>Feb 2019</td>
+                      </tr>
+                    </tbody>
+              </table>
+            </div>
+          </main>
+        </div><!-- page-container -->
+      </div>  <!-- App Content -->
+
+          
+
+
+          <!-- ### $App Screen Footer ### -->
+          <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
+            <span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          </footer>
+
+
+          <!-- Optional JavaScript -->
+          <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+          <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    </body>  
+
+
+</html>
\ No newline at end of file

#	First Name	Last Name	Username	State	Language	Fields	Member Since
1	Tony	Stark	tonystark	VIC	English	Hospitality	Feb 2019
2	David	James	davidjames	VIC	English, Italian	Design	Feb 2019
3	Miro	Kirov	mirokirov	VIC	English, Japanese	IT	Feb 2019