diff --git a/codecamp-front/.angular-cli.json b/codecamp-front/.angular-cli.json
index 3b1ab53..3d14ebf 100644
--- a/codecamp-front/.angular-cli.json
+++ b/codecamp-front/.angular-cli.json
@@ -20,7 +20,8 @@
       "prefix": "app",
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "styles.css"
+        "styles.css",
+        "../node_modules/font-awesome/css/font-awesome.min.css"
       ],
       "scripts": [
         "../node_modules/popper.js/dist/umd/popper.min.js",
@@ -28,8 +29,6 @@
         "../node_modules/bootstrap/dist/js/bootstrap.min.js",
         "../node_modules/ace-builds/src-min/ace.js",
         "../node_modules/ace-builds/src-min/theme-sqlserver.js",
-        "../node_modules/ace-builds/src-min/mode-c.js",
-        "../node_modules/ace-builds/src-min/mode-cpp.js",
         "../node_modules/ace-builds/src-min/mode-python.js",
         "../node_modules/ace-builds/src-min/mode-java.js"
       ],
@@ -66,6 +65,7 @@
   },
   "defaults": {
     "styleExt": "css",
-    "component": {}
+    "component": {
+    }
   }
 }
diff --git a/codecamp-front/package-lock.json b/codecamp-front/package-lock.json
index b6bd625..c7a5e6b 100644
--- a/codecamp-front/package-lock.json
+++ b/codecamp-front/package-lock.json
@@ -47,9 +47,9 @@
       }
     },
     "@angular/animations": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.1.tgz",
-      "integrity": "sha512-f8viyt1xDC2NC2ap0lczw+AiL3S1WVSDOmNp3UKwA66gm+Hs9AdDX0PjpxgMR9KQY8c4P7mztNax55jj2Sbe1Q==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.7.tgz",
+      "integrity": "sha512-t/B0z2OYO+yy8SJKB1/evSNPvnLsl+AclhM1p21/NnETxQUqvct1KXeDM7nYDu5hmnGmuavhua8LDo6rN5zS+Q==",
       "requires": {
         "tslib": "1.9.0"
       }
@@ -121,31 +121,31 @@
       }
     },
     "@angular/common": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.1.tgz",
-      "integrity": "sha512-O7FA4Qpcu6GYMzlsNTHtUsAl6W0SXepP7qEMx83fC1Xje2GEtulp/99Pg6bvpFKiZYdCjJDhjbUZhIO5x0UncQ==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.7.tgz",
+      "integrity": "sha512-TqsDMmPX1JlEH2QIneuAVzEO4ubzxLBAdV4XbKWDQKC/UfbWIIpSrSp2cIi85NV1tKkg0WAaodCIZ02NucHIHg==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/compiler": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.2.1.tgz",
-      "integrity": "sha512-c/HDfbDr8yDUCoVCbGHgoae3YCoWG3EuM/l7jfHflE8sbdppiFVxCRd3VkygkwfPGpUZbZaW2x/OK4Z1dQa34g==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.2.7.tgz",
+      "integrity": "sha512-26RG+Dy+M/95OyNNqM+OAruarIPOmbndiaglz2dMrNYzenfbSgG/AoPlL5uCdSqZDiXgnlKnS2K6/ePWXDSKNw==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/compiler-cli": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.2.1.tgz",
-      "integrity": "sha512-9Yud6euknHKPQhh/noho0/xNgYeCyly0Ugkgh0306/RNLW5ngcWE876wdUweU13LJgWQ9+SHqFI5rJbsseqkZw==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.2.7.tgz",
+      "integrity": "sha512-91gQolzsKyOlmBNW1J7lyu+dXHe/KHbAXU459hn6rycMHuTt60XvxA5O3xy3Pqt28VgbOOSrQfq5eVjZodKjWg==",
       "dev": true,
       "requires": {
         "chokidar": "1.7.0",
         "minimist": "1.2.0",
         "reflect-metadata": "0.1.12",
-        "tsickle": "0.26.0"
+        "tsickle": "0.27.2"
       },
       "dependencies": {
         "minimist": {
@@ -157,25 +157,25 @@
       }
     },
     "@angular/core": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.1.tgz",
-      "integrity": "sha512-2kyXVl+OK/LRUisSfILkRyWiD2BGXysQkN2dwxfwYZwDciH7o8wGSlDDZw0lXIBt0Ly0stYiorIIJGVs5TffaA==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.7.tgz",
+      "integrity": "sha512-DQuL6n7cjBfZmWX5RCV271g6PW9N8b93g2skWnM/zjm+BL9tfHPgvmsjMNB7QEHSxW8VBaaQ6gjj422O01A87g==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/forms": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.1.tgz",
-      "integrity": "sha512-DeTpReZcK93FBxTdXqtmuzuW5blMu4fWe7JtmDXWD9UhTw7DwRbPO+7yFRbbfSDd3UzfGfqYBqOlSOdPh9dLbg==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.7.tgz",
+      "integrity": "sha512-43oLKdzMjMV/hOLpSTg8aOggcx+veTnPp/JN+KzMGo2qtbim5nk3fnuscWDeDOdkh8hPRPGarKxeFNEE9ZZSTg==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/http": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.2.1.tgz",
-      "integrity": "sha512-wMX7rnZcanYT2uVeqr1V9k9lduxZprVjvgetUlj6IuO7kbr22SAJN7phuubI0uAd7MUb7uDXBG8cJ00Q/NH6zw==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.2.7.tgz",
+      "integrity": "sha512-048+tCbsNYc9xVvIn5/sOvO4fXVkbB5b1IRYRGiRYXpTz6+JWIm5AwOqZIOeVDgqgZHFf96QllXDcFbdNVDgSA==",
       "requires": {
         "tslib": "1.9.0"
       }
@@ -187,25 +187,35 @@
       "dev": true
     },
     "@angular/platform-browser": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.1.tgz",
-      "integrity": "sha512-+cE7FM6/WIMZWpxf+LxYhfTPBbxSvLNZv5+RnGcOeg4nEG3x0Ny1dr14r5HyudvKfu/A+xTlVCNY7RjZ6HsWVw==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.7.tgz",
+      "integrity": "sha512-SdLx4F6tOy4/s3y1KZ/Z3YA6fiIrydaO2bry2FJglDxJh24p6TZIob+zC16N2MTuFW819KY5OlacNhc8aj6Yag==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.1.tgz",
-      "integrity": "sha512-S73suoYfGIj7eQlOBXvj3BO8mW8TUUZEUZ/nvFgB/jsb6PtYk1ByIVIWjcV5yttd4TXf7ZhaEYZPm1vBjIN0pA==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.7.tgz",
+      "integrity": "sha512-95Rwf1JcGF/BI48k+VG2moLTVC863jPSjmHaGkz7cA9bi/QrRFGvFghl1qIm4Ezp3dj8CH8TE3TWB+1AmAg3AQ==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
+    "@angular/platform-server": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-5.2.7.tgz",
+      "integrity": "sha512-5+pj+YYfJ7ZGVEtP2oTVqWErObWRVeY32AxVIs3pE3WuqKPjwnKzd+HY+YeD8D+LDJZ5DdphtYBp26NFrnw0xA==",
+      "requires": {
+        "domino": "1.0.30",
+        "tslib": "1.9.0",
+        "xhr2": "0.1.4"
+      }
+    },
     "@angular/router": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.1.tgz",
-      "integrity": "sha512-NS8ttrfpjETfIt8Wn4oCP5KQ55UKuj6g3iG/yduoDMWel19KOINUYqz5ujL1gHha4A4Tgs1tBZKQKr0LmapTdA==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.7.tgz",
+      "integrity": "sha512-ppl0X7EfEgKYXIEPtdy8cOKj5KXuwCQ5Ila+IuGnSjKIRXt/olhBLJMprVl1VJgoxXj7z2i14U7kKaqSvGtpXw==",
       "requires": {
         "tslib": "1.9.0"
       }
@@ -743,8 +753,7 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
       "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "async-limiter": {
       "version": "1.0.0",
@@ -877,7 +886,7 @@
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
       "dev": true,
       "requires": {
-        "core-js": "2.5.3",
+        "core-js": "2.4.1",
         "regenerator-runtime": "0.11.1"
       }
     },
@@ -1074,7 +1083,6 @@
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
       "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
       "dev": true,
-      "optional": true,
       "requires": {
         "inherits": "2.0.3"
       }
@@ -2232,9 +2240,9 @@
       }
     },
     "core-js": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.3.tgz",
-      "integrity": "sha1-isw4NFgk8W2DZbfJtCWRaOjtYD4="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz",
+      "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4="
     },
     "core-object": {
       "version": "3.1.5",
@@ -2315,7 +2323,6 @@
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
       "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "lru-cache": "4.1.1",
         "which": "1.3.0"
@@ -3014,6 +3021,11 @@
         "domelementtype": "1.3.0"
       }
     },
+    "domino": {
+      "version": "1.0.30",
+      "resolved": "https://registry.npmjs.org/domino/-/domino-1.0.30.tgz",
+      "integrity": "sha512-ikq8WiDSkICdkElud317F2Sigc6A3EDpWsxWBwIZqOl95km4p/Vc9Rj98id7qKgsjDmExj0AVM7JOd4bb647Xg=="
+    },
     "domutils": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -3780,6 +3792,11 @@
         "debug": "2.6.9"
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4870,7 +4887,6 @@
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
       "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=",
       "dev": true,
-      "optional": true,
       "requires": {
         "globule": "1.2.0"
       }
@@ -4879,15 +4895,13 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
       "integrity": "sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "generate-object-property": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
       "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "is-property": "1.0.2"
       }
@@ -5006,7 +5020,6 @@
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
       "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
       "dev": true,
