139 files changed, 3464 insertions, 687 deletions
diff --git a/frontend/angular.json b/frontend/angular.json
index bbbe3eaa..b1aaac3f 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -29,9 +29,12 @@
             "styles": [
               "src/custom-theme.scss",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             ],
-            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -96,6 +99,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -105,4 +109,4 @@
     }
   },
   "defaultProject": "frontend"
-}
+}
+\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ffe47b6a..8c025c8b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,19 +24,24 @@
         "@ng-bootstrap/ng-bootstrap": "^12.0.0",
         "@popperjs/core": "^2.10.2",
         "bootstrap": "^5.1.3",
+        "chart.js": "^3.7.1",
         "csv-parser": "^3.0.0",
         "mdb-angular-ui-kit": "^2.0.0",
         "ng-uikit-pro-standard": "^1.0.0",
+        "ng2-charts": "^3.0.8",
+        "ng2-search-filter": "^0.5.1",
         "ngx-cookie-service": "^13.1.2",
         "ngx-csv-parser": "^0.0.7",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
+        "websocket-ts": "^1.1.1",
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
         "@angular-devkit/build-angular": "~13.2.5",
         "@angular/cli": "~13.2.5",
         "@angular/compiler-cli": "~13.2.0",
+        "@types/crypto-js": "^4.1.1",
         "@types/jasmine": "~3.10.0",
         "@types/node": "^12.11.1",
         "jasmine-core": "~4.0.0",
@@ -442,7 +447,6 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz",
       "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==",
-      "dev": true,
       "dependencies": {
         "@babel/core": "^7.17.2",
         "chokidar": "^3.0.0",
@@ -472,7 +476,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
       "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.0"
       },
@@ -484,7 +487,6 @@
       "version": "7.17.5",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
       "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
@@ -514,7 +516,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -523,7 +524,6 @@
       "version": "7.17.3",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
       "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
@@ -537,7 +537,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -777,7 +776,6 @@
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
       "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -807,7 +805,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -816,7 +813,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -825,7 +821,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -839,7 +834,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2743,6 +2737,12 @@
       "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
       "dev": true
     },
+    "node_modules/@types/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -3266,7 +3266,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -3540,7 +3539,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3637,7 +3635,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -3806,11 +3803,15 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4736,7 +4737,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
       "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -5685,7 +5685,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -5854,7 +5853,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -5964,7 +5962,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -6557,7 +6554,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -6611,7 +6607,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6628,7 +6623,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -6655,7 +6649,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -7399,6 +7392,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -7511,7 +7509,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -7523,7 +7520,6 @@
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
-      "dev": true,
       "dependencies": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -7756,9 +7752,9 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "node_modules/minipass": {
       "version": "3.1.6",
@@ -7974,6 +7970,26 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/ng2-charts": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.8.tgz",
+      "integrity": "sha512-ELlpN0b/IJO4ka/P2sFBKeng3bV7XOQuh40f0J5hx9UveWPaSxOYQAOiGxV7BN2VSnKq6GRkjRvqTrcQPyJYww==",
+      "dependencies": {
+        "lodash-es": "^4.17.15",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=11.0.0",
+        "@angular/core": ">=11.0.0",
+        "chart.js": "^3.4.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/ng2-search-filter": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/ng2-search-filter/-/ng2-search-filter-0.5.1.tgz",
+      "integrity": "sha512-noN8R+Gyxo5ZuboEOvq+u0zKio6pEf1IVYQTCZfAfXm6ONmzWu/M2xK0di9oVUprDbPBQXCGUuvD5i2GD+35HA=="
+    },
     "node_modules/ngx-cookie-service": {
       "version": "13.1.2",
       "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-13.1.2.tgz",
@@ -8109,7 +8125,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8797,7 +8812,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -9593,7 +9607,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -9604,8 +9617,7 @@
     "node_modules/reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
-      "dev": true
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
     },
     "node_modules/regenerate": {
       "version": "1.4.2",
@@ -10026,7 +10038,6 @@
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
       "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -10411,8 +10422,7 @@
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
     "node_modules/spdy": {
       "version": "4.0.2",
@@ -10813,7 +10823,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -10879,7 +10888,6 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11375,6 +11383,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/websocket-ts": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/websocket-ts/-/websocket-ts-1.1.1.tgz",
+      "integrity": "sha512-rm+S60J74Ckw5iizzgID12ju+OfaHAa6dhXhULIOrXkl0e05RzxfY42/vMStpz5jWL3iz9mkyjPcFUY1IgI0fw=="
+    },
     "node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -11485,8 +11498,7 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -11821,7 +11833,6 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz",
       "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==",
-      "dev": true,
       "requires": {
         "@babel/core": "^7.17.2",
         "chokidar": "^3.0.0",
@@ -11839,7 +11850,6 @@
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
           "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
-          "dev": true,
           "requires": {
             "@jridgewell/trace-mapping": "^0.3.0"
           }
@@ -11848,7 +11858,6 @@
           "version": "7.17.5",
           "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
           "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
-          "dev": true,
           "requires": {
             "@ampproject/remapping": "^2.1.0",
             "@babel/code-frame": "^7.16.7",
@@ -11870,8 +11879,7 @@
             "semver": {
               "version": "6.3.0",
               "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-              "dev": true
+              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
             }
           }
         },
@@ -11879,7 +11887,6 @@
           "version": "7.17.3",
           "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
           "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
-          "dev": true,
           "requires": {
             "@babel/types": "^7.17.0",
             "jsesc": "^2.5.1",
@@ -11889,8 +11896,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
       }
     },
@@ -12035,7 +12041,6 @@
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
       "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -12057,14 +12062,12 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
       }
     },
@@ -12072,7 +12075,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -12082,8 +12084,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
       }
     },
@@ -13241,7 +13242,8 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.2.5.tgz",
       "integrity": "sha512-obiPvwPe+UJUO8cfNbBxukLKG30F+gLF5/erexwklRknJzS4KP8ciH2on6XlTuXUahpDjbO0pffugFE2I/IszQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -13437,6 +13439,12 @@
       "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
       "dev": true
     },
+    "@types/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -13776,7 +13784,8 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
@@ -13899,7 +13908,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -14097,8 +14105,7 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
     "bl": {
       "version": "4.1.0",
@@ -14169,7 +14176,8 @@
     "bootstrap": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -14184,7 +14192,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -14304,11 +14311,15 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -14336,7 +14347,8 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz",
       "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "clean-stack": {
       "version": "2.2.0",
@@ -14814,7 +14826,8 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
       "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-select": {
       "version": "4.2.1",
@@ -14987,8 +15000,7 @@
     "dependency-graph": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
-      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
-      "dev": true
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg=="
     },
     "destroy": {
       "version": "1.0.4",
@@ -15636,7 +15648,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -15759,7 +15770,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -15835,7 +15845,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -16092,7 +16101,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -16289,7 +16299,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -16321,8 +16330,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -16333,7 +16341,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -16353,8 +16360,7 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-path-cwd": {
       "version": "2.2.0",
@@ -16773,7 +16779,8 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
       "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "karma-source-map-support": {
       "version": "1.4.0",
@@ -16906,6 +16913,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -16990,7 +17002,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       }
@@ -16999,7 +17010,6 @@
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
-      "dev": true,
       "requires": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -17167,9 +17177,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "minipass": {
       "version": "3.1.6",
@@ -17338,6 +17348,20 @@
         }
       }
     },
