diff --git a/Closure_Front_End/package-lock.json b/Closure_Front_End/package-lock.json
index 70c3fda8..2fd3d025 100644
--- a/Closure_Front_End/package-lock.json
+++ b/Closure_Front_End/package-lock.json
@@ -1466,6 +1466,14 @@
         "@types/node": "*"
       }
     },
+    "@types/chart.js": {
+      "version": "2.9.32",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.32.tgz",
+      "integrity": "sha512-d45JiRQwEOlZiKwukjqmqpbqbYzUX2yrXdH9qVn6kXpPDsTYCo6YbfFOlnUaJ8S/DhJwbBJiLsMjKpW5oP8B2A==",
+      "requires": {
+        "moment": "^2.10.2"
+      }
+    },
     "@types/connect": {
       "version": "3.4.34",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
@@ -2077,87 +2085,6 @@
         "webpack-chain": "^6.4.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.2.0",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
-          "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -3890,6 +3817,32 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -4276,7 +4229,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -4284,8 +4236,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.5",
@@ -9681,6 +9632,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -14146,6 +14102,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.2.0",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+      "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "4.0.9",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.9.tgz",
@@ -14178,6 +14215,25 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue3-chart-v2": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/vue3-chart-v2/-/vue3-chart-v2-0.8.2.tgz",
+      "integrity": "sha512-J+v3Q0ayYyWstPY1zOmdx6l/wkHT63Kzrp5X5PNNXrSUoJT8p608danWIJtncpWhuJB8qQ3t2/jWsg4WF8qJjg==",
+      "requires": {
+        "@types/chart.js": "^2.9.29",
+        "chart.js": "^2.9.4",
+        "core-js": "^3.6.5",
+        "prettier": "^2.2.1",
+        "vue": "^3.0.0"
+      },
+      "dependencies": {
+        "prettier": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+          "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ=="
+        }
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/Closure_Front_End/package.json b/Closure_Front_End/package.json
index 0a48cf4d..05c1f853 100644
--- a/Closure_Front_End/package.json
+++ b/Closure_Front_End/package.json
@@ -15,7 +15,8 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "vue3-chart-v2": "^0.8.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/Closure_Front_End/src/App.vue b/Closure_Front_End/src/App.vue
index 26b72ece..59e6378a 100644
--- a/Closure_Front_End/src/App.vue
+++ b/Closure_Front_End/src/App.vue
@@ -8,6 +8,18 @@
       <div class="navbar-item">
         <div class="buttons">
           <!-- Check that the SDK client is not currently loading before accessing is methods -->
+          <!-- analytics -->
+          <router-link
+            v-if="$auth.isAuthenticated.value"
+            class="button is-small is-dark"
+            to="/analytics"
+          >
+            <span class="icon is-small is-right">
+              <i class="fas fa-chart-pie"></i>
+            </span>
+          </router-link>
+
+          <!-- settings -->
           <router-link
             v-if="$auth.isAuthenticated.value"
             class="button is-small is-dark"
@@ -17,6 +29,7 @@
               <i class="fas fa-user-cog"></i>
             </span>
           </router-link>
+
           <div v-if="!$auth.loading.value">
             <button
               class="button is-small is-dark menu-label"
@@ -56,8 +69,9 @@ export default {
       this.$auth
         .getIdTokenClaims()
         .then((response) => (this.username = response.nickname));
-      this.$http.get(`students/${this.username}`)
-        .then((response) => this.student = response);
+      this.$http
+        .get(`students/${this.username}`)
+        .then((response) => (this.student = response));
     }
   },
   methods: {
@@ -68,7 +82,7 @@ export default {
     // Log the user out
     logout() {
       this.$auth.logout({
-        returnTo: process.env.VUE_APP_AUTH0_REDIRECT_URI
+        returnTo: process.env.VUE_APP_AUTH0_REDIRECT_URI,
       });
     },
   },
diff --git a/Closure_Front_End/src/components/LineChart.vue b/Closure_Front_End/src/components/LineChart.vue
new file mode 100644
index 00000000..3bb5f5ed
--- /dev/null
+++ b/Closure_Front_End/src/components/LineChart.vue
@@ -0,0 +1,44 @@
+
+
+<script>
+import { defineComponent } from "vue";
+import { Line } from "vue3-chart-v2";
+
+export default defineComponent({
+  name: "MonthlyChart",
+  extends: Line,
+  // props: {
+  //   chartData: {
+  //     type: Object,
+  //     required: true
+  //   },
+  //   chartOptions: {
+  //     type: Object,
+  //     required: false
+  //   },
+  // },
+  mounted() {
+    this.renderChart({
+      labels: [0,1, 2, 3, 4, 5, 6, 7, 8],
+      datasets: [
+        {
+          label: "total points",
+          backgroundColor: "#999999",
+          fill: false,
+          data: [0,25, 56, 70, 80, 90, 105, 125, 134],
+          xAxisId: "semester",
+          options: {
+            scales: {
+              title:
+              {
+                display: true,
+                text : 'semester',
+              },
+            },
+          },
+        },
+      ],
+    });
+  },
+});
+</script>
\ No newline at end of file
diff --git a/Closure_Front_End/src/components/PieChart.vue b/Closure_Front_End/src/components/PieChart.vue
new file mode 100644
index 00000000..2e7a89ab
--- /dev/null
+++ b/Closure_Front_End/src/components/PieChart.vue
@@ -0,0 +1,22 @@
+
+<script>
+import { defineComponent } from 'vue';
+import { Pie } from 'vue3-chart-v2';
+
+export default defineComponent({
+  name: 'MonthlyChart',
+  extends: Pie,
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['Must', 'Choose from list', 'Choice'],
+      datasets: [
+        {
+          backgroundColor: ['#bc87d0','#fbaf5d','#f06eaa'],
+          data: [70, 20, 40]
+        }
+      ]
+    })
+  }
+})
+</script>
diff --git a/Closure_Front_End/src/components/ProgressBox.vue b/Closure_Front_End/src/components/ProgressBox.vue
index d16644b1..8eb59973 100644
--- a/Closure_Front_End/src/components/ProgressBox.vue
+++ b/Closure_Front_End/src/components/ProgressBox.vue
@@ -1,36 +1,50 @@
 <template>
   <div class="progressbox">
     <br />
