diff --git a/backend/.gitignore b/backend/.gitignore
index 438bae1f35383978b491783079cc5ab16c0546a6..7392e96538e982ce5da7a3f15ed27b1f306bfdc6 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -25,3 +25,6 @@ env/
 scripts/
 *.csv
 .importer*
+
+# node
+node_modules
diff --git a/frontend/src/components/submission_notes/AnnotatedSubmission.vue b/frontend/src/components/submission_notes/AnnotatedSubmission.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32d8d226aaef822b409b2058af7363fb0d7b22c6
--- /dev/null
+++ b/frontend/src/components/submission_notes/AnnotatedSubmission.vue
@@ -0,0 +1,76 @@
+<template>
+  <table>
+    <tr>
+      <th>Submission of student</th>
+    </tr>
+    <tr v-for="line in source">
+      <td><span>{{ line }}</span></td>
+    </tr>
+  </table>
+</template>
+
+
+<script>
+  export default {
+    name: 'annotated-submission',
+    data: function () {
+      return {
+        source: '//Procedural Programming technique shows creation of Pascal\'s Triangl\n' +
+        '#include <iostream>\n' +
+        '#include <iomanip>\n' +
+        'using namespace std;\n' +
+        'int** comb(int** a , int row , int col)\n' +
+        '{\n' +
+        '   int mid = col/2;\n' +
+        '        //clear matrix\n' +
+        '         for( int i = 0 ; i < row ; i++)\n' +
+        '         for( int j = 0 ; j < col ; j++)\n' +
+        '                a[i][j] = 0;\n' +
+        '                a[0][mid] = 1; //put 1 in the middle of first row\n' +
+        '    //build up Pascal\'s Triangle matrix\n' +
+        '     for( int i = 1 ; i < row ; i++)\n' +
+        '        {\n' +
+        '          for( int j = 1 ; j < col - 1 ; j++)\n' +
+        '               a[i][j] = a[i-1][j-1] + a[i-1][j+1];\n' +
+        '        }\n' +
+        '   return a;\n' +
+        '}\n' +
+        'void disp(int** ptr, int row, int col)\n' +
+        '{\n' +
+        '  cout << endl << endl;\n' +
+        '    for ( int i = 0 ; i < row ; i++)\n' +
+        '        {\n' +
+        '        for ( int j = 0 ; j < col ; j++)\n' +
+        '            {\n' +
+        '                if( ptr[i][j] == 0)\n' +
+        '                cout << "   ";\n' +
+        '                else\n' +
+        '                cout << setw(4) << right << ptr[i][j];\n' +
+        '            }\n' +
+        '            cout << endl;\n' +
+        '        }\n' +
+        '    cout << endl << endl;\n' +
+        '}\n' +
+        'int main()\n' +
+        '{\n' +
+        '    int **ptr, m, n;\n' +
+        '    cout << "\\nEnter number of rows to draw Pascal\'s Triangle: ";\n' +
+        '    cin >> m;\n' +
+        '    n = 2 * m + 1; //column = 2 * row + 1\n' +
+        '\n' +
+        '    ptr = new int*[m];\n' +
+        '    for( int i = 0 ; i < m ; i++)\n' +
+        '        ptr[i] = new int[n];\n' +
+        '\n' +
+        '        ptr = comb(ptr, m, n);//calling function for array creation\n' +
+        '\n' +
+        '        disp(ptr, m, n);//calling function for array displaying.\n' +
+        '\n' +
+        '    return 0;\n' +
+        '}'
+      }
+    }
+  }
+</script>
+
+
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 997422b82770d3b595a39127ea98f36215f9c98c..35197911f027583254802f90b11464dbc32468bc 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,6 +6,8 @@ import router from './router'
 import store from './store/store'
 import Vuetify from 'vuetify'
 
+import 'static/google-code-prettify/prettify.js'
+import 'static/google-code-prettify/prettify.css'
 import 'vuetify/dist/vuetify.min.css'
 
 Vue.use(Vuetify)
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index c29cbc7da105a411223133581fbde9ddec64aace..6561087865bb953a4b5ca916ed8711e159788040 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Login from '@/components/Login'
 import StudentPage from '@/components/student/StudentPage'
+import AnnotatedSubmission from '@/components/submission_notes/AnnotatedSubmission'
 
 Vue.use(Router)
 
@@ -16,6 +17,11 @@ export default new Router({
       path: '/student/',
       name: 'student-page',
       component: StudentPage
+    },
+    {
+      path: '/student/submission/:id',
+      name: 'submission',
+      component: AnnotatedSubmission
     }
   ]
 })
diff --git a/frontend/static/.gitkeep b/frontend/static/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a73065fa651effc5cd424b1f4e3d89efebdb00a9..e184199c30a87052f72b1a10dcf71059d707f7f1 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5846,6 +5846,10 @@ vuetify@^0.16.9:
   version "0.16.9"
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-0.16.9.tgz#fd61f219e4a40d7afe5e24a803df5658a40b38e4"
 
+vuetify@^0.16.9:
+  version "0.16.9"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-0.16.9.tgz#fd61f219e4a40d7afe5e24a803df5658a40b38e4"
+
 vuex@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"