-      "optional": true,
       "requires": {
         "glob": "7.1.2",
         "lodash": "4.17.4",
@@ -5647,8 +5660,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "indent-string": {
       "version": "2.1.0",
@@ -5990,7 +6002,6 @@
       "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.1.tgz",
       "integrity": "sha512-Q2khNw+oBlWuaYvEEHtKSw/pCxD2L5Rc1C+UQme9X6JdRDh7m5D7HkozA0qa3DUkQ6VzCnEm8mVIQPyIRkI5sQ==",
       "dev": true,
-      "optional": true,
       "requires": {
         "generate-function": "2.0.0",
         "generate-object-property": "1.2.0",
@@ -6090,8 +6101,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
       "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "is-regex": {
       "version": "1.0.4",
@@ -6342,6 +6352,14 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
       "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
     },
+    "jquery-slimscroll": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/jquery-slimscroll/-/jquery-slimscroll-1.3.8.tgz",
+      "integrity": "sha1-hIHETnpHaHZTkIoo9/cK7WTITjY=",
+      "requires": {
+        "jquery": "3.3.1"
+      }
+    },
     "js-base64": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.2.tgz",
@@ -6447,8 +6465,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "jsprim": {
       "version": "1.4.1",
@@ -6483,7 +6500,7 @@
         "colors": "1.1.2",
         "combine-lists": "1.0.1",
         "connect": "3.6.5",
-        "core-js": "2.5.3",
+        "core-js": "2.4.1",
         "di": "0.0.1",
         "dom-serialize": "2.2.1",
         "expand-braces": "0.1.2",
@@ -6775,8 +6792,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
       "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -6800,8 +6816,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
       "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "lodash.tail": {
       "version": "4.1.1",
@@ -7475,8 +7490,7 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz",
       "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "nanomatch": {
       "version": "1.2.7",
@@ -7553,6 +7567,11 @@
       "resolved": "https://registry.npmjs.org/ng2-file-upload/-/ng2-file-upload-1.3.0.tgz",
       "integrity": "sha512-Pudxik6LWYsT8hNiEW7RfjgGWAnvfQywxwJYMdt1snTUe+KnlRc/QqPv3QEQW6plXTanuLkYz/TbqilSfSHOsw=="
     },
+    "ngx-progressbar": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-progressbar/-/ngx-progressbar-2.1.1.tgz",
+      "integrity": "sha512-RyfW1Dhp9G+QZRhp0SsVZJOxvfXHq335aea9rAwVOORSzch6NFBuE+XYx3etlEh2avOYfigyWUX8vAlEXrHXKQ=="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@@ -7573,7 +7592,6 @@
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
       "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "fstream": "1.0.11",
         "glob": "7.1.2",
@@ -7595,7 +7613,6 @@
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
           "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
           "dev": true,
-          "optional": true,
           "requires": {
             "abbrev": "1.1.1"
           }
@@ -7604,8 +7621,7 @@
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -7651,7 +7667,6 @@
       "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.2.tgz",
       "integrity": "sha512-CaV+wLqZ7//Jdom5aUFCpGNoECd7BbNhjuwdsX/LkXBrHl8eb1Wjw4HvWqcFvhr5KuNgAk8i/myf/MQ1YYeroA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "async-foreach": "0.1.3",
         "chalk": "1.1.3",
@@ -7684,8 +7699,7 @@
           "version": "0.11.0",
           "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
           "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "chalk": {
           "version": "1.1.3",
@@ -7705,7 +7719,6 @@
           "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
           "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
           "dev": true,
-          "optional": true,
           "requires": {
             "chalk": "1.1.3",
             "commander": "2.12.2",
@@ -7717,15 +7730,13 @@
           "version": "6.3.2",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz",
           "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "request": {
           "version": "2.79.0",
           "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
           "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=",
           "dev": true,
-          "optional": true,
           "requires": {
             "aws-sign2": "0.6.0",
             "aws4": "1.6.0",
@@ -7759,8 +7770,7 @@
           "version": "0.4.3",
           "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
           "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -11278,7 +11288,6 @@
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
       "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
       "dev": true,
-      "optional": true,
       "requires": {
         "glob": "7.1.2",
         "lodash": "4.17.4",
@@ -11328,7 +11337,6 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
       "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
       "dev": true,
-      "optional": true,
       "requires": {
         "js-base64": "2.4.2",
         "source-map": "0.4.4"
@@ -11339,7 +11347,6 @@
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "dev": true,
-          "optional": true,
           "requires": {
             "amdefine": "1.0.1"
           }
@@ -12159,7 +12166,6 @@
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
       "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
       "dev": true,
-      "optional": true,
       "requires": {
         "readable-stream": "2.3.3"
       }
@@ -12456,7 +12462,6 @@
       "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "dev": true,
-      "optional": true,
       "requires": {
         "block-stream": "0.0.9",
         "fstream": "1.0.11",
@@ -12688,7 +12693,6 @@
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.2.tgz",
       "integrity": "sha1-fskRMJJHZsf1c74wIMNPj9/QDWI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "glob": "6.0.4"
       },
@@ -12698,7 +12702,6 @@
           "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
           "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
           "dev": true,
-          "optional": true,
           "requires": {
             "inflight": "1.0.6",
             "inherits": "2.0.3",
@@ -12782,15 +12785,15 @@
       }
     },
     "tsickle": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.26.0.tgz",
-      "integrity": "sha512-eWJ2CUfttGK0LqF9iJ/Avnxbj4M+fCyJ50Zag3wm73Fut1hsasPRHKxKdrMWVj4BMHnQNx7TO+DdNmLmJTSuNw==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.27.2.tgz",
+      "integrity": "sha512-KW+ZgY0t2cq2Qib1sfdgMiRnk+cr3brUtzZoVWjv+Ot3jNxVorFBUH+6In6hl8Dg7BI2AAFf69NHkwvZNMSFwA==",
       "dev": true,
       "requires": {
         "minimist": "1.2.0",
         "mkdirp": "0.5.1",
-        "source-map": "0.5.7",
-        "source-map-support": "0.4.18"
+        "source-map": "0.6.1",
+        "source-map-support": "0.5.3"
       },
       "dependencies": {
         "minimist": {
@@ -12798,6 +12801,21 @@
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "source-map-support": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz",
+          "integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==",
+          "dev": true,
+          "requires": {
+            "source-map": "0.6.1"
+          }
         }
       }
     },
@@ -12903,9 +12921,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.5.3.tgz",
-      "integrity": "sha512-ptLSQs2S4QuS6/OD1eAKG+S5G8QQtrU5RT32JULdZQtM1L3WTi34Wsu48Yndzi8xsObRAB9RPt/KhA9wlpEF6w==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
+      "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==",
       "dev": true
     },
     "uglify-js": {
@@ -14312,6 +14330,11 @@
         "ultron": "1.1.1"
       }
     },
+    "xhr2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz",
+      "integrity": "sha1-f4dliEdxbbUCYyOBL4GMras4el8="
+    },
     "xml-char-classes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz",
@@ -14379,7 +14402,6 @@
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
       "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
       "dev": true,
-      "optional": true,
       "requires": {
         "camelcase": "3.0.0",
         "cliui": "3.2.0",
@@ -14400,8 +14422,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
           "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -14410,7 +14431,6 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
       "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
       "dev": true,
-      "optional": true,
       "requires": {
         "camelcase": "3.0.0"
       },
@@ -14419,8 +14439,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
           "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -14437,9 +14456,9 @@
       "dev": true
     },
     "zone.js": {
-      "version": "0.8.20",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.20.tgz",
-      "integrity": "sha512-FXlA37ErSXCMy5RNBcGFgCI/Zivqzr0D19GuvDxhcYIJc7xkFp6c29DKyODJu0Zo+EMyur/WPPgcBh1EHjB9jA=="
+      "version": "0.8.19",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.19.tgz",
+      "integrity": "sha512-l9rofaOs6a4y1W8zt4pDmnCUCnYG377dG+5SZlXNWrTWYUuXFqcJZiOarhYiRVR0NI9sH/8ooPJiz4uprB/Mkg=="
     }
   }
 }
diff --git a/codecamp-front/package.json b/codecamp-front/package.json
index 3f3cf30..57691b8 100644
--- a/codecamp-front/package.json
+++ b/codecamp-front/package.json
@@ -12,30 +12,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/forms": "^5.2.0",
-    "@angular/http": "^5.2.0",
-    "@angular/platform-browser": "^5.2.0",
-    "@angular/platform-browser-dynamic": "^5.2.0",
-    "@angular/router": "^5.2.0",
-    "@types/jquery": "^3.3.0",
-    "angular2-flash-messages": "^2.0.5",
-    "angular2-jwt": "^0.2.3",
-    "bootstrap": "^4.0.0-beta.2",
-    "core-js": "^2.4.1",
-    "jquery": "^3.3.1",
-    "ng2-ace-editor": "^0.3.4",
-    "ng2-file-upload": "^1.3.0",
-    "popper.js": "^1.12.9",
-    "rxjs": "^5.5.6",
-    "zone.js": "^0.8.19"
+    "@angular/animations": "5.2.7",
+    "@angular/common": "5.2.7",
+    "@angular/compiler": "5.2.7",
+    "@angular/core": "5.2.7",
+    "@angular/forms": "5.2.7",
+    "@angular/http": "5.2.7",
+    "@angular/platform-browser": "5.2.7",
+    "@angular/platform-browser-dynamic": "5.2.7",
+    "@angular/platform-server": "5.2.7",
+    "@angular/router": "5.2.7",
+    "@types/jquery": "3.3.0",
+    "angular2-flash-messages": "2.0.5",
+    "angular2-jwt": "0.2.3",
+    "bootstrap": "4.0.0-beta.2",
+    "core-js": "2.4.1",
+    "font-awesome": "4.7.0",
+    "jquery": "3.3.1",
+    "jquery-slimscroll": "1.3.8",
+    "ng2-ace-editor": "0.3.4",
+    "ng2-file-upload": "1.3.0",
+    "ngx-progressbar": "2.1.1",
+    "popper.js": "1.12.9",
+    "rxjs": "5.5.6",
+    "zone.js": "0.8.19"
   },
   "devDependencies": {
     "@angular/cli": "1.6.5",
-    "@angular/compiler-cli": "^5.2.0",
+    "@angular/compiler-cli": "^5.2.7",
     "@angular/language-service": "^5.2.0",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
@@ -49,9 +53,10 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "node-sass": "^4.7.2",
     "protractor": "~5.1.2",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
-    "typescript": "~2.5.3"
+    "typescript": "^2.7.2"
   }
 }
diff --git a/codecamp-front/src/app/app-routing.module.ts b/codecamp-front/src/app/app-routing.module.ts
index 7ea9b59..8af44b7 100644
--- a/codecamp-front/src/app/app-routing.module.ts
+++ b/codecamp-front/src/app/app-routing.module.ts
@@ -23,6 +23,7 @@ import { AuthGuard } from './guards/auth.guard';
 import { NotAuthGuard } from './guards/not-auth.guard';
 import { SolultionSubmitComponent } from './components/solultion-submit/solultion-submit.component';
 import { SolutionComponent } from './components/solultion-submit/solution/solution.component';