+
     <div class="sub">
-      סך הכל:
-      <progress class="progress total" v-bind:value="total" max="100">
-        15%
-      </progress>
+      סך הכל:&ensp; {{ allPoints() }}/{{ 100 }}
+      <progress
+        class="progress total"
+        v-bind:value="allPoints()"
+        max="100"
+      ></progress>
     </div>
 
     <div class="sub">
-      חובה:
-      <progress class="progress must" v-bind:value="mustValue" max="80">
-        15%
-      </progress>
+      חובה:&ensp; {{pointsByType(MUST_TYPE)}}/{{80}}
+      <progress
+        class="progress must"
+        v-bind:value="pointsByType(MUST_TYPE)"
+        max="80"
+      ></progress>
     </div>
 
     <div class="sub">
-      חובת בחירה:
+       חובת בחירה:&ensp; {{pointsByType(MUST_CHOOSE_LIST_TYPE)}}/{{15}}
       <progress
         class="progress choose_from_list"
-        v-bind:value="chooseListValue"
+        v-bind:value="pointsByType(CHOOSE_LIST_TYPE)"
         max="15"
-      >
-        15%
-      </progress>
+      ></progress>
+    </div>
+
+    <div class="sub">
+     בחירה:&ensp; {{pointsByType(CHOICE_TYPE)}}/{{30}}
+      <progress
+        class="progress choice"
+        v-bind:value="pointsByType(CHOICE_TYPE)"
+        max="30"
+      ></progress>
     </div>
 
     <div class="sub">
-      בחירה:
-      <progress class="progress choice" v-bind:value="choiceValue" max="30">
-        15%
-      </progress>
+       אבני פינה:&ensp; {{pointsByType(CORNER)}}/{{8}}
+      <progress
+        class="progress choice"
+        v-bind:value="pointsByType(CORNER)"
+        max="8"
+      ></progress>
     </div>
   </div>
 </template>