+    "ng2-charts": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.8.tgz",
+      "integrity": "sha512-ELlpN0b/IJO4ka/P2sFBKeng3bV7XOQuh40f0J5hx9UveWPaSxOYQAOiGxV7BN2VSnKq6GRkjRvqTrcQPyJYww==",
+      "requires": {
+        "lodash-es": "^4.17.15",
+        "tslib": "^2.3.0"
+      }
+    },
+    "ng2-search-filter": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/ng2-search-filter/-/ng2-search-filter-0.5.1.tgz",
+      "integrity": "sha512-noN8R+Gyxo5ZuboEOvq+u0zKio6pEf1IVYQTCZfAfXm6ONmzWu/M2xK0di9oVUprDbPBQXCGUuvD5i2GD+35HA=="
+    },
     "ngx-cookie-service": {
       "version": "13.1.2",
       "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-13.1.2.tgz",
@@ -17438,8 +17462,7 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -17964,8 +17987,7 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "pify": {
       "version": "2.3.0",
@@ -18076,7 +18098,8 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
       "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-custom-properties": {
       "version": "12.1.4",
@@ -18146,13 +18169,15 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
       "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-gap-properties": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz",
       "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-image-set-function": {
       "version": "4.0.6",
@@ -18178,7 +18203,8 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
       "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-lab-function": {
       "version": "4.1.1",
@@ -18205,19 +18231,22 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
       "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
       "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -18261,13 +18290,15 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz",
       "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-page-break": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
       "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-place": {
       "version": "7.0.4",
@@ -18332,7 +18363,8 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
       "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-selector-not": {
       "version": "5.0.0",
@@ -18497,7 +18529,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -18505,8 +18536,7 @@
     "reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
-      "dev": true
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
     },
     "regenerate": {
       "version": "1.4.2",
@@ -18782,7 +18812,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -18811,7 +18842,6 @@
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
       "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -19127,8 +19157,7 @@
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
     "spdy": {
       "version": "4.0.2",
@@ -19336,7 +19365,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -19410,7 +19440,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -19457,8 +19486,7 @@
     "typescript": {
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
-      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
-      "dev": true
+      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA=="
     },
     "ua-parser-js": {
       "version": "0.7.31",
@@ -19648,7 +19676,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -19804,6 +19833,11 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "websocket-ts": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/websocket-ts/-/websocket-ts-1.1.1.tgz",
+      "integrity": "sha512-rm+S60J74Ckw5iizzgID12ju+OfaHAa6dhXhULIOrXkl0e05RzxfY42/vMStpz5jWL3iz9mkyjPcFUY1IgI0fw=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -19870,7 +19904,8 @@
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
       "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",
@@ -19880,8 +19915,7 @@
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/frontend/package.json b/frontend/package.json
index 0b32837f..8cd6db58 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,19 +26,24 @@
     "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.1.3",
+    "chart.js": "^3.7.1",
     "csv-parser": "^3.0.0",
     "mdb-angular-ui-kit": "^2.0.0",
     "ng-uikit-pro-standard": "^1.0.0",
+    "ng2-charts": "^3.0.8",
+    "ng2-search-filter": "^0.5.1",
     "ngx-cookie-service": "^13.1.2",
     "ngx-csv-parser": "^0.0.7",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
+    "websocket-ts": "^1.1.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~13.2.5",
     "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.0",
+    "@types/crypto-js": "^4.1.1",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~4.0.0",
diff --git a/frontend/src/app/Shared.ts b/frontend/src/app/Shared.ts
new file mode 100644
index 00000000..31afb1a6
--- /dev/null
+++ b/frontend/src/app/Shared.ts
@@ -0,0 +1,9 @@
+class Shared {
+    constructor(
+        public loggedIn: boolean,
+        public username: string = '',
+        public photoId: string = '1'
+    ) { }
+}
+
+export default new Shared(false);
+\ No newline at end of file
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
new file mode 100644
index 00000000..665df932
--- /dev/null
+++ b/frontend/src/app/_data/Dataset.ts
@@ -0,0 +1,16 @@
+export default class Dataset {
+    _id: string = '';
+    constructor(
+        public name: string = 'Novi izvor podataka',
+        public description: string = '',
+        public header: string[] = [],
+        public fileId?: number,
+        public extension: string = '.csv',
+        public isPublic: boolean = false,
+        public accessibleByLink: boolean = false,
+        public dateCreated: Date = new Date(),
+        public lastUpdated: Date = new Date(),
+        public username: string = '',
+        public delimiter: string = ''
+    ) { }
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 216e1c36..f6e01d08 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -1,15 +1,18 @@
 export default class Model {
+    _id: string = '';
     constructor(
         public name: string = 'Novi model',
         public description: string = '',
         public dateCreated: Date = new Date(),
-        public datasetId?: number,
+        public lastUpdated: Date = new Date(),
+        public datasetId: string = '',
 
-        //Test set settings
-        public inputColumns: number[] = [0],
-        public columnToPredict: number = 1,
+        // Test set settings
+        public inputColumns: string[] = [],
+        public columnToPredict: string = '',
+        public randomOrder: boolean = true,
         public randomTestSet: boolean = true,
-        public randomTestSetDistribution: number = 0.10, //0.1-0.9 (10% - 90%)
+        public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
 
         // Neural net training settings
         public type: ANNType = ANNType.FullyConnected,
@@ -22,7 +25,10 @@ export default class Model {
         public batchSize: number = 5,
         public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
         public hiddenLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
-        public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid
+        public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
+        public username: string = '',
+        public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
+        public nullValuesReplacers = []
     ) { }
 }
 
@@ -31,23 +37,77 @@ export enum ANNType {
     Convolutional = 'konvoluciona'
 }
 
+// replaceMissing srednja vrednost mean, median, najcesca vrednost (mode)
+// removeOutliers
 export enum Encoding {
     Label = 'label',
-    OneHot = 'one hot'
+    OneHot = 'one hot',
+    BackwardDifference = 'backward difference',
+    BaseN = 'baseN',
+    Binary = 'binary',
+    CatBoost = 'cat boost',
+    Count = 'count',
+    GLMM = 'glmm',
+    Hashing = 'hashing',
+    Helmert = 'helmert',
+    JamesStein = 'james stein',
+    LeaveOneOut = 'leave one out',
+    MEstimate = 'MEstimate',
+    Ordinal = 'ordinal',
+    Sum = 'sum',
+    Polynomial = 'polynomial',
+    Target = 'target',
+    WOE = 'woe',
+    Quantile = 'quantile'
 }
 
 export enum ActivationFunction {
+    // linear
+    Binary_Step = 'binaryStep',
+    Linear = 'linear',
+    // non-linear
     Relu = 'relu',
+    Leaky_Relu = 'leakyRelu',
+    Parameterised_Relu = 'parameterisedRelu',
+    Exponential_Linear_Unit = 'exponentialLinearUnit',
+    Swish = 'swish',
     Sigmoid = 'sigmoid',
     Tanh = 'tanh',
-    Linear = 'linear'
+    Softmax = 'softmax'
 }
 
 export enum LossFunction {
+    // binary classification loss functions
     BinaryCrossEntropy = 'binary_crossentropy',
-    MeanSquaredError = 'mean_squared_error'
+    HingeLoss = 'hinge_loss',
+    // multi-class classiication loss functions
+    CategoricalCrossEntropy = 'categorical_crossentropy',
+    KLDivergence = 'kullback_leibler_divergence',
+    // regression loss functions
+    MeanSquaredError = 'mean_squared_error',
+    MeanAbsoluteError = 'mean_absolute_error',
+    HuberLoss = 'Huber',
 }
 
 export enum Optimizer {
-    Adam = 'adam'
+    Adam = 'Adam',
+    Adadelta = 'Adadelta',
+    Adagrad = 'Adagrad',
+    Ftrl = 'Ftrl',
+    Nadam = 'Nadam',
+    SGD = 'SGD',
+    SGDMomentum = 'SGDMomentum',
+    RMSprop = 'RMSprop'
+}
+
+export enum NullValueOptions {
+    DeleteRows = 'delete_rows',
+    DeleteColumns = 'delete_columns',
+    Replace = 'replace'
+}
+
+export enum ReplaceWith {
+    None = 'Popuni...',
+    Mean = 'Srednja vrednost',
+    Median = 'Medijana'
 }
 \ No newline at end of file
diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts
new file mode 100644
index 00000000..7e902eae
--- /dev/null
+++ b/frontend/src/app/_data/Predictor.ts
@@ -0,0 +1,12 @@
+export default class Predictor {
+    _id: string = '';
+    constructor(
+        public name: string = 'Novi prediktor',
+        public description: string = '',
+        public inputs: string[] = [],
+        public output: string = '',
+        public isPublic: boolean = false,
+        public accessibleByLink: boolean = false,
+        public dateCreated: Date = new Date()
+    ) { }
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_data/ProfilePictures.ts b/frontend/src/app/_data/ProfilePictures.ts
new file mode 100644
index 00000000..217810d9
--- /dev/null
+++ b/frontend/src/app/_data/ProfilePictures.ts
@@ -0,0 +1,63 @@
+export class Picture {
+    photoId!: number;
+    path!: string;
+}
+
+export const PICTURES = [
+    {
+        photoId: 1,
+        path: "/assets/profilePictures/1.png"
+    },
+    {
+        photoId: 2,
+        path: "/assets/profilePictures/2.png"
+    },
+    {
+        photoId: 3,
+        path: "/assets/profilePictures/3.png"
+    },
+    {
+        photoId: 4,
+        path: "/assets/profilePictures/4.png"
+    },
+    {
+        photoId: 5,
+        path: "/assets/profilePictures/5.png"
+    },
+    {
+        photoId: 6,
+        path: "/assets/profilePictures/6.png"
+    },
+    {
+        photoId: 7,
+        path: "/assets/profilePictures/7.png"
+    },
+    {
+        photoId: 8,
+        path: "/assets/profilePictures/8.png"
+    },
+    {
+        photoId: 9,
+        path: "/assets/profilePictures/9.png"
+    },
+    {
+        photoId: 10,
+        path: "/assets/profilePictures/10.png"
+    },
+    {
+        photoId: 11,
+        path: "/assets/profilePictures/11.png"
+    },
+    {
+        photoId: 12,
+        path: "/assets/profilePictures/12.png"
+    },
+    {
+        photoId: 13,
+        path: "/assets/profilePictures/13.png"
+    },
+    {
+        photoId: 14,
+        path: "/assets/profilePictures/14.png"
+    }
+]
+\ No newline at end of file
diff --git a/frontend/src/app/_data/User.ts b/frontend/src/app/_data/User.ts
new file mode 100644
index 00000000..be42ed0a
--- /dev/null
+++ b/frontend/src/app/_data/User.ts
@@ -0,0 +1,11 @@
+export default class User {
+    _id?: string = '';
+    constructor(
+        public username: string = '',
+        public email: string = '',
+        public password: string = '',
+        public firstName: string = '',
+        public lastName: string = '',
+        public photoId: string = '1' //difoltna profilna slika
+    ) { }
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/login-page/login-page.component.css b/frontend/src/app/_elements/carousel/carousel.component.css
index e69de29b..e69de29b 100644
--- a/frontend/src/app/_pages/login-page/login-page.component.css
+++ b/frontend/src/app/_elements/carousel/carousel.component.css
diff --git a/frontend/src/app/_elements/carousel/carousel.component.html b/frontend/src/app/_elements/carousel/carousel.component.html
new file mode 100644
index 00000000..755899a7
--- /dev/null
+++ b/frontend/src/app/_elements/carousel/carousel.component.html
@@ -0,0 +1,14 @@
+<div class="container">
+    <div class="row d-flex align-items-stretch flex-row mx-5 align-items-stretch">
+        <div class="col my-1" *ngFor=" let item of items" [ngSwitch]="item.constructor.name">
+            <ng-template ngSwitchCase="Dataset">
+                <app-item-dataset [dataset]="item">
+                </app-item-dataset>
+            </ng-template>
+            <ng-template ngSwitchCase="Predictor">
+                <app-item-predictor [predictor]="item">
+                </app-item-predictor>
+            </ng-template>
+        </div>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/login-page/login-page.component.spec.ts b/frontend/src/app/_elements/carousel/carousel.component.spec.ts
index 9da3aca8..9196e044 100644
--- a/frontend/src/app/_pages/login-page/login-page.component.spec.ts
+++ b/frontend/src/app/_elements/carousel/carousel.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LoginPageComponent } from './login-page.component';
+import { CarouselComponent } from './carousel.component';
 
-describe('LoginPageComponent', () => {
-  let component: LoginPageComponent;
-  let fixture: ComponentFixture<LoginPageComponent>;
+describe('CarouselComponent', () => {
+  let component: CarouselComponent;
+  let fixture: ComponentFixture<CarouselComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ LoginPageComponent ]
+      declarations: [ CarouselComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LoginPageComponent);
+    fixture = TestBed.createComponent(CarouselComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/_elements/carousel/carousel.component.ts b/frontend/src/app/_elements/carousel/carousel.component.ts
new file mode 100644
index 00000000..ed4fa4a5
--- /dev/null
+++ b/frontend/src/app/_elements/carousel/carousel.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.css']
+})
+export class CarouselComponent {
+
+  @Input() items: any[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
index e69de29b..05819702 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
@@ -0,0 +1,6 @@
+#divInputs {
+    margin-left: 20px;
+}
+#divOutputs {
+    margin-left: 20px;
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
index c89add43..3ac43f73 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -1,42 +1,44 @@
 <div>
 
-  <input style="display: inline-block; width:350px;" list=delimiterOptions
-    placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter"
-    (input)="update()">
-  <datalist id=delimiterOptions>
-    <option *ngFor="let option of delimiterOptions">{{option}}</option>
-  </datalist>
-  &nbsp;&nbsp;&nbsp;&nbsp;
-  <label for="checkboxHeader">Da li .csv ima header?</label> &nbsp;
-  <input (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked>
-  <br><br>
+  <div class="row mb-4">
+    <div class="col-2">
+    </div>
+    <div class="col-3">
+      <label for="name" class="col-form-label">Naziv dataseta:</label>
+      <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name">
 
-  <input id="fileInput" class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
+      <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+      <div>
+        <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
+      </div>
 
-  <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-5">
-    <thead>
-      <tr>
-        <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let row of csvRecords | slice:1:11">
-        <td *ngFor="let col of row">{{col}}</td>
-      </tr>
-    </tbody>
-  </table>
+      <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan?
+        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox"
+          value="" id="checkboxIsPublic">
+      </label>    
+      
+      <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? &nbsp;
+        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox"
+          value="" id="checkboxAccessibleByLink">
+      </label>
+    </div>
+    <div class="col-1">
+    </div>
+    <div class="col-4 mt-4">
 
-  <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-5">
-    <tbody>
-      <tr *ngFor="let row of csvRecords | slice:0:10">
-        <td *ngFor="let col of row">{{col}}</td>
-      </tr>
-    </tbody>
-  </table>
+      <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2"
+        [(ngModel)]="dataset.delimiter" (input)="update()">
+      <datalist id=delimiterOptions>
+        <option *ngFor="let option of delimiterOptions">{{option}}</option>
+      </datalist>
 
-  <div *ngIf="csvRecords.length > 0" id="info">
-    . . . <br>
-    {{rowsNumber}} x {{colsNumber}}
+      <label for="type" class="form-check-label my-5">Da li .csv ima header?
+        <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox"
+          value="" id="checkboxHeader" checked>
+      </label>
+      <br>
+      <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)"
+        accept=".csv">
+    </div>
   </div>
-
 </div>
 \ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index 843a5709..e7b19f9a 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -1,5 +1,6 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
+import Dataset from 'src/app/_data/Dataset';
 
 @Component({
   selector: 'app-dataset-load',
@@ -8,25 +9,37 @@ import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
 })
 export class DatasetLoadComponent {
 
-  delimiter: string = "";
+  @Output() loaded = new EventEmitter<string>();
+
   delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
 
   hasHeader: boolean = true;
-
-  slice: string = "";
+  hasInput: boolean = false;
 
   csvRecords: any[] = [];
-  files: any[] = [];
+  files: File[] = [];
   rowsNumber: number = 0;
   colsNumber: number = 0;
 
+  dataset: Dataset;
+
   constructor(private ngxCsvParser: NgxCsvParser) {
+    this.dataset = new Dataset();
   }
 
   @ViewChild('fileImportInput', { static: false }) fileImportInput: any;
 
   changeListener($event: any): void {
     this.files = $event.srcElement.files;
+    if (this.files.length == 0 || this.files[0] == null) {
+      //console.log("NEMA FAJLA");
+      //this.loaded.emit("not loaded");
+      this.hasInput = false;
+      return;
+    }
+    else
+      this.hasInput = true;
+
     this.update();
   }
 
@@ -35,20 +48,30 @@ export class DatasetLoadComponent {
     if (this.files.length < 1)
       return;
 
-    this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.delimiter == "razmak") ? " " : (this.delimiter == "") ? "," : this.delimiter})
-    .pipe().subscribe((result) => {
-
-      //console.log('Result', result);
-      if (result.constructor === Array) {
-        this.csvRecords = result;
-        if (this.hasHeader)
-          this.rowsNumber = this.csvRecords.length - 1;
-        else 
-          this.rowsNumber = this.csvRecords.length;
-        this.colsNumber = this.csvRecords[0].length;
-      }
-    }, (error: NgxCSVParserError) => {
-      console.log('Error', error);
-    });
+    this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter })
+      .pipe().subscribe((result) => {
+
+        console.log('Result', result);
+        if (result.constructor === Array) {
+          this.csvRecords = result;
+          if (this.hasHeader)
+            this.rowsNumber = this.csvRecords.length - 1;
+          else
+            this.rowsNumber = this.csvRecords.length;
+          this.colsNumber = this.csvRecords[0].length;
+
+          this.dataset.header = this.csvRecords[0];
+
+          this.loaded.emit("loaded");
+        }
+      }, (error: NgxCSVParserError) => {
+        console.log('Error', error);
+      });
   }
+
+  checkAccessible() {
+    if (this.dataset.isPublic)
+      this.dataset.accessibleByLink = true;
+  }
+
 }
diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.css b/frontend/src/app/_elements/datatable/datatable.component.css
index e69de29b..e69de29b 100644
--- a/frontend/src/app/_pages/only-authorized/only-authorized.component.css
+++ b/frontend/src/app/_elements/datatable/datatable.component.css
diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
new file mode 100644
index 00000000..2c469ecc
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -0,0 +1,29 @@
+<div *ngIf="data">
+    <div class="table-responsive">
+        <table *ngIf="hasHeader" class="table table-bordered table-light mt-4">
+            <thead>
+                <tr>
+                    <th *ngFor="let item of data[0]; let i = index">{{item}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let row of data | slice:1:11">
+                    <td *ngFor="let col of row">{{col}}</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
+            <tbody>
+                <tr *ngFor="let row of data | slice:0:10">
+                    <td *ngFor="let col of row">{{col}}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div id="info">
+        . . . <br>
+        {{data.length}} x {{data[0].length}}
+    </div>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/datatable/datatable.component.spec.ts b/frontend/src/app/_elements/datatable/datatable.component.spec.ts
new file mode 100644
index 00000000..3cf06160
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatatableComponent } from './datatable.component';
+
+describe('DatatableComponent', () => {
+  let component: DatatableComponent;
+  let fixture: ComponentFixture<DatatableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatatableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatatableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts
new file mode 100644
index 00000000..d3740d83
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-datatable',
+  templateUrl: './datatable.component.html',
+  styleUrls: ['./datatable.component.css']
+})
+export class DatatableComponent implements OnInit {
+
+  @Input() hasHeader?: boolean = true;
+
+  @Input() data?: any[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_pages/register-page/register-page.component.css b/frontend/src/app/_elements/item-dataset/item-dataset.component.css
index e69de29b..e69de29b 100644
--- a/frontend/src/app/_pages/register-page/register-page.component.css
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.css
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
new file mode 100644
index 00000000..46840cdd
--- /dev/null
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
@@ -0,0 +1,15 @@
+<div class="card" style="min-width: 12rem;">
+    <div class="card-header">
+        {{dataset.name}}
+    </div>
+    <div class="card-body overflow-hidden">
+        <p class="card-text">
+            {{dataset.description}}
+        </p>
+        <table class="table table-bordered table-sm">
+            <thead>
+                <th scope="col" *ngFor="let column of dataset.header">{{column}}</th>
+            </thead>
+        </table>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts
new file mode 100644
index 00000000..603889b2
--- /dev/null
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemDatasetComponent } from './item-dataset.component';
+
+describe('ItemDatasetComponent', () => {
+  let component: ItemDatasetComponent;
+  let fixture: ComponentFixture<ItemDatasetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ItemDatasetComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemDatasetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
new file mode 100644
index 00000000..e12de34d
--- /dev/null
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import Dataset from 'src/app/_data/Dataset';
+
+@Component({
+  selector: 'app-item-dataset',
+  templateUrl: './item-dataset.component.html',
+  styleUrls: ['./item-dataset.component.css']
+})
+export class ItemDatasetComponent {
+
+  @Input() dataset: Dataset = new Dataset();
+
+  constructor() {
+  }
+}
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.css b/frontend/src/app/_elements/item-predictor/item-predictor.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.css
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html
new file mode 100644
index 00000000..92d747e2
--- /dev/null
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html
@@ -0,0 +1,24 @@
+<div class="card" style="min-width: 12rem;">
+    <div class="card-header">
+        {{predictor.name}}
+    </div>
+    <div class="card-body">
+        <p class="card-text">
+            {{predictor.description}}
+        </p>
+        <div class="d-flex flex-column align-items-center">
+            <table class="table table-bordered table-sm">
+                <thead>
+                    <th class="text-center" *ngFor="let column of predictor.inputs">{{column}}</th>
+                </thead>
+            </table>
+            <mat-icon>arrow_downward</mat-icon>
+            <p>
+                {{predictor.output}}
+            </p>
+        </div>
+    </div>
+    <div class="card-footer text-center">
+        <a routerLink="predict" mat-raised-button color="primary">Iskoristi</a>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts
new file mode 100644
index 00000000..b5c2d91c
--- /dev/null
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemPredictorComponent } from './item-predictor.component';
+
+describe('ItemPredictorComponent', () => {
+  let component: ItemPredictorComponent;
+  let fixture: ComponentFixture<ItemPredictorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ItemPredictorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemPredictorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
new file mode 100644
index 00000000..cc782f45
--- /dev/null
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import Predictor from 'src/app/_data/Predictor';
+
+@Component({
+  selector: 'app-item-predictor',
+  templateUrl: './item-predictor.component.html',
+  styleUrls: ['./item-predictor.component.css']
+})
+export class ItemPredictorComponent implements OnInit {
+
+  @Input() predictor: Predictor = new Predictor();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/navbar/navbar.component.css b/frontend/src/app/_elements/navbar/navbar.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/navbar/navbar.component.css
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
new file mode 100644
index 00000000..82a1ea07
--- /dev/null
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -0,0 +1,50 @@
+<header class="sticky-top p-3 bg-dark text-white">
+    <div class="container">
+        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+            <a routerLink="" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
+                <img src="../../../assets/svg/logo_no_text.svg" class="bi me-2" width="64" height="40">
+            </a>
+
+            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+                <li><a routerLink="" class="nav-link px-2"
+                        [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li>
+                <li><a routerLink="add-model" class="nav-link px-2"
+                        [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Dodaj model</a></li>
+                <li><a routerLink="my-predictors" class="nav-link px-2"
+                        [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a>
+                </li>
+            </ul>
+
+            <div *ngIf="shared.loggedIn" class="dropdown text-end">
+                <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1"
+                    data-bs-toggle="dropdown" aria-expanded="false">
+                    <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle">
+                </a>
+                <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"
+                    style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);"
+                    data-popper-placement="bottom-end">
+                    <li><a class="dropdown-item" routerLink="add-model">Nov model...</a></li>
+                    <li><a class="dropdown-item" routerLink="settings">Podešavanja</a></li>
+                    <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li>
+                    <li>
+                        <hr class="dropdown-divider">
+                    </li>
+                    <li><a class="dropdown-item" routerLink="" (click)="logOut()">Odjavi se</a></li>
+                </ul>
+            </div>
+            <div *ngIf="!shared.loggedIn" class="dropdown text-end">
+                <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal"
+                    data-bs-target="#modalForLogin">
+                    Prijavi se
+                </button>
+                <button type="button" mat-raised-button color="primary" data-bs-toggle="modal"
+                    data-bs-target="#modalForRegister">
+                    Registruj se
+                </button>
+            </div>
+        </div>
+    </div>
+</header>
+
+<app-login-modal></app-login-modal>
+<app-register-modal></app-register-modal>
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/navbar/navbar.component.spec.ts b/frontend/src/app/_elements/navbar/navbar.component.spec.ts
new file mode 100644
index 00000000..f8ccd6f4
--- /dev/null
+++ b/frontend/src/app/_elements/navbar/navbar.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts
new file mode 100644
index 00000000..2e4bde91
--- /dev/null
+++ b/frontend/src/app/_elements/navbar/navbar.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { AuthService } from '../../_services/auth.service';
+import shared from 'src/app/Shared';
+import { UserInfoService } from 'src/app/_services/user-info.service';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+
+  currentUrl: string;
+  shared = shared;
+
+  constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService) {
+    this.currentUrl = this.location.path();
+    this.location.onUrlChange(() => {
+      this.currentUrl = this.location.path();
+    })
+  }
+
+  ngOnInit(): void {
+    this.auth.updateUser();
+    if (this.auth.isAuthenticated() != false) {
+      this.userInfoService.getUserInfo().subscribe((response) => {
+        shared.photoId = response.photoId;
+      });
+    }
+  }
+
+  logOut() {
+    this.auth.logOut();
+  }
+}
diff --git a/frontend/src/app/_elements/notifications/notifications.component.css b/frontend/src/app/_elements/notifications/notifications.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/notifications/notifications.component.css
diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html
new file mode 100644
index 00000000..27071425
--- /dev/null
+++ b/frontend/src/app/_elements/notifications/notifications.component.html
@@ -0,0 +1,3 @@
+<div class="position-fixed card card-body bg-dark text-white m-3" style="bottom: 0; right: 0;">
+    <h3>Notifikacije</h3>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/notifications/notifications.component.spec.ts b/frontend/src/app/_elements/notifications/notifications.component.spec.ts
new file mode 100644
index 00000000..4ae22edc
--- /dev/null
+++ b/frontend/src/app/_elements/notifications/notifications.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsComponent } from './notifications.component';
+
+describe('NotificationsComponent', () => {
+  let component: NotificationsComponent;
+  let fixture: ComponentFixture<NotificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NotificationsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts
new file mode 100644
index 00000000..7566828d
--- /dev/null
+++ b/frontend/src/app/_elements/notifications/notifications.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { WebSocketService } from 'src/app/_services/web-socket.service';
+
+@Component({
+  selector: 'app-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.css']
+})
+export class NotificationsComponent implements OnInit {
+
+  constructor(private wsService: WebSocketService) { }
+
+  ngOnInit(): void {
+    // this.wsService.send('test');
+  }
+
+}
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html
index 22f50de2..d7836848 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.html
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -1,14 +1,9 @@
-<!-- Button trigger modal, OVO JE U STVARI DUGME U NAVBARU -->
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForLogin" (click)="openModal()">
-  Otvori login modal
-</button>
-
 <!-- Modal -->
 <div class="modal fade" id="modalForLogin" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
-      <div class="modal-header bg-info">
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      <div class="modal-header" style="background-color: #003459;">
+        <button id="closeButton" type="button" class="btn-close" style="background-color:white;" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></button>
       </div>
       <div class="modal-body px-5" style="color:#003459">
           <h1 class="text-center mt-2 mb-4">Prijavite se</h1>
@@ -25,25 +20,23 @@
                 <input [(ngModel)]="password" name="password" type="password" id="password"
                     class="form-control form-control" placeholder="Unesite lozinku..." />
             </div>
-
-            <div class="text-center text-lg-start mt-5 pt-2">
-                <p *ngIf="wrongCreds" class="small fw-bold mt-2 pt-1 mb-0 text-danger">Lozinka ili e-mail su pogrešni
-                </p>
-            </div>
           </form>
+          
+          <div class="text-center text-lg-start mt-5">
+            <p *ngIf="wrongCreds" class="small fw-bold text-danger text-center">Unesite ispravan e-mail i lozinku.</p>
+          </div>
+
           <div class="col-md-12 d-flex justify-content-center">
-            <button type="button" class="btn btn-lg btn-info" style="color:white; border-color: #00a8e8; margin-right: 10px;" (click)="doLogin()">Prijavite se</button>
-            <button type="button" class="btn btn-lg btn-outline-secondary" data-bs-dismiss="modal">Odustanite</button>
+            <button type="button" class="btn btn-lg" style="color:white; background-color: #003459; margin-right: 10px;" (click)="doLogin()">Prijavite se</button>
+            <button type="button" class="btn btn-lg btn-outline-secondary" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
           </div>
           <br>
       </div>
       <div class="modal-footer justify-content-center">
         <p class="small fw-bold">Još uvek nemate nalog?
-          <a routerLink="/register" class="link-danger">Registrujte se</a>
+          <a data-bs-toggle="modal" data-bs-target="#modalForRegister" class="link-danger">Registrujte se</a>
         </p>
       </div>
     </div>
   </div>
-</div>
-
-
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
index 3a6fd8f1..c86c269a 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -1,11 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { CookieService } from 'ngx-cookie-service';
 import { AuthService } from 'src/app/_services/auth.service';
-import { ElementRef } from '@angular/core';
-
-declare var window: any;
+import { UserInfoService } from 'src/app/_services/user-info.service';
+import shared from '../../Shared';
 
 @Component({
   selector: 'app-login-modal',
@@ -14,38 +12,47 @@ declare var window: any;
 })
 export class LoginModalComponent implements OnInit {
 
-  loginModal: any;
   username: string = '';
   password: string = '';
 
-  public wrongCreds: boolean = false;      //RAZMOTRITI
+  wrongCreds: boolean = false;
 
   constructor(
     private authService: AuthService,
     private cookie: CookieService,
-    private router: Router
+    private router: Router,
+    private userInfoService: UserInfoService
   ) { }
 
   ngOnInit(): void {
-    this.loginModal = new window.bootstrap.Modal(
-      document.getElementById("modalForLogin")
-    );
   }
 
-  openModal() {
-    this.loginModal.show();
-    //console.log("ok");
-    //(<HTMLInputElement>document.getElementById("exampleModal")).style.display = "block";
-  }
   doLogin() {
-    this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi
-      console.log(response);
-      this.cookie.set('token', response);
-      this.loginModal.hide(); //dodato
-      this.router.navigate(['add-model']);
-    });
+    if (this.username.length > 0 && this.password.length > 0) {
+      this.authService.login(this.username, this.password).subscribe((response) => {
+        console.log(response);
+
+        if (response == "Username doesn't exist" || response == "Wrong password") {
+          this.wrongCreds = true;
+          this.password = '';
+        }
+        else {
+          this.authService.authenticate(response);
+          (<HTMLSelectElement>document.getElementById('closeButton')).click();
+          this.userInfoService.getUserInfo().subscribe((response) => {
+            shared.photoId = response.photoId;
+          });
+        }
+      });
+    }
+    else {
+      this.wrongCreds = true;
+      this.password = '';
+    }
   }
-  sendToRegister() {
-    
+  resetData() {
+    this.wrongCreds = false;
+    this.username = '';
+    this.password = '';
   }
 }
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.css b/frontend/src/app/_modals/register-modal/register-modal.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.css
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html
new file mode 100644
index 00000000..68025a46
--- /dev/null
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.html
@@ -0,0 +1,88 @@
+<!-- Modal -->
+<div class="modal fade" id="modalForRegister" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+    aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header" style="background-color: #003459;">
+                <button id="closeButtonReg" type="button" class="btn-close" data-bs-dismiss="modal" style="background-color: white;"
+                    aria-label="Close" (click)="resetData()"></button>
+            </div>
+            <div class="modal-body" style="color:#003459">
+                <h1 class="text-center mt-2 mb-4">Registracija</h1>
+
+                <form class="mx-5">
+                    <!--Ime-->
+                    <div class="row">
+                        <div class="col-6 px-3 py-3">
+                            <label class="form-label" for="firstName">Ime</label>
+                            <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName"
+                                name="firstName" placeholder="Unesite ime...">
+                            <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Unesite ispravno
+                                ime.</small>
+                        </div>
+                        <!--Prezime-->
+                        <div class="col-6 px-3 py-3">
+                            <label class="form-label" for="lastName">Prezime</label>
+                            <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName"
+                                placeholder="Unesite prezime..." />
+                            <small *ngIf="wrongLastNameBool" class="form-text text-danger">Unesite ispravno
+                                prezime.</small>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <!--Korisnicko ime-->
+                        <div class="col-12 px-3 py-3">
+                            <label class="form-label" for="username-register">Korisničko ime</label>
+                            <input type="text" id="username-register" class="form-control" [(ngModel)]="username"
+                                name="username-register" placeholder="Unesite korisničko ime..." />
+                            <small *ngIf="wrongUsernameBool" class="form-text text-danger">Unesite ispravno korisničko
+                                ime.</small>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <!--Email-->
+                        <div class="col-12 px-3 py-3">
+                            <label class="form-label" for="email">E-mail adresa</label>
+                            <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email"
+                                placeholder="Unesite email adresu..." />
+                            <small *ngIf="wrongEmailBool" class="form-text text-danger">Unesite ispravno e-mail
+                                adresu.</small>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <!-- Lozinka 1. -->
+                        <div class="col-6 px-3 py-3">
+                            <label class="form-label" for="pass1">Lozinka</label>
+                            <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1"
+                                placeholder="Unesite lozinku..." />
+                            <small *ngIf="wrongPass1Bool" class="form-text text-danger">Lozinka se mora sastojati od
+                                najmanje 6 karaktera.</small>
+                        </div>
+                        <!-- Lozinka 2. -->
+                        <div class="col-6 px-3 py-3">
+                            <label class="form-label" for="pass2">Potvrdite lozinku</label>
+                            <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2"
+                                placeholder="Ponovite lozinku..." />
+                            <small *ngIf="wrongPass2Bool" class="form-text text-danger">Lozinke se ne
+                                podudaraju.</small>
+                        </div>
+                    </div>
+                </form>
+                <div class="col-md-12 d-flex justify-content-center mt-5">
+                    <button type="button" class="btn btn-lg"
+                        style="color:white; background-color: #003459; margin-right: 10px;"
+                        (click)="doRegister()">Registrujte se</button>
+                    <button type="button" class="btn btn-lg btn-outline-secondary" style="margin-left: 15px;"
+                        data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
+                </div>
+                <br>
+            </div>
+            <div class="modal-footer justify-content-center">
+                <p class="small fw-bold">Već imate kreiran nalog?
+                    <a id="linkToLoginModal" data-bs-toggle="modal" data-bs-target="#modalForLogin"
+                        class="link-danger">Prijavite se</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts b/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts
new file mode 100644
index 00000000..e371b3d8
--- /dev/null
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterModalComponent } from './register-modal.component';
+
+describe('RegisterModalComponent', () => {
+  let component: RegisterModalComponent;
+  let fixture: ComponentFixture<RegisterModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RegisterModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/register-page/register-page.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts
index 712fc55e..13ef7eba 100644
--- a/frontend/src/app/_pages/register-page/register-page.component.ts
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts
@@ -1,45 +1,59 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { AuthService } from 'src/app/_services/auth.service';
+import User from 'src/app/_data/User';
 
 @Component({
-  selector: 'app-register-page',
-  templateUrl: './register-page.component.html',
-  styleUrls: ['./register-page.component.css']
+  selector: 'app-register-modal',
+  templateUrl: './register-modal.component.html',
+  styleUrls: ['./register-modal.component.css']
 })
-export class RegisterPageComponent implements OnInit {
+export class RegisterModalComponent implements OnInit {
+
   firstName: string = '';
   lastName: string = '';
-  nickName: string = '';
+  username: string = '';
   email: string = '';
   pass1: string = '';
   pass2: string = '';
 
   wrongFirstNameBool: boolean = false;
   wrongLastNameBool: boolean = false;
-  wrongNickNameBool: boolean = false;
+  wrongUsernameBool: boolean = false;
   wrongEmailBool: boolean = false;
   wrongPass1Bool: boolean = false;
   wrongPass2Bool: boolean = false;
 
   pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/;
+  pattUsername: RegExp = /^[a-zA-Z0-9]{6,18}$/;
   pattTwoSpaces: RegExp = /  /;
   pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/;
   pattPassword: RegExp = /.{6,30}$/;
 
   constructor(
-    private router: Router,
-    private authService: AuthService,
+    private authService: AuthService
   ) { }
 
   ngOnInit(): void {
   }
 
+  doRegister() {
+    this.validation();
+  }
+  resetData() {
+    this.firstName = this.lastName = this.username = this.email = this.pass1 = this.pass2 = '';
+    this.wrongFirstNameBool = this.wrongLastNameBool = this.wrongUsernameBool = this.wrongEmailBool = this.wrongPass1Bool = this.wrongPass2Bool = false;
+  }
+
   isCorrectName(element: string): boolean {
     if (this.pattName.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30))
       return true;
     return false;
   }
+  isCorrectUsername(element: string): boolean {
+    if (this.pattUsername.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30))
+      return true;
+    return false;
+  }
   isCorrectEmail(element: string): boolean {
     if (this.pattEmail.test(element.toLowerCase()) && element.length <= 320)
       return true;
@@ -67,13 +81,13 @@ export class RegisterPageComponent implements OnInit {
     (<HTMLSelectElement>document.getElementById('lastName')).focus();
     this.wrongLastNameBool = true;
   }
-  nickNameValidation() {
-    if (this.isCorrectName(this.nickName) == true) {
-      this.wrongNickNameBool = false;
+  usernameValidation() {
+    if (this.isCorrectUsername(this.username) == true) {
+      this.wrongUsernameBool = false;
       return;
     }
-    (<HTMLSelectElement>document.getElementById('nickName')).focus();
-    this.wrongNickNameBool = true;
+    (<HTMLSelectElement>document.getElementById('username-register')).focus();
+    this.wrongUsernameBool = true;
   }
   emailValidation() {
     if (this.isCorrectEmail(this.email) == true) {
@@ -99,42 +113,53 @@ export class RegisterPageComponent implements OnInit {
   validation() {
     this.firstName = this.firstName.trim();
     this.lastName = this.lastName.trim();
-    this.nickName = this.nickName.trim();
+    this.username = this.username.trim();
     this.email = this.email.trim();
 
     this.firstNameValidation();
     this.lastNameValidation();
-    //this.nickNameValidation();
+    this.usernameValidation();
     this.emailValidation();
     this.passwordValidation();
 
-    if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongNickNameBool ||
+    if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongUsernameBool ||
       this.wrongEmailBool || this.wrongPass1Bool || this.wrongPass2Bool)) { //sve ok, registruj ga
 
-      let user = {
+      let user: User = {
         firstName: this.firstName,
         lastName: this.lastName,
-        username: this.nickName,
+        username: this.username,
         password: this.pass1,
-        email: this.email
+        email: this.email,
+        photoId: "1"
       }
 
       this.authService.register(user)
         .subscribe(
           (response) => {
             console.log(response);
-            if (response === 'User added')
-              this.router.navigate(['/login']); //registracija uspesna, idi na login
-            else if (response === 'Email Already Exists')
+            if (response == 'User added') {
+              //nakon sto je registrovan, nek bude ulogovan
+              this.authService.login(this.username, this.pass1).subscribe((response) => {
+
+                this.authService.authenticate(response);
+                console.log("close button");
+                (<HTMLSelectElement>document.getElementById('closeButtonReg')).click();
+                //(<HTMLSelectElement>document.getElementById('linkToLoginModal')).click();
+              }, (error) => console.warn(error));             
+            }
+            else if (response == 'Email Already Exists') {
               alert('Nalog sa unetim email-om već postoji!');
-            else if (response === 'Username Already Exists')
-              alert('Nalog sa unetim korisnićkim imenom već postoji!');
+              (<HTMLSelectElement>document.getElementById('email')).focus();
+            }
+            else if (response == 'Username Already Exists') {
+              alert('Nalog sa unetim korisničkim imenom već postoji!');
+              (<HTMLSelectElement>document.getElementById('username-register')).focus();
+            }
           }
         );
     }
   }
 
 
-
-
 }
diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css
index e69de29b..6d961287 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.css
+++ b/frontend/src/app/_pages/add-model/add-model.component.css
@@ -0,0 +1,35 @@
+#header {
+    background-color: #003459;
+    padding-top: 30px;
+    padding-bottom: 20px;
+}
+#header h1 {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    text-align: center;
+    color: white;
+}
+
+#container {
+    border-radius: 8px;
+}
+
+#wrapper {
+    color: #003459;
+}
+
+.btnType1 {
+    background-color: #003459;
+    color: white;
+}
+.btnType2 {
+    background-color: white;
+    color: #003459;
+    border-color: #003459;
+}
+.selectedDatasetClass {
+    /*border-color: 2px solid #003459;*/
+    background-color: lightblue;
+}
+ul li:hover {
+    background-color: lightblue;
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
index bc292bb9..7e944a19 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -1,189 +1,361 @@
-<div class="container p-3" style="background-color: rgb(249, 251, 253); min-height: 100%;">
-
-    <h2 class="my-4 text-primary"> Nov model: </h2>
-    <div class="form-group row align-items-center">
-        <label for="name" class="col-sm-2 col-form-label col-form-label-lg">Naziv</label>
-        <div class="col-sm-7">
-            <input type="text" class="form-control form-control-lg" name="name" placeholder="Naziv..."
-                [(ngModel)]="newModel.name">
-        </div>
+<div id="header">
+    <h1>Napravite svoj model veštačke neuronske mreže</h1>
+</div>
 
-        <div class="col-sm-3">
-            <input type="text" class="form-control-plaintext text-center" id="dateCreated" placeholder="--/--/--"
-                value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
+<div id="wrapper">
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+        <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
+            <!--justify-content-center-->
+            <h2 class="col-2"> Nov model: </h2>
+            <div class="col-3">
+                <label for="name" class="col-form-label">Naziv modela:</label>
+                <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name">
+            </div>
+            <div class="col-5">
+                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+                <div>
+                    <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
+                </div>
+            </div>
+            <div class="col-2">
+                <label for="dateCreated" class="col-form-label">Datum:</label> &nbsp;&nbsp;
+                <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--"
+                    value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
+            </div>
         </div>
-    </div>
 
-    <div class="form-group row my-2">
-        <label for="desc" class="col-sm-2 col-form-label">Opis</label>
-        <div class="col-sm-10">
-            <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
-        </div>
-    </div>
+        <div class="py-3 pr-5 justify-content-center">
 
-    <!--<div class="form-group row">
-    <label for="value" class="col-4">Vrednost</label>
-    <div class="input-group">
-        <input type="number" min="0" class="form-control" name="value" placeholder="Vrednost..."
-            [(ngModel)]="newModel.value">
-        <div class="input-group-prepend">
-            <span class="input-group-text">#</span>
-        </div>
-        <input type="number" min="1" class="form-control" name="count" placeholder="Br." [(ngModel)]="newModel.count">
-        <input type="text" class="form-control" name="sum" placeholder="Suma"
-            value="=({{newModel.value * newModel.count}})" readonly>
+            <div class="col-12 d-flex my-5">
+                <h2 class="">Izvor podataka:</h2>
+                <div class="col-1">
+                </div>
+                <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()"
+                    [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}">
+                    Izaberite dataset iz kolekcije
+                </button>
+                <h3 class="mt-3 mx-3">ili</h3>
+                <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()"
+                    [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
+                    Dodajte novi dataset
+                </button>
+            </div>
+
+            <div class="px-5">
+                <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;">
+                    <ul class="list-group">
+                        <li class="list-group-item p-3" *ngFor="let dataset of myDatasets"
+                            [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
+                            <app-item-dataset name="usersDataset" [dataset]="dataset"
+                                (click)="selectThisDataset(dataset)"></app-item-dataset>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <app-dataset-load *ngIf="!showMyDatasets" id="dataset"
+                (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.hasHeader">
+            </app-dataset-load>
+            <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
         </div>
-    </div>-->
 
-    <div class="my-4">
-        <label for="dataset">Izvor podataka:</label>
-        <app-dataset-load id="dataset"></app-dataset-load>
-    </div>
+        <!-- ULAZNE/IZLAZNE KOLONE -->
+        <div *ngIf="selectedDataset">
+            <div class="row">
+                <div class="col d-flex justify-content-center">
+                    <h3>Izaberite ulazne kolone:</h3>
+                    <div id="divInputs" class="form-check mt-2">
+                        <br>
+                        <div *ngFor="let item of selectedDataset.header; let i = index">
+                            <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}"
+                                name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
+                            <label class="form-check-label" for="cb_{{item}}">
+                                {{item}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="col d-flex justify-content-left">
+                    <h3>Izaberite izlaznu kolonu:</h3>
+                    <div id="divOutputs" class="form-check mt-2">
+                        <br>
+                        <div *ngFor="let item of selectedDataset.header; let i = index">
+                            <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbsNew"
+                                (change)="this.selectedOutputColumnVal = item">&nbsp;
+                            <label class="form-check-label" for="rb_{{item}}">
+                                {{item}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
 
-    <div class="form-group row my-2">
-        <div class="col-sm-2 col-form-label">
-            <label for="type" class="form-check-label">Podela test skupa:
-                <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
-                    (change)="newModel.randomTestSet = !newModel.randomTestSet">
-            </label>
 
+                <div class="my-2" *ngIf="datasetFile">
+                    <h2>Popunjavanje nedostajućih vrednosti:</h2>
+                    <div class="form-check">
+                        <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteRows"
+                            class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked
+                            data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
+                        <label for="delRows" class="form-check-label">Obriši sve
+                            redove sa nedostajućim vrednostima</label><br>
+                        <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteColumns"
+                            class="form-check-input" value="deleteCols" name="fillMissing" id="delCols"
+                            data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
+                        <label for="delCols" class="form-check-label">Obriši sve
+                            kolone sa nedostajućim vrednostima</label><br>
+                        <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.Replace"
+                            class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
+                            data-bs-target="#fillMissingCustom:not(.show)">
+                        <label for="replace" class="form-check-label">Izabraću
+                            vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
+                        <div class="collapse" id="fillMissingCustom">
+                            <div>
+                                <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+                                <div id="columnReplacers">
+                                    <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3">
+                                        <div class="input-group row" *ngIf="getInputById('cb_'+column).checked">
+                                            <span class="input-group-text col-2 text-center">
+                                                {{column}}
+                                            </span>
+                                            <input type="text" class="form-control col-2">
+                                            <select [id]="'replaceOptions'+i" class="form-control col-2"
+                                                *ngIf="isNumber(datasetFile[1][i])">
+                                                <option
+                                                    *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
+                                                    [value]="option">
+                                                    {{ optionName }}
+                                                </option>
+                                            </select>
+                                            <select [id]="'replaceOptions'+i" class="form-control col-2"
+                                                *ngIf="!isNumber(datasetFile[1][i])">
+                                                <option *ngFor="let option of arrayColumn(datasetFile, i)"
+                                                    [value]="option">
+                                                    {{ option }}
+                                                </option>
+                                            </select>
+                                            <label class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu
+                                                <input type="radio" [id]="'delCol_'+column"
+                                                    [name]="'delOp_'+column"></label>
+                                            <label class="form-control col-2" [for]="'delRows_'+column">Izbriši redove
+                                                <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column"
+                                                    checked></label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div>
-            <input type="range" min="0.1" max="0.9" step="0.1" class="form-control" name="randomTestSetDistribution"
-                [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
-        </div>
-    </div>
 
-    <h3> Parametri treniranja </h3>
-
-    <div class="form-group row my-2">
-        <label for="type" class="col-sm-2 col-form-label">Tip mreže: </label>
-        <div class="col-sm-10">
-            <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
-                <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
 
-    <div class="form-group row my-2">
-        <label for="encoding" class="col-sm-2 col-form-label">Enkoding: </label>
-        <div class="col-sm-10">
-            <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
-                <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
 
-    <div class="form-group row my-2">
-        <label for="optimizer" class="col-sm-2 col-form-label">Optimizacija: </label>
-        <div class="col-sm-10">
-            <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
-                <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
+        <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
 
-    <div class="form-group row my-2">
-        <label for="lossFunction" class="col-sm-2 col-form-label">Funkcija obrade gubitka: </label>
-        <div class="col-sm-10">
-            <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction">
-                <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
+        <div>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="type" class="col-form-label">Tip mreže: </label>
+                </div>
+                <div class="col-2">
+                    <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
+                        <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="hiddenLayers"
+                        [(ngModel)]="newModel.hiddenLayers">
+                </div>
+            </div>
 
-    <div class="form-group row my-2">
-        <label for="inputNeurons" class="col-sm-2 col-form-label">Broj ulaznih neurona: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons">
-        </div>
-    </div>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="encoding" class="col-form-label">Enkoding: </label>
+                </div>
+                <div class="col-2">
+                    <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
+                        <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
+                        [(ngModel)]="newModel.hiddenLayerNeurons">
+                </div>
+            </div>
 
-    <div class="form-group row my-2">
-        <label for="inputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije ulaznog sloja:
-        </label>
-        <div class="col-sm-10">
-            <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction"
-                [(ngModel)]="newModel.inputLayerActivationFunction">
-                <option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="optimizer" class="col-form-label">Optimizacija: </label>
+                </div>
+                <div class="col-2">
+                    <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
+                        <option
+                            *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+                </div>
+            </div>
 
-    <div class="form-group row my-2">
-        <label for="hiddenLayerNeurons" class="col-sm-2 col-form-label">Broj neurona skrivenih slojeva: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
-                [(ngModel)]="newModel.hiddenLayerNeurons">
-        </div>
-    </div>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
+                </div>
+                <div class="col-2">
+                    <select id=lossFunctionOptions class="form-control" name="lossFunction"
+                        [(ngModel)]="newModel.lossFunction">
+                        <option
+                            *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3 mt-2">
+                    <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
+                    <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder"
+                        type="checkbox" value="" checked>
+                </div>
+                <div class="col-1">
+                </div>
+            </div>
 
-    <div class="form-group row my-2">
-        <label for="hiddenLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije skrivenih
-            slojeva:
-        </label>
-        <div class="col-sm-10">
-            <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction"
-                [(ngModel)]="newModel.hiddenLayerActivationFunction">
-                <option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije ulaznog
+                        sloja:</label>
+                </div>
+                <div class="col-2">
+                    <select id=inputLayerActivationFunctionOptions class="form-control"
+                        name="inputLayerActivationFunction" [(ngModel)]="newModel.inputLayerActivationFunction">
+                        <option
+                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-5">
+                    <label for="splitYesNo" class="form-check-label">Podela test skupa:&nbsp;&nbsp;
+                        <input id="splitYesNo" class="form-check-input" type="checkbox"
+                            [checked]="newModel.randomTestSet"
+                            (change)="newModel.randomTestSet = !newModel.randomTestSet">
+                    </label>
+                </div>
+                <div class="col">
+                </div>
+            </div>
 
-    <div class="form-group row my-2">
-        <label for="hiddenLayers" class="col-sm-2 col-form-label">Broj skrivenih slojeva: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers">
-        </div>
-    </div>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih
+                        slojeva:</label>
+                </div>
+                <div class="col-2">
+                    <select id=hiddenLayerActivationFunctionOptions class="form-control"
+                        name="hiddenLayerActivationFunction" [(ngModel)]="newModel.hiddenLayerActivationFunction">
+                        <option
+                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-2">
+                    <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening skup:</label>
+                </div>
+                <div class="col-1">
+                    <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
+                        [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
+                </div>
+            </div>
 
-    <div class="form-group row my-2">
-        <label for="outputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije izlaznog
-            sloja:
-        </label>
-        <div class="col-sm-10">
-            <select id=outputLayerActivationFunctionOptions class="form-control" name="outputLayerActivationFunction"
-                [(ngModel)]="newModel.outputLayerActivationFunction">
-                <option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije izlaznog
+                        sloja:</label>
+                </div>
+                <div class="col-2">
+                    <select id=outputLayerActivationFunctionOptions class="form-control"
+                        name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                        <option
+                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col">
+                    trening
+                    <mat-slider min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel
+                        [disabled]="!newModel.randomTestSet" [(ngModel)]="tempTestSetDistribution">
+                    </mat-slider>
+                    test
+                </div>
+                <div class="col">
+                </div>
+            </div>
         </div>
-    </div>
 
-    <div class="form-group row my-2">
-        <label for="batchSize" class="col-sm-2 col-form-label">Broj uzorka po iteraciji: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+
+        <br><br>
+        <div class="form-group row mt-5 mb-3">
+            <div class="col"></div>
+            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
+                (click)="addModel();">Sačuvaj model</button>
+            <div class="col"></div>
+            <button class="btn btn-lg col-4 disabled" style="background-color:#003459; color:white;"
+                (click)="trainModel();">Treniraj model</button>
+            <div class="col"></div>
         </div>
-    </div>
 
-    <div class=" form-group row my-4">
-        <div class="col-4"></div>
-        <button class="btn btn-lg btn-primary col-4" (click)="addModel();">Dodaj</button>
-        <div class="col-4"></div>
     </div>
-
 </div>
 \ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
index 3cb47d61..fcc8ea70 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -1,6 +1,14 @@
-import { Component, OnInit } from '@angular/core';
-import Model from 'src/app/_data/Model';
-import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import Model, { ReplaceWith } from 'src/app/_data/Model';
+import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model';
+import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component';
+import { ModelsService } from 'src/app/_services/models.service';
+import shared from 'src/app/Shared';
+import Dataset from 'src/app/_data/Dataset';
+import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component';
+import { DatasetsService } from 'src/app/_services/datasets.service';
+import { NgxCsvParser } from 'ngx-csv-parser';
+import { CsvParseService } from 'src/app/_services/csv-parse.service';
 
 @Component({
   selector: 'app-add-model',
@@ -9,24 +17,263 @@ import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from '
 })
 export class AddModelComponent implements OnInit {
 
-  newModel: Model
+  @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent;
+  @ViewChild(DatatableComponent) datatable?: DatatableComponent;
+  datasetLoaded: boolean = false;
+
+  newModel: Model;
 
   ANNType = ANNType;
   Encoding = Encoding;
   ActivationFunction = ActivationFunction;
   LossFunction = LossFunction;
   Optimizer = Optimizer;
+  NullValueOptions = NullValueOptions;
+  ReplaceWith = ReplaceWith;
   Object = Object;
+  document = document;
+  shared = shared;
+
+  selectedOutputColumnVal: string = '';
+
+  showMyDatasets: boolean = true;
+  myDatasets?: Dataset[];
+  existingDatasetSelected: boolean = false;
+  selectedDataset?: Dataset;
+  otherDataset?: Dataset;
+  otherDatasetFile?: any[];
+  datasetFile?: any[];
+  datasetHasHeader?: boolean = true;
+
+  tempTestSetDistribution: number = 90;
 
-  constructor() {
+  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) {
     this.newModel = new Model();
+
+    this.models.getMyDatasets().subscribe((datasets) => {
+      this.myDatasets = datasets;
+    });
   }
 
   ngOnInit(): void {
+    (<HTMLInputElement>document.getElementById("btnMyDataset")).focus();
+  }
+
+  viewMyDatasetsForm() {
+    this.showMyDatasets = true;
+    this.resetSelectedDataset();
+    this.datasetLoaded = false;
+    this.resetCbsAndRbs();
+  }
+  viewNewDatasetForm() {
+    this.showMyDatasets = false;
+    this.resetSelectedDataset();
+    this.resetCbsAndRbs();
   }
 
   addModel() {
-    //TODO
+    if (!this.showMyDatasets)
+      this.saveModelWithNewDataset();
+    else
+      this.saveModelWithExistingDataset();
+  }
+
+  trainModel() {
+    this.saveModelWithNewDataset().subscribe((modelId: any) => {
+      if (modelId)
+        this.models.trainModel(modelId);
+    }); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad
+  }
+
+  saveModelWithNewDataset(): any {
+
+    this.getCheckedInputCols();
+    this.getCheckedOutputCol();
+
+    if (this.validationInputsOutput()) {
+      console.log('ADD MODEL: STEP 1 - UPLOAD FILE');
+      if (this.datasetLoadComponent) {
+
+        this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => {
+          console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id);
+          if (this.datasetLoadComponent) {
+            this.datasetLoadComponent.dataset.fileId = file._id;
+            this.datasetLoadComponent.dataset.username = shared.username;
+
+            this.models.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => {
+              console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id);
+              this.newModel.datasetId = dataset._id;
+
+              //da se doda taj dataset u listu postojecih, da bude izabran 
+              this.refreshMyDatasetList();
+              this.showMyDatasets = true;
+              this.selectThisDataset(dataset);
+
+              this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
+              this.tempTestSetDistribution = 90;
+              this.newModel.username = shared.username;
+
+              this.models.addModel(this.newModel).subscribe((response) => {
+                console.log('ADD MODEL: DONE! REPLY:\n', response);
+              }, (error) => {
+                alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom.");
+              }); //kraj addModel subscribe
+            }, (error) => {
+              alert("Dataset sa unetim nazivom već postoji u Vašoj kolekciji.\nIzmenite naziv ili iskoristite postojeći dataset.");
+            }); //kraj addDataset subscribe
+          } //kraj treceg ifa
+        }, (error) => {
+          //alert("greska uploadData");
+        }); //kraj uploadData subscribe
+
+      } //kraj drugog ifa
+    } //kraj prvog ifa
+  }
+
+  saveModelWithExistingDataset(): any {
+
+    if (this.selectedDataset) { //dataset je izabran
+      this.getCheckedInputCols();
+      this.getCheckedOutputCol();
+
+      if (this.validationInputsOutput()) {
+        this.newModel.datasetId = this.selectedDataset._id;
+
+        this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
+        this.tempTestSetDistribution = 90;
+        this.newModel.username = shared.username;
+
+        this.models.addModel(this.newModel).subscribe((response) => {
+          console.log('ADD MODEL: DONE! REPLY:\n', response);
+        }, (error) => {
+          alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom.");
+        });
+      }
+    }
+    else {
+      alert("Molimo Vas da izaberete neki dataset iz kolekcije.");
+    }
+  }
+
+  getCheckedInputCols() {
+    this.newModel.inputColumns = [];
+    let checkboxes: any;
+
+    checkboxes = document.getElementsByName("cbsNew");
+
+    for (let i = 0; i < checkboxes.length; i++) {
+      let thatCb = <HTMLInputElement>checkboxes[i];
+      if (thatCb.checked == true && thatCb.disabled == false)
+        this.newModel.inputColumns.push(thatCb.value);
+    }
+    //console.log(this.checkedInputCols);
+  }
+  getCheckedOutputCol() {
+    this.newModel.columnToPredict = '';
+    let radiobuttons: any;
+
+    radiobuttons = document.getElementsByName("rbsNew");
+
+    for (let i = 0; i < radiobuttons.length; i++) {
+      let thatRb = <HTMLInputElement>radiobuttons[i];
+      if (thatRb.checked) {
+        this.newModel.columnToPredict = thatRb.value;
+        break;
+      }
+    }
+    //console.log(this.checkedOutputCol);
+  }
+  validationInputsOutput(): boolean {
+    if (this.newModel.inputColumns.length == 0 && this.newModel.columnToPredict == '') {
+      alert("Molimo Vas da izaberete ulazne i izlazne kolone za mrežu.");
+      return false;
+    }
+    else if (this.newModel.inputColumns.length == 0) {
+      alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu.");
+      return false;
+    }
+    else if (this.newModel.columnToPredict == '') {
+      alert("Molimo Vas da izaberete izlaznu kolonu za mrežu.");
+      return false;
+    }
+    for (let i = 0; i < this.newModel.inputColumns.length; i++) {
+      if (this.newModel.inputColumns[i] == this.newModel.columnToPredict) {
+        let colName = this.newModel.columnToPredict;
+        alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor.");
+        return false;
+      }
+    }
+    return true;
+  }
+
+  selectThisDataset(dataset: Dataset) {
+    this.selectedDataset = dataset;
+    this.existingDatasetSelected = true;
+
+    /*let datasets = document.getElementsByClassName("usersDataset") as HTMLCollection;
+    for (let i = 0; i < datasets.length; i++) {
+      if (datasets[i]._id == dataset._id)
+    }*/
+
+
+    //this.datasetFile = csvRecords;
+    this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
+      if (file) {
+        this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
+      }
+    });
+    this.datasetHasHeader = false;
+
+    this.resetCbsAndRbs();
+  }
+
+  resetSelectedDataset(): boolean {
+    const temp = this.selectedDataset;
+    this.selectedDataset = this.otherDataset;
+    this.otherDataset = temp;
+    const tempFile = this.datasetFile;
+    this.datasetFile = this.otherDatasetFile;
+    this.otherDatasetFile = tempFile;
+    return true;
+  }
+  resetCbsAndRbs(): boolean {
+    this.uncheckRbs();
+    this.checkAllCbs();
+    return true;
+  }
+  checkAllCbs() {
+    let checkboxes: any;
+
+    checkboxes = document.getElementsByName("cbsNew");
+    for (let i = 0; i < checkboxes.length; i++) {
+      (<HTMLInputElement>checkboxes[i]).checked = true;
+      (<HTMLInputElement>checkboxes[i]).disabled = false;
+    }
+  }
+  uncheckRbs() {
+    this.selectedOutputColumnVal = '';
+    let radiobuttons: any;
+
+    radiobuttons = document.getElementsByName("rbsNew");
+    for (let i = 0; i < radiobuttons.length; i++)
+      (<HTMLInputElement>radiobuttons[i]).checked = false;
+  }
+
+  refreshMyDatasetList() {
+    this.models.getMyDatasets().subscribe((datasets) => {
+      this.myDatasets = datasets;
+    });
+  }
+
+  isNumber(value: string | number): boolean {
+    return ((value != null) &&
+      (value !== '') &&
+      !isNaN(Number(value.toString())));
+  }
+
+  getInputById(id: string): HTMLInputElement {
+    return document.getElementById(id) as HTMLInputElement;
   }
 
+  arrayColumn = (arr: any[][], n: number) => [...new Set(arr.map(x => x[n]))];
 }
diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css
diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html
new file mode 100644
index 00000000..fa38a1bc
--- /dev/null
+++ b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html
@@ -0,0 +1 @@
+<p>browse-datasets works!</p>
diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.spec.ts b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts
index 82a01f63..fda74dbe 100644
--- a/frontend/src/app/_pages/only-authorized/only-authorized.component.spec.ts
+++ b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { OnlyAuthorizedComponent } from './only-authorized.component';
+import { BrowseDatasetsComponent } from './browse-datasets.component';
 
-describe('OnlyAuthorizedComponent', () => {
-  let component: OnlyAuthorizedComponent;
-  let fixture: ComponentFixture<OnlyAuthorizedComponent>;
+describe('BrowseDatasetsComponent', () => {
+  let component: BrowseDatasetsComponent;
+  let fixture: ComponentFixture<BrowseDatasetsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ OnlyAuthorizedComponent ]
+      declarations: [ BrowseDatasetsComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(OnlyAuthorizedComponent);
+    fixture = TestBed.createComponent(BrowseDatasetsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts
new file mode 100644
index 00000000..dba6c25e
--- /dev/null
+++ b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-browse-datasets',
+  templateUrl: './browse-datasets.component.html',
+  styleUrls: ['./browse-datasets.component.css']
+})
+export class BrowseDatasetsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css
new file mode 100644
index 00000000..b4ac9669
--- /dev/null
+++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css
@@ -0,0 +1,7 @@
+#container {
+    border-radius: 8px;
+}
+
+#wrapper {
+    color: #003459;
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html
new file mode 100644
index 00000000..a4ab6e2c
--- /dev/null
+++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html
@@ -0,0 +1,38 @@
+
+<div id="wrapper">
+
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+        <div class="row mt-3 mb-2 d-flex justify-content-center">
+    
+    <div class="col-sm-6" style="margin-bottom: 10px;">
+    <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
+    </div>
+
+            <div class="row">
+                <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let predictor of publicPredictors | filter:term">
+                  <div class="card h-100">
+                    <div class="card-body">
+                      <h3 class="card-title"><b>{{predictor.name}}</b></h3>
+                      <p class="card-text">{{predictor.description}}</p>
+                      <a  class="btn btn-primary" (click)="openPredictor(predictor._id)">Otvori</a>
+                    </div>
+                    <div class="card-footer text-muted">
+                        Kreirao: {{predictor.username}} <br>
+                        Datum kreiranja: {{predictor.dateCreated |date}}
+                      </div>
+                  </div>
+                </div>
+               
+
+              </div>
+              <div class="text-center"*ngIf="( publicPredictors != undefined && publicPredictors|filter:term).length === 0">
+                <h2>Nema rezultata</h2>
+            </div>
+        </div>
+        
+    </div>
+    
+
+
+
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts
new file mode 100644
index 00000000..6d13fedf
--- /dev/null
+++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BrowsePredictorsComponent } from './browse-predictors.component';
+
+describe('BrowsePredictorsComponent', () => {
+  let component: BrowsePredictorsComponent;
+  let fixture: ComponentFixture<BrowsePredictorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BrowsePredictorsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BrowsePredictorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts
new file mode 100644
index 00000000..4f96fc36
--- /dev/null
+++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { PredictorsService } from 'src/app/_services/predictors.service';
+import Predictor from 'src/app/_data/Predictor';
+import {Router} from '@angular/router'
+@Component({
+  selector: 'app-browse-predictors',
+  templateUrl: './browse-predictors.component.html',
+  styleUrls: ['./browse-predictors.component.css']
+})
+export class BrowsePredictorsComponent implements OnInit {
+
+  publicPredictors? :Predictor[];
+  term: string="";
+  constructor(private predictors: PredictorsService,private router:Router) {
+    this.predictors.getPublicPredictors().subscribe((predictors) => {
+      this.publicPredictors = predictors;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+  openPredictor(id:string):void{
+    this.router.navigateByUrl('/predict?id='+id);
+  };
+
+}
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html
new file mode 100644
index 00000000..84f5ebaf
--- /dev/null
+++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html
@@ -0,0 +1,38 @@
+
+<div id="wrapper">
+
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+        <div class="row mt-3 mb-2 d-flex justify-content-center">
+    
+    <div class="col-sm-6" style="margin-bottom: 10px;">
+    <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
+    </div>
+
+            <div class="row">
+                <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let dataset of publicDatasets | filter:term">
+                  <div class="card h-100">
+                    <div class="card-body">
+                      <h3 class="card-title"><b>{{dataset.name}}</b></h3>
+                      <p class="card-text">{{dataset.description}}</p>
+                      <a  class="btn btn-primary" (click)="addDataset(dataset)">Dodaj dataset</a>
+                    </div>
+                    <div class="card-footer text-muted">
+                        Kreirao: {{dataset.username}} <br>
+                        Datum kreiranja: {{dataset.dateCreated |date}}
+                      </div>
+                  </div>
+                </div>
+               
+
+              </div>
+              <div class="text-center"*ngIf="( publicDatasets != undefined && publicDatasets|filter:term).length === 0">
+                <h2>Nema rezultata</h2>
+            </div>
+        </div>
+        
+    </div>
+    
+
+
+
+</div>
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts
new file mode 100644
index 00000000..6ab894fd
--- /dev/null
+++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterDatasetsComponent } from './filter-datasets.component';
+
+describe('FilterDatasetsComponent', () => {
+  let component: FilterDatasetsComponent;
+  let fixture: ComponentFixture<FilterDatasetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterDatasetsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterDatasetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
new file mode 100644
index 00000000..bc13a51c
--- /dev/null
+++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { DatasetsService } from 'src/app/_services/datasets.service';
+import Dataset from 'src/app/_data/Dataset';
+import {Router} from '@angular/router'
+import { JwtHelperService } from '@auth0/angular-jwt';
+import { CookieService } from 'ngx-cookie-service';
+
+@Component({
+  selector: 'app-filter-datasets',
+  templateUrl: './filter-datasets.component.html',
+  styleUrls: ['./filter-datasets.component.css']
+})
+export class FilterDatasetsComponent implements OnInit {
+
+  publicDatasets?: Dataset[];
+  term: string = "";
+  constructor(private datasets: DatasetsService,private router:Router, private cookie: CookieService) {
+    this.datasets.getPublicDatasets().subscribe((datasets) => {
+      this.publicDatasets = datasets;
+    });
+  }
+
+  ngOnInit(): void {
+
+  }
+  addDataset(dataset: Dataset):void{
+    //this.router.navigateByUrl('/predict?id='+id);
+    const helper = new JwtHelperService();
+    const decodedToken = helper.decodeToken(this.cookie.get("token"));
+    dataset._id = "";
+    dataset.isPublic = false;
+    dataset.lastUpdated = new Date();
+    dataset.username = decodedToken.name;
+    this.datasets.addDataset(dataset).subscribe((response:string)=>{
+      console.log(response);
+    });
+  };
+
+}
diff --git a/frontend/src/app/_pages/home/home.component.css b/frontend/src/app/_pages/home/home.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/home/home.component.css
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
new file mode 100644
index 00000000..7e895a2d
--- /dev/null
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -0,0 +1,56 @@
+<div class="d-flex flex-column align-items-center bg-light">
+    <img src="../../../assets/svg/logo.svg" class="bi me-2" width="256" height="256" role="img">
+    <div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center">
+        <h2 class="my-4">Započnite sa treniranjem!</h2>
+        <div id="cards" class="row align-items-stretch justify-content-center">
+            <div class="card shadow col-3 m-1" style="width: 18rem;">
+                <div class="card-body">
+                    <mat-icon width="48px" height="48px"
+                        style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon>
+                    <h3 class="card-title my-2">Moji izvori podataka</h3>
+                    <p class="card-text">
+                        <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore
+                        podataka, ili
+                        dodajte novi.
+                    </p>
+                </div>
+            </div>
+            <div class="card shadow col-3 m-1" style="width: 18rem;">
+                <div class="card-body">
+                    <mat-icon width="48px" height="48px"
+                        style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training
+                    </mat-icon>
+                    <h3 class="card-title my-2">Moji modeli</h3>
+                    <p class="card-text">
+                        <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih,
+                        napravite nove modele, ili
+                        ih obrišite.
+                    </p>
+                </div>
+            </div>
+            <div class="card shadow col-3 m-1" style="width: 18rem;">
+                <div class="card-body">
+                    <mat-icon width="48px" height="48px"
+                        style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">batch_prediction
+                    </mat-icon>
+                    <h3 class="card-title my-2">Rezultati treniranja</h3>
+                    <p class="card-text">
+                        <a class="stretched-link" routerLink="my-predictors">Pregledajte</a> sve vaše trenirane
+                        modele,
+                        koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <h2 class="my-4">Pogledajte javne izvore podataka!</h2>
+    <app-carousel [items]="publicDatasets">
+
+    </app-carousel>
+    <h3><a routerLink="browse-datasets">Pogledaj sve javne izvore podataka...</a></h3>
+    <h2 class="my-4">Iskoristite već trenirane modele!</h2>
+    <app-carousel [items]="publicPredictors">
+    </app-carousel>
+    <h3><a routerLink="browse-predictors">Pogledaj sve javne trenirane modele...</a></h3>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/home/home.component.spec.ts b/frontend/src/app/_pages/home/home.component.spec.ts
new file mode 100644
index 00000000..2c5a1726
--- /dev/null
+++ b/frontend/src/app/_pages/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/home/home.component.ts b/frontend/src/app/_pages/home/home.component.ts
new file mode 100644
index 00000000..7e4471e8
--- /dev/null
+++ b/frontend/src/app/_pages/home/home.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import Dataset from 'src/app/_data/Dataset';
+import Predictor from 'src/app/_data/Predictor';
+import { ItemDatasetComponent } from 'src/app/_elements/item-dataset/item-dataset.component';
+import shared from 'src/app/Shared';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  publicDatasets: Dataset[];
+  publicPredictors: Predictor[];
+
+  shared = shared;
+
+  constructor() {
+    this.publicDatasets = [
+      new Dataset('Titanik', 'Titanik', ['Kolona1', 'Kolona2', 'Ime', 'OsobaJePreživela']),
+      new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']),
+      new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']),
+      new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']),
+      new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']),
+      new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']),
+      new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']),
+      new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5'])
+    ]
+    this.publicPredictors = [
+      new Predictor('Preživeli', 'Za uneto ime osobe, predvidja da li je ta osoba preživela ili ne.', ['Ime'], 'OsobaJePreživela'),
+      new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'),
+      new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'),
+      new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'),
+      new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'),
+      new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'),
+      new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'),
+      new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5')
+    ]
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_pages/login-page/login-page.component.html b/frontend/src/app/_pages/login-page/login-page.component.html
deleted file mode 100644
index 8deb5290..00000000
--- a/frontend/src/app/_pages/login-page/login-page.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!--<script>
-    $(document).ready(function(){
-        $(".btn").click(function(){
-            $("#exampleModal").modal('show');
-        });
-
-        $('#exampleModal').modal({
-    		backdrop: 'static',
-    		keyboard: false
-		});
-    });
-</script>-->
-
-<!-- Button trigger modal -->
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForLogin" (click)="openModal()">
-    Open Modal
-  </button>
-
-<!--
-<div style="min-height: 100vh; position: relative;">
-
-    <div class="container p-5 rounded-3 shadow-sm border" style="max-width: 50em; margin-top: 50px;">
-        <h3 class="text-center pb-5">Prijavite se</h3>
-        <form>
-            <div class="form-outline mb-4">
-                <label class="form-label" for="username">Korisničko ime</label>
-                <input [(ngModel)]="username" name="username" type="text" id="username"
-                    class="form-control form-control-lg" placeholder="Unesite korisničko ime..." />
-            </div>
-
-            <div class="form-outline mb-3">
-                <label class="form-label" for="password">Lozinka</label>
-                <input [(ngModel)]="password" name="password" type="password" id="password"
-                    class="form-control form-control-lg" placeholder="Unesite lozinku..." />
-            </div>
-
-            <div class="text-center text-lg-start mt-4 pt-2">
-                <p *ngIf="wrongCreds" class="small fw-bold mt-2 pt-1 mb-0 text-danger">Lozinka ili e-mail su pogrešni
-                </p>
-                <br>
-
-                <button type="button" class="btn btn-primary btn-lg"
-                    style="padding-left: 2.5rem; padding-right: 2.5rem;" (click)="onSubmit()">Prijava
-                </button>
-
-                <br>
-                <p class="small fw-bold mt-2 pt-1 mb-0">Još uvek nemate nalog?
-                    <a routerLink="/register" class="link-danger">Registrujte se</a>
-                </p>
-            </div>
-        </form>
-    </div>
-
-</div>
--->
-\ No newline at end of file
diff --git a/frontend/src/app/_pages/login-page/login-page.component.ts b/frontend/src/app/_pages/login-page/login-page.component.ts
deleted file mode 100644
index e5366283..00000000
--- a/frontend/src/app/_pages/login-page/login-page.component.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { CookieService } from 'ngx-cookie-service';
-import { AuthService } from 'src/app/_services/auth.service';
-
-import { LoginModalComponent } from 'src/app/_modals/login-modal/login-modal.component';
-import { MDBModalRef, MDBModalService } from 'ng-uikit-pro-standard';
-
-
-declare var window: any;
-
-@Component({
-  selector: 'app-login-page',
-  templateUrl: './login-page.component.html',
-  styleUrls: ['./login-page.component.css'],
-  
-})
-export class LoginPageComponent{
-
-  modalRef?: MDBModalRef;
-
-  //email: string = '';
-  username: string = '';
-  password: string = '';
-
-  public wrongCreds: boolean = false;      //RAZMOTRITI
-  //public notApproved: boolean = false;     //RAZMOTRITI
-
-  formModal: any;
-
-  constructor(
-    private authService: AuthService,
-    private cookie: CookieService,
-    private router: Router,
-    private modalService: MDBModalService
-  ) { }
-
-  openModal() {
-    //this.modalRef = this.modalService.show(LoginModalComponent);
-  }
-  /*
-  ngOnInit(): void {
-    this.formModal = new window.bootstrap.Modal(
-      document.getElementById("exampleModal")
-    );
-  }
-
-  openModal() {
-    this.formModal.show();
-    //console.log("ok");
-    //(<HTMLInputElement>document.getElementById("exampleModal")).style.display = "block";
-  }
-
-  onSubmit() {
-
-    this.authService.login(this.username, this.password).subscribe((response) => {
-      console.log(response);
-      this.cookie.set('token', response);
-      this.router.navigate(['add-model']);
-    });
-  }
-*/
-}
diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.css b/frontend/src/app/_pages/my-datasets/my-datasets.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.css
diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.html b/frontend/src/app/_pages/my-datasets/my-datasets.component.html
new file mode 100644
index 00000000..623b9ac8
--- /dev/null
+++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.html
@@ -0,0 +1,5 @@
+<ul class="list-group my-2">
+    <li class="list-group-item" *ngFor="let dataset of myDatasets">
+        <app-item-dataset [dataset]="dataset"></app-item-dataset>
+    </li>
+</ul>
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts b/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts
new file mode 100644
index 00000000..fc1fc3f3
--- /dev/null
+++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyDatasetsComponent } from './my-datasets.component';
+
+describe('MyDatasetsComponent', () => {
+  let component: MyDatasetsComponent;
+  let fixture: ComponentFixture<MyDatasetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MyDatasetsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyDatasetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts
new file mode 100644
index 00000000..13b0c47b
--- /dev/null
+++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import Dataset from 'src/app/_data/Dataset';
+
+@Component({
+  selector: 'app-my-datasets',
+  templateUrl: './my-datasets.component.html',
+  styleUrls: ['./my-datasets.component.css']
+})
+export class MyDatasetsComponent implements OnInit {
+
+  myDatasets?: Dataset[];
+
+  constructor() {
+    this.myDatasets = [
+      new Dataset('Titanik', 'Opis titanik', ['K1', 'K2', 'K3', 'Ime', 'Preziveli']),
+      new Dataset('Neki drugi set', 'opis', ['a', 'b', 'c']),
+      new Dataset('Treci set', 'opis', ['a', 'b', 'c'])
+    ];
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_pages/my-models/my-models.component.css b/frontend/src/app/_pages/my-models/my-models.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/my-models/my-models.component.css
diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/my-models/my-models.component.html
diff --git a/frontend/src/app/_pages/my-models/my-models.component.spec.ts b/frontend/src/app/_pages/my-models/my-models.component.spec.ts
new file mode 100644
index 00000000..e431d04c
--- /dev/null
+++ b/frontend/src/app/_pages/my-models/my-models.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyModelsComponent } from './my-models.component';
+
+describe('MyModelsComponent', () => {
+  let component: MyModelsComponent;
+  let fixture: ComponentFixture<MyModelsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MyModelsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyModelsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts
new file mode 100644
index 00000000..e9bc52de
--- /dev/null
+++ b/frontend/src/app/_pages/my-models/my-models.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-my-models',
+  templateUrl: './my-models.component.html',
+  styleUrls: ['./my-models.component.css']
+})
+export class MyModelsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.css b/frontend/src/app/_pages/my-predictors/my-predictors.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.css
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
new file mode 100644
index 00000000..32d085af
--- /dev/null
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
@@ -0,0 +1 @@
+<p>my-predictors works!</p>
diff --git a/frontend/src/app/_pages/register-page/register-page.component.spec.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts
index 347fe9f4..37dddf6d 100644
--- a/frontend/src/app/_pages/register-page/register-page.component.spec.ts
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RegisterPageComponent } from './register-page.component';
+import { MyPredictorsComponent } from './my-predictors.component';
 
-describe('RegisterPageComponent', () => {
-  let component: RegisterPageComponent;
-  let fixture: ComponentFixture<RegisterPageComponent>;
+describe('MyPredictorsComponent', () => {
+  let component: MyPredictorsComponent;
+  let fixture: ComponentFixture<MyPredictorsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RegisterPageComponent ]
+      declarations: [ MyPredictorsComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RegisterPageComponent);
+    fixture = TestBed.createComponent(MyPredictorsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
new file mode 100644
index 00000000..b0d6e9dd
--- /dev/null
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-my-predictors',
+  templateUrl: './my-predictors.component.html',
+  styleUrls: ['./my-predictors.component.css']
+})
+export class MyPredictorsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.html b/frontend/src/app/_pages/only-authorized/only-authorized.component.html
deleted file mode 100644
index 27bbcf09..00000000
--- a/frontend/src/app/_pages/only-authorized/only-authorized.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>only-authorized works!</p>
diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.ts b/frontend/src/app/_pages/only-authorized/only-authorized.component.ts
deleted file mode 100644
index be88365f..00000000
--- a/frontend/src/app/_pages/only-authorized/only-authorized.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-only-authorized',
-  templateUrl: './only-authorized.component.html',
-  styleUrls: ['./only-authorized.component.css']
-})
-export class OnlyAuthorizedComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/frontend/src/app/_pages/predict/predict.component.css b/frontend/src/app/_pages/predict/predict.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/predict/predict.component.css
diff --git a/frontend/src/app/_pages/predict/predict.component.html b/frontend/src/app/_pages/predict/predict.component.html
new file mode 100644
index 00000000..74a83b71
--- /dev/null
+++ b/frontend/src/app/_pages/predict/predict.component.html
@@ -0,0 +1 @@
+<p>predict works!</p>
diff --git a/frontend/src/app/_pages/predict/predict.component.spec.ts b/frontend/src/app/_pages/predict/predict.component.spec.ts
new file mode 100644
index 00000000..65871ecc
--- /dev/null
+++ b/frontend/src/app/_pages/predict/predict.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PredictComponent } from './predict.component';
+
+describe('PredictComponent', () => {
+  let component: PredictComponent;
+  let fixture: ComponentFixture<PredictComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PredictComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PredictComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/predict/predict.component.ts b/frontend/src/app/_pages/predict/predict.component.ts
new file mode 100644
index 00000000..0e313c65
--- /dev/null
+++ b/frontend/src/app/_pages/predict/predict.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-predict',
+  templateUrl: './predict.component.html',
+  styleUrls: ['./predict.component.css']
+})
+export class PredictComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css
new file mode 100644
index 00000000..5565d105
--- /dev/null
+++ b/frontend/src/app/_pages/profile/profile.component.css
@@ -0,0 +1,44 @@
+body{margin-top:20px;
+background-color:#f2f6fc;
+color:#69707a;
+}
+.img-account-profile {
+    height: 10rem;
+    border: 1px solid lightgray;
+}
+.rounded-circle {
+    border-radius: 50% !important;
+}
+.card .card-header {
+    font-weight: 500;
+}
+.card-header:first-child {
+    border-radius: 0.35rem 0.35rem 0 0;
+}
+.card-header {
+    padding: 1rem 1.35rem;
+    margin-bottom: 0;
+    background-color: rgba(33, 40, 50, 0.03);
+    border-bottom: 1px solid rgba(33, 40, 50, 0.125);
+}
+.form-control, .dataTable-input {
+    display: block;
+    width: 100%;
+    padding: 0.875rem 1.125rem;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1;
+    color: #69707a;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #c5ccd6;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 0.35rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.selectedPicture {
+    border: 2px solid darkgray;
+}
diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html
new file mode 100644
index 00000000..d082a003
--- /dev/null
+++ b/frontend/src/app/_pages/profile/profile.component.html
@@ -0,0 +1,137 @@
+<div class="container-xl px-4 mt-1">
+    <hr class="mt-0 mb-4">
+
+    <div class="row">
+        <div class="col-xl-4">
+            <!-- Profile picture card-->
+            <div class="card mb-4 mb-xl-0">
+                <div class="card-header">Moj profil</div>
+                <div class="card-body text-center">
+                    <div class=" image d-flex flex-column justify-content-center align-items-center">
+                        <!-- Profile picture image-->
+                        <img class="img-account-profile rounded-circle mb-2" src="{{this.photoPath}}" alt="profilePicture">
+                        <!-- User's info -->
+                        <span>@ {{this.user.username}}</span>
+                        <span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span> 
+                    </div>
+                </div>
+            </div>
+
+            <!-- Password Change card -->
+            <div class="card mt-3">
+                <div class="card-header">Promena lozinke</div>
+                <div class="card-body">
+                    <form>
+                        <div class="row">
+                            <!-- Form Row-->
+                            <div class="row gx-3 mb-3">
+                                <!-- Form Group (password)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputPassword">Važeća lozinka</label>
+                                    <input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka">
+                                    <small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small>
+                                </div>
+                                <!-- Form Group (new password)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputNewPassword">Nova lozinka</label>
+                                    <input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku">
+                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
+                                </div>
+                            </div>
+    
+                            <!-- Form Row-->
+                            <div class="row gx-3 mb-3">
+                                <div class="col-md-6">
+                                    <div class="col text-center">
+                                        <!-- Save changes button-->
+                                        <button class="btn btn-primary text-center mt-4" type="button" (click)="savePasswordChanges()">Promeni lozinku</button>
+                                    </div>
+                                </div>
+                                <!-- Form Group (new password again)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label>
+                                    <input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku">
+                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <!-- Info Change card -->
+        <div class="col-xl-8">
+            <!-- Account details card-->
+            <div class="card mb-4">
+                <div class="card-header">Osnovni podaci</div>
+                <div class="card-body">
+                    <form>
+                        <!-- Form Row-->
+                        <div class="row gx-3 mb-3">
+                            <!-- Form Group (username)-->
+                            <div class="col-md-6">
+                                <label class="small mb-1" for="inputUsername">Korisničko ime (kako će ostali korisnici videti tvoje ime)</label>
+                                <input class="form-control" id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username">
+                            </div>
+                            <!-- Form Group (email address)-->
+                            <div class="col-md-6">
+                                <label class="small mb-1" for="inputEmailAddress">Email adresa</label>
+                                <input class="form-control" id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email">
+                            </div>
+                        </div>
+
+                        <!-- Form Row-->
+                        <div class="row gx-3 mb-3">
+                            <!-- Form Group (first name)-->
+                            <div class="col-md-6">
+                                <label class="small mb-1" for="inputFirstName">Ime</label>
+                                <input class="form-control" id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName">
+                            </div>
+                            <!-- Form Group (last name)-->
+                            <div class="col-md-6">
+                                <label class="small mb-1" for="inputLastName">Prezime</label>
+                                <input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="small mt-2 mb-3">Kliknite na sliku kako biste je odabrali za profilnu:</label>
+                            
+                            <div class="container">
+                                <div class="card-group">
+                                    <!--bootstrap card with 3 horizontal images-->
+                                    <div class="row overflow-auto" style="max-height: 200px;">
+                                        <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()"
+                                            [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
+                                            <img src="{{picture.path}}">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="row mt-5">
+                            <div class="col text-center">
+                                <!-- Save changes button-->
+                                <button class="btn btn-primary text-center" type="button" (click)="saveInfoChanges()">Sačuvaj izmene</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="row">
+        <div class="col-xl-4">
+            
+        </div>
+    </div>
+
+
+
+
+
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/profile/profile.component.spec.ts b/frontend/src/app/_pages/profile/profile.component.spec.ts
new file mode 100644
index 00000000..e88012e7
--- /dev/null
+++ b/frontend/src/app/_pages/profile/profile.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts
new file mode 100644
index 00000000..3e9a0d11
--- /dev/null
+++ b/frontend/src/app/_pages/profile/profile.component.ts
@@ -0,0 +1,165 @@
+import { Component, OnInit } from '@angular/core';
+import User from 'src/app/_data/User';
+import { UserInfoService } from 'src/app/_services/user-info.service';
+import { AuthService } from 'src/app/_services/auth.service';
+import { Router } from '@angular/router';
+import { PICTURES } from 'src/app/_data/ProfilePictures';
+import { Picture } from 'src/app/_data/ProfilePictures';
+import shared from '../../Shared';
+
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  user: User = new User();
+  pictures: Picture[] = PICTURES;
+
+  username: string = '';
+  email: string = '';
+  firstName : string = '';
+  lastName : string = '';
+  oldPass: string = '';
+  newPass1: string = '';
+  newPass2: string = '';
+  photoId: string = '';
+  photoPath: string = '';
+
+  wrongPassBool: boolean = false;
+  wrongNewPassBool: boolean = false;
+
+  wrongFirstNameBool: boolean = false;
+  wrongLastNameBool: boolean = false;
+  wrongUsernameBool: boolean = false;
+  wrongEmailBool: boolean = false;
+  wrongOldPassBool: boolean = false;
+  wrongNewPass1Bool: boolean = false;
+  wrongNewPass2Bool: boolean = false;
+
+  pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/;
+  pattUsername: RegExp = /^[a-zA-Z0-9]{6,18}$/;
+  pattTwoSpaces: RegExp = /  /;
+  pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/;
+  pattPassword: RegExp = /.{6,30}$/;
+
+
+  constructor(private userInfoService: UserInfoService, private authService: AuthService, private router: Router) { }
+
+  ngOnInit(): void {
+    this.userInfoService.getUserInfo().subscribe((response) => {
+
+      this.user = response;
+      shared.photoId = this.user.photoId;
+
+      this.username = this.user.username;
+      this.email = this.user.email;
+      this.firstName = this.user.firstName;
+      this.lastName = this.user.lastName;
+      this.photoId = this.user.photoId;
+
+      for (let i = 0; i < this.pictures.length; i++) {
+        if (this.pictures[i].photoId.toString() === this.photoId) {
+          this.photoPath = this.pictures[i].path;
+          break;
+        }
+      }
+      console.log(this.user);
+    });
+  }
+
+  saveInfoChanges() {
+    let editedUser: User = {
+      _id: this.user._id,
+      username: this.username,
+      email: this.email,
+      password: this.user.password,
+      firstName: this.firstName,
+      lastName: this.lastName,
+      photoId: this.photoId
+    }
+
+    this.userInfoService.changeUserInfo(editedUser).subscribe((response: any) =>{
+      if (this.user.username != editedUser.username) { //promenio username, ide logout
+        this.user = editedUser;
+        alert("Nakon promene korisničkog imena, moraćete ponovo da se ulogujete.");
+        this.authService.logOut();
+        this.router.navigate(['']);
+        return;
+      }
+      this.user = editedUser;
+      console.log(this.user);
+      this.resetInfo();
+    }, (error: any) =>{
+      if (error.error == "Username already exists!") {
+        alert("Ukucano korisničko ime je već zauzeto!\nIzaberite neko drugo.");
+        (<HTMLSelectElement>document.getElementById("inputUsername")).focus();
+        //poruka obavestenja ispod inputa
+        this.resetInfo();
+      }
+    });
+  }
+
+  savePasswordChanges() {
+    if (this.newPass1 == '' && this.newPass2 == '') //ne zeli da promeni lozinku
+      return;
+    console.log("zeli da promeni lozinku");
+
+    if (this.newPass1 != this.newPass2) { //netacno ponovio novu lozinku
+      this.wrongNewPassBool = true;
+      this.resetNewPassInputs();
+      console.log("Netacno ponovljena lozinka");
+      return;
+    }
+
+    this.wrongPassBool = false;
+    this.wrongNewPassBool = false;
+
+    let passwordArray: string[] = [this.oldPass, this.newPass1];
+    this.userInfoService.changeUserPassword(passwordArray).subscribe((response: any) => {
+      console.log("PROMENIO LOZINKU");
+      this.resetNewPassInputs();
+      alert("Nakon promene lozinke, moraćete ponovo da se ulogujete.");
+      this.authService.logOut();
+      this.router.navigate(['']);
+    }, (error: any) => {
+      console.log("error poruka: ", error.error);
+      if (error.error == 'Wrong old password!') {
+        this.wrongPassBool = true;
+        (<HTMLSelectElement>document.getElementById("inputPassword")).focus();
+        return;
+      }
+      else if (error.error == 'Identical password!') {
+        alert("Stara i nova lozinka su identične.");
+        this.resetNewPassInputs();
+        (<HTMLSelectElement>document.getElementById("inputNewPassword")).focus();
+        return;
+      }
+    });
+  }
+
+  resetNewPassInputs() {
+    this.newPass1 = '';
+    this.newPass2 = '';
+  }
+
+  resetInfo() {
+    this.username = this.user.username;
+    this.email = this.user.email;
+    this.firstName = this.user.firstName;
+    this.lastName = this.user.lastName;
+    this.photoId = this.user.photoId;
+
+    for (let i = 0; i < this.pictures.length; i++) {
+      if (this.pictures[i].photoId.toString() === this.photoId) {
+        this.photoPath = this.pictures[i].path;
+        break;
+      }
+    }
+    shared.photoId = this.photoId;
+  }
+  
+
+}
diff --git a/frontend/src/app/_pages/register-page/register-page.component.html b/frontend/src/app/_pages/register-page/register-page.component.html
deleted file mode 100644
index f8ae046e..00000000
--- a/frontend/src/app/_pages/register-page/register-page.component.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<div style="min-height: 100vh; position: relative;">
-    
-    <!-- TODO <app-navbar [activeNav]="'register'"></app-navbar>-->
-    
-    <div class="container" style="margin-top: 50px;">
-        <div class="text-black">
-          <div class="row justify-content-center">
-            <div class="col-8 bg-white border rounded-3 shadow-sm p-5">
-              <p class="text-center h2 fw-bold mb-5 mx-1 mx-md-4">Registracija</p>
-      
-              <form class="mx-1 mx-md-4">
-                <!--Ime-->
-                <div class="row">
-                    <div class="col-6 p-2">
-                        <label class="form-label" for="firstName">Ime</label>
-                        <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName" name="firstName">
-                        <p *ngIf="wrongFirstNameBool" class="small fw-bold text-danger">Unesite ispravno ime. (minimum 1, maksimum 30 karaktera)</p>
-                    </div>
-                    <!--Prezime-->
-                    <div class="col-6 p-2">
-                        <label class="form-label" for="lastName">Prezime</label>
-                        <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName" />
-                        <p *ngIf="wrongLastNameBool" class="small fw-bold text-danger">Unesite ispravno prezime. (minimum 1, maksimum 30 karaktera)</p>
-                    </div>
-                </div>
-                <br>
-      
-                <div class="row">
-                    <!--Korisnicko ime-->
-                    <div class="col-6 p-2">
-                        <label class="form-label" for="nickName">Korisničko ime</label>
-                        <input type="text" id="nickName" class="form-control" [(ngModel)]="nickName" name="nickName" />
-                        <p *ngIf="wrongNickNameBool" class="small fw-bold text-danger">Unesite ispravno korisničko ime.</p>
-                    </div>
-                    <!--Email-->
-                    <div class="col-6 p-2">
-                        <label class="form-label" for="email">E-mail adresa</label>
-                        <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email" />
-                        <p *ngIf="wrongEmailBool" class="small fw-bold text-danger">Unesite ispravnu e-mail adresu.</p>
-                    </div>
-                </div>
-                <br>
-      
-                <div class="row">
-                    <!-- Lozinka 1. -->
-                    <div class="col-6 p-2">
-                        <label class="form-label" for="pass1">Lozinka</label>
-                        <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1" />
-                        <p *ngIf="wrongPass1Bool" class="small fw-bold text-danger">Lozinka se mora sastojati od najmanje 6 karaktera.</p>
-                    </div>
-      
-                    <!-- Lozinka 2. -->
-                    <div class="col-6 p-2">
-                        <label class="form-label" for="pass2">Potvrdite lozinku</label>
-                        <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2" />
-                        <p *ngIf="wrongPass2Bool" class="small fw-bold text-danger">Lozinke se ne podudaraju.</p>
-                    </div>
-                </div>
-      
-                <br><br><br>
-                <!--Dugme Registruj se-->
-                <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
-                    <button type="button" class="btn btn-primary btn-lg" (click)="validation()">Registrujte se</button>
-                </div>
-      
-                <div class="form-check d-flex justify-content-center mb-5">
-                  <label class="form-check-label" class="small fw-bold mt-2 pt-1 mb-0" for="form2Example3">
-                    Već imate kreiran nalog?
-                    <a routerLink="/login" class="link-danger">Prijavite se</a>
-                  </label>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    
-    <!-- TODO <app-footer></app-footer> -->
-
-</div>
-\ No newline at end of file
diff --git a/frontend/src/app/_pages/settings/settings.component.css b/frontend/src/app/_pages/settings/settings.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/settings/settings.component.css
diff --git a/frontend/src/app/_pages/settings/settings.component.html b/frontend/src/app/_pages/settings/settings.component.html
new file mode 100644
index 00000000..4ab2a415
--- /dev/null
+++ b/frontend/src/app/_pages/settings/settings.component.html
@@ -0,0 +1 @@
+<p>settings works!</p>
diff --git a/frontend/src/app/_pages/settings/settings.component.spec.ts b/frontend/src/app/_pages/settings/settings.component.spec.ts
new file mode 100644
index 00000000..a3a508b0
--- /dev/null
+++ b/frontend/src/app/_pages/settings/settings.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SettingsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/settings/settings.component.ts b/frontend/src/app/_pages/settings/settings.component.ts
new file mode 100644
index 00000000..19862fb0
--- /dev/null
+++ b/frontend/src/app/_pages/settings/settings.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.css']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_services/auth-guard.service.ts b/frontend/src/app/_services/auth-guard.service.ts
index b6d3678d..057996e0 100644
--- a/frontend/src/app/_services/auth-guard.service.ts
+++ b/frontend/src/app/_services/auth-guard.service.ts
@@ -15,7 +15,7 @@ export class AuthGuardService implements CanActivate {
     if (this.auth.isAuthenticated()) {
       return true;
     }
-    this.router.navigate(['login']);
+    this.router.navigate(['']);
     return false;
   }
 }
diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts
index c96c2dae..449b8802 100644
--- a/frontend/src/app/_services/auth.service.ts
+++ b/frontend/src/app/_services/auth.service.ts
@@ -3,6 +3,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { CookieService } from 'ngx-cookie-service';
 import { API_SETTINGS } from 'src/config';
+import shared from '../Shared';
 
 const jwtHelper = new JwtHelperService();
 
@@ -11,6 +12,8 @@ const jwtHelper = new JwtHelperService();
 })
 export class AuthService {
 
+  shared = shared;
+
   constructor(private http: HttpClient, private cookie: CookieService) { }
 
   login(username: string, password: string) {
@@ -28,4 +31,52 @@ export class AuthService {
     }
     return false;
   }
+
+  lastToken?: string;
+  refresher: any;
+
+  enableAutoRefresh() {
+    this.lastToken = this.cookie.get('token');
+    let exp = jwtHelper.getTokenExpirationDate(this.lastToken);
+    if (!exp) {
+      exp = new Date();
+    }
+    this.refresher = setTimeout(() => {
+      console.log('refreshing token!');
+      this.http.post(`${API_SETTINGS.apiURL}/auth/renewJwt`, {}, { headers: this.authHeader(), responseType: 'text' }).subscribe((response) => {
+        this.authenticate(response);
+      });
+    }, exp.getTime() - new Date().getTime() - 60000);
+  }
+
+  authenticate(token: string) {
+    let exp = jwtHelper.getTokenExpirationDate(token);
+    if (!exp) {
+      exp = new Date();
+    }
+    this.cookie.set('token', token, exp);
+    this.updateUser();
+  }
+
+  updateUser() {
+    if (this.cookie.check('token')) {
+      const token = this.cookie.get('token');
+      const decodedToken = jwtHelper.decodeToken(token);
+      console.log("decoded:", decodedToken);
+      this.shared.loggedIn = this.isAuthenticated();
+      this.shared.username = decodedToken.name;
+      this.enableAutoRefresh();
+    }
+  }
+
+  logOut() {
+    this.cookie.delete('token');
+    if (this.refresher)
+      clearTimeout(this.refresher);
+    this.shared.loggedIn = false;
+  }
+
+  authHeader() {
+    return new HttpHeaders().set("Authorization", "Bearer " + this.cookie.get('token'));
+  }
 }
diff --git a/frontend/src/app/_services/csv-parse.service.spec.ts b/frontend/src/app/_services/csv-parse.service.spec.ts
new file mode 100644
index 00000000..ab685d49
--- /dev/null
+++ b/frontend/src/app/_services/csv-parse.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CsvParseService } from './csv-parse.service';
+
+describe('CsvParseService', () => {
+  let service: CsvParseService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CsvParseService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_services/csv-parse.service.ts b/frontend/src/app/_services/csv-parse.service.ts
new file mode 100644
index 00000000..d53f504e
--- /dev/null
+++ b/frontend/src/app/_services/csv-parse.service.ts
@@ -0,0 +1,53 @@
+import { Injectable } from "@angular/core";
+@Injectable({ providedIn: 'root' })
+export class CsvParseService {
+
+  csvToArray(strData: string, strDelimiter: string): string[][] {
+    strDelimiter = (strDelimiter || ",");
+
+    let objPattern = new RegExp(
+      (
+        // Delimiters.
+        "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
+
+        // Quoted fields.
+        "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
+
+        // Standard fields.
+        "([^\"\\" + strDelimiter + "\\r\\n]*))"
+      ),
+      "gi"
+    );
+
+    let arrData: string[][] = [[]];
+
+    let arrMatches = null;
+
+    while (arrMatches = objPattern.exec(strData)) {
+
+      let strMatchedDelimiter = arrMatches[1];
+
+      if (
+        strMatchedDelimiter.length &&
+        strMatchedDelimiter !== strDelimiter
+      ) {
+        arrData.push([]);
+      }
+
+      let strMatchedValue;
+
+      if (arrMatches[2]) {
+        strMatchedValue = arrMatches[2].replace(
+          new RegExp("\"\"", "g"),
+          "\""
+        );
+      } else {
+        strMatchedValue = arrMatches[3];
+      }
+
+      arrData[arrData.length - 1].push(strMatchedValue);
+    }
+
+    return (arrData);
+  }
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_services/datasets.service.spec.ts b/frontend/src/app/_services/datasets.service.spec.ts
new file mode 100644
index 00000000..87b46acd
--- /dev/null
+++ b/frontend/src/app/_services/datasets.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DatasetsService } from './datasets.service';
+
+describe('DatasetsService', () => {
+  let service: DatasetsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DatasetsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
new file mode 100644
index 00000000..35ca24e5
--- /dev/null
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -0,0 +1,26 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { API_SETTINGS } from 'src/config';
+import Dataset from '../_data/Dataset';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DatasetsService {
+
+  constructor(private http: HttpClient, private authService: AuthService) { }
+
+  getPublicDatasets(): Observable<Dataset[]> {
+    return this.http.get<Dataset[]>(`${API_SETTINGS.apiURL}/dataset/publicdatasets`, { headers: this.authService.authHeader() });
+  }
+
+  addDataset(dataset: Dataset): any {
+    return this.http.post(`${API_SETTINGS.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader() });
+  }
+
+  getDatasetFile(fileId: any): any {
+    return this.http.get(`${API_SETTINGS.apiURL}/file/download?id=${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
+}
diff --git a/frontend/src/app/_services/models.service.spec.ts b/frontend/src/app/_services/models.service.spec.ts
new file mode 100644
index 00000000..b5b25752
--- /dev/null
+++ b/frontend/src/app/_services/models.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ModelsService } from './models.service';
+
+describe('ModelsService', () => {
+  let service: ModelsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ModelsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
new file mode 100644
index 00000000..f629fd2a
--- /dev/null
+++ b/frontend/src/app/_services/models.service.ts
@@ -0,0 +1,45 @@
+import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import Model from '../_data/Model';
+import { AuthService } from './auth.service';
+import { API_SETTINGS } from 'src/config';
+import Dataset from '../_data/Dataset';
+import { Observable } from 'rxjs';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModelsService {
+
+  constructor(private http: HttpClient, private authService: AuthService) { }
+
+  uploadData(file: File): Observable<any> {
+    let formData = new FormData();
+    formData.append('file', file, file.name);
+
+    let params = new HttpParams();
+
+    const options = {
+      params: params,
+      reportProgress: false,
+      headers: this.authService.authHeader()
+    };
+
+    return this.http.post(`${API_SETTINGS.apiURL}/file/csv`, formData, options);
+  }
+
+  addModel(model: Model): Observable<any> {
+    return this.http.post(`${API_SETTINGS.apiURL}/model/add`, model, { headers: this.authService.authHeader() });
+  }
+  addDataset(dataset: Dataset): Observable<any> {
+    return this.http.post(`${API_SETTINGS.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader() });
+  }
+  trainModel(modelId: string): Observable<any> {
+    return this.http.post(`${API_SETTINGS.apiURL}/model/train`, modelId, { headers: this.authService.authHeader() });
+  }
+
+  getMyDatasets(): Observable<Dataset[]> {
+    return this.http.get<Dataset[]>(`${API_SETTINGS.apiURL}/dataset/mydatasets`, { headers: this.authService.authHeader() });
+  }
+}
diff --git a/frontend/src/app/_services/predictors.service.spec.ts b/frontend/src/app/_services/predictors.service.spec.ts
new file mode 100644
index 00000000..7733780b
--- /dev/null
+++ b/frontend/src/app/_services/predictors.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PredictorsService } from './predictors.service';
+
+describe('PredictorsService', () => {
+  let service: PredictorsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PredictorsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts
new file mode 100644
index 00000000..0cd7f0f6
--- /dev/null
+++ b/frontend/src/app/_services/predictors.service.ts
@@ -0,0 +1,21 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { API_SETTINGS } from 'src/config';
+import Predictor from '../_data/Predictor';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PredictorsService {
+
+
+
+  constructor(private http: HttpClient, private authService: AuthService) { }
+
+  getPublicPredictors(): Observable<Predictor[]> {
+    return this.http.get<Predictor[]>(`${API_SETTINGS.apiURL}/Predictor/publicpredictors`, { headers: this.authService.authHeader() });
+  }
+
+}
diff --git a/frontend/src/app/_services/user-info.service.spec.ts b/frontend/src/app/_services/user-info.service.spec.ts
new file mode 100644
index 00000000..a181223a
--- /dev/null
+++ b/frontend/src/app/_services/user-info.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserInfoService } from './user-info.service';
+
+describe('UserInfoService', () => {
+  let service: UserInfoService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserInfoService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_services/user-info.service.ts b/frontend/src/app/_services/user-info.service.ts
new file mode 100644
index 00000000..7ed2970c
--- /dev/null
+++ b/frontend/src/app/_services/user-info.service.ts
@@ -0,0 +1,30 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { API_SETTINGS } from 'src/config';
+import User from '../_data/User';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserInfoService {
+
+  constructor(private http: HttpClient, private authService: AuthService) { }
+
+  getUserInfo(): Observable<User> {
+    return this.http.get<User>(`${API_SETTINGS.apiURL}/user/myprofile`, { headers: this.authService.authHeader() });
+  }
+
+  changeUserInfo(user: User): any {
+    return this.http.put(`${API_SETTINGS.apiURL}/user/changeinfo`, user, { headers: this.authService.authHeader() });
+  }
+
+  changeUserPassword(passwordArray: string[]): any {
+    return this.http.put(`${API_SETTINGS.apiURL}/user/changepass`, passwordArray, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
+
+  deleteUser(): any {
+    return this.http.delete(`${API_SETTINGS.apiURL}/user/deleteprofile`, { headers: this.authService.authHeader() });
+  }
+}
diff --git a/frontend/src/app/_services/web-socket.service.spec.ts b/frontend/src/app/_services/web-socket.service.spec.ts
new file mode 100644
index 00000000..a86aeca7
--- /dev/null
+++ b/frontend/src/app/_services/web-socket.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { WebSocketService } from './web-socket.service';
+
+describe('WebSocketService', () => {
+  let service: WebSocketService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(WebSocketService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_services/web-socket.service.ts b/frontend/src/app/_services/web-socket.service.ts
new file mode 100644
index 00000000..890ada6b
--- /dev/null
+++ b/frontend/src/app/_services/web-socket.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { ConstantBackoff, Websocket, WebsocketBuilder } from 'websocket-ts';
+import { API_SETTINGS } from 'src/config';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WebSocketService {
+
+  ws?: Websocket;
+
+  private handlers: Function[] = [];
+
+  constructor() {
+    this.ws = new WebsocketBuilder(API_SETTINGS.apiWSUrl)
+      .withBackoff(new ConstantBackoff(30000))
+      .onOpen((i, e) => { console.log('WS: Connected to ' + API_SETTINGS.apiWSUrl) })
+      .onMessage((i, e) => {
+        console.log('WS MESSAGE: ', e.data);
+        this.handlers.forEach(handler => {
+          handler(e.data);
+        })
+      })
+      .onClose((i, e) => { console.log('WS: Connection closed!') })
+      .build();
+  }
+
+  send(msg: string) {
+    this.ws?.send(msg);
+  }
+
+  addHandler(handler: Function) {
+    this.handlers.push(handler);
+  }
+
+  removeHandler(handler: Function) {
+    this.handlers.splice(this.handlers.indexOf(handler), 1);
+  }
+}
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index cd86ef5c..1c368318 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -2,19 +2,29 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { AuthGuardService } from './_services/auth-guard.service';
-import { LoginPageComponent } from './_pages/login-page/login-page.component';
-import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component';
-import { RegisterPageComponent } from './_pages/register-page/register-page.component';
 import { AddModelComponent } from './_pages/add-model/add-model.component';
-import { LoginModalComponent } from './_modals/login-modal/login-modal.component';
+import { HomeComponent } from './_pages/home/home.component';
+import { MyDatasetsComponent } from './_pages/my-datasets/my-datasets.component';
+import { MyModelsComponent } from './_pages/my-models/my-models.component';
+import { MyPredictorsComponent } from './_pages/my-predictors/my-predictors.component';
+import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-predictors.component';
+import { BrowseDatasetsComponent } from './_pages/browse-datasets/browse-datasets.component';
+import { SettingsComponent } from './_pages/settings/settings.component';
+import { ProfileComponent } from './_pages/profile/profile.component';
+import { PredictComponent } from './_pages/predict/predict.component';
+import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/login', pathMatch: 'full' },
-  { path: 'login', component: LoginPageComponent },
-  { path: 'register', component: RegisterPageComponent },
-  { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] },
-  { path: 'add-model', component: AddModelComponent },
-  { path: 'login-modal-test', component: LoginModalComponent }
+  { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
+  { path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },
+  { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } },
+  { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } },
+  { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService], data: { title: 'Moji trenirani modeli' } },
+  { path: 'settings', component: SettingsComponent, canActivate: [AuthGuardService], data: { title: 'Podešavanja' } },
+  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } },
+  { path: 'browse-datasets', component: FilterDatasetsComponent, data: { title: 'Javni izvori podataka' } },
+  { path: 'browse-predictors', component: BrowsePredictorsComponent, data: { title: 'Javni trenirani modeli' } },
+  { path: 'predict', component: PredictComponent, data: { title: 'Predvidi vrednosti' } }
 ];
 
 @NgModule({
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 90c6b646..f44a6d00 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1 +1,7 @@
-<router-outlet></router-outlet>
-\ No newline at end of file
+<app-navbar></app-navbar>
+<div class="container h-100">
+    <router-outlet></router-outlet>
+    <!--<app-barchart></app-barchart>
+    <app-scatterchart></app-scatterchart>-->
+</div>
+<app-notifications></app-notifications>
+\ No newline at end of file
diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts
index 74b5b3eb..d0679f89 100644
--- a/frontend/src/app/app.component.spec.ts
+++ b/frontend/src/app/app.component.spec.ts
@@ -20,12 +20,6 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'frontend'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('frontend');
-  });
-
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 9d6b2f11..f5ae5786 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,10 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { filter, map } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'frontend';
+export class AppComponent implements OnInit {
+
+  constructor(private router: Router, private titleService: Title) { }
+
+  ngOnInit() {
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        map(() => {
+          let route: ActivatedRoute = this.router.routerState.root;
+          let routeTitle = '';
+          while (route!.firstChild) {
+            route = route.firstChild;
+          }
+          if (route.snapshot.data['title']) {
+            routeTitle = route!.snapshot.data['title'];
+          }
+          return routeTitle;
+        })
+      )
+      .subscribe((title: string) => {
+        if (title) {
+          this.titleService.setTitle(`${title} - Igrannonica`);
+        }
+      });
+  }
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index d95252ad..4612e3a7 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -3,29 +3,65 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatIconModule } from '@angular/material/icon';
 
+import { NgChartsModule } from 'ng2-charts';
+import { Ng2SearchPipeModule } from 'ng2-search-filter';
 import { AppComponent } from './app.component';
-import { LoginPageComponent } from './_pages/login-page/login-page.component';
-import { RegisterPageComponent } from './_pages/register-page/register-page.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component';
 import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component';
 import { AddModelComponent } from './_pages/add-model/add-model.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoginModalComponent } from './_modals/login-modal/login-modal.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RegisterModalComponent } from './_modals/register-modal/register-modal.component';
 
 import { MaterialModule } from './material.module';
-import { ReactiveFormsModule } from '@angular/forms';
+import { HomeComponent } from './_pages/home/home.component';
+import { NavbarComponent } from './_elements/navbar/navbar.component';
+import { ItemPredictorComponent } from './_elements/item-predictor/item-predictor.component';
+import { ItemDatasetComponent } from './_elements/item-dataset/item-dataset.component';
+import { CarouselComponent } from './_elements/carousel/carousel.component';
+import { SettingsComponent } from './_pages/settings/settings.component';
+import { ProfileComponent } from './_pages/profile/profile.component';
+import { MyPredictorsComponent } from './_pages/my-predictors/my-predictors.component';
+import { MyDatasetsComponent } from './_pages/my-datasets/my-datasets.component';
+import { MyModelsComponent } from './_pages/my-models/my-models.component';
+import { BrowseDatasetsComponent } from './_pages/browse-datasets/browse-datasets.component';
+import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-predictors.component';
+import { PredictComponent } from './_pages/predict/predict.component';
+import { ScatterchartComponent } from './scatterchart/scatterchart.component';
+import { BarchartComponent } from './barchart/barchart.component';
+import { NotificationsComponent } from './_elements/notifications/notifications.component';
+import { DatatableComponent } from './_elements/datatable/datatable.component';
+import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    LoginPageComponent,
-    RegisterPageComponent,
-    OnlyAuthorizedComponent,
     DatasetLoadComponent,
     AddModelComponent,
-    LoginModalComponent
+    LoginModalComponent,
+    RegisterModalComponent,
+    HomeComponent,
+    NavbarComponent,
+    ItemPredictorComponent,
+    ItemDatasetComponent,
+    CarouselComponent,
+    SettingsComponent,
+    ProfileComponent,
+    MyPredictorsComponent,
+    MyDatasetsComponent,
+    MyModelsComponent,
+    BrowseDatasetsComponent,
+    BrowsePredictorsComponent,
+    PredictComponent,
+    ScatterchartComponent,
+    BarchartComponent,
+    NotificationsComponent,
+    DatatableComponent,
+    FilterDatasetsComponent
   ],
   imports: [
     BrowserModule,
@@ -35,7 +71,11 @@ import { ReactiveFormsModule } from '@angular/forms';
     NgbModule,
     BrowserAnimationsModule,
     MaterialModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    MatSliderModule,
+    MatIconModule,
+    NgChartsModule,
+    Ng2SearchPipeModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/frontend/src/app/barchart/barchart.component.css b/frontend/src/app/barchart/barchart.component.css
new file mode 100644
index 00000000..c3634c9f
--- /dev/null
+++ b/frontend/src/app/barchart/barchart.component.css
@@ -0,0 +1,6 @@
+#divBarChart{
+    background-color: beige;
+    display: block;
+    width: 400px;
+    height: 200px;   
+}
diff --git a/frontend/src/app/barchart/barchart.component.html b/frontend/src/app/barchart/barchart.component.html
new file mode 100644
index 00000000..48b7bd3e
--- /dev/null
+++ b/frontend/src/app/barchart/barchart.component.html
@@ -0,0 +1,4 @@
+<p>Bar chart:</p>
+<div id="divBarChart">
+    <canvas id="Barchart"> </canvas>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/barchart/barchart.component.spec.ts b/frontend/src/app/barchart/barchart.component.spec.ts
new file mode 100644
index 00000000..8b346d1c
--- /dev/null
+++ b/frontend/src/app/barchart/barchart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarchartComponent } from './barchart.component';
+
+describe('BarchartComponent', () => {
+  let component: BarchartComponent;
+  let fixture: ComponentFixture<BarchartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BarchartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BarchartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/barchart/barchart.component.ts b/frontend/src/app/barchart/barchart.component.ts
new file mode 100644
index 00000000..def64b7d
--- /dev/null
+++ b/frontend/src/app/barchart/barchart.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-barchart',
+  templateUrl: './barchart.component.html',
+  styleUrls: ['./barchart.component.css']
+})
+export class BarchartComponent implements OnInit {
+
+  constructor() { }
+
+    ngOnInit(){
+      const myChart = new Chart("Barchart", {
+        type: 'bar',
+        data: {
+            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            datasets: [{
+                label: 'Number of Votes',
+                data: [12, 19, 3, 5, 2, 3],
+                backgroundColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+
+        
+    });
+
+    
+  }
+
+}
diff --git a/frontend/src/app/scatterchart/scatterchart.component.css b/frontend/src/app/scatterchart/scatterchart.component.css
new file mode 100644
index 00000000..5735217e
--- /dev/null
+++ b/frontend/src/app/scatterchart/scatterchart.component.css
@@ -0,0 +1,6 @@
+#divScatterChart{
+    background-color: beige;
+    display: block;
+    width: 400px;
+    height: 200px;   
+}
+\ No newline at end of file
diff --git a/frontend/src/app/scatterchart/scatterchart.component.html b/frontend/src/app/scatterchart/scatterchart.component.html
new file mode 100644
index 00000000..2b30fe1f
--- /dev/null
+++ b/frontend/src/app/scatterchart/scatterchart.component.html
@@ -0,0 +1,4 @@
+<p>Scatter chart:</p>
+<div id="divScatterChart">
+    <canvas id="ScatterCharts"> </canvas>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/scatterchart/scatterchart.component.spec.ts b/frontend/src/app/scatterchart/scatterchart.component.spec.ts
new file mode 100644
index 00000000..1db81051
--- /dev/null
+++ b/frontend/src/app/scatterchart/scatterchart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScatterchartComponent } from './scatterchart.component';
+
+describe('ScatterchartComponent', () => {
+  let component: ScatterchartComponent;
+  let fixture: ComponentFixture<ScatterchartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ScatterchartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScatterchartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/scatterchart/scatterchart.component.ts b/frontend/src/app/scatterchart/scatterchart.component.ts
new file mode 100644
index 00000000..1da88fe7
--- /dev/null
+++ b/frontend/src/app/scatterchart/scatterchart.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-scatterchart',
+  templateUrl: './scatterchart.component.html',
+  styleUrls: ['./scatterchart.component.css']
+})
+export class ScatterchartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(){
+    const myChart = new Chart("ScatterCharts", {
+      type: 'scatter',
+      data: {
+          datasets: [{
+              label: 'Scatter Example:',
+              data: [{x: 1, y: 11}, {x:2, y:12}, {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}, {x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
+              backgroundColor: 'rgb(255, 99, 132)'
+            }]
+      },
+      options: {
+          scales: {
+              y: {
+                  beginAtZero: true
+              }
+          }
+      }
+  });
+  }
+}
diff --git a/frontend/src/assets/images/add_model_background.jpg b/frontend/src/assets/images/add_model_background.jpg
new file mode 100644
index 00000000..d86f0566
--- /dev/null
+++ b/frontend/src/assets/images/add_model_background.jpg
diff --git a/frontend/src/assets/images/logo.png b/frontend/src/assets/images/logo.png
new file mode 100644
index 00000000..2e15550a
--- /dev/null
+++ b/frontend/src/assets/images/logo.png
diff --git a/frontend/src/assets/images/logo_dark.png b/frontend/src/assets/images/logo_dark.png
new file mode 100644
index 00000000..95c06d8f
--- /dev/null
+++ b/frontend/src/assets/images/logo_dark.png
diff --git a/frontend/src/assets/profilePictures/1.png b/frontend/src/assets/profilePictures/1.png
new file mode 100644
index 00000000..6e2f8b73
--- /dev/null
+++ b/frontend/src/assets/profilePictures/1.png
diff --git a/frontend/src/assets/profilePictures/10.png b/frontend/src/assets/profilePictures/10.png
new file mode 100644
index 00000000..cbd270ca
--- /dev/null
+++ b/frontend/src/assets/profilePictures/10.png
diff --git a/frontend/src/assets/profilePictures/11.png b/frontend/src/assets/profilePictures/11.png
new file mode 100644
index 00000000..982fdae4
--- /dev/null
+++ b/frontend/src/assets/profilePictures/11.png
diff --git a/frontend/src/assets/profilePictures/12.png b/frontend/src/assets/profilePictures/12.png
new file mode 100644
index 00000000..2aedbdb0
--- /dev/null
+++ b/frontend/src/assets/profilePictures/12.png
diff --git a/frontend/src/assets/profilePictures/13.png b/frontend/src/assets/profilePictures/13.png
new file mode 100644
index 00000000..f8d771d9
--- /dev/null
+++ b/frontend/src/assets/profilePictures/13.png
diff --git a/frontend/src/assets/profilePictures/14.png b/frontend/src/assets/profilePictures/14.png
new file mode 100644
index 00000000..d3ec8ae1
--- /dev/null
+++ b/frontend/src/assets/profilePictures/14.png
diff --git a/frontend/src/assets/profilePictures/2.png b/frontend/src/assets/profilePictures/2.png
new file mode 100644
index 00000000..d8dc7967
--- /dev/null
+++ b/frontend/src/assets/profilePictures/2.png
diff --git a/frontend/src/assets/profilePictures/3.png b/frontend/src/assets/profilePictures/3.png
new file mode 100644
index 00000000..b4219c22
--- /dev/null
+++ b/frontend/src/assets/profilePictures/3.png
diff --git a/frontend/src/assets/profilePictures/4.png b/frontend/src/assets/profilePictures/4.png
new file mode 100644
index 00000000..ef0701ef
--- /dev/null
+++ b/frontend/src/assets/profilePictures/4.png
diff --git a/frontend/src/assets/profilePictures/5.png b/frontend/src/assets/profilePictures/5.png
new file mode 100644
index 00000000..8523f582
--- /dev/null
+++ b/frontend/src/assets/profilePictures/5.png
diff --git a/frontend/src/assets/profilePictures/6.png b/frontend/src/assets/profilePictures/6.png
new file mode 100644
index 00000000..96540607
--- /dev/null
+++ b/frontend/src/assets/profilePictures/6.png
diff --git a/frontend/src/assets/profilePictures/7.png b/frontend/src/assets/profilePictures/7.png
new file mode 100644
index 00000000..f0557738
--- /dev/null
+++ b/frontend/src/assets/profilePictures/7.png
diff --git a/frontend/src/assets/profilePictures/8.png b/frontend/src/assets/profilePictures/8.png
new file mode 100644
index 00000000..835ba0ab
--- /dev/null
+++ b/frontend/src/assets/profilePictures/8.png
diff --git a/frontend/src/assets/profilePictures/9.png b/frontend/src/assets/profilePictures/9.png
new file mode 100644
index 00000000..fd38fac4
--- /dev/null
+++ b/frontend/src/assets/profilePictures/9.png
diff --git a/frontend/src/assets/svg/logo.svg b/frontend/src/assets/svg/logo.svg
new file mode 100644
index 00000000..cd79cd55
--- /dev/null
+++ b/frontend/src/assets/svg/logo.svg
@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00A8E8;}
+	.st2{fill:#007EA7;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g id="XMLID_455_">
+	<g id="XMLID_357_">
+		<g id="XMLID_317_">
+			<rect id="XMLID_30_" x="-18.1" y="76.3" class="st0" width="138.3" height="23.7"/>
+			<path id="XMLID_2_" class="st1" d="M10,79.1v3.6h0.4c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4
+				s-0.3,0.2-0.6,0.2H8.9c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2V78H8.6
+				C8.3,78,8.1,78,8,77.9s-0.2-0.3-0.2-0.4S7.9,77.1,8,77s0.3-0.2,0.6-0.2l1.4,0l3.1,4.8V78h-0.4c-0.3,0-0.5-0.1-0.6-0.2
+				s-0.2-0.3-0.2-0.4s0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2l1.6,0c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4
+				S14.5,78,14.3,78v5.9h-1.2L10,79.1z"/>
+			<path id="XMLID_4_" class="st1" d="M21.7,81.9h-4.9c0.1,0.3,0.3,0.6,0.7,0.8s0.7,0.3,1.3,0.3c0.4,0,1-0.1,1.8-0.3
+				c0.3-0.1,0.5-0.1,0.6-0.1c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4c-0.2,0.1-0.5,0.3-1.1,0.4
+				s-1.2,0.2-1.7,0.2c-1,0-1.7-0.3-2.3-0.8s-0.9-1.2-0.9-2c0-0.8,0.3-1.5,0.9-2.1s1.3-0.8,2.2-0.8c0.5,0,0.9,0.1,1.3,0.3
+				s0.7,0.4,0.9,0.6c0.3,0.3,0.5,0.6,0.7,1.1c0.1,0.3,0.2,0.6,0.2,1V81.9z M20.4,80.7c-0.2-0.3-0.4-0.6-0.7-0.8s-0.7-0.3-1.1-0.3
+				c-0.4,0-0.8,0.1-1.1,0.3s-0.5,0.4-0.7,0.8H20.4z"/>
+			<path id="XMLID_7_" class="st1" d="M28.5,78.6v4.1c0.3,0,0.4,0.1,0.6,0.2s0.2,0.3,0.2,0.4s-0.1,0.3-0.2,0.4s-0.3,0.2-0.6,0.2
+				h-1.1v-0.3c-0.3,0.2-0.7,0.3-1,0.4s-0.6,0.1-0.9,0.1c-0.4,0-0.7-0.1-1-0.2s-0.5-0.4-0.7-0.7c-0.1-0.2-0.2-0.5-0.2-0.8v-2.6h-0.2
+				c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h1.4v3.6c0,0.3,0.1,0.4,0.2,0.6s0.3,0.2,0.6,0.2
+				c0.2,0,0.5,0,0.8-0.1s0.6-0.3,1-0.5v-2.4h-0.4c-0.3,0-0.5-0.1-0.6-0.2S26,79.4,26,79.2c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2
+				H28.5z"/>
+			<path id="XMLID_9_" class="st1" d="M32.9,78.6v0.8c0.5-0.4,0.9-0.6,1.2-0.7s0.6-0.2,0.8-0.2c0.4,0,0.8,0.1,1.1,0.4
+				c0.3,0.2,0.4,0.4,0.4,0.6c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.4,0.2c-0.1,0-0.3-0.1-0.5-0.2s-0.3-0.2-0.4-0.2
+				c-0.2,0-0.4,0.1-0.8,0.3s-0.8,0.5-1.3,0.9v1.8h1.7c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4
+				s-0.3,0.2-0.6,0.2h-3.6c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h0.7v-2.9h-0.4
+				c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2H32.9z"/>
+			<path id="XMLID_11_" class="st1" d="M43.4,81.4c0,0.5-0.1,0.9-0.4,1.3s-0.6,0.8-1.1,1s-1,0.4-1.6,0.4c-0.5,0-1.1-0.1-1.6-0.4
+				s-0.9-0.6-1.1-1s-0.4-0.9-0.4-1.4c0-0.5,0.1-1,0.4-1.4s0.6-0.8,1.1-1.1s1-0.4,1.6-0.4c0.5,0,1.1,0.1,1.6,0.4s0.9,0.6,1.1,1.1
+				S43.4,80.9,43.4,81.4z M42.2,81.4c0-0.4-0.1-0.7-0.4-1.1c-0.4-0.4-0.9-0.7-1.5-0.7c-0.5,0-1,0.2-1.4,0.5s-0.5,0.8-0.5,1.2
+				c0,0.4,0.2,0.7,0.6,1.1s0.8,0.5,1.4,0.5c0.5,0,1-0.2,1.4-0.5S42.2,81.8,42.2,81.4z"/>
+			<path id="XMLID_14_" class="st1" d="M45.8,83.6c-0.1,0.1-0.2,0.2-0.3,0.2s-0.1,0.1-0.2,0.1c-0.2,0-0.3-0.1-0.4-0.2
+				s-0.2-0.3-0.2-0.6v-0.8c0-0.3,0.1-0.5,0.2-0.6s0.3-0.2,0.4-0.2c0.1,0,0.3,0,0.4,0.1s0.2,0.2,0.2,0.4s0.1,0.3,0.2,0.4
+				c0.1,0.1,0.3,0.2,0.6,0.4s0.6,0.2,0.9,0.2c0.5,0,1-0.1,1.3-0.4c0.2-0.2,0.3-0.3,0.3-0.6c0-0.1-0.1-0.3-0.2-0.4s-0.3-0.2-0.5-0.3
+				c-0.2-0.1-0.5-0.1-1-0.2c-0.7-0.1-1.2-0.3-1.5-0.4s-0.6-0.4-0.8-0.7s-0.3-0.7-0.3-1c0-0.6,0.2-1.1,0.7-1.5s1.1-0.6,1.9-0.6
+				c0.3,0,0.6,0,0.9,0.1s0.5,0.2,0.7,0.3c0.2-0.2,0.3-0.2,0.5-0.2c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.6v0.9c0,0.3-0.1,0.5-0.2,0.6
+				s-0.3,0.2-0.4,0.2c-0.1,0-0.3,0-0.4-0.1C49.1,79.1,49,79,49,78.8s-0.1-0.3-0.2-0.4c-0.1-0.1-0.3-0.3-0.5-0.4s-0.5-0.2-0.8-0.2
+				c-0.4,0-0.8,0.1-1,0.3s-0.4,0.4-0.4,0.6c0,0.1,0.1,0.3,0.2,0.4s0.3,0.2,0.5,0.3c0.1,0.1,0.5,0.1,1.1,0.3s1.1,0.3,1.4,0.4
+				s0.6,0.4,0.8,0.7s0.3,0.7,0.3,1.1c0,0.6-0.2,1.1-0.6,1.4c-0.6,0.5-1.3,0.7-2.1,0.7c-0.3,0-0.7,0-1-0.1S46.1,83.8,45.8,83.6z"/>
+			<path id="XMLID_16_" class="st1" d="M54.4,79.8v2.4c0,0.3,0.1,0.4,0.2,0.5c0.2,0.1,0.5,0.2,0.9,0.2c0.6,0,1.2-0.1,1.7-0.4
+				c0.2-0.1,0.4-0.2,0.5-0.2c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4c-0.2,0.2-0.6,0.4-1.1,0.5s-1,0.2-1.4,0.2
+				c-0.7,0-1.3-0.2-1.7-0.5s-0.6-0.7-0.6-1.2v-2.6h-0.4c-0.3,0-0.5-0.1-0.6-0.2S52,79.4,52,79.2c0-0.2,0.1-0.3,0.2-0.4
+				s0.3-0.2,0.6-0.2h0.4v-1.1c0-0.3,0.1-0.5,0.2-0.6s0.3-0.2,0.4-0.2c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.6v1.1h2.2
+				c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.6,0.2H54.4z"/>
+			<path id="XMLID_18_" class="st1" d="M64.9,81.9H60c0.1,0.3,0.3,0.6,0.7,0.8s0.7,0.3,1.3,0.3c0.4,0,1-0.1,1.8-0.3
+				c0.3-0.1,0.5-0.1,0.6-0.1c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4c-0.2,0.1-0.5,0.3-1.1,0.4
+				s-1.2,0.2-1.7,0.2c-1,0-1.7-0.3-2.3-0.8s-0.9-1.2-0.9-2c0-0.8,0.3-1.5,0.9-2.1s1.3-0.8,2.2-0.8c0.5,0,0.9,0.1,1.3,0.3
+				s0.7,0.4,0.9,0.6c0.3,0.3,0.5,0.6,0.7,1.1c0.1,0.3,0.2,0.6,0.2,1V81.9z M63.6,80.7c-0.2-0.3-0.4-0.6-0.7-0.8s-0.7-0.3-1.1-0.3
+				c-0.4,0-0.8,0.1-1.1,0.3s-0.5,0.4-0.7,0.8H63.6z"/>
+			<path id="XMLID_21_" class="st1" d="M69.7,76.3v6.4h1.4c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4
+				s-0.3,0.2-0.6,0.2h-4.1c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h1.4v-5.2h-1
+				c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2H69.7z"/>
+			<path id="XMLID_23_" class="st1" d="M76.9,76.3v6.4h1.4c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4
+				s-0.3,0.2-0.6,0.2h-4.1c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h1.4v-5.2h-1
+				c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2H76.9z"/>
+			<path id="XMLID_25_" class="st1" d="M84.6,83.9v-0.3c-0.3,0.2-0.6,0.3-1,0.4s-0.7,0.1-1,0.1c-0.6,0-1.2-0.2-1.6-0.5
+				s-0.6-0.7-0.6-1.1c0-0.5,0.3-1,0.8-1.4s1.2-0.6,2.1-0.6c0.4,0,0.8,0,1.3,0.1v-0.3c0-0.2-0.1-0.3-0.2-0.4s-0.4-0.2-0.9-0.2
+				c-0.4,0-0.8,0.1-1.4,0.2c-0.2,0.1-0.4,0.1-0.5,0.1c-0.2,0-0.3-0.1-0.4-0.2S81,79.5,81,79.3c0-0.1,0-0.2,0.1-0.3s0.1-0.1,0.2-0.2
+				s0.2-0.1,0.4-0.2c0.3-0.1,0.6-0.1,0.9-0.2s0.6-0.1,0.8-0.1c0.7,0,1.3,0.2,1.7,0.5s0.6,0.8,0.6,1.3v2.5H86c0.3,0,0.5,0.1,0.6,0.2
+				s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.6,0.2H84.6z M84.6,81.8c-0.5-0.1-0.9-0.1-1.3-0.1c-0.5,0-0.9,0.1-1.3,0.4
+				c-0.2,0.2-0.3,0.3-0.3,0.5c0,0.1,0.1,0.2,0.2,0.3c0.2,0.1,0.5,0.2,0.8,0.2c0.3,0,0.6-0.1,1-0.2s0.7-0.3,1-0.5V81.8z"/>
+			<path id="XMLID_28_" class="st1" d="M90.5,78.6v0.8c0.5-0.4,0.9-0.6,1.2-0.7s0.6-0.2,0.8-0.2c0.4,0,0.8,0.1,1.1,0.4
+				c0.3,0.2,0.4,0.4,0.4,0.6c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.4,0.2c-0.1,0-0.3-0.1-0.5-0.2s-0.3-0.2-0.4-0.2
+				c-0.2,0-0.4,0.1-0.8,0.3s-0.8,0.5-1.3,0.9v1.8h1.7c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4
+				s-0.3,0.2-0.6,0.2h-3.6c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h0.7v-2.9h-0.4
+				c-0.3,0-0.5-0.1-0.6-0.2S88,79.4,88,79.2c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2H90.5z"/>
+		</g>
+		<path id="XMLID_318_" class="st2" d="M82,87.5c0,0.3-0.2,0.5-0.5,0.5h-63c-0.3,0-0.5-0.2-0.5-0.5l0,0c0-0.3,0.2-0.5,0.5-0.5h63
+			C81.8,87,82,87.2,82,87.5L82,87.5z"/>
+		<path id="XMLID_319_" class="st2" d="M67,91.5c0,0.3-0.2,0.5-0.5,0.5h-34c-0.3,0-0.5-0.2-0.5-0.5l0,0c0-0.3,0.2-0.5,0.5-0.5h34
+			C66.8,91,67,91.2,67,91.5L67,91.5z"/>
+	</g>
+	<g id="XMLID_273_">
+		<path id="XMLID_274_" class="st2" d="M86.3,46c-5,1.3-10.4,3.4-15.8,6.9c-5.5,3.7-9.6,8-12.7,12.2c-2.2-3.3-4.5-6.6-6.7-10
+			c5-1.5,10.4-3.8,15.7-7.4c5.3-3.6,9.5-7.7,12.8-11.8C81.9,39.4,84.1,42.7,86.3,46z"/>
+		<path id="XMLID_275_" class="st2" d="M47.7,55.5c-3-0.5-8.5-1.9-14.3-5.8c-5.9-3.9-9.3-8.6-10.9-11.2c-1.6,2.4-3.2,4.8-4.8,7.2
+			c3.1,0.6,8.5,2.1,14.3,6c5.7,3.9,9.2,8.3,10.9,11C44.5,60.3,46.1,57.9,47.7,55.5z"/>
+		<path id="XMLID_281_" class="st2" d="M83,30.4c-3-0.5-8.5-1.9-14.2-5.7c-5.9-3.9-9.2-8.5-10.8-11.1c-1.6,2.4-3.2,4.8-4.8,7.2
+			c3.1,0.6,8.5,2.1,14.2,5.9c5.7,3.8,9.1,8.3,10.8,10.9C79.8,35.2,81.4,32.8,83,30.4z"/>
+		<path id="XMLID_282_" class="st2" d="M51.1,22.3c-4.9,1.3-10.3,3.4-15.6,7c-5.4,3.7-9.4,8.1-12.3,12.4c-2.3-3.4-4.7-6.8-7-10.1
+			c4.9-1.5,10.3-3.9,15.5-7.5c5.2-3.6,9.3-7.8,12.5-11.9C46.4,15.6,48.8,18.9,51.1,22.3z"/>
+		<g id="XMLID_283_">
+			<g id="XMLID_302_">
+				<circle id="XMLID_303_" class="st1" cx="84.8" cy="38.4" r="8.6"/>
+			</g>
+			<g id="XMLID_370_">
+				<path id="XMLID_364_" class="st3" d="M92.7,38.4h-7.9v-7.9c0.6,2,1.2,4.1,1.9,6.1C88.6,37.2,90.7,37.8,92.7,38.4z"/>
+				<path id="XMLID_365_" class="st3" d="M76.8,38.4h7.9v-7.9c-0.6,2-1.2,4.1-1.9,6.1C80.9,37.2,78.8,37.8,76.8,38.4z"/>
+				<path id="XMLID_369_" class="st3" d="M92.7,38.4h-7.9v7.9c0.6-2,1.2-4.1,1.9-6.1C88.6,39.6,90.7,39,92.7,38.4z"/>
+				<path id="XMLID_366_" class="st3" d="M76.8,38.4h7.9v7.9c-0.6-2-1.2-4.1-1.9-6.1C80.9,39.6,78.8,39,76.8,38.4z"/>
+			</g>
+		</g>
+		<g id="XMLID_284_">
+			<g id="XMLID_288_">
+				<circle id="XMLID_289_" class="st1" cx="51.8" cy="15.4" r="8.6"/>
+			</g>
+			<g id="XMLID_285_">
+				<path id="XMLID_287_" class="st3" d="M59.7,15.4h-7.9V7.5c0.6,2,1.2,4.1,1.9,6.1C55.6,14.2,57.7,14.8,59.7,15.4z"/>
+				<path id="XMLID_286_" class="st3" d="M43.8,15.4h7.9V7.5c-0.6,2-1.2,4.1-1.9,6.1C47.9,14.2,45.8,14.8,43.8,15.4z"/>
+				<path id="XMLID_290_" class="st3" d="M59.7,15.4h-7.9v7.9c0.6-2,1.2-4.1,1.9-6.1C55.6,16.6,57.7,16,59.7,15.4z"/>
+				<path id="XMLID_291_" class="st3" d="M43.8,15.4h7.9v7.9c-0.6-2-1.2-4.1-1.9-6.1C47.9,16.6,45.8,16,43.8,15.4z"/>
+			</g>
+		</g>
+		<g id="XMLID_292_">
+			<g id="XMLID_296_">
+				<circle id="XMLID_297_" class="st1" cx="50.8" cy="61.4" r="8.6"/>
+			</g>
+			<g id="XMLID_293_">
+				<path id="XMLID_295_" class="st3" d="M58.7,61.4h-7.9v-7.9c0.6,2,1.2,4.1,1.9,6.1C54.6,60.2,56.7,60.8,58.7,61.4z"/>
+				<path id="XMLID_294_" class="st3" d="M42.8,61.4h7.9v-7.9c-0.6,2-1.2,4.1-1.9,6.1C46.9,60.2,44.8,60.8,42.8,61.4z"/>
+				<path id="XMLID_298_" class="st3" d="M58.7,61.4h-7.9v7.9c0.6-2,1.2-4.1,1.9-6.1C54.6,62.6,56.7,62,58.7,61.4z"/>
+				<path id="XMLID_299_" class="st3" d="M42.8,61.4h7.9v7.9c-0.6-2-1.2-4.1-1.9-6.1C46.9,62.6,44.8,62,42.8,61.4z"/>
+			</g>
+		</g>
+		<g id="XMLID_300_">
+			<g id="XMLID_306_">
+				<circle id="XMLID_307_" class="st1" cx="15.8" cy="38.4" r="8.6"/>
+			</g>
+			<g id="XMLID_301_">
+				<path id="XMLID_305_" class="st3" d="M23.7,38.4h-7.9v-7.9c0.6,2,1.2,4.1,1.9,6.1C19.6,37.2,21.7,37.8,23.7,38.4z"/>
+				<path id="XMLID_304_" class="st3" d="M7.8,38.4h7.9v-7.9c-0.6,2-1.2,4.1-1.9,6.1C11.9,37.2,9.8,37.8,7.8,38.4z"/>
+				<path id="XMLID_308_" class="st3" d="M23.7,38.4h-7.9v7.9c0.6-2,1.2-4.1,1.9-6.1C19.6,39.6,21.7,39,23.7,38.4z"/>
+				<path id="XMLID_309_" class="st3" d="M7.8,38.4h7.9v7.9c-0.6-2-1.2-4.1-1.9-6.1C11.9,39.6,9.8,39,7.8,38.4z"/>
+			</g>
+		</g>
+	</g>
+</g>
+<g id="XMLID_1_">
+</g>
+<g id="XMLID_31_">
+</g>
+<g id="XMLID_32_">
+</g>
+<g id="XMLID_33_">
+</g>
+<g id="XMLID_34_">
+</g>
+<g id="XMLID_35_">
+</g>
+<g id="XMLID_36_">
+</g>
+<g id="XMLID_37_">
+</g>
+<g id="XMLID_38_">
+</g>
+<g id="XMLID_39_">
+</g>
+<g id="XMLID_40_">
+</g>
+<g id="XMLID_41_">
+</g>
+<g id="XMLID_42_">
+</g>
+<g id="XMLID_43_">
+</g>
+<g id="XMLID_44_">
+</g>
+</svg>
diff --git a/frontend/src/assets/svg/logo_no_text.svg b/frontend/src/assets/svg/logo_no_text.svg
new file mode 100644
index 00000000..102b3781
--- /dev/null
+++ b/frontend/src/assets/svg/logo_no_text.svg
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1000px" height="700px" viewBox="0 0 1000 700" style="enable-background:new 0 0 1000 700;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#007EA7;}
+	.st1{fill:#00A8E8;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g id="XMLID_273_">
+	<path id="XMLID_274_" class="st0" d="M895.8,433.5C841.3,447.3,781,470.5,722,509.7c-60.6,40.3-106,88.3-140,134.5
+		c-24.5-36.5-49-73-73.5-109.5c54.8-16.7,114.1-42.1,172.6-81.4C739.8,414,786,368.6,822.2,324C846.8,360.5,871.3,397,895.8,433.5z"
+		/>
+	<path id="XMLID_275_" class="st0" d="M471.8,537.7c-32.9-5.8-93.3-20.8-157.2-63.4c-64.8-43.3-102-94.3-119.9-122.6
+		c-17.6,26.3-35.3,52.5-52.9,78.8c34,6.8,93.9,23.1,157.3,65.8c63.1,42.4,100.7,91.4,119.8,120.3C436.5,590.3,454.2,564,471.8,537.7
+		z"/>
+	<path id="XMLID_281_" class="st0" d="M859.1,261.9c-32.7-5.7-92.8-20.4-156.3-62.8c-64.3-43-101.2-93.8-118.9-122
+		c-17.6,26.3-35.3,52.5-52.9,78.8c33.8,6.7,93.4,22.8,156.4,65.1c62.6,42.1,99.9,90.9,118.9,119.7
+		C823.9,314.5,841.5,288.2,859.1,261.9z"/>
+	<path id="XMLID_282_" class="st0" d="M509,173.3c-54.1,13.8-113.6,37.2-171.3,76.8c-59.3,40.7-103.1,89.3-135.6,136.1
+		c-25.7-37.1-51.5-74.2-77.2-111.4c54.3-16.7,112.8-42.4,170-82.1C352.3,153,396.9,107,431.7,61.9C457.5,99,483.2,136.2,509,173.3z"
+		/>
+	<g id="XMLID_283_">
+		<g id="XMLID_302_">
+			<circle id="XMLID_303_" class="st1" cx="878.4" cy="350.1" r="94.3"/>
+		</g>
+		<g id="XMLID_370_">
+			<path id="XMLID_364_" class="st2" d="M965.4,350.1h-86.9v-86.9c6.8,22.4,13.7,44.8,20.5,67.2
+				C921.1,336.9,943.2,343.5,965.4,350.1z"/>
+			<path id="XMLID_365_" class="st2" d="M791.5,350.1h86.9v-86.9c-6.8,22.4-13.7,44.8-20.5,67.2
+				C835.7,336.9,813.6,343.5,791.5,350.1z"/>
+			<path id="XMLID_369_" class="st2" d="M965.4,350.1h-86.9v86.9c6.8-22.4,13.7-44.8,20.5-67.2C921.1,363.3,943.2,356.7,965.4,350.1
+				z"/>
+			<path id="XMLID_366_" class="st2" d="M791.5,350.1h86.9v86.9c-6.8-22.4-13.7-44.8-20.5-67.2C835.7,363.3,813.6,356.7,791.5,350.1
+				z"/>
+		</g>
+	</g>
+	<g id="XMLID_284_">
+		<g id="XMLID_288_">
+			<circle id="XMLID_289_" class="st1" cx="516" cy="97.5" r="94.3"/>
+		</g>
+		<g id="XMLID_285_">
+			<path id="XMLID_287_" class="st2" d="M602.9,97.5H516V10.6c6.8,22.4,13.7,44.8,20.5,67.2C558.7,84.3,580.8,90.9,602.9,97.5z"/>
+			<path id="XMLID_286_" class="st2" d="M429,97.5H516V10.6c-6.8,22.4-13.7,44.8-20.5,67.2C473.3,84.3,451.2,90.9,429,97.5z"/>
+			<path id="XMLID_290_" class="st2" d="M602.9,97.5H516v86.9c6.8-22.4,13.7-44.8,20.5-67.2C558.7,110.7,580.8,104.1,602.9,97.5z"/>
+			<path id="XMLID_291_" class="st2" d="M429,97.5H516v86.9c-6.8-22.4-13.7-44.8-20.5-67.2C473.3,110.7,451.2,104.1,429,97.5z"/>
+		</g>
+	</g>
+	<g id="XMLID_292_">
+		<g id="XMLID_296_">
+			<circle id="XMLID_297_" class="st1" cx="505" cy="602.7" r="94.3"/>
+		</g>
+		<g id="XMLID_293_">
+			<path id="XMLID_295_" class="st2" d="M591.9,602.7H505v-86.9c6.8,22.4,13.7,44.8,20.5,67.2C547.7,589.5,569.8,596.1,591.9,602.7z
+				"/>
+			<path id="XMLID_294_" class="st2" d="M418,602.7H505v-86.9c-6.8,22.4-13.7,44.8-20.5,67.2C462.3,589.5,440.2,596.1,418,602.7z"/>
+			<path id="XMLID_298_" class="st2" d="M591.9,602.7H505v86.9c6.8-22.4,13.7-44.8,20.5-67.2C547.7,615.9,569.8,609.3,591.9,602.7z"
+				/>
+			<path id="XMLID_299_" class="st2" d="M418,602.7H505v86.9c-6.8-22.4-13.7-44.8-20.5-67.2C462.3,615.9,440.2,609.3,418,602.7z"/>
+		</g>
+	</g>
+	<g id="XMLID_300_">
+		<g id="XMLID_306_">
+			<circle id="XMLID_307_" class="st1" cx="120.6" cy="350.1" r="94.3"/>
+		</g>
+		<g id="XMLID_301_">
+			<path id="XMLID_305_" class="st2" d="M207.5,350.1h-86.9v-86.9c6.8,22.4,13.7,44.8,20.5,67.2
+				C163.3,336.9,185.4,343.5,207.5,350.1z"/>
+			<path id="XMLID_304_" class="st2" d="M33.7,350.1h86.9v-86.9c-6.8,22.4-13.7,44.8-20.5,67.2C77.9,336.9,55.8,343.5,33.7,350.1z"
+				/>
+			<path id="XMLID_308_" class="st2" d="M207.5,350.1h-86.9v86.9c6.8-22.4,13.7-44.8,20.5-67.2C163.3,363.3,185.4,356.7,207.5,350.1
+				z"/>
+			<path id="XMLID_309_" class="st2" d="M33.7,350.1h86.9v86.9c-6.8-22.4-13.7-44.8-20.5-67.2C77.9,363.3,55.8,356.7,33.7,350.1z"/>
+		</g>
+	</g>
+</g>
+<g id="XMLID_1_">
+</g>
+<g id="XMLID_2_">
+</g>
+<g id="XMLID_3_">
+</g>
+<g id="XMLID_4_">
+</g>
+<g id="XMLID_5_">
+</g>
+<g id="XMLID_6_">
+</g>
+<g id="XMLID_7_">
+</g>
+<g id="XMLID_8_">
+</g>
+<g id="XMLID_9_">
+</g>
+<g id="XMLID_10_">
+</g>
+<g id="XMLID_11_">
+</g>
+<g id="XMLID_12_">
+</g>
+<g id="XMLID_13_">
+</g>
+<g id="XMLID_14_">
+</g>
+<g id="XMLID_15_">
+</g>
+</svg>
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index 8c48672e..f1c14194 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -1,3 +1,4 @@
 export const API_SETTINGS = {
-    apiURL: 'http://localhost:5283/api'
+    apiURL: 'http://localhost:5283/api',
+    apiWSUrl: 'ws://localhost:5283/api/websocket/ws'
 }
 \ No newline at end of file
diff --git a/frontend/src/index.html b/frontend/src/index.html
index b3b6eb54..1461c9ae 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Frontend</title>
@@ -10,7 +11,9 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
+
 <body class="mat-typography">
   <app-root></app-root>
 </body>
-</html>
+
+</html>
+\ No newline at end of file
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 8997c10e..5a30802b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,5 +1,4 @@
-/* You can add global styles to this file, and also import other style files 
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-*/
-\ No newline at end of file
+@import '~bootstrap/dist/css/bootstrap.min.css';
+body {
+    background-image: url('/assets/images/add_model_background.jpg');
+}
+\ No newline at end of file