diff --git a/aleksis/apps/alsijil/static/js/vue/components/alsijil/CourseBook.js b/aleksis/apps/alsijil/static/js/vue/components/alsijil/CourseBook.js
index 276e844da613ac75ea6b7816205fc48ab49b6620..4e5dcde314b047af4720c2adc137b6f29561da82 100644
--- a/aleksis/apps/alsijil/static/js/vue/components/alsijil/CourseBook.js
+++ b/aleksis/apps/alsijil/static/js/vue/components/alsijil/CourseBook.js
@@ -5,7 +5,134 @@ export default {
     props: [],
     name: "course-book",
     data: () => {
-        return {lesson:{teachers:[{id:1245,full_name:"Teacher, first_name"}],subject:{name:"Informatik"},groups:[{name:"Q2b",short_name:"q2b"},{name:"Q1b",short_name:"q1b"}],validity_range:{date_start:"2022-01-01",date_end:"2022-12-31"}},excuse_types:[{name:"Schulisch entschuldigt",short_name:"s"},{name:"Something else",short_name:"o"}],extra_marks:[{short_name:"hw",name:"Homework Forgotten"}],lesson_documentations:[{topic:"Rechner auseinanderschrauben",homework:"Aufgabe 1 programmieren",group_note:"Einweisung Feueralarm durchgeführt",date:"2022-05-26",period_formatted:"5.",personal_notes:[]},{topic:"Python Basics",homework:"Aufgabe 2 angucken",group_note:"",date:"2022-05-25",period_formatted:"5.",personal_notes:[{student:{id:571,full_name:"Pil, Mail-Pu"},tardiness:5,absent:false,excused:false,excuse_type:null,extra_marks:[]},{student:{id:123,full_name:"Elf, Mais"},tardiness:0,absent:false,excused:false,excuse_type:null,extra_marks:[{short_name:"hw",name:"Homework Forgotten"}]},{student:{id:392,full_name:"Wendt, Gesch."},tardiness:0,absent:true,excused:true,excuse_type:{name:"Schulisch entschuldigt",short_name:"s"},extra_marks:[]}]}]}
+        return {
+          "lesson":{
+            "teachers":[
+              {
+                "id":1245,
+                "full_name":"Teacher, first_name"
+              }
+            ],
+            "subject":{
+              "name":"Informatik"
+            },
+            "groups":[
+              {
+                "name":"Q2b",
+                "short_name":"q2b",
+                "members":[
+                  {
+                    "id":3212,
+                    "full_name":"Student, first_name"
+                  },
+                  {
+                    "id":7428,
+                    "full_name":"Student2, first_name"
+                  },
+                ]
+              },
+              {
+                "name":"Q1b",
+                "short_name":"q1b",
+                "members":[
+                  {
+                    "id":4212,
+                    "full_name":"Student21, first_name"
+                  }
+                ]
+              }
+            ],
+            "validity_range":{
+              "date_start":"2022-01-01",
+              "date_end":"2022-12-31"
+            }
+          },
+          "excuse_types":[
+            {
+              "name":"Schulisch entschuldigt",
+              "short_name":"s"
+            },
+            {
+              "name":"Something else",
+              "short_name":"o"
+            }
+          ],
+          "extra_marks":[
+            {
+              "short_name":"hw",
+              "name":"Homework Forgotten"
+            }
+          ],
+          "lesson_documentations":[
+            {
+              "topic":"Rechner auseinanderschrauben",
+              "homework":"Aufgabe 1 programmieren",
+              "group_note":"Einweisung Feueralarm durchgeführt",
+              "date":"2022-05-26",
+              "period_formatted":"5.",
+              "personal_notes":[
+
+              ]
+            },
+            {
+              "topic":"Python Basics",
+              "homework":"Aufgabe 2 angucken",
+              "group_note":"",
+              "date":"2022-05-25",
+              "period_formatted":"5.",
+              "personal_notes":[
+                {
+                  "id":1,
+                  "student":{
+                    "id":571,
+                    "full_name":"Pil, Mail-Pu"
+                  },
+                  "tardiness":5,
+                  "absent":false,
+                  "excused":false,
+                  "excuse_type":null,
+                  "extra_marks":[
+
+                  ]
+                },
+                {
+                  "id":2,
+                  "student":{
+                    "id":123,
+                    "full_name":"Elf, Mais"
+                  },
+                  "tardiness":0,
+                  "absent":false,
+                  "excused":false,
+                  "excuse_type":null,
+                  "extra_marks":[
+                    {
+                      "short_name":"hw",
+                      "name":"Homework Forgotten"
+                    }
+                  ]
+                },
+                {
+                  "id":3,
+                  "student":{
+                    "id":392,
+                    "full_name":"Wendt, Gesch."
+                  },
+                  "tardiness":0,
+                  "absent":true,
+                  "excused":true,
+                  "excuse_type":{
+                    "name":"Schulisch entschuldigt",
+                    "short_name":"s"
+                  },
+                  "extra_marks":[
+
+                  ]
+                }
+              ]
+            }
+          ]
+        }
     },
     template: `
     <div>
diff --git a/aleksis/apps/alsijil/static/js/vue/components/alsijil/PersonalNotes.js b/aleksis/apps/alsijil/static/js/vue/components/alsijil/PersonalNotes.js
index f63b63a82e2fd8ec3bf17299190ef86c55a68942..af4444c66287e2605bf44f453d5f821f06a2c7dc 100644
--- a/aleksis/apps/alsijil/static/js/vue/components/alsijil/PersonalNotes.js
+++ b/aleksis/apps/alsijil/static/js/vue/components/alsijil/PersonalNotes.js
@@ -1,11 +1,21 @@
 export default {
-    methods: {},
+    methods: {
+        removePersonalNote (item) {},
+        editPersonalNote (item) {
+            this.dialog=true;
+            this.editPersonalNote=item;
+        },
+        updatePersonalNote (item) {
+            this.personalNotes
+        },
+    },
     props: ["personalNotes"],
     name: "personal-notes",
     data: () => {
         return {
             dialog: false,
             // Absent versp. exc. type hw note
+            editPersonalNoteId: null,
             headers: [
                 {
                     text: window.django.gettext('Name'),
@@ -46,23 +56,34 @@ export default {
       max-width="600px"
     >
       <template v-slot:activator="{ on, attrs }">
-        <div
+        <div>
+          <v-chip class="ma-1" v-for="personal_note in personalNotes" close @click="editPersonalNote(personal_note)" @click:close="removePersonalNote(personal_note)">{{personal_note.student.full_name}}: {{personal_note.tardiness}}</v-chip>
+        </div>
+        <v-btn
+          class="ma-1"
           color="primary"
-          dark
+          icon
+          outlined
           v-bind="attrs"
           v-on="on"
         >
-          Open Dialog
-          {{personalNotes}}
-        </div>
+          <v-icon>
+            mdi-plus
+          </v-icon>
+        </v-btn>
       </template>
       <v-card>
         <v-card-title>
-          <span class="text-h5">User Profile</span>
+          <span class="text-h5">Personal Note</span>
         </v-card-title>
         <v-card-text>
           <v-container>
-            <v-data-table
+<!--            FIXME: Sync values with data-->
+            <v-select item-text="student.full_name" item-value="id" :items="personalNotes" :value="editPersonalNote.id" @input="editPersonalNoteId = $event"></v-select>
+            <v-text-field label="Tardiness" suffix="min" type="number" min="0"></v-text-field>
+            <v-checkbox label="Absent"></v-checkbox>
+            <v-checkbox label="Excused"></v-checkbox>
+            <!--<v-data-table
               :headers="headers"
               :items="personalNotes"
               class="elevation-1"
@@ -96,7 +117,7 @@ export default {
               <template v-slot:item.excused="{ item }">
                 <v-simple-checkbox v-model="item.excused"  ></v-simple-checkbox>
               </template>
-            </v-data-table>
+            </v-data-table>-->
           </v-container>
 <!--          <small>*indicates required field</small>-->
         </v-card-text>