+import { RanklistComponent } from './components/ranklist/ranklist.component';
 
 
 const appRoutes: Routes = [
@@ -69,7 +70,8 @@ const appRoutes: Routes = [
     },
     {
       path: 'submit/complete',
-      component: SolutionComponent
+      component: SolutionComponent,
+      canActivate: [AuthGuard]
     },
     {
       path: 'contest/add-contest',
@@ -89,6 +91,10 @@ const appRoutes: Routes = [
       path: 'contest/:contest/:problem',
       component: ProblemComponent
     },
+    {
+      path: 'contest/:contest/ranklist',
+      component: RanklistComponent
+    },
     {
       path: 'contest/edit/:edit-contest',
       component: EditContestComponent,
diff --git a/codecamp-front/src/app/app.component.css b/codecamp-front/src/app/app.component.css
index e69de29..2c4d3cd 100644
--- a/codecamp-front/src/app/app.component.css
+++ b/codecamp-front/src/app/app.component.css
@@ -0,0 +1,11 @@
+.container-fluid{
+    padding: 0;
+    overflow: hidden;
+}
+
+@media only screen and (max-width:896px){
+    .wrapper{
+        margin: 0;
+    }
+}
+
diff --git a/codecamp-front/src/app/app.component.html b/codecamp-front/src/app/app.component.html
index 6659729..c5c3019 100644
--- a/codecamp-front/src/app/app.component.html
+++ b/codecamp-front/src/app/app.component.html
@@ -1,2 +1,16 @@
+<ng-progress
+    [positionUsing]="'marginLeft'"
+    [direction]="'leftToRightIncreased'"
+    [color]="'red'"
+    [showSpinner]="false"
+    [trickleSpeed]="500" 
+    [thick]="true" 
+    [ease]="'easeInSine'"
+></ng-progress>
 <app-navbar></app-navbar>
-<router-outlet></router-outlet>
+<div class="container-fluid">
+    <app-sidebar></app-sidebar>
+    <div class="wrapper" [@panelInOut]="panelVisible">
+        <router-outlet></router-outlet>
+    </div>
+</div>
diff --git a/codecamp-front/src/app/app.component.ts b/codecamp-front/src/app/app.component.ts
index 7b0f672..097a482 100644
--- a/codecamp-front/src/app/app.component.ts
+++ b/codecamp-front/src/app/app.component.ts
@@ -1,10 +1,45 @@
-import { Component } from '@angular/core';
-
+import { Component, OnInit, trigger, transition, style, animate, state } from '@angular/core';
+import { NgProgress } from 'ngx-progressbar';
+import { ContestService } from './services/contest.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  animations: [
+    trigger('panelInOut', [
+      state('true', style({
+        marginLeft: '240px'
+      })),
+      state('false', style({
+        marginLeft: '0px  '
+      })),
+      transition('true => false', animate('230ms ease-out')),
+      transition('false => true', animate('700ms ease-in-out'))
+    ])
+  ]
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnInit {
+
+  panelVisible;
+  menuState:string = 'out';
+
+  constructor(public progressService: NgProgress,
+  private contestService: ContestService){
+
+  }
+  ngOnInit(){
+    this.contestService.toggle.subscribe(toggle => this.panelVisible = toggle);
+    this.progressService.start();
+    setTimeout(() => {
+      this.progressService.set(0.1);
+    }, 1000);
+    setTimeout(() => {
+      this.progressService.inc(0.2);
+    }, 2000);
+    if(!this.panelVisible)
+    // 1-line if statement that toggles the value:
+      this.menuState = 'in';
+    else  
+      this.menuState = 'out';
+    }
 }
diff --git a/codecamp-front/src/app/app.module.ts b/codecamp-front/src/app/app.module.ts
index d011ef3..c7fd222 100644
--- a/codecamp-front/src/app/app.module.ts
+++ b/codecamp-front/src/app/app.module.ts
@@ -33,7 +33,11 @@ import { AddProblemComponent } from './components/add-problem/add-problem.compon
 import { AuthGuard } from './guards/auth.guard';
 import { NotAuthGuard } from './guards/not-auth.guard';
 import { SolultionSubmitComponent } from './components/solultion-submit/solultion-submit.component';
-
+import { PreloaderComponent } from './components/preloader/preloader.component';
+import { SidebarComponent } from './components/sidebar/sidebar.component';
+import { NgProgressModule, NgProgressBrowserXhr } from 'ngx-progressbar';
+import { BrowserXhr } from '@angular/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 @NgModule({
   declarations: [
     AppComponent,
@@ -55,16 +59,21 @@ import { SolultionSubmitComponent } from './components/solultion-submit/solultio
     SolutionComponent,
     ProblemComponent,
     AddProblemComponent,
-    SolultionSubmitComponent
+    SolultionSubmitComponent,
+    PreloaderComponent,
+    SidebarComponent
   ],
   imports: [
     BrowserModule,
     HttpModule,
     ReactiveFormsModule,
     AppRoutingModule,
-    AceEditorModule
+    AceEditorModule,
+    NgProgressModule,
+    BrowserAnimationsModule
   ],
-  providers: [ AuthService, AuthGuard, NotAuthGuard, ContestService],
+  providers: [ AuthService, AuthGuard, NotAuthGuard, ContestService,
+    {provide: BrowserXhr, useClass: NgProgressBrowserXhr}],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/codecamp-front/src/app/components/add-contest/add-contest.component.html b/codecamp-front/src/app/components/add-contest/add-contest.component.html
index c08cb3b..b6b255c 100644
--- a/codecamp-front/src/app/components/add-contest/add-contest.component.html
+++ b/codecamp-front/src/app/components/add-contest/add-contest.component.html
@@ -28,7 +28,7 @@
         <div class="col-md-6">
           <div class="form-group">
             <label for="startDate">Start Time</label>
-            <input type="date" 
+            <input type="datetime-local" 
             name="startTime" 
             formControlName="startTime" 
             class="form-control" 
@@ -40,7 +40,7 @@
           <div class="col-md-6">
           <div class="form-group">
               <label for="EndDate">End Time</label>
-              <input type="date" 
+              <input type="datetime-local" 
               name="endTime" 
               formControlName="endTime" 
               class="form-control" 
@@ -52,7 +52,7 @@
         </div>
       
       <div class="form-group">
-        <label for="city">Description</label>
+        <label for="city">Rules</label>
         <textarea 
         name="description" 
         formControlName="description" 
diff --git a/codecamp-front/src/app/components/add-contest/add-contest.component.ts b/codecamp-front/src/app/components/add-contest/add-contest.component.ts
index e6acbb7..35951aa 100644
--- a/codecamp-front/src/app/components/add-contest/add-contest.component.ts
+++ b/codecamp-front/src/app/components/add-contest/add-contest.component.ts
@@ -50,6 +50,7 @@ export class AddContestComponent implements OnInit {
       if (!data.success) {
         console.log(data.msg);
       } else {
+        console.log(contest.endTime)
         this.router.navigate(['/contest']);
       }
     });
diff --git a/codecamp-front/src/app/components/contest/contest.component.css b/codecamp-front/src/app/components/contest/contest.component.css
index 7cc2a90..8e5bfe5 100644
--- a/codecamp-front/src/app/components/contest/contest.component.css
+++ b/codecamp-front/src/app/components/contest/contest.component.css
@@ -4,4 +4,27 @@
     padding: 1% 1%;
     box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
     cursor: pointer;
+    font-size: 14px;
+}
+
+.head {
+    padding: 2%;
+    font-size: 14px;
+    font-weight: bold;
+    background: #111;
+    color: #fff;
+}
+.row{
+    margin: 0;
+}
+.nav-link {
+    padding: 0.5%;
+}
+
+.main {
+    background: white;
+    padding: 2%;
+}
+.col-md-2 {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/contest/contest.component.html b/codecamp-front/src/app/components/contest/contest.component.html
index 679479c..adb4c00 100644
--- a/codecamp-front/src/app/components/contest/contest.component.html
+++ b/codecamp-front/src/app/components/contest/contest.component.html
@@ -8,28 +8,39 @@
 
 <br>
 
-<div class="container">
-  <div class="col-md-12">
-    <div class="row">
-      <div class="col-md-8">
-        Contest
-      </div>
-      <div class="col-md-4">
-        Contest Code
+<div class="container main">
+        
+    <h5>Present Contest</h5>
+  <div class="row">  
+      <div class="col-md-6 head">
+          Contest
+        </div>
+        <div class="col-md-2 head">
+          Contest Code
+        </div>
+        <div class="col-md-2 head">
+            Start Time
+        </div>
+        <div class="col-md-2 head">
+          End Time
+        </div>
       </div>
-    </div>
-        <a
-    class="nav-link contest"
-    *ngFor="let i of contest"
-    (click)="onSelectContest(i.id)">
-      <div class="row">  
-      <div class="col-md-8">
+      <a
+      class="nav-link contest"
+      *ngFor="let i of contest"
+      (click)="onSelectContest(i)">
+        <div class="row">  
+        <div class="col-md-6">
           {{i.name}}
         </div>
-        <div class="col-md-4">
+        <div class="col-md-2">
           {{i.id}}
         </div>
+        <div class="col-md-2" [innerHTML]="replaceTZ(i.startTime)">
+        </div>
+        <div class="col-md-2" [innerHTML]="replaceTZ(i.endTime)">
+        </div>
       </div>
-      </a>    
+    </a>    
 </div>
-  </div>
+
diff --git a/codecamp-front/src/app/components/contest/contest.component.ts b/codecamp-front/src/app/components/contest/contest.component.ts
index 02f99e5..6968d2b 100644
--- a/codecamp-front/src/app/components/contest/contest.component.ts
+++ b/codecamp-front/src/app/components/contest/contest.component.ts
@@ -12,6 +12,8 @@ import { Observable } from 'rxjs/Observable';
 })
 export class ContestComponent implements OnInit {
   contest;
+  contestname;
+  
   constructor(
     public authService: AuthService,
     private router: Router,
@@ -19,13 +21,20 @@ export class ContestComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.contestService.getContest().subscribe(contest => {
-      this.contest = contest.contests;
+    this.contestService.getContest().subscribe(
+      contest => {
+      this.contest = contest.contests; 
     });
+    this.contestService.currentContest.subscribe(contest => this.contestname=contest);
   }
 
+  replaceTZ(time) {
+    return time && time.replace(/[TZ]|.000/g,'<br>');
+  }
   onSelectContest(i) {
-    this.router.navigate(['/contest', i]);
+    this.contestname = i.name;
+    this.contestService.changeContest(this.contestname);
+    this.router.navigate(['/contest', i.id]);
   }
 
   onAddContest() {
diff --git a/codecamp-front/src/app/components/home/home.component.css b/codecamp-front/src/app/components/home/home.component.css
index 6cb6c07..ac3df0b 100644
--- a/codecamp-front/src/app/components/home/home.component.css
+++ b/codecamp-front/src/app/components/home/home.component.css
@@ -1,13 +1,14 @@
 .page-header {
     height: 90vh;
     overflow: hidden;
+    
 }
 .header-filter {
     position: relative;
 }
 
 .page-header {
-    height: 100vh;
+    height: 60vh;
     background-position: 50%;
     background-size: cover;
     margin: 0;
diff --git a/codecamp-front/src/app/components/login/login.component.css b/codecamp-front/src/app/components/login/login.component.css
index e69de29..fab34af 100644
--- a/codecamp-front/src/app/components/login/login.component.css
+++ b/codecamp-front/src/app/components/login/login.component.css
@@ -0,0 +1,29 @@
+.card-body{
+    padding: 3%;
+}
+.card {
+    margin: 3% 10%;
+    box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
+}
+
+.form-control{
+    border-radius: 1.5rem;
+}
+
+label{
+    padding-top: 6px;
+}
+
+.sub{
+    margin-left: 13.7rem; 
+}
+.form-control:focus{
+    border-color: none;
+    box-shadow: none;
+}
+
+.btn-primary {
+    background: #2ca8ff;
+    border-color: #2ca8ff;
+    border-radius: 0;
+}
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/login/login.component.html b/codecamp-front/src/app/components/login/login.component.html
index 24aad84..193448d 100644
--- a/codecamp-front/src/app/components/login/login.component.html
+++ b/codecamp-front/src/app/components/login/login.component.html
@@ -1,30 +1,66 @@
-<div class="container">
-        <form [formGroup]="form" (submit)="onSignInSubmit()">      
-          <div class="form-group">
-            <label for="username">Username</label>
-            <input type="text"
-             name="username" 
-             formControlName="username" 
-             class="form-control" 
-             placeholder="Enter username(XYZ)" 
-             autocomplete="off"
-             [ngClass]="{'is-invalid': (form.controls.username.errors && form.controls.username.dirty) , 'is-valid': !form.controls.username.errors}">
+<div class="container top">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">SIGN IN</h2>
           </div>
-      
-          <!-- Email Input -->
-          <div class="form-group">
-            <label for="password">Password</label>
-            <input type="password" 
-            name="password" 
-            formControlName="password" 
-            class="form-control" 
-            placeholder="Enter password" 
-            autocomplete="off"
-            [ngClass]="{'is-invalid': (form.controls.password.errors && form.controls.password.dirty) , 'is-valid': !form.controls.password.errors}">
+          <div class="card-body">
+            <form [formGroup]="form" (submit)="onSignInSubmit()">      
+              <div class="form-group">
+                <div class="row">
+                  <div class="col-md-3">
+                      <label for="username">Username</label>   
+                  </div>
+                  <div class="col-md-9">
+                      <input type="text"
+                      name="username" 
+                      formControlName="username" 
+                      class="form-control" 
+                      placeholder="Enter username(XYZ)" 
+                      autocomplete="off"
+                      [ngClass]="{'is-invalid': (form.controls.username.errors && form.controls.username.dirty) , 'is-valid': !form.controls.username.errors}">   
+                  </div>
+                </div>
+              </div>
+          
+              <div class="form-group">
+                  <div class="row">
+                    <div class="col-md-3">
+                        <label for="password">Password</label>
+                    </div>
+                    <div class="col-md-9">
+                        <input type="password" 
+                        name="password" 
+                        formControlName="password" 
+                        class="form-control" 
+                        placeholder="Enter password" 
+                        autocomplete="off"
+                        [ngClass]="{'is-invalid': (form.controls.password.errors && form.controls.password.dirty) , 'is-valid': !form.controls.password.errors}">
+                    </div>
+                  </div>
+                </div>
+                <p>{{message}}</p>
+              <div class="row">
+                  <div class="col-md-9 offset-md-3">
+                    <div class="row">
+                      <div class="col-md-2"><input
+                        [disabled]="!form.valid"
+                        type="submit" class="btn btn-primary" 
+                        value="Sign In">
+                      </div>  
+                      <div class="col-md-10 mt-2">
+                          <p>Don't Have an account? <a 
+                            routerLink="/register" >Sign up</a></p>
+                      </div>
+                        
+                    </div>  
+                  </div>
+                    
+                </div>
+            </form>
           </div>
-      
-          <input 
-          [disabled]="!form.valid"
-          type="submit" class="btn btn-primary" value="Sign In">
-        </form>
-      </div>
\ No newline at end of file
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/login/login.component.ts b/codecamp-front/src/app/components/login/login.component.ts
index 040d136..524cb99 100644
--- a/codecamp-front/src/app/components/login/login.component.ts
+++ b/codecamp-front/src/app/components/login/login.component.ts
@@ -10,8 +10,9 @@ import { Router } from '@angular/router';
 })
 export class LoginComponent implements OnInit {
   form: FormGroup;
-  message;
+  message = false;
   messageClass;
+
   constructor(
     private authService: AuthService,
     private router: Router,
@@ -39,11 +40,14 @@ export class LoginComponent implements OnInit {
       password: this.form.get('password').value // Password input field
     };
     this.authService.loginUser(user).subscribe(data => {
-      this.authService.storeUserData(data.token, data.user);
-        // After 2 seconds, redirect to dashboard page
-        console.log(data);
-          this.router.navigate(['/']);
-          // Navigate to dashboard view
+      if(!data.success){
+        this.message = data.msg;
+      }
+      else{
+        this.authService.storeUserData(data.token, data.user);
+            this.router.navigate(['/']);
+            this.message = false;
+           }     // Navigate to dashboard view
       });
   }
 }
diff --git a/codecamp-front/src/app/components/navbar/navbar.component.css b/codecamp-front/src/app/components/navbar/navbar.component.css
index e69de29..c8e38a9 100644
--- a/codecamp-front/src/app/components/navbar/navbar.component.css
+++ b/codecamp-front/src/app/components/navbar/navbar.component.css
@@ -0,0 +1,43 @@
+.topbar {
+    z-index: 50;
+}
+
+.navbar{
+    font-size: 14px;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
+}
+
+.topbar .top-navbar .navbar-header {
+    line-height: 45px;
+    text-align: center;
+}
+.topbar .navbar-header {
+    background: #2ca8ff;
+    color: white;
+}
+
+.btn-light:hover{
+    color: #111;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+}
+
+.collaps{
+    padding: 9px 0;
+}
+
+.btn-light:not([disabled]):not(.disabled):active, .show>.btn-light.dropdown-toggle {
+    color: #111;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+}
+.nav-link{
+    color: #111;
+}
+@media (min-width: 768px){
+    .navbar-header {
+        width: 240px;
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/navbar/navbar.component.html b/codecamp-front/src/app/components/navbar/navbar.component.html
index 07d1c11..0a15caa 100644
--- a/codecamp-front/src/app/components/navbar/navbar.component.html
+++ b/codecamp-front/src/app/components/navbar/navbar.component.html
@@ -1,87 +1,140 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-  <div class="container">
-    <div class="brand">
-  <a class="navbar-brand" href="#">CodeCamp</a>
-</div>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+<nav class="navbar top-navbar navbar-expand-lg navbar-light fixed-top bg-light justify-content-between" [@panelInOut]="toggle">
+    <a class="navbar-brand"
+    (click)="onToggle()">
+        <i class="fa fa-bars" aria-hidden="true"></i>
+    </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <div class="collapse navbar-collapse" id="navbarText">
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item" > 
-        <a 
-        class="nav-link" 
-        routerLink="/" 
-        [routerLinkActiveOptions]="{exact: true}"
-        routerLinkActive="active"
-        >Home</a>
-      </li>
-      <li class="nav-item" >
-        <a 
-        class="nav-link"
-        routerLink="/about"
-        routerLinkActive="active"
-        >
-        About</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link"
-        routerLink="/practice" 
-        routerLinkActive="active"
-        >Practice</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link"
-        routerLink="/discuss" 
-        routerLinkActive="active"
-        >Discuss</a>
+  <div class="collapse navbar-collapse" id="navbarNav">
+    <ul class="navbar-nav mt-md-0">
+      <li class="nav-item pl-2">
+        <i class="fa fa-bell" aria-hidden="true"></i>
       </li>
-    <li class="nav-item" >
-        <a class="nav-link"
-        routerLink="/contest" 
-        routerLinkActive="active"
-        >Contest</a>
+      <li class="nav-item pl-2">
+        <i class="fa fa-th-list" aria-hidden="true"></i>
       </li>
-      <li class="nav-item" >
-          <a class="nav-link"
-          routerLink="/ide" 
-          routerLinkActive="active"
-          >Online IDE</a>
-        </li>
     </ul>
-    <ul class="navbar-nav ml-auto">
-      <li class="nav-item">
-        <a class="nav-link" 
-        routerLink="/login" 
-        routerLinkActive="active"
-        *ngIf="!authService.loggedIn()"
-        >Login</a>
-      </li>
+    <ul class="navbar-nav my-lg-0 ml-auto">
 
-      <li class="nav-item">
-          <a class="nav-link"
-          routerLink="/profile" 
-          routerLinkActive="active"
-          *ngIf="authService.loggedIn()"
-          >My Profile</a>
-        </li>
+      <div class="dropdown show mr-4" *ngIf="authService.loggedIn()">
+        <a class="btn btn-light dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
+          aria-expanded="false">
+          Welcome {{user?.username}}
+        </a>
 
-      <li class="nav-item">
-          <a class="nav-link"
-          routerLink="/register" 
-          routerLinkActive="active"
-          *ngIf="!authService.loggedIn()"
-          >Register</a>
-        </li>
-        <li class="nav-item" >
-          <a class="nav-link"
-          (click)="onLogoutClick()" 
-          *ngIf="authService.loggedIn()"
-          >Logout</a>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+          <a class="dropdown-item" routerLink="/profile">Profile</a>
+          <a class="dropdown-item" href="#">Tasks</a>
+          <a class="dropdown-item" href="#">Contact</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" (click)="onLogoutClick()">Sign Out</a>
+        </div>
+      </div>
+      <a class="nav-link" routerLink="/login" routerLinkActive="active" *ngIf="!authService.loggedIn()">
+        <li class="nav-item mr-4">
+          <i class="fa fa-sign-in" aria-hidden="true"></i>
+          <span class="ml-1">SIGN IN</span>
         </li>
+      </a>
+
     </ul>
-  </div>
+    </div>
+  </nav>
+  <!--
+<div class="container-fluid top">
+  <div class="row">
+    <div class="col-md-1">
+      <div class="brand">
+        <a class="navbar-brand">CodeCamp</a>
+      </div>
+    </div>
+    <div class="col-md-11">
+      <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
+          <i class="fa fa-bars"></i>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarText">
+          <ul class="navbar-nav mr-auto">
+            <li class="nav-item" >
+              <a
+              class="nav-link"
+              routerLink="/"
+              [routerLinkActiveOptions]="{exact: true}"
+              routerLinkActive="active"
+              >Home</a>
+            </li>
+            <li class="nav-item" >
+              <a
+              class="nav-link"
+              routerLink="/about"
+              routerLinkActive="active"
+              >
+              About</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link"
+              routerLink="/practice"
+              routerLinkActive="active"
+              >Practice</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link"
+              routerLink="/discuss"
+              routerLinkActive="active"
+              >Discuss</a>
+            </li>
+          <li class="nav-item" >
+              <a class="nav-link"
+              routerLink="/contest"
+              routerLinkActive="active"
+              >Contest</a>
+            </li>
+            <li class="nav-item" >
+                <a class="nav-link"
+                routerLink="/ide"
+                routerLinkActive="active"
+                >Online IDE</a>
+              </li>
+          </ul>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <a class="nav-link"
+              routerLink="/login"
+              routerLinkActive="active"
+              *ngIf="!authService.loggedIn()"
+              >Login</a>
+            </li>
+
+            <li class="nav-item">
+                <a class="nav-link"
+                routerLink="/profile"
+                routerLinkActive="active"
+                *ngIf="authService.loggedIn()"
+                >My Profile</a>
+              </li>
+
+            <li class="nav-item">
+                <a class="nav-link"
+                routerLink="/register"
+                routerLinkActive="active"
+                *ngIf="!authService.loggedIn()"
+                >Register</a>
+              </li>
+              <li class="nav-item" >
+                <a class="nav-link"
+                (click)="onLogoutClick()"
+                *ngIf="authService.loggedIn()"
+                >Logout</a>
+              </li>
+          </ul>
+        </div>
+      </nav>
 </div>
-</nav>
+</div>
+</div>
+
+-->
 
-<!--*ngIf="authService.loggedIn()"  -->
\ No newline at end of file
+<!--*ngIf="authService.loggedIn()"  -->
diff --git a/codecamp-front/src/app/components/navbar/navbar.component.ts b/codecamp-front/src/app/components/navbar/navbar.component.ts
index 9317a4d..629a06a 100644
--- a/codecamp-front/src/app/components/navbar/navbar.component.ts
+++ b/codecamp-front/src/app/components/navbar/navbar.component.ts
@@ -1,20 +1,42 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, trigger, transition, animate, style,state } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
 import { Router } from '@angular/router';
+import { ContestService } from '../../services/contest.service';
+
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.css']
+  styleUrls: ['./navbar.component.css'],
+  animations: [
+    trigger('panelInOut', [
+      state('true', style({
+        marginLeft: '240px'
+      })),
+      state('false', style({
+        marginLeft: '0px'
+      })),
+      transition('true => false', animate('300ms ease-in-out')),
+      transition('false => true', animate('600ms ease-in-out'))
+    ])
+  ]
 })
-export class NavbarComponent implements OnInit {
+export class NavbarComponent implements OnInit{
 
+  user: any;
+  toggle: boolean = true;
   constructor(
     public authService: AuthService,
-    private router: Router
-  ) { }
+    private router: Router,
+    private contestService: ContestService
+  ) {
+  }
 
   ngOnInit() {
+    this.contestService.toggle.subscribe(toggle => this.toggle = toggle);
+    this.user = this.authService.getProfile().subscribe(profile => {
+      this.user = profile.msg;
+    });
   }
 
   onLogoutClick() {
@@ -22,4 +44,9 @@ export class NavbarComponent implements OnInit {
     this.router.navigate(['/']); // Navigate back to home page
   }
 
+  onToggle(){
+    this.toggle = this.toggle? false:true;
+    this.contestService.ontoggle(this.toggle);
+  }
+
 }
diff --git a/codecamp-front/src/app/components/preloader/preloader.component.html b/codecamp-front/src/app/components/preloader/preloader.component.html
new file mode 100644
index 0000000..1ad51c6
--- /dev/null
+++ b/codecamp-front/src/app/components/preloader/preloader.component.html
@@ -0,0 +1,3 @@
+<p>
+  preloader works!
+</p>
diff --git a/codecamp-front/src/app/components/preloader/preloader.component.sass b/codecamp-front/src/app/components/preloader/preloader.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/codecamp-front/src/app/components/preloader/preloader.component.ts b/codecamp-front/src/app/components/preloader/preloader.component.ts
new file mode 100644
index 0000000..46802ae
--- /dev/null
+++ b/codecamp-front/src/app/components/preloader/preloader.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-preloader',
+  templateUrl: './preloader.component.html',
+  styleUrls: ['./preloader.component.sass']
+})
+export class PreloaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/codecamp-front/src/app/components/problem/problem.component.css b/codecamp-front/src/app/components/problem/problem.component.css
index 57cc89a..c0a4c45 100644
--- a/codecamp-front/src/app/components/problem/problem.component.css
+++ b/codecamp-front/src/app/components/problem/problem.component.css
@@ -1,4 +1,17 @@
 .main {
     background: white;    
     box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
+    padding-top: 30px; 
+}
+
+hr{
+    border: 1px solid #111;
+}
+
+.problem{
+    padding: 3%;
+}
+
+h5{
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/problem/problem.component.html b/codecamp-front/src/app/components/problem/problem.component.html
index 58954f3..18529ae 100644
--- a/codecamp-front/src/app/components/problem/problem.component.html
+++ b/codecamp-front/src/app/components/problem/problem.component.html
@@ -1,27 +1,47 @@
 <div class="container main">
-  <div class="row" 
-  >
-    <h1 class="display-4">{{ problem?.name }}</h1>
-    <h4>{{ problem?.code }}</h4>
-  </div>
-  <hr>
-  <div class="col-md-8">
-    <div class="row">
-      <div class="col-md-12">
-        <p>{{ problem?.description}}</p>
-      </div>
-      <hr>
-      <div class="col-md-12">
-        <h5>Input</h5>
-        <p>{{ problem?.input_format}}</p>
+    <div class="col-md-12">
+        <h1 class="display-4">{{ problem?.name }}</h1>
+        
+        <h4>Problem Code: {{ problem?.code }}</h4>
+        
+        <hr>
       </div>
-      <hr>
-      <div class="col-md-12">
-          <h5>Output</h5>
-          <p>{{ problem?.output_format}}</p>
-        </div>
+      <div class="row problem">
+      <div class="col-md-8">
+        <div class="row">
+          <div class="col-md-12">
+            <p>{{ problem?.description}}</p>
+          </div>
+          <div class="col-md-12">
+            <h5>Input</h5>
+            <p>{{ problem?.input_format}}</p>
+          </div>
+          <div class="col-md-12">
+              <h5>Output</h5>
+              <p>{{ problem?.output_format }}</p>
+            </div>
+          <div class="col-md-12">
+            <h5>Constraints</h5>
+          </div>
+          <div class="col-md-12">
+            <h5>Input Testcase</h5>
+            <p [innerText]="problem?.input_example"></p>
+          </div>
+          <div class="col-md-12">
+              <h5>Output Testcase</h5>
+              <p [innerText]="problem?.output_example"></p>
+            </div>
+          <div class="col-md-12">
+            <h5>Explanations</h5>
+            <p [innerText]="problem?.explanation_example"></p>
+          </div>
+          </div> 
     </div>
-    <button class="btn btn-success"
-     (click)="onSelectSubmit()">Submit</button>
+
+    <div class="col-md-4">
+      <app-submission></app-submission>
+  </div>
   </div>
+  <button class="btn btn-success"
+         (click)="onSelectSubmit()">Submit</button>
 </div>
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/problem/problem.component.ts b/codecamp-front/src/app/components/problem/problem.component.ts
index 92cf1f2..13a8d86 100644
--- a/codecamp-front/src/app/components/problem/problem.component.ts
+++ b/codecamp-front/src/app/components/problem/problem.component.ts
@@ -13,8 +13,6 @@ export class ProblemComponent implements OnInit {
   code;
   contest;
   problem;
-  pro;
-  pr;
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -26,6 +24,7 @@ export class ProblemComponent implements OnInit {
     this.contest = this.route.snapshot.params['contest'];
     this.contestService.getProblem(this.code, this.contest).subscribe(data => {
       this.problem = data.problem;
+      console.log(this.problem);
     });
   }
 
diff --git a/codecamp-front/src/app/components/problems/problems.component.css b/codecamp-front/src/app/components/problems/problems.component.css
index aac51e9..665d63a 100644
--- a/codecamp-front/src/app/components/problems/problems.component.css
+++ b/codecamp-front/src/app/components/problems/problems.component.css
@@ -1,7 +1,39 @@
 .problem{
     background: white;
     border-bottom: 1px solid rgba(39,39,39,.1);
-    padding: 1% 1%;
+    padding: 1% 0.5%;
     box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
     cursor: pointer;
+}
+
+.breadcrumb{
+    background-color: inherit;
+    padding-top: 2%;
+    margin: 0;
+}
+
+.head {
+    padding: 2%;
+    font-size: 14px;
+    font-weight: bold;
+    background: #111;
+    color: #fff;
+}
+.row{
+    margin: 0;
+}
+
+
+.col-md-3 {
+    text-align: center;
+}
+
+.display-4{
+    padding-left: 1%; 
+}
+.main {
+    margin-top: 1%;
+    background: white;
+    padding: 2%;
+    border: 4px;
 }
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/problems/problems.component.html b/codecamp-front/src/app/components/problems/problems.component.html
index 9a12f3c..38b22fb 100644
--- a/codecamp-front/src/app/components/problems/problems.component.html
+++ b/codecamp-front/src/app/components/problems/problems.component.html
@@ -2,36 +2,55 @@
   <div class="row">
     <div class="col-md-12">
       <button class="btn btn-warning" (click)="onAddProblem()">Add Problems</button>
-      <button class="btn btn-danger" (click)="onDeleteProblem()">Delete Problems</button>
+      <button class="btn btn-danger" (click)="onDeleteContest()">Delete Contest</button>
     </div>
   </div>
 </div>
-<div class="container">
+<div class="container main">
   <div class="row">
     <div class="col-md-12">
-      <h1 class="display-4">{{contest}}</h1>
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a routerLink="/contest">Contest</a></li>
+              <li class="breadcrumb-item active" aria-current="page">{{contestname}}</li>
+            </ol>
+          </nav>
+      <h1 class="display-4">{{contestname}}</h1>
     </div>
   </div>
-</div>
-
-<div class="container">
   <div class="row">
-    
-    <div class="col-md-12">
-        <a
-        class="nav-link problem"
-        *ngFor="let i of problems"
-        (click)="onSelectProblem(i.code)">
-          <div class="row">
-            <div class="col-md-8">
-              {{i.name}}
+    <div class="col-md-9">
+        <div class="row">
+            <div class="col-md-6 head">
+              Problem
             </div>
-            <div class="col-md-4">
-              {{i.code}}
+            <div class="col-md-3 head">
+              Problem Code
             </div>
+            <div class="col-md-3 head">
+              Successful Submission
+            </div>
+              
           </div>
-    
-        </a>
+          <a
+          class="nav-link problem"
+          *ngFor="let i of problems"
+          (click)="onSelectProblem(i.code)">
+            <div class="row">
+              <div class="col-md-6">
+                {{i.name}}
+              </div>
+              <div class="col-md-3">
+                {{i.code}}
+              </div>
+            </div>
+          </a>
+    </div>
+    <div class="col-md-3">
+      <div class="timer">
+        <p>Time to start</p>
+      </div>
+      
     </div>
   </div>
-</div>
+  </div>
diff --git a/codecamp-front/src/app/components/problems/problems.component.ts b/codecamp-front/src/app/components/problems/problems.component.ts
index 7b5f14f..59205d3 100644
--- a/codecamp-front/src/app/components/problems/problems.component.ts
+++ b/codecamp-front/src/app/components/problems/problems.component.ts
@@ -13,6 +13,7 @@ export class ProblemsComponent implements OnInit {
 
   contest;
   problems;
+  contestname;
   constructor(
     private contestService: ContestService,
     private router: Router,
@@ -25,6 +26,7 @@ export class ProblemsComponent implements OnInit {
     this.contestService.getProblems(this.contest).subscribe(contest => {
       this.problems = contest.msg.questions;
     });
+    this.contestService.currentContest.subscribe(contest => this.contestname=contest);
   }
   onAddProblem() {
     this.router.navigate(['/contest', this.contest, 'addproblem']);
@@ -32,4 +34,9 @@ export class ProblemsComponent implements OnInit {
   onSelectProblem(code) {
         this.router.navigate(['/contest', this.contest, code]);
   }
+  onDeleteContest() {
+    this.contestService.deleteContest(this.contest).subscribe(contest =>{
+      this.router.navigate(['/contest']);
+    })
+  }
 }
diff --git a/codecamp-front/src/app/components/profile/profile.component.css b/codecamp-front/src/app/components/profile/profile.component.css
index e69de29..271ca9a 100644
--- a/codecamp-front/src/app/components/profile/profile.component.css
+++ b/codecamp-front/src/app/components/profile/profile.component.css
@@ -0,0 +1,14 @@
+.circle{
+  margin-top: 40px;
+  width: 80%;
+   border-radius: 120px;
+   margin-left: 25%;
+}
+.bold{
+  text-align: center;
+  font-size:35px !important;
+}
+.college{
+  text-align: center;
+  font-size: 15px;
+}
diff --git a/codecamp-front/src/app/components/profile/profile.component.html b/codecamp-front/src/app/components/profile/profile.component.html
index 3bc31e3..6e60338 100644
--- a/codecamp-front/src/app/components/profile/profile.component.html
+++ b/codecamp-front/src/app/components/profile/profile.component.html
@@ -1,13 +1,22 @@
-<div *ngIf="user">
-  <h2 class="page-header">{{user.name}}</h2>
+
+<div class="row" *ngIf="user" >
+<div class="col col-md-4">
+    <div class="profile-img">
+        <img src="../assets/undefined.jpg" class="circle img-fluid" alt="user">
+    </div>
+</div>
+<div class="col col-md-8">
+   <div class="bold"><b>{{user.name}}</b> ( {{user.username}})</div>
+  <div class="college">
+    {{user.college}}
+  </div>
+  <br>
   <ul class="list-group">
-    <li class="list-group-item">Username: {{user.username}}</li>
-    <li class="list-group-item">Email: {{user.email_id}}</li>
-    <li class="list-group-item">Name: {{ user.name }}</li>
-    <li class="list-group-item">College: {{ user.college }}</li>
-    <li class="list-group-item">Date Of Birth: {{ user.dob }}</li>
-    <li class="list-group-item">City: {{ user.city }}</li>
-    <li class="list-group-item">Gender: {{ user.gender }}</li>
-    <li class="list-group-item">JoinedOn: {{ user.joinedOn }}</li>
+      <li class="list-group-item">Email: {{user.email_id}}</li>
+      <li class="list-group-item">Date Of Birth: {{ user.dob }}</li>
+      <li class="list-group-item">City: {{ user.city }}</li>
+      <li class="list-group-item">Gender: {{ user.gender }}</li>
+      <li class="list-group-item">JoinedOn: {{ user.joinedOn }}</li>
   </ul>
 </div>
+</div>
diff --git a/codecamp-front/src/app/components/profile/profile.component.ts b/codecamp-front/src/app/components/profile/profile.component.ts
index 7198665..5028fa4 100644
--- a/codecamp-front/src/app/components/profile/profile.component.ts
+++ b/codecamp-front/src/app/components/profile/profile.component.ts
@@ -22,7 +22,7 @@ export class ProfileComponent implements OnInit {
   }
 
   ngOnInit() {
-
+    
     }
 
 }
diff --git a/codecamp-front/src/app/components/register/register.component.css b/codecamp-front/src/app/components/register/register.component.css
index e69de29..43c48cb 100644
--- a/codecamp-front/src/app/components/register/register.component.css
+++ b/codecamp-front/src/app/components/register/register.component.css
@@ -0,0 +1,30 @@
+.card-body{
+    padding: 3%;
+}
+.card {
+    margin: 3% 10%;
+    box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
+}
+option[disabled] { display: none; } 
+
+.form-control{
+    border-radius: 1.5rem;
+}
+
+label{
+    padding-top: 6px;
+}
+
+.sub{
+    margin-left: 13.7rem; 
+}
+.form-control:focus{
+    border-color: none;
+    box-shadow: none;
+}
+
+.btn-primary {
+    background: #2ca8ff;
+    border-color: #2ca8ff;
+    border-radius: 0;
+}
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/register/register.component.html b/codecamp-front/src/app/components/register/register.component.html
index 132193c..14d014f 100644
--- a/codecamp-front/src/app/components/register/register.component.html
+++ b/codecamp-front/src/app/components/register/register.component.html
@@ -1,110 +1,192 @@
-<div class="container">
-  <form [formGroup]="form" (submit)="onSignupSubmit()">
-    <div class="form-group">
-      <label for="name">Name</label>
-      <input type="text"
-      name="name"
-      formControlName="name"
-      class="form-control"
-      placeholder="Enter Name"
-      autocomplete="off"
-      [ngClass]="{'is-invalid': (form.controls.name.errors && form.controls.name.dirty) , 'is-valid': !form.controls.name.errors}">
-    </div>
 
-    <div class="form-group">
-      <label for="username">Username</label>
-      <input type="text"
-       name="username"
-       formControlName="username"
-       class="form-control"
-       placeholder="Enter username(XYZ)"
-       autocomplete="off"
-       [ngClass]="{'is-invalid': (form.controls.username.errors && form.controls.username.dirty) , 'is-valid': !form.controls.username.errors}">
-    </div>
 
-    <!-- Email Input -->
-  <div class="form-group">
-    <label for="email">Email</label>
-      <input type="text"
-      name="email_id"
-      class="form-control"
-      [ngClass]="{'is-invalid': (form.controls.email_id.errors && form.controls.email_id.dirty) , 'is-valid': !form.controls.email_id.errors}"
-      autocomplete="off"
-      placeholder="*email"
-      formControlName="email_id">
-      <!-- Validation -->
-      <div *ngIf="form.controls.email_id.errors?.required && form.controls.email_id.dirty" class="invalid-feedback">This Field is required</div>
-      <div class="invalid-feedback" *ngIf="(form.controls.email_id.errors?.minlength && form.controls.email_id.dirty || form.controls.email_id.errors?.maxlength && form.controls.email_id.dirty ) && form.controls.email_id.dirty">Minimum characters: 5, Maximum characters: 30</div>
-      <div class="invalid-feedback" *ngIf="form.controls.email_id.errors?.validateemail && form.controls.email_id.dirty">This must be a valid e-mail</div>
-  </div>
-
-    <div class="form-group">
-      <label for="college">College</label>
-      <input type="text"
-      name="college"
-      formControlName="college"
-      class="form-control"
-      placeholder="Enter college name"
-      autocomplete="off"
-      [ngClass]="{'is-invalid': (form.controls.college.errors && form.controls.college.dirty) , 'is-valid': !form.controls.college.errors}">
+<div class="container top">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="card">
+        <div class="card-header">
+          <h2 class="card-title">SIGN UP</h2>
+        </div>
+        <div class="card-body">
+            <form [formGroup]="form" (submit)="onSignupSubmit()">
+                <div class="form-group">
+                  <div class="row">
+                    <div class="col-md-3">
+                        <label for="name">Name</label>
+                    </div>
+                    <div class="col-md-9">
+                        <input type="text"
+                        name="name"
+                        formControlName="name"
+                        class="form-control"
+                        placeholder="Enter Name"
+                        autocomplete="off"
+                        [ngClass]="{'is-invalid': (form.controls.name.errors && form.controls.name.dirty) , 'is-valid': !form.controls.name.errors}">
+                    </div>
+                  </div>
+                </div>
+            
+                <div class="form-group">
+                  <div class="row">
+                    <div class="col-md-3">
+                        <label for="username">Username</label>
+                    </div>
+                    <div class="col-md-9">
+                        <input type="text"
+                         name="username"
+                         formControlName="username"
+                         class="form-control"
+                         placeholder="Enter username(XYZ)"
+                         autocomplete="off"
+                         [ngClass]="{'is-invalid': (form.controls.username.errors && form.controls.username.dirty) , 'is-valid': !form.controls.username.errors}"></div>
+                  </div>
+                </div>
+            
+                <!-- Email Input -->
+              <div class="form-group">
+                <div class="row">
+                  <div class="col-md-3">
+                      <label for="email">Email</label>
+                    </div>
+                <div class="col-md-9">
+                  <input type="text"
+                  name="email_id"
+                  class="form-control"
+                  [ngClass]="{'is-invalid': (form.controls.email_id.errors && form.controls.email_id.dirty) , 'is-valid': !form.controls.email_id.errors}"
+                  autocomplete="off"
+                  placeholder="*email"
+                  formControlName="email_id">
+                  <!-- Validation -->
+                  <div *ngIf="form.controls.email_id.errors?.required && form.controls.email_id.dirty" class="invalid-feedback">This Field is required</div>
+                  <div class="invalid-feedback" *ngIf="(form.controls.email_id.errors?.minlength && form.controls.email_id.dirty || form.controls.email_id.errors?.maxlength && form.controls.email_id.dirty ) && form.controls.email_id.dirty">Minimum characters: 5, Maximum characters: 30</div>
+                  <div class="invalid-feedback" *ngIf="form.controls.email_id.errors?.validateemail && form.controls.email_id.dirty">This must be a valid e-mail</div>
+                      </div>
+                    </div>
+              </div>
+            
+                <div class="form-group">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <label for="college">College</label>
+                        </div>
+                        <div class="col-md-9">
+                            <input type="text"
+                            name="college"
+                            formControlName="college"
+                            class="form-control"
+                            placeholder="Enter college name"
+                            autocomplete="off"
+                            [ngClass]="{'is-invalid': (form.controls.college.errors && form.controls.college.dirty) , 'is-valid': !form.controls.college.errors}">
+                        </div>
+                      </div>
+                </div>
+            
+                <div class="form-group">
+                    <div class="row">
+                      <div class="col-md-3">
+                          <label for="city">City</label>
+                      </div>
+                    <div class="col-md-9">
+                        <input type="text"
+                        name="city"
+                        formControlName="city"
+                        class="form-control" placeholder="Enter city" autocomplete="off">
+                    </div>
+                  </div>
+                </div>
+            
+                <div class="form-group">
+                  <div class="row">
+                    <div class="col-md-3">
+                      <label for="dob">Date Of Birth</label>
+                    </div>
+                    <div class="col-md-9">
+                        <input type="date"
+                         name="dob"
+                         formControlName="dob"
+                         class="form-control"
+                         autocomplete="off"
+                         [ngClass]="{'is-invalid': (form.controls.dob.errors && form.controls.dob.dirty) , 'is-valid': !form.controls.dob.errors}">
+                    </div>
+                  </div>
+                </div>
+            
+                <div class="form-group">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <label for="gender">Gender</label>
+                        </div>
+                        <div class="col-md-9">
+                            <select class="form-control col-lg-4"
+                            name="gender"
+                            formControlName="gender"
+                            placeholder="Male"
+                            >
+                            <option value="" disabled selected>Choose...</option>
+                            <option value="Male">Male</option>
+                            <option value="Female">Female</option>
+                          </select>
+                        </div>
+                      </div>
+                </div>
+            
+                <div class="form-group">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <label for="password">Password</label>
+                        </div>
+                        <div class="col-md-9">
+                          <input type="password"
+                          name="password"
+                          formControlName="password"
+                          class="form-control"
+                          placeholder="Enter password"
+                          autocomplete="off"
+                          [ngClass]="{'is-invalid': (form.controls.password.errors && form.controls.password.dirty) , 'is-valid': !form.controls.password.errors}"></div>
+                      </div>
+                </div>
+            
+                <div class="form-group">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <label for="confirmpassword">Confirm Password</label>
+                        </div>
+                        <div class="col-md-9">
+                          <input type="password"
+                          name="confirm"
+                          formControlName="confirm"
+                          class="form-control"
+                          placeholder="Confrim password"
+                          autocomplete="off"
+                          [ngClass]="{'is-invalid':  (form.controls.confirm.errors && form.controls.confirm.dirty) || (form.errors?.matchingPasswords && form.controls.confirm.dirty) , 'is-valid': !form.controls.confirm.errors && !form.errors?.matchingPasswords}">
+                          <div *ngIf="form.errors?.matchingPasswords && form.controls.confirm.dirty"
+                          class="invalid-feedback">Password do not match</div>
+                        </div>
+                      </div>
+                  
+                  
+            
+                </div>
+                <div class="row">
+                  <div class="col-md-9 offset-md-3">
+                    <div class="row">
+                      <div class="col-md-2"><input
+                        [disabled]="!form.valid"
+                        type="submit" class="btn btn-primary" 
+                        value="Sign up">
+                      </div>  
+                      <div class="col-md-10 mt-2">
+                          <p>Already Have an account? <a 
+                            routerLink="/login" >Sign in</a></p>
+                      </div>
+                        
+                    </div>  
+                  </div>
+                    
+                </div>
+              </form>
+        </div>
+      </div>
     </div>
-
-    <div class="form-group">
-      <label for="city">City</label>
-      <input type="text"
-      name="city"
-      formControlName="city"
-      class="form-control" placeholder="Enter city" autocomplete="off">
-    </div>
-
-    <div class="form-group">
-      <label for="dob">Date Of Birth</label>
-      <input type="date"
-       name="dob"
-       formControlName="dob"
-       class="form-control"
-       autocomplete="off"
-       [ngClass]="{'is-invalid': (form.controls.dob.errors && form.controls.dob.dirty) , 'is-valid': !form.controls.dob.errors}">
-    </div>
-
-    <div class="form-group">
-      <label for="gender">Gender</label>
-      <select class="form-control col-lg-4"
-        name="gender"
-        formControlName="gender"
-        >
-        <option value="">Male</option>
-        <option value="Female">Female</option>
-      </select>
-    </div>
-
-    <div class="form-group">
-      <label for="password">Password</label>
-      <input type="password"
-      name="password"
-      formControlName="password"
-      class="form-control"
-      placeholder="Enter password"
-      autocomplete="off"
-      [ngClass]="{'is-invalid': (form.controls.password.errors && form.controls.password.dirty) , 'is-valid': !form.controls.password.errors}">
-    </div>
-
-    <div class="form-group">
-      <label for="confirmpassword">Confirm Password</label>
-      <input type="password"
-      name="confirm"
-      formControlName="confirm"
-      class="form-control"
-      placeholder="Confrim password"
-      autocomplete="off"
-      [ngClass]="{'is-invalid':  (form.controls.confirm.errors && form.controls.confirm.dirty) || (form.errors?.matchingPasswords && form.controls.confirm.dirty) , 'is-valid': !form.controls.confirm.errors && !form.errors?.matchingPasswords}">
-      <div *ngIf="form.errors?.matchingPasswords && form.controls.confirm.dirty"
-      class="invalid-feedback">Password do not match</div>
-
-    </div>
-
-    <input
-    [disabled]="!form.valid "
-    type="submit" class="btn btn-primary" value="Sign up">
-  </form>
+  </div>
 </div>
diff --git a/codecamp-front/src/app/components/sidebar/sidebar.component.css b/codecamp-front/src/app/components/sidebar/sidebar.component.css
new file mode 100644
index 0000000..a2bdf7c
--- /dev/null
+++ b/codecamp-front/src/app/components/sidebar/sidebar.component.css
@@ -0,0 +1,105 @@
+.left-sidebar{
+    position: absolute;
+    width: 240px;
+    height: 100%;
+    top: 0px;
+    z-index: 20;
+    color: #fff;
+    -webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: px 0px 20px rgba(0, 0, 0, 0.08);
+    position: fixed;
+}
+
+.background{
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: block;
+    position: absolute;
+    background-size: cover!important;
+    background-position: center center!important;
+}
+
+.nav{
+    width: 240px;
+    height: 100vh;
+    z-index: 4;
+    position: relative;
+    overflow: auto;
+}
+
+.background:after{
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    content: "";
+    display: block;
+    opacity: .8;
+    position: absolute;
+    background: #000;
+}
+
+.sidebar-nav ul li a {
+    margin: 10px 15px;
+    border-radius: 30px;
+    color: #fff;
+    display: block;
+    text-decoration: none;
+    position: relative;
+    text-transform: uppercase;
+    cursor: pointer;
+    font-size: .7142em;
+    padding: 10px 20px;
+    line-height: 1.625rem;
+}
+
+.fa{
+    margin-right: 2px;
+}
+
+
+
+.sidebar-nav ul li a:hover {
+    background-color: hsla(0,0%,100%,.1);
+    color: #fff;
+}
+
+.sidebar-nav ul li a.active {
+    background: #fff;
+    color:  #111;
+    box-shadow: 0 5px 20px 1px rgba(39,39,39,.25);
+}
+.nav-link{
+    padding: 0;
+}
+
+
+.btn:focus{
+    box-shadow: none;
+}
+
+.btn {
+    text-align: inherit;
+}
+
+.m{
+    margin-left: 5rem;
+}
+
+.circle{
+    width: 100px;
+     border-radius: 120px;
+     margin-left: 25%;
+}
+
+
+.navbar-brand img{
+    width: 30px;
+}
+
+.imageHomeIcon
+{
+    padding-left : 10px;
+}
diff --git a/codecamp-front/src/app/components/sidebar/sidebar.component.html b/codecamp-front/src/app/components/sidebar/sidebar.component.html
new file mode 100644
index 0000000..6953f67
--- /dev/null
+++ b/codecamp-front/src/app/components/sidebar/sidebar.component.html
@@ -0,0 +1,105 @@
+<aside class="left-sidebar" style="overflow: visible;" *ngIf="panelVisible" [@panelInOut]>
+  <!-- Sidebar scroll-->
+      <!-- User profile -->
+
+      <!-- End User profile text-->
+      <!-- Sidebar navigation-->
+      <div class="nav">
+      <nav class="sidebar-nav">
+          <div class="navbar-brand">
+              <img src="../assets/home-icon.png" alt="" class="imageHomeIcon">
+              Codecamp
+          </div>
+            <div class="user-profile"
+            *ngIf="authService.loggedIn()">
+                <!-- User profile image -->
+                <div class="profile-img">
+                    <img src="../assets/undefined.jpg" class="circle img-fluid" alt="user">
+                    <!-- this is blinking heartbit -->
+                    <div class="notify setpos"> <span class="heartbit"></span> <span class="point"></span> </div>
+                </div>
+                <!-- User profile text -->
+                <div class="profile-text">
+                    <h5>{{profile?.username}}</h5>
+                    <div class="dropdown-menu animated flipInY">
+                        <!-- text-->
+                        <a href="#" class="dropdown-item"><i class="ti-user"></i> My Profile</a>
+                        <!-- text-->
+                        <a href="#" class="dropdown-item"><i class="ti-wallet"></i> My Balance</a>
+                        <!-- text---->
+                        <a href="#" class="dropdown-item"><i class="ti-email"></i> Inbox</a>
+                        <!-- text---->
+                        <div class="dropdown-divider"></div>
+                        <!-- text---->
+                        <a href="#" class="dropdown-item"><i class="ti-settings"></i> Account Setting</a>
+                        <!-- text---->
+                        <div class="dropdown-divider"></div>
+                        <!-- text---->
+                        <a href="login.html" class="dropdown-item"><i class="fa fa-power-off"></i> Logout</a>
+                        <!-- text---->
+                    </div>
+                </div>
+            </div>
+        <ul id="sidebarnav" class="in">
+              <li class="nav-item">
+                  <a class="nav-link"
+                  routerLink="/"
+                  routerLinkActive="active"
+                  [routerLinkActiveOptions]="{ exact: true }"
+                  >
+                    <i class="fa fa-home" aria-hidden="true"></i>
+                    <span class="navtabs ml-2">Home</span>
+                  </a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link"
+                  routerLink="/about"
+                  routerLinkActive="active">
+                    <i class="fa fa-info" aria-hidden="true"></i>
+                    <span class="navtabs ml-2">About</span>
+                  </a>
+              </li>
+              <li class="nav-item">
+                <a class="btn btn-default" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+                  <i class="fa fa-home" aria-hidden="true"></i>
+                  <span class="navtabs">Practice</span>
+                  <i class="fa fa-caret-down m" aria-hidden="true"></i>
+
+                </a>
+                <div class="collapse" id="collapseExample">
+                    <a href="#">
+                        <i class="fa fa-info" aria-hidden="true"></i>
+                        <span class="navtabs ml-2">Easy</span>
+                      </a>
+                    <a href="#">
+                        <i class="fa fa-info" aria-hidden="true"></i>
+                        <span class="navtabs ml-2">Medium</span>
+                      </a>
+                    <a href="#">
+                        <i class="fa fa-info" aria-hidden="true"></i>
+                        <span class="navtabs ml-2">Hard</span>
+                      </a>
+                  </div>
+              </li>
+              <li class="nav-link">
+                  <a class="nav-link"
+                  routerLink="/contest"
+                    routerLinkActive="active">
+                    <i class="fa fa-home" aria-hidden="true"></i>
+                    <span class="navtabs ml-2">Contest</span>
+                  </a>
+              </li>
+              <li class="nav-link">
+                  <a href="#">
+                    <i class="fa fa-home" aria-hidden="true"></i>
+                    <span class="navtabs ml-2">Online IDE</span>
+                  </a>
+              </li>
+          </ul>
+      </nav>
+      </div>
+      <!-- End Sidebar navigation -->
+  <!-- End Sidebar scroll-->
+  <div class="background" style="
+      background: url(../assets/sidebar.jpg);"></div>
+</aside>
diff --git a/codecamp-front/src/app/components/sidebar/sidebar.component.ts b/codecamp-front/src/app/components/sidebar/sidebar.component.ts
new file mode 100644
index 0000000..b31a879
--- /dev/null
+++ b/codecamp-front/src/app/components/sidebar/sidebar.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit, trigger, transition, style, animate } from '@angular/core';
+import { AuthService } from '../../services/auth.service';
+import { ContestService } from '../../services/contest.service';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.css'],
+  animations: [
+    trigger('panelInOut', [
+        transition('void => *', [
+            style({transform: 'translateX(-100%)'}),
+            animate('500ms ease-in')
+        ]),
+        transition('* => void', [
+            animate('500ms ease-out', style({transform: 'translateX(-100%)'}))
+        ])
+    ])
+  ]
+
+})
+export class SidebarComponent implements OnInit {
+
+  profile;
+  panelVisible;
+  constructor(private authService: AuthService,
+  private contestService: ContestService) { 
+
+  }
+
+  ngOnInit() {
+    
+
+    this.contestService.toggle.subscribe(toggle => this.panelVisible = toggle);
+   }
+
+
+}
diff --git a/codecamp-front/src/app/components/solultion-submit/solultion-submit.component.ts b/codecamp-front/src/app/components/solultion-submit/solultion-submit.component.ts
index 898cb88..ba68cfb 100644
--- a/codecamp-front/src/app/components/solultion-submit/solultion-submit.component.ts
+++ b/codecamp-front/src/app/components/solultion-submit/solultion-submit.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, Output} from '@angular/core';
+  import { Component, OnInit, ViewChild, Output} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
 import { ContestService } from '../../services/contest.service';
@@ -49,7 +49,7 @@ export class SolultionSubmitComponent implements OnInit {
   selectLanguage(event) {
     this.selectedLanguage = event.target.value;
     
-    if (this.selectedLanguage === 'c_cpp') { 
+    if (this.selectedLanguage == 'c_cpp') { 
       this.content =
       `#include<stdio.h>
 
@@ -59,7 +59,7 @@ export class SolultionSubmitComponent implements OnInit {
         printf("Welcome To CodeCamp");
 
       }`;
-    } else if (this.selectedLanguage === 'java') {
+    } else if (this.selectedLanguage == 'java') {
       this.content =
         `import java.util.*;
 
@@ -73,7 +73,7 @@ export class SolultionSubmitComponent implements OnInit {
 
         }
         `;
-      } else if (this.selectedLanguage === 'python') {
+      } else if (this.selectedLanguage == 'python') {
       this.content = `print("Welcome To CodeCamp")`;
       }
   }
@@ -105,6 +105,7 @@ export class SolultionSubmitComponent implements OnInit {
       language: lang,
       description: this.currentFileUpload
     };
+    console.log(p);
     this.contestService.addSolution(solution).subscribe(data => {
       this.contestService.setSolution(data.msg);
       this.router.navigate(['/submit/complete']);
diff --git a/codecamp-front/src/app/components/solultion-submit/solution/solution.component.css b/codecamp-front/src/app/components/solultion-submit/solution/solution.component.css
index e69de29..3598dbd 100644
--- a/codecamp-front/src/app/components/solultion-submit/solution/solution.component.css
+++ b/codecamp-front/src/app/components/solultion-submit/solution/solution.component.css
@@ -0,0 +1,4 @@
+.submissionResult
+{
+    margin-top: 200px;
+}
\ No newline at end of file
diff --git a/codecamp-front/src/app/components/solultion-submit/solution/solution.component.html b/codecamp-front/src/app/components/solultion-submit/solution/solution.component.html
index 15a0535..7822f62 100644
--- a/codecamp-front/src/app/components/solultion-submit/solution/solution.component.html
+++ b/codecamp-front/src/app/components/solultion-submit/solution/solution.component.html
@@ -1,6 +1,11 @@
 <div class="container">
-    <p>
-        {{data}}
-      </p>
-      
+    <div class="alert alert-success submissionResult" role="alert" *ngIf="condition === 'green'">
+        <strong>{{data}}</strong>
+    </div>
+    <div class="alert alert-danger submissionResult" role="alert" *ngIf="condition === 'red'">
+            <strong>{{data}}</strong>
+    </div>
+    <div class="alert alert-primary submissionResult" role="alert" *ngIf="condition === 'blue'">
+            <strong>{{data}}</strong>
+    </div>
 </div>
diff --git a/codecamp-front/src/app/components/solultion-submit/solution/solution.component.ts b/codecamp-front/src/app/components/solultion-submit/solution/solution.component.ts
index e15d34e..3aca509 100644
--- a/codecamp-front/src/app/components/solultion-submit/solution/solution.component.ts
+++ b/codecamp-front/src/app/components/solultion-submit/solution/solution.component.ts
@@ -9,12 +9,22 @@ import { ContestService } from '../../../services/contest.service';
 })
 export class SolutionComponent implements OnInit {
   data;
+  condition;
   constructor(
     private contestService: ContestService
   ) { }
 
   ngOnInit() {
     this.data = this.contestService.getSolution();
+    if(this.data[0]==='C')
+    this.condition = 'green';
+    else if(this.data[0] === 'w')
+    this.condition = 'red';
+    else
+    {
+        this.data = "Compile Time Error";
+      this.condition = 'blue';
+    }
   }
 
 }
diff --git a/codecamp-front/src/app/services/auth.service.ts b/codecamp-front/src/app/services/auth.service.ts
index f04a940..ce53c5b 100644
--- a/codecamp-front/src/app/services/auth.service.ts
+++ b/codecamp-front/src/app/services/auth.service.ts
@@ -59,13 +59,18 @@ export class AuthService {
     }
   }
 
+  public getUsername() {
+    let user = JSON.parse(localStorage.getItem('user'));
+    return user;
+  }
+
   public loggedIn() {
     return tokenNotExpired();
   }
 
   public logout() {
     this.authToken = null; // Set token to null
-    this.user = null;
+    this.user = '';
     localStorage.clear(); // Clear local storage
   }
   getProfile() {
diff --git a/codecamp-front/src/app/services/contest.service.ts b/codecamp-front/src/app/services/contest.service.ts
index 89771b4..ef86873 100644
--- a/codecamp-front/src/app/services/contest.service.ts
+++ b/codecamp-front/src/app/services/contest.service.ts
@@ -2,9 +2,12 @@ import { Injectable } from '@angular/core';
 import { Http, Headers, RequestOptions } from '@angular/http';
 import { HttpModule } from '@angular/http';
 
+
 import 'rxjs/add/operator/map';
 import { tokenNotExpired } from 'angular2-jwt';
+import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject'
 
 @Injectable()
 export class ContestService {
@@ -15,6 +18,13 @@ export class ContestService {
   public domain = 'http://localhost:3000';
   public options;
   public sol;
+  public toggler: boolean;
+
+  private contestSource = new BehaviorSubject<string>("default contest");
+  currentContest = this.contestSource.asObservable();
+
+  private Toggler = new BehaviorSubject<boolean>(true);
+  toggle = this.Toggler.asObservable();
 
   public activeContest = new Subject();
   constructor(
@@ -42,36 +52,48 @@ export class ContestService {
         .map(res => res.json());
   }
 
-  public getContest() {
+  public getContest(): Observable<any> {
     return this.http.get(this.domain + '/contest')
         .map(res => res.json());
   }
 
-  public addProblem(problem, contest) {
+  public addProblem(problem, contest): Observable<any> {
     return this.http.post(this.domain + '/contest/' + contest, problem)
       .map(res => res.json());
   }
 
-  public getProblems(contest) {
+  public getProblems(contest): Observable<any> {
     return this.http.get(this.domain + '/contest/' + contest)
         .map(res => res.json());
   }
 
-  public getProblem(code, contest) {
+  public getProblem(code, contest): Observable<any> {
     return this.http.get(this.domain + '/contest/' + contest + '/problems/' + code)
       .map((res) =>{
          return res.json();
       });
   }
 
-  public addSolution(solution) {
+  public addSolution(solution): Observable<any> {
     return this.http.post(this.domain + '/solution', solution)
       .map(res => res.json());
   }
+  public deleteContest(contest) {
+    return this.http.delete(this.domain + '/contest/' + contest, this.options)
+      .map(res => res.json());
+  }
   public setSolution(sol){
-    this.sol = sol;
+    this.sol = sol; 
   }
   public getSolution() {
     return this.sol;
   }
+
+  changeContest(contest: string) {
+    this.contestSource.next(contest)
+  }
+
+  ontoggle(value: boolean){
+    this.Toggler.next(value);
+  }
 }
diff --git a/codecamp-front/src/assets/bg1.jpg b/codecamp-front/src/assets/bg1.jpg
new file mode 100644
index 0000000..4b52aa5
Binary files /dev/null and b/codecamp-front/src/assets/bg1.jpg differ
diff --git a/codecamp-front/src/assets/sidebar.jpg b/codecamp-front/src/assets/sidebar.jpg
new file mode 100644
index 0000000..06c46ed
Binary files /dev/null and b/codecamp-front/src/assets/sidebar.jpg differ
diff --git a/codecamp-front/src/assets/undefined.jpg b/codecamp-front/src/assets/undefined.jpg
new file mode 100644
index 0000000..0532936
Binary files /dev/null and b/codecamp-front/src/assets/undefined.jpg differ
diff --git a/codecamp-front/src/index.html b/codecamp-front/src/index.html
index 54eae41..5217ab4 100644
--- a/codecamp-front/src/index.html
+++ b/codecamp-front/src/index.html
@@ -9,6 +9,10 @@
   <link id="favicon" rel="shortcut icon" type="image/png" href="assets/home-icon.png">
 </head>
 <body>
-  <app-root></app-root>
+  <app-root>
+    <div class="loader-container">
+      <div class="loader"></div>
+  </div>
+  </app-root>
 </body>
 </html>
diff --git a/codecamp-front/src/styles.css b/codecamp-front/src/styles.css
index a26fcab..9fdb828 100644
--- a/codecamp-front/src/styles.css
+++ b/codecamp-front/src/styles.css
@@ -2,6 +2,7 @@
 body {
     font-family: Montserrat,Helvetica Neue,Arial,sans-serif;
     background: #f5f5f5;
+    overflow-x: hidden;
 }
 
 html, body, ul, ol, li, form, fieldset, legend {
@@ -19,4 +20,82 @@ fieldset, img {
 
 .container-fluid{
     padding: 0;
+}
+
+
+/*     General overwrite     */
+.loader-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+  }
+  
+  .loader,
+  .loader:before,
+  .loader:after {
+    border-radius: 50%;
+    width: 2.5em;
+    height: 2.5em;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation: load7 1.8s infinite ease-in-out;
+    animation: load7 1.8s infinite ease-in-out;
+  }
+  
+  .loader {
+    color: #9A9A9A;
+    top: calc(50% - 40px);
+    left: calc(50% - 10px);
+    position: relative;
+    font-size: 10px;
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+  
+  .loader:before,
+  .loader:after {
+    content: '';
+    position: absolute;
+    top: 0;
+  }
+  
+  .loader:before {
+    left: -3.5em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+  
+  .loader:after {
+    left: 3.5em;
+  }
+  
+  @-webkit-keyframes load7 {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 2.5em 0 -1.3em;
+    }
+    40% {
+      box-shadow: 0 2.5em 0 0;
+    }
+  }
+  @keyframes load7 {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 2.5em 0 -1.3em;
+    }
+    40% {
+      box-shadow: 0 2.5em 0 0;
+    }
+  }
+  body {
+    padding-top: 57px;
+  }
+
+  @media (min-width: 1200px){
+    .container {
+        max-width: 1340px!important;
+    }
 }
\ No newline at end of file
diff --git a/contest/models/contest/contest.json b/contest/models/contest/contest.json
index c775e9e..63dc0ce 100644
--- a/contest/models/contest/contest.json
+++ b/contest/models/contest/contest.json
@@ -13,6 +13,6 @@
     },
     "description":{
         "type":"string"
-    },
+    }
     
 }
\ No newline at end of file
diff --git a/judge/result/binary/Solution.out b/judge/result/binary/Solution.out
index e31de5f..e3f3bb8 100755
Binary files a/judge/result/binary/Solution.out and b/judge/result/binary/Solution.out differ
diff --git a/judge/result/input/VL1/EDGFRD.txt b/judge/result/input/VL1/EDGFRD.txt
new file mode 100644
index 0000000..ce643c0
--- /dev/null
+++ b/judge/result/input/VL1/EDGFRD.txt
@@ -0,0 +1,2 @@
+1000
+85 85 90 90 59 50 36 50 75 73 51 59 14 96 61 64 8 6 16 42 32 17 23 41 37 40 97 85 31 63 45 95 49 96 7 78 80 42 5 49 20 83 62 50 2 48 55 59 34 16 91 29 77 49 12 91 1 58 2 32 32 80 36 63 34 99 17 37 11 15 13 91 89 0 56 10 82 55 94 21 28 47 67 7 0 30 65 56 64 63 43 72 45 4 12 57 72 55 401 111 336 835 20 658 992 912 526 224 997 78 993 762 44 378 705 184 497 769 843 374 938 447 240 137 5 488 841 629 896 292 867 945 560 320 157 678 643 210 287 67 441 93 973 108 992 22 556 900 576 30 317 697 136 970 504 319 262 335 898 944 268 74 242 138 529 879 64 553 917 991 79 911 289 600 830 697 990 496 529 588 198 761 397 384 832 596 803 203 151 7 700 145 621 905 247 955 412 735 423 437 622 488 936 925 533 350 35 376 149 886 856 743 833 666 467 939 867 388 530 804 120 814 270 120 715 320 161 122 825 2 87 721 933 130 608 435 613 448 164 74 181 480 560 21 474 32 552 714 218 219 869 299 601 421 41 534 447 128 985 993 65 446 19 646 92 928 175 932 650 886 971 726 630 840 153 7 26 269 84 838 155 161 259 255 707 612 549 898 775 641 742 616 178 885 121 763 170 785 6206 6133 5050 7008 2077 6884 6872 2261 1940 6212 1143 9671 1902 982 8552 8022 5165 8240 3300 2291 4273 1732 4261 6371 8553 4965 9894 7557 4937 9400 2839 6180 8061 6152 9366 9278 2285 9340 7883 9542 17 2845 3395 5655 9255 2898 4879 1882 5074 4446 4157 250 9334 2173 7527 7638 7954 9482 155 54 1116 4197 5836 3026 5123 9796 3366 8048 5265 7735 4471 2684 5503 2272 7100 2221 4494 5651 6906 6789 8035 9530 8575 4632 8723 1596 3031 4193 3344 3231 3891 7554 3250 8875 4263 3275 7801 4033 1571 3485 4865 7020 5508 7727 1239 7559 4028 2256 9916 6080 9536 7294 3048 2539 3760 935 8608 7993 1596 7294 3611 7738 4708 1888 9570 6929 7521 3079 1990 5528 2179 9182 6806 7156 5467 6678 9393 5929 5162 1001 9688 7105 2200 9454 8440 4985 1673 9773 9799 1597 6878 2467 5900 4229 8200 7239 2948 5168 6146 2861 5683 7872 2608 1083 9752 4181 7186 283 388 7071 7933 7121 5387 6654 1004 2525 796 5309 2419 2419 7742 1487 9829 1209 3915 2551 9174 5680 3666 942 7971 9015 6823 1585 9488 1948 5934 217 8034 788 25672 32064 6223 558 3229 27040 8275 2803 30491 26110 6389 29728 28061 27287 22536 16519 6847 7785 13350 18867 6641 30453 13658 32203 19915 1348 15901 13496 28833 5160 16516 24714 4950 31684 21431 7448 32373 20046 15781 25319 10621 16916 17654 24910 15485 31933 24385 17367 20449 9170 3968 26343 24204 22141 2241 16290 7719 29840 26910 31497 12728 22216 8430 6245 27254 23636 23101 745 2780 29073 29818 28307 16380 29720 26736 31827 17686 6138 10360 26991 25961 12874 20716 20006 20553 3292 15582 12180 29554 10061 21258 26837 20380 2371 7946 12141 31567 2550 2761 14055 18425 12528 19514 14269 15678 5137 23370 23928 24207 22229 1043 24600 28414 11994 26962 19638 10064 4508 2843 16744 4692 28547 9675 8293 884 8225 32063 32362 23434 25524 26691 20572 4085 7667 12365 7214 10219 11783 6508 12549 9232 2007 9851 10906 1096 29320 28058 17376 24522 4164 4319 15592 17271 4923 12104 22529 19049 17384 25076 12835 9422 15510 6547 31374 247 32290 28700 19886 2732 16898 17086 14146 29891 11654 10264 8125 16625 19038 5804 10476 14815 26717 20369 15834 21376 19581 24937 23025 26019 20770 22419 19297 29892 23459 27042 29894 32040 19206 16141 20997 29737 17419 6951 17526 29646 32365 1362 27209 17566 30564 16752 1314 14774 11630 11419 13319 4890 18767 21014 1148 23113 22614 19587 7916 27924 31715 18262 4683 10927 12838 13449 762 30473 7209 2706 16619 2137 25873 7826 2309 13049 11937 28367 30154 10104 9983 29028 25399 22251 11195 15159 18923 29059 7693 4908 21900 13157 19550 17816 14951 29621 5386 19449 3670 10740 9829 7396 10471 23949 32764 14398 20154 13226 6429 17327 11307 3916 20633 19284 25393 30619 2504 31412 12422 14459 6862 25078 27657 29023 28701 6993 26720 1634 2363 25795 30177 10132 12998 518 3251 25233 8629 31424 25136 29273 21472 2298 28046 16731 22979 19411 8127 20947 28030 4725 21141 86 31521 21321 13098 21675 32295 9063 11135 21725 22592 16977 3939 3726 1364 3552 4247 19086 20676 29310 15919 7853 28659 11158 4923 20941 9733 26697 22695 17979 21734 10339 24160 24127 8078 25997 20408 3825 388 23748 9996 5455 32673 3081 1188 397 22039 14426 27866 3244 18354 4066 12671 27726 29277 15469 2682 6345 19687 31262 8626 14714 12807 1636 5679 11100 7326 31530 14972 21976 31037 27214 4687 16863 12519 19797 21355 10039 20760 7517 28102 25618 29957 10066 24295 4837 21542 28773 21651 12919 6642 16058 25256 5177 27370 6753 20553 1237 15064 23176 16443 25353 22617 4847 14479 6326 20889 30108 19842 10804 5726 31951 29601 20457 31560 28984 15665 19994 599 8296 1741 32512 3245 22406 22353 17183 22933 30275 30455 19411 30405 11791 448 29740 1504 16782 30998 7163 31551 22597 6319 14637 14833 15002 29364 4952 12544 2555 5923 23956 24054 18781 19058 8844 22688 18920 3957 14037 19474 20464 2177 9598 235 1064 29650 19176 23771 1298 18218 4567 31586 11450 11963 1738 17370 24228 29511 13704 8375 29187 2950 1276 15374 3115 23752 1346 346 
\ No newline at end of file
diff --git a/judge/result/input/VL1/VRYLRG.txt b/judge/result/input/VL1/VRYLRG.txt
new file mode 100644
index 0000000..cfa1a1c
--- /dev/null
+++ b/judge/result/input/VL1/VRYLRG.txt
@@ -0,0 +1,3 @@
+2
+2 2
+3 2
\ No newline at end of file
diff --git a/judge/result/output/VL1/EDGFRD.txt b/judge/result/output/VL1/EDGFRD.txt
new file mode 100644
index 0000000..ed26162
--- /dev/null
+++ b/judge/result/output/VL1/EDGFRD.txt
@@ -0,0 +1 @@
+933626233
\ No newline at end of file
diff --git a/judge/result/output/VL1/VRYLRG.txt b/judge/result/output/VL1/VRYLRG.txt
new file mode 100644
index 0000000..05d6df6
--- /dev/null
+++ b/judge/result/output/VL1/VRYLRG.txt
@@ -0,0 +1,2 @@
+4
+9
\ No newline at end of file
diff --git a/judge/result/source/Solution.c b/judge/result/source/Solution.c
index bbcfb70..31abbb4 100644
--- a/judge/result/source/Solution.c
+++ b/judge/result/source/Solution.c
@@ -1,7 +1,10 @@
 #include<stdio.h>
     int main()
     {
-     int a,b;
-    scanf("%d%d",&a,&b);
-    printf("%d\n",a+b);
+      int i=0;
+      while(++i)
+        printf("Hello");
+        return 0;
+      
     }
+    
diff --git a/judge/result/source/Solution.cpp b/judge/result/source/Solution.cpp
index 5c1c689..2d04573 100644
--- a/judge/result/source/Solution.cpp
+++ b/judge/result/source/Solution.cpp
@@ -1,8 +1,28 @@
-#include<stdio.h>
-
-      int main()
-      {
-
-        printf("Welcome To CodeCamp");
-
-      }
\ No newline at end of file
+#include<bits/stdc++.h>
+#define mod 10001
+using namespace std;
+typedef long long LL;
+int main()
+{
+    int n,a[10000],avg;
+    LL b[mod],val=0,s=0,m;
+    cin>>n;
+    for(int i=0;i<n;i++)
+    {
+        cin>>a[i];
+        s+=a[i];
+    }
+    avg=s/n;
+    b[0]=0;
+    for(int i = 0; i < n-1; i++){
+        b[i+1] = b[i]+a[i]-avg;
+    }
+    sort(b,b+n);
+    m = -b[n/2];
+    for(int i=0;i<n;i++)
+    {
+        val += abs(b[i]+m);
+    }
+    cout<<val;
+    return 0;
+}
diff --git a/judge/result/source/Solution.python b/judge/result/source/Solution.python
new file mode 100644
index 0000000..63e4b2f
--- /dev/null
+++ b/judge/result/source/Solution.python
@@ -0,0 +1,28 @@
+import math
+t=int(input())
+def fun(a,b,y):
+	x=ord(a[-1])-ord('0')
+	res=x**y
+	print(res%10)
+	'''m=math.ceil(math.log10(res))
+	print(m)
+	res=res%(10**m)
+	print(res)'''
+	
+for _ in range(t):
+	a,b=map(str,input().split())
+	if len(b)==1 and int(b)==0:
+		print(1)
+		continue
+	if len(b)<=1:
+		x=int(b)
+	else:
+		l=len(b)
+		x=(ord(b[-1])-ord('0'))+10*(ord(b[-2])-ord('0'))
+	
+	if x%4==0:
+		fun(a,x,4)
+	else:
+		fun(a,x,x%4)
+		
+		
\ No newline at end of file
diff --git a/server/routes/contest.js b/server/routes/contest.js
index 18e8e52..b9b0d8d 100644
--- a/server/routes/contest.js
+++ b/server/routes/contest.js
@@ -10,6 +10,7 @@ const router = express.Router();
 
 router.post('/',(req,res)=>{
     const body = _.pick(req.body,['name','startTime','endTime','id','description']);
+    console.log(body.endTime);
     const contest = new Contest(body);
     contest
         .save()
@@ -76,12 +77,17 @@ router.get('/:id',(req,res)=>{
             })
     })
 })
+router.delete('/:id', (req,res) => {
+    res.send(req.body);
+})
 
 router.get('/',(req,res)=>{
     var projection ={
         _id    : false,
         name   : true,
-        id : true
+        id : true,
+        startTime: true,
+        endTime: true
     }
     Contest.find({},projection,(err,contest)=>{
         if(err){
diff --git a/server/routes/solution.js b/server/routes/solution.js
index ef26f0d..28f0896 100644
--- a/server/routes/solution.js
+++ b/server/routes/solution.js
@@ -12,50 +12,19 @@ const db = require('./../utils/db/db');
 const Solution = require('./../models/solution/solution');
 const router = express.Router();
 
-<<<<<<< HEAD
 //var upload  = multer({dest:'solutions/'})
 //var originalname = 'solution';
 router.post('/',async (req,res)=>{
       var count =await Solution.getObjCount(req.body.username,req.body.contest,req.body.problem)+1;
      var solution = new Solution({ 
-=======
-var upload  = multer({dest:'solutions/'})
-var originalname = 'solution';
-router.post('/',upload.single(originalname),async (req,res)=>{
-    var solution;
-     if(req.file){
-      var count =await Solution.getObjCount(req.body.username,req.body.contest,req.body.problem)+1;
-      solution = new Solution({ 
-        problem:req.body.problem,
-        contest:req.body.contest,
-        username:req.body.username,
-        id:req.body.contest+req.body.problem+req.body.username+count,
-        language:req.body.language.toLowerCase(),
-        description:new Buffer(fs.readFileSync(req.file.path)).toString('base64'),
-        submitted_on:new Date() 
-      });
-    }
-       
-    else if (!req.file) {
-      var count =await Solution.getObjCount(req.body.username,req.body.contest,req.body.problem)+1;
-      solution = new Solution({ 
->>>>>>> 5b116472edb8e59b201766368eae67301e945e2b
           problem:req.body.problem,
           contest:req.body.contest,
           username:req.body.username,
           id:req.body.contest+req.body.problem+req.body.username+count,
           language:req.body.language.toLowerCase(),
-<<<<<<< HEAD
           description:req.body.description,
           submitted_on:new Date() 
         });
-=======
-          description:req.body.description.toString('base64'),
-          submitted_on:new Date() 
-        });
-    }
-
->>>>>>> 5b116472edb8e59b201766368eae67301e945e2b
         solution.save().then((sol) => {
           const agentOptions = new Object();
           agentOptions.keepAliveMsecs = 6000;