@@ -44,36 +58,50 @@ export default {
       mandatory: 30,
       mand_choice: 20,
       choice: 15,
-      coursesByType: null,
-      mustValue: null,
-      chooseListValue: null,
-      choiceValue: null,
+      MUST_TYPE: 0,
+      CHOOSE_LIST_TYPE: 1,
+      CHOICE_TYPE: 2,
+      CORNER_TYPE: 3,
     };
   },
 
   methods: {
+    /**
+     * a helper method for grouping courses.
+     * will be mostly used to group by type
+     */
     groupBy: function (xs, key) {
       return xs.reduce(function (rv, x) {
         (rv[x[key]] = rv[x[key]] || []).push(x);
         return rv;
       }, {});
     },
-  },
-
-  mounted() {
-    this.coursesByType = this.groupBy(this.allcourses, "type");
-    this.mustValue = this.coursesByType[1].length;
-    this.chooseListValue = this.coursesByType[2].length;
-    this.choiceValue = this.coursesByType[3].length;
-    console.log(this.coursesByType);
-  },
-
-  updated() {
-    this.coursesByType = this.groupBy(this.allcourses, "type");
-    this.mustValue = this.coursesByType[1].length;
-    this.chooseListValue = this.coursesByType[2].length;
-    this.choiceValue = this.coursesByType[3].length;
-    console.log(this.coursesByType);
+    /**
+     * sums up the total points for a given course type
+     */
+    pointsByType: function (type) {
+      var courses = this.groupBy(this.allcourses, "type");
+      // first we need to check if we have a course from this type
+      if (type in courses) {
+        // if so, we will sum up the points from that course group,
+        var sum = 0;
+        for (var i = 0; i < courses[type].length; i++) {
+          sum += courses[type][i]["points"];
+        }
+        return sum;
+      } else {
+        // otherwise we will return 0.
+        return 0;
+      }
+    },
+    allPoints: function () {
+      return (
+        this.pointsByType(this.MUST_TYPE) +
+        this.pointsByType(this.CHOOSE_LIST_TYPE) +
+        this.pointsByType(this.CHOICE_TYPE) +
+        this.pointsByType(this.CORNER_TYPE)
+      );
+    },
   },
 };
 </script>
diff --git a/Closure_Front_End/src/router/index.js b/Closure_Front_End/src/router/index.js
index a9e33bca..0a90ee64 100644
--- a/Closure_Front_End/src/router/index.js
+++ b/Closure_Front_End/src/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import Settings from '../views/Settings.vue'
+import Analytics from '../views/Analytics.vue'
 import { routeGuard } from '@/auth/index.js'
 
 const routes = [
@@ -15,6 +16,12 @@ const routes = [
     component: Settings,
     beforeEnter: routeGuard
   },
+  {
+    path: '/analytics',
+    name: 'Analytics',
+    component: Analytics,
+    beforeEnter: routeGuard
+  },
 ]
 
 const router = createRouter({
diff --git a/Closure_Front_End/src/views/Analytics.vue b/Closure_Front_End/src/views/Analytics.vue
new file mode 100644
index 00000000..e1263f3b
--- /dev/null
+++ b/Closure_Front_End/src/views/Analytics.vue
@@ -0,0 +1,34 @@
+<template>
+
+<div class="columns">
+  <div class="column">
+    <PieChart/>
+  </div>
+  <div class="column">
+    <LineChart/>
+  </div>
+  <div class="column">
+  </div>
+  <div class="column">
+  </div>
+</div>
+
+
+</template>
+
+<script>
+import PieChart from "../components/PieChart.vue";
+import LineChart from "../components/LineChart.vue";
+
+export default {
+  name: "Analytics",
+  components: { PieChart,LineChart },
+  data() {},
+
+  methods: {},
+};
+</script>
+
+<style>
+
+</style>
\ No newline at end of file