diff --git a/package.json b/package.json
index 301e7ed1ec192ec4d375939e3373dd8561ca3e1b..320eece5f52641c9f531a8236f0794c50a343d07 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "polva-haigla-web",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview --port 4173"
   },
@@ -12,13 +12,16 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@vueup/vue-quill": "^1.0.0",
+    "axios": "^1.3.2",
     "firebase": "^9.11.0",
     "quill-delta-to-html": "^0.12.1",
     "tw-elements": "^1.0.0-alpha12",
+    "v-calendar": "^3.0.0-alpha.8",
     "vue": "^3.2.38",
     "vue-router": "^4.1.5",
     "vue-toastification": "^2.0.0-rc.5",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.3",
diff --git a/src/App.vue b/src/App.vue
index 7cbe08c06bf5d67ad5471acac7893df5fba4334a..dd07193020dc5452b1d5b67c3cb880c89cc3d3ce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ import Footer from "./components/Footer.vue";
 </script>
 
 <template>
-  <div class="page bg-[#ebebeb] flex flex-col">
+  <div class="page bg-[#F0F0F0] flex flex-col">
     <Header v-if="$store.state.user"/>
     <RouterView />
     <div v-if="$store.state.user" class="flex-1"></div>
diff --git a/src/assets/logos/logo.png b/src/assets/logos/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c2119ae7875a4f360b69b6c079a2bd9f5282fc9
Binary files /dev/null and b/src/assets/logos/logo.png differ
diff --git a/src/assets/logos/logo_alt.png b/src/assets/logos/logo_alt.png
new file mode 100644
index 0000000000000000000000000000000000000000..769ab5d539fab76c880a7b9e1e4e141e3856d026
Binary files /dev/null and b/src/assets/logos/logo_alt.png differ
diff --git a/src/assets/logos/logo_alt_white.png b/src/assets/logos/logo_alt_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd90a31a9d7a439ded6ec51361d1082dc8074dcc
Binary files /dev/null and b/src/assets/logos/logo_alt_white.png differ
diff --git a/src/assets/logos/logo_white.png b/src/assets/logos/logo_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f1e513c8919774b0804373a3e379155d18124a1
Binary files /dev/null and b/src/assets/logos/logo_white.png differ
diff --git a/src/assets/logos/logowhite.png b/src/assets/logos/logowhite.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5a50192491fabcef070a5e5a673ad5b1a8631f9
Binary files /dev/null and b/src/assets/logos/logowhite.png differ
diff --git a/src/assets/qabook.json b/src/assets/qabook.json
index fcd290fcf6407c4259d585345e9f110c12fbbd8e..aab541976aa9430b602836a15f48bec7cbb34fba 100644
--- a/src/assets/qabook.json
+++ b/src/assets/qabook.json
@@ -1,10 +1,15 @@
-{
+{ "doc_name": "AS Pأ•LVA HAIGLA KVALITEEDIKأ„SIRAAMAT",
+  "last_change": "30.03.2022",
+  "made_by": "M. Sultsmann",
+  "confirmed_by": "Margot Bergmann",
+  "valid_til": "kuni mأ¤rts 2024",
   "text": ["AS Pأµlva Haigla on tervishoiuteenuseid ja sotsiaalteenuseid osutav organisatsioon.\nHaigla kuulub Haiglavأµrgu Arengukava haiglate hulka. Haigla on liitunud SA Tartu\nأœlikooli Kliinikumi kontserniga.\n",
   "Haigla kvaliteedikأ¤siraamatu eesmأ¤rgiks on kirjeldada organisatsioonis kasutusele\nvأµetud kvaliteedijuhtimissأ¼steemi, mille kأ¤sitlusalaks on kvaliteetsete tervishoiu ja\nrehabilitatsiooniteenuste pakkumine, pakutavate teenuste tulemuslikkuse parendamine,\neelduste loomine ressursside optimeerimiseks ja jأ¤tkusuutlikuks arenguks. Lisaks\nkirjeldab kvaliteedikأ¤siraamat organisatsiooni, selle juhtimist ja tugiteenuste\nkorraldamisega seotud tegevusi.",
   "Kasutatav kvaliteedijuhtimissأ¼steem vأµimaldab pakkuda patsiendi nأµuetele ja\nkohaldatavatele seadusjأ¤rgsetele nأµuetele vastavaid teenuseid, loob eeldused patsiendi\nannab vأµimaluse hinnata tegevuse vastavust kvaliteedijuhtimissأ¼steemi rahulolu\nsuurendamiseks, organisatsiooni eesmأ¤rkidega seotud riskide kأ¤sitlemiseks ja nأµuetele.",
   "Kirjeldatud protsesside ja protseduride juures on toodud teema aluseks olevad\nأµigusaktid, haigla vastavate dokumentide loetelu ja teemaga seotud kvaliteedijuhendid."],
   "chapters": [
     {
+      "toggle": false,
       "id": "1",
       "name": "Organisatsiooni juhtimine",
       "content": [
@@ -18,6 +23,7 @@
       ],
       "subchapters": [
         {
+          "toggle": false,
           "id": "1.1",
           "name": "Organisatsiooni struktuur",
           "content": [
@@ -36,6 +42,7 @@
           ]
         },
         {
+          "toggle": false,
           "id": "1.2",
           "name": "Strateegilised eesmأ¤rgid",
           "content": [
@@ -88,44 +95,54 @@
           ]
         },
         {
+          "toggle": false,
           "id": "1.3",
           "name": "Finantsjuhtimine ja raamatupidamine"
         }
       ]
     },
     {
+      "toggle": false,
       "id": "2",
       "name": "Kvaliteedi juhtimine"
     },
     {
+      "toggle": false,
       "id": "3",
       "name": "Patsiendikeskus"
     },
     {
+      "toggle": false,
       "id": "4",
       "name": "Teenuste osutamine"
     },
     {
+      "toggle": false,
       "id": "5",
       "name": "Teenused"
     },
     {
+      "toggle": false,
       "id": "6",
       "name": "Personali juhtimine"
     },
     {
+      "toggle": false,
       "id": "7",
       "name": "Toitlustamine"
     },
     {
+      "toggle": false,
       "id": "8",
       "name": "Transpordikorraldus"
     },
     {
+      "toggle": false,
       "id": "9",
       "name": "Pesu kأ¤itlemine"
     },
     {
+      "toggle": false,
       "id": "10",
       "name": "Infrastruktuur"
     }
diff --git "a/src/assets/qabook/KK-\303\234J-01 Kvaliteedi k\303\244siraamat Vs.4.1.pdf" "b/src/assets/qabook/KK-\303\234J-01 Kvaliteedi k\303\244siraamat Vs.4.1.pdf"
new file mode 100644
index 0000000000000000000000000000000000000000..125be5ca5f47786726610bde844d6f36b5ad3657
Binary files /dev/null and "b/src/assets/qabook/KK-\303\234J-01 Kvaliteedi k\303\244siraamat Vs.4.1.pdf" differ
diff --git a/src/components/Announcements.vue b/src/components/Announcements.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f7eaec63e4c8cde21b7a85989e7270ca2a1087a5
--- /dev/null
+++ b/src/components/Announcements.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="justify-between flex flex-row mt-7">
+      <div><h5 class="text-2xl pb-6">Teadaanded</h5></div>
+      <div>
+        <button @click="addSidebarAnnouncements" class="mr-4 ">
+          <font-awesome-icon icon="fa-solid fa-plus"/>
+        </button>
+        <button @click="deleteSidebarAnnouncements" class="">
+          <font-awesome-icon icon="fa-solid fa-trash"/>
+        </button>
+      </div>
+    </div>
+    <div v-if="size === 'small'" class="bg-[#ebebeb] rounded-3xl pl-4 pt-2 pb-2 flex flex-col">
+      <div v-for="ann in getAnns">
+        {{ ann.content }}
+      </div>
+    </div>
+    <div v-if="size === 'big'" class="bg-[#ebebeb] text-xl rounded-xl pl-4 pt-2 pb-2 flex flex-col space-y-3">
+      <div v-for="ann in getAnns">
+        {{ ann.content }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {addSidebarLinkObject, deleteSidebarLinkObject, sidebarLinkArray} from "@/firebase/SidebarLinks";
+import {
+  addSidebarAnnouncementObject,
+  announcementsArray,
+  deleteSidebarAnnouncementObject
+} from "@/firebase/SidebarAnnouncements";
+
+export default {
+  name: "Announcements",
+  props: {
+    size: "",
+  },
+  data() {
+    return {
+      sidebarAnnouncements: []
+    }
+  },
+  mounted() {
+    this.getSidebarAnnouncements()
+  },
+  computed: {
+    getAnns() {
+      return this.sidebarAnnouncements
+    }
+  },
+  methods: {
+    getSidebarAnnouncements() {
+      this.sidebarAnnouncements = announcementsArray
+    },
+    addSidebarAnnouncements() {
+      addSidebarAnnouncementObject("Test title", "test content")
+          .then((result) => {
+            console.log(result, "Id added")
+            this.getSidebarAnnouncements()
+          })
+    },
+    deleteSidebarAnnouncements() {
+      deleteSidebarAnnouncementObject(announcementsArray[0].id).then((result) => {
+        console.log("sidebarLink is deleted")
+        this.getSidebarAnnouncements()
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/ContactComponent.vue b/src/components/ContactComponent.vue
index 38c866a8190031306ba8f0bac0e2b9b2e7b2d6ee..24a73451b56bf480d103dbef8797d1d6736712bb 100644
--- a/src/components/ContactComponent.vue
+++ b/src/components/ContactComponent.vue
@@ -1,25 +1,26 @@
 <template>
-  <div class="bg-white flex flex-col p-4 rounded-3xl drop-shadow-sm w-full">
+  <div class="bg-white flex flex-col p-4 rounded-3xl  w-full">
     <div @click="toggleDisplay" class="flex flex-row justify-between items-center cursor-pointer">
       <h1 class="font-bold text-xl"> {{ category }} </h1>
       <font-awesome-icon class="text-2xl pr-2 cursor-pointer" icon="fa-solid fa-caret-down"/>
     </div>
     <Transition name="toggling">
+      <!-- TODO: nime jأ¤rgi sorteerimine? -->
       <div v-show="toggle" class="space-y-2 pt-2">
         <table class="w-full text-left table-fixed">
           <caption></caption>
           <thead>
             <tr class="font-bold space-x-10">
-              <th>Ametikoht</th>
               <th>Nimi</th>
+              <th>Ametikoht</th>
               <th>Telefon</th>
               <th>E-post</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="profile in profiles" class="">
-              <td>{{ profile.position }}</td>
               <td>{{ profile.name }}</td>
+              <td>{{ profile.position }}</td>
               <td>{{ profile.number }}</td>
               <td>{{ profile.meil }}</td>
               <div class="flex flex-row space-x-12">
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 8971700e741072f4f0d4f1cf749f211290045938..7da20401673d40d801e22e593979a9144bd79429 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,12 +1,7 @@
 <template>
   <div>
-    <div class="hidden md:flex md:flex-col md:bg-white">
-      <div class="hidden md:p-4 md:flex md:flex-row md:items-center md:grid-rows-3">
-        <img alt="Pأµlva Haigla logo" class="logo" src="../assets/logo.png" width="120"/>
-        <SearchBar></SearchBar>
-        <button @click="$store.dispatch('logout')" class="bg-[#EF426F] ml-4 py-1 px-4 rounded-2xl text-white"> Logi vأ¤lja </button>
-      </div>
-      <NavigationBar class="drop-shadow-md"></NavigationBar>
+    <div class="hidden md:flex md:flex-col md:bg-white z-100">
+      <NavigationBar class=""></NavigationBar>
     </div>
     <MobileNav></MobileNav>
   </div>
diff --git a/src/components/LatestNews.vue b/src/components/LatestNews.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02b1aac3e827829cb7ab0b10d3bd4f0aa71fc5fe
--- /dev/null
+++ b/src/components/LatestNews.vue
@@ -0,0 +1,38 @@
+<template>
+  <div @mouseover="hover = true" @mouseleave="hover = false"
+       class="bg-[#F0F0F0] p-6 rounded-xl hover:bg-gradient-to-b from-transparent to-gray-300 cursor-pointer">
+    <!--        Title -->
+    <h1 class="font-bold text-xl pb-6">{{ news.title }}</h1>
+    <!--        Content-->
+    <div class="max-h-[100px] overflow-hidden">
+      <div v-html="ConvertToHtml(news.content)">
+      </div>
+    </div>
+    <div v-if="hover" class="relative -mt-10 bg-white px-4 py-2 rounded-md max-w-max ml-auto mr-auto">Loe lisaks..</div>
+  </div>
+</template>
+
+<script>
+import {QuillDeltaToHtmlConverter} from "quill-delta-to-html";
+
+export default {
+  name: "LatestNews",
+  props: {
+    news: {}
+  },
+  data() {
+    return {
+      hover: false
+    }
+  },
+  methods: {
+    ConvertToHtml(content) {
+      return new QuillDeltaToHtmlConverter(content, {}).convert()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 80887a8f2e9edbb5c8404d0070d794db1dc235a2..17a03cacfc303ac695cad77dcaa870a707329d6f 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -1,36 +1,60 @@
 <template>
-  <div class="bg-[#3A0960]">
-    <ul class="flex justify-between text-2xl py-7 text-white mx-20">
+  <div class="bg-[#3A0960] z-10">
+    <ul class="flex justify-between text-2xl text-white mx-5 items-center mt-2 mb-2">
+      <!--Logo/home-->
       <li>
-        <router-link to="/">Avaleht</router-link>
-      </li>
-      <li>
-        <router-link to="/uudised">Uudised</router-link>
-      </li>
-      <li>
-        <router-link to="/kontaktid">Kontaktid</router-link>
+        <div class="hidden md:flex md:flex-row md:items-center">
+          <router-link to="/"><img @click="" alt="Pأµlva Haigla logo" class="logo"
+                                   src="../assets/logos/logo_alt_white.png"
+                                   width="50"/>
+          </router-link>
+        </div>
       </li>
-      <li>
-        <div @mouseover="hover = true" @mouseleave="hover = false" class="align-middle">
-          <div>Juhendid
-            <font-awesome-icon icon="fa-solid fa-caret-down"/>
-          </div>
-          <div v-if="hover" class="top-220 absolute p-6 bg-[#3A0960] pb-4 -ml-[24px] rounded-br-lg rounded-bl-lg">
-            <div class="flex flex-col">
-              <router-link to="/juhendid">Kvaliteedikأ¤siraamat</router-link>
-              <router-link to="/dokumendid">Dokumendid</router-link>
+      <!--Navbar-->
+      <li class="flex flex-row items-center">
+        <ul class="flex flex-row gap-10">
+          <li class="">
+            <router-link to="/">Avaleht</router-link>
+          </li>
+          <li>
+            <router-link to="/uudised">Uudised</router-link>
+          </li>
+          <li>
+            <router-link to="/kontaktid">Kontaktid</router-link>
+          </li>
+          <li>
+            <div @mouseover="hover = true" @mouseleave="hover = false" class="align-middle">
+              <div>Juhendid
+                <font-awesome-icon icon="fa-solid fa-caret-down"/>
+              </div>
+              <div v-if="hover" class="absolute p-6 bg-[#3A0960] pb-4 -ml-[24px] rounded-br-lg rounded-bl-lg">
+                <div class="flex flex-col">
+                  <router-link to="/juhendid">Kvaliteedikأ¤siraamat</router-link>
+                  <router-link to="/dokumendid">Dokumendid</router-link>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          </li>
+          <li>
+            <router-link to="/abilaud">Abilaud</router-link>
+          </li>
+        </ul>
       </li>
-      <li>
-        <router-link to="/abilaud">Abilaud</router-link>
+      <li class="align-middle">
+        <button class="text-4xl align-middle">
+          <font-awesome-icon icon="fa-solid fa-circle-user"/>
+        </button>
+        <button @click="$store.dispatch('logout')" class="bg-[#EF426F] ml-4 py-1 px-4 rounded-2xl text-lg text-white">
+          Logi
+          vأ¤lja
+        </button>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
+
 export default {
   name: "NavigationBar",
   data() {
diff --git a/src/components/NewsComponents/NewObjectView.vue b/src/components/NewsComponents/NewObjectView.vue
index 733a2e246427d96c60913b0f434a1ed5d8d5287e..14ab2e5016c4c1052c7905a1f2000d2fcfc41e85 100644
--- a/src/components/NewsComponents/NewObjectView.vue
+++ b/src/components/NewsComponents/NewObjectView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="justify-center flex">
-    <div class="bg-white flex flex-col p-4 rounded-lg drop-shadow-sm max-w-[900px] min-w-[500px]">
+    <div class="bg-white flex flex-col p-4 rounded-lg max-w-[900px] min-w-[500px]">
       <div class="flex items-center justify-between pb-4">
         <h1 v-if="title" class="font-bold text-black text-2xl">
           {{ title }}
diff --git a/src/components/NewsComponents/NewsComponent.vue b/src/components/NewsComponents/NewsComponent.vue
index 901efe581b258be7acfaad973a2c17369450f9ab..b6d87adfffb3c2cce70d2b91628056c9dff3c489 100644
--- a/src/components/NewsComponents/NewsComponent.vue
+++ b/src/components/NewsComponents/NewsComponent.vue
@@ -1,29 +1,29 @@
 <template>
-  <div @click = "redirectToNewsObjectPage" class="bg-[#ebebeb] m-2 p-2 rounded-[30px] flex flex-row items-center justify-between cursor-pointer">
+  <div @click="redirectToNewsObjectPage"
+       class="bg-[#F0F0F0] m-2 p-2 rounded-[30px] flex flex-row items-center justify-between cursor-pointer hover:bg-gradient-to-b from-transparent to-gray-300"
+  @mouseover="hover = true" @mouseleave="hover = false">
     <div class="p-2 pl-4">
       <div class=" text-xl pb-4 title">
         {{ title }}
       </div>
       <div class="max-h-16 text-sm  overflow-hidden">
         <div v-html="data">
-
         </div>
       </div>
+      <div v-if="hover" class="relative -mt-10 bg-white px-4 py-2 rounded-md max-w-max ml-auto mr-auto">Loe lisaks..</div>
     </div>
 
-    <font-awesome-icon class="text-2xl cursor-pointer m-5" icon="fa-solid fa-caret-right"
-                      />
   </div>
 </template>
 
 <script>
-import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
-const delta = [ { "insert": "Pأµlva Haiglal on au vastu vأµtta Rohelisema Pأµlvamaa mأ¤rgis. ", "attributes": { "bold": true } }, { "insert": "\n\nHaigla on astunud suuri samme sأ¤أ¤stlikuma ja rohelisema tuleviku heaks: investeerinud hooneautomaatikasse, efektiivsemasse ning targalt juhitud valgustusse, أ¼le on mindud autonoomsele meditsiinilise hapniku tootmisele ning alustatud on keskkonnaga seotud mأµأµdikute jأ¤lgimist. Igapأ¤evaselt jأ¤lgitakse materjalitأµhusust, jأ¤أ¤tmekoguste teket, elektri- ja veekasutuse ning soojusenergia nأ¤itajaid, et vأ¤ltida nii rahaliste kui ka loodusressursside raiskamist ja liikuda jأ¤rk-jأ¤rgult tarbimise vأ¤hendamise suunas. Toitlustusteenuse puhul eelistame tooraine hankimisel kodumaist ning kohaliku pأ¤ritoluga toodangut ning vأ¤أ¤rtustame oma tأ¶أ¶tajate tervist ja tervislikke eluviise. Pأµlva Haigla jأ¤tkusuutlikkuse spetsialist " }, { "insert": "Andra Villems", "attributes": { "italic": true } }, { "insert": " lisab, et tأ¶أ¶d selle nimel on palju tehtud ja palju on veel teha, kuid see mأ¤rgis nأ¤itab meie rohelist suhtumist ja lubadust olla oma tegevuses tأ¤na ja tulevikus sأ¤أ¤stlik, puhas, taaskasutav ja hooliv!\n\nhm" }, { "insert": "\n", "attributes": { "list": "bullet" } }, { "insert": "hm" }, { "attributes": { "list": "bullet" }, "insert": "\n" } ];
+import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html';
 export default {
 
   name: "NewsComponent",
   data() {
     return {
+      hover: false,
       data: new QuillDeltaToHtmlConverter(this.content, {}).convert()
     }
   },
diff --git a/src/components/NewsComponents/NewsFront.vue b/src/components/NewsComponents/NewsFront.vue
index dc8a3789a2633a81b2423f0c28fa7c63020384ed..728ee2b029d382e678bca1b13c8f874dc1b0be8f 100644
--- a/src/components/NewsComponents/NewsFront.vue
+++ b/src/components/NewsComponents/NewsFront.vue
@@ -1,33 +1,32 @@
 <template>
-  <div>
-    <img class="z-0 rounded-xl w-3/4 mx-auto" src="/src/assets/avaleht-transformed2.jpg" alt="polva-haigla ">
-    <div class=" rounded-xl w-10/12 mx-auto z-1 top-[-10px] relative bg-white rounded-xl p-4 drop-shadow-sm h-max">
-      <p class="prose-xl text-center leading-snug text-5xl p-4"> {{ title }} </p>
-      <blockquote><hr class="my-2 mx-auto w-3/4 h-0.5 bg-gray-100 rounded border-0 md:my-10 dark:bg-gray-700"></blockquote>
+  <div class="space-y-6">
+    <!--    <img class="z-0 rounded-xl w-3/4 mx-auto" src="/src/assets/avaleht-transformed2.jpg" alt="polva-haigla ">-->
 
-      <div v-html="content" class="text-xl p-5"></div>
+    <!--      <div v-html="content" class="text-xl "></div>-->
+    <div v-for="news in latestNews" class="">
+        <LatestNews :news="news"></LatestNews>
     </div>
   </div>
 </template>
 
 <script>
 import {returnLatestNews} from "@/firebase/News";
-import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
+import LatestNews from "@/components/LatestNews.vue";
 
 export default {
   name: "NewsFront",
+  components: {LatestNews},
   data() {
     return {
       latestNews: [],
       title: "",
-      content: null
+      content: null,
+      hover: false
     }
   },
 
   mounted() {
-    let latest = returnLatestNews();
-    this.title = latest.title
-    this.content = new QuillDeltaToHtmlConverter(latest.content, {}).convert()
+    this.latestNews = returnLatestNews();
   }
 }
 </script>
diff --git a/src/components/QABookComponents/ContentComp.vue b/src/components/QABookComponents/ContentComp.vue
index a72948b4a6231c98e3bbc4e1d8d9ea343987120c..f080e9fdcc5541296d6598b1fb487f785b50681c 100644
--- a/src/components/QABookComponents/ContentComp.vue
+++ b/src/components/QABookComponents/ContentComp.vue
@@ -1,36 +1,59 @@
 <template>
   <div>
     <div v-if="name" class="text-[1.15rem] pb-4">
-      <a @click="yeet" class="cursor-pointer">
-        {{ book.id }}.
+      <a @click="goToChapter" class="cursor-pointer">
+        {{ id }}.
         {{ name }}
       </a>
       </div>
     <div v-if="subchapters" class="pl-5">
-      <div v-for="chapter in subchapters">
-        <ContentComp :book="chapter"></ContentComp>
+      <div v-for="(chapter, index) in subchapters" :key="chapter.id">
+        <ContentComp :id="formId(index + 1)" @idList="sendId(chapter.id)" :book="chapter" :original="original"></ContentComp>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   name: "ContentComp",
   props: {
-    book: Object
+    book: {},
+    original: {},
+    id: ""
   },
   data() {
     return {
-      id: this.book.id,
       name: this.book.name,
       subchapters: this.book.subchapters
     }
   },
   methods: {
-    yeet() {
-      console.log("chapter", this.id, "was clicked")
-
+    formId(newIndex) {
+      return this.id.toString() + "." + newIndex.toString()
+    },
+    goToChapter() {
+      this.openChapters()
+      // TODO: refs for scrolling
+      this.sendId()
+      //this.$emit('idList', this.id.split("."))
+      // TODO: close chapters when clicking on open chapters??
+    },
+    sendId(value) {
+      if (value == null) value = this.id // May be undefined because no child is present; change value to current id.
+      //console.log("emitting", value, "from", this.id + "..")
+      this.$emit('idList', value)
+    },
+    openChapters() {
+      let idlist = this.id.split(".")
+      let book = this.original
+      for (let i = 0; i < idlist.length; i++) {
+        const id = parseInt(idlist[i]) - 1
+        book[id].toggle = true
+        if (i < idlist.length - 1) book = book[id].subchapters
+      }
     }
   }
 }
diff --git a/src/components/QABookComponents/EditMenu.vue b/src/components/QABookComponents/EditMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c3ed14aa1eb7c7a97f01eed8edb5fce88786442
--- /dev/null
+++ b/src/components/QABookComponents/EditMenu.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "EditMenu"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/QABookComponents/TreeContent.vue b/src/components/QABookComponents/TreeContent.vue
index 694f834cd3811f1048fd2f160b6f84ab893ceea8..dfdaad77987455c8a5e7b68f836aa7c7720d8fe5 100644
--- a/src/components/QABookComponents/TreeContent.vue
+++ b/src/components/QABookComponents/TreeContent.vue
@@ -24,13 +24,8 @@ export default {
   name: "TreeContent",
   components: {TreePic, TreeList, TreeText},
   props: {
-    content: Object,
+    content: {},
   },
-  data() {
-    return {
-      content: this.content
-    }
-  }
 }
 </script>
 
diff --git a/src/components/QABookComponents/TreeText.vue b/src/components/QABookComponents/TreeText.vue
index 70b12eace118636fc91f49cd6ecdbacc116e05d1..a36a62ab783ec611f3916824ffcaa3c033ce35a9 100644
--- a/src/components/QABookComponents/TreeText.vue
+++ b/src/components/QABookComponents/TreeText.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-4 pb-4">
+  <div class="pb-4">
     <div v-for="textel in text">
       <p class="max-w-[700px]">
         {{ textel }}
diff --git a/src/components/QABookComponents/TreeView.vue b/src/components/QABookComponents/TreeView.vue
index 4f986d2a7fbbb4bcbac79407cd69e3600de4e01e..b4e5fff30ab13486fe56ce1119c6f43c680a4952 100644
--- a/src/components/QABookComponents/TreeView.vue
+++ b/src/components/QABookComponents/TreeView.vue
@@ -1,30 +1,72 @@
 <template>
   <div>
-    <div class="flex flex-row">
-      <!-- Igal peatأ¼kil on nimi -->
-      <div v-if="name" class="text-[1.40rem] font-bold pb-4"> {{ name }}</div>
-
-      <!-- Kas peatأ¼kil on sisu vأµi alapeatأ¼kke? -->
-      <div v-if="content || subchapters">
-        <button @click="toggleClick">
-          <font-awesome-icon icon="fa-solid fa-caret-down" class="pl-2"/> <!-- Siis lisa nupp -->
-        </button>
+    <div class="flex flex-row max-w-max" :ref="this.id" @mouseover="hover = true" @mouseleave="hover = false">
+      <div class="flex flex-row">
+        <!-- Igal peatأ¼kil on nimi -->
+        <div v-if="name" class="text-[1.40rem] font-bold pb-4"> {{ name }}</div>
+
+        <!-- Kas peatأ¼kil on sisu vأµi alapeatأ¼kke? -->
+        <div v-if="content || subchapters">
+          <button @click="toggleClick">
+            <font-awesome-icon icon="fa-solid fa-caret-down" class="pl-2"/> <!-- Siis lisa nupp -->
+          </button>
+        </div>
       </div>
+
+      <!--  Is changing enabled?    -->
+      <Transition name="editButton">
+        <div v-if="this.edit && hover" @mouseleave="editingMode = false">
+          <button @click="editingMode ? editingMode = false : editingMode = true">
+            <font-awesome-icon class="pl-5" icon="fa-solid fa-bars-staggered"/>
+          </button>
+
+          <div class="ml-3 -mt-[200px] p-10">
+            <Transition name="optionsMenu">
+              <div class="bg-[#ebebeb] p-6 absolute rounded-md shadow-2xl border-2 border-solid border-[#b2a7b8] "
+                   v-if="editingMode"
+                   @mouseleave="editingMode = false">
+                <div class="flex flex-col items-start space-y-4">
+                  <button>
+                    <font-awesome-icon class="mr-4" icon="fa-solid fa-pen"/>
+                    Muuda nime
+                  </button>
+                  <button>
+                    <font-awesome-icon class="mr-4 cursor-pointer" icon="fa-solid fa-pen-to-square"/>
+                    Muuda sisu
+                  </button>
+                  <button class="max-w-max items-center">
+                    <font-awesome-icon class="mr-5 cursor-pointer" icon="fa-solid fa-paragraph"/>
+                    Lisa alla..
+                  </button>
+                  <button class="flex flex-row items-center" @click="deleteById">
+                    <font-awesome-icon class="mr-6" icon=" fa-solid fa-trash"/>
+                    <p class="text-red-600 font-bold">Kustuta</p>
+                  </button>
+                </div>
+              </div>
+            </Transition>
+          </div>
+
+        </div>
+      </Transition>
+
     </div>
 
     <!-- Sisu -->
     <Transition name="sub">
-      <div v-if="toggled" class="pl-10"> <!-- Ainult siis, kui on sisu kuvada -->
-
+      <div v-if="this.chapter.toggle" class="pl-10 border-l-2 border-[#b2a7b8] mb-5">
+        <!-- Ainult siis, kui on sisu kuvada -->
         <div v-if="content">
           <div v-for="element in content">
             <TreeContent :content="element"></TreeContent>
           </div>
         </div>
 
-        <div v-if="subchapters"> <!-- Rekursiivselt uutesse harudesse -->
-          <div v-for="chapter in subchapters">
-            <TreeView :book="chapter" :toggle="false"></TreeView>
+        <div v-if="subchapters">
+          <!-- Rekursiivselt uutesse harudesse -->
+          <div v-for="(chapter, index) in subchapters" :key="this.chapter.toggle && id">
+            <TreeView :id="formId(index + 1)" :book="book" :chapter="chapter" @sendRefs="forwardRef"
+                      :edit="edit"></TreeView>
           </div>
         </div>
 
@@ -41,22 +83,65 @@ export default {
   name: "TreeView",
   components: {TreeContent},
   props: {
-    book: Object,
-    toggle: Boolean
+    id: String,
+    chapter: Object,
+    edit: Boolean,
+    book: Object
   },
   data() {
     return {
-      toggled: this.toggle,
-      name: this.book.name,
-      subchapters: this.book.subchapters,
-      content: this.book.content
-
+      name: this.chapter.name,
+      subchapters: this.chapter.subchapters,
+      content: this.chapter.content,
+      hover: false,
+      editingMode: false
     }
   },
   methods: {
+    formId(newIndex) {
+      return this.id.toString() + "." + newIndex.toString()
+    },
+    forwardRef(value) {
+      this.sendRef(value.id, value.ref)
+    },
+    sendRef(id, ref) {
+      if (id === null) id = this.id
+      this.$emit('sendRefs', {id: id, ref: ref})
+    },
     toggleClick() {
-      this.toggled = this.toggled === false;
+      if (this.chapter.toggle === false) {
+        this.chapter.toggle = true;
+        this.$nextTick(
+            () => {
+              if (this.$refs[this.id] !== null) {
+                this.$refs[this.id.toString()].scrollIntoView({behavior: "smooth"})
+              }
+            }
+        );
+      } else if (this.chapter.toggle === true) {
+        this.chapter.toggle = false;
+      }
+    },
+    deleteById() {
+      console.log("deleting..")
+      let book = this.book
+      let idList = this.id.split(".")
+
+      console.log("idlist:", idList)
+
+      for (let i = 0; i < idList.length; i++) {
+        console.log("i", i, "idlist:", idList[i], "book state:", book)
+        if (i === idList.length - 1) {
+          book = book.splice(idList[i] - 1, 1)
+          console.log("el with id", idList[i] - 1, "was removed")
+        } else {
+          book = book[idList[i] - 1].subchapters
+        }
+      }
     }
+  },
+  mounted() {
+    this.sendRef(this.id, this.$refs[this.id])
   }
 }
 </script>
@@ -65,14 +150,36 @@ export default {
 .sub-enter-active {
   transition: transform 0.7s ease-out;
 }
+
 .sub-leave-active {
   transition: transform 0.5s ease-in;
 }
 
 .sub-enter-from {
-  transform: translateY(-30px);
+  transform: translateY(-20px);
 }
+
 .sub-leave-to {
-  transform: translateY(-30px);
+  transform: translateY(-20px);
+}
+
+.editButton-enter-active,
+.editButton-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.editButton-enter-from,
+.editButton-leave-to {
+  opacity: 0;
+}
+
+.optionsMenu-enter-active,
+.optionsMenu-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.optionsMenu-enter-from,
+.optionsMenu-leave-to {
+  opacity: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index d897dc6f5a08aad6cd25e52f6f25b6f5b67fbf7e..3102f312ce93c5e51272b91d64a1c171c4f7ebc6 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-      class="bg-white rounded-3xl sm:rounded-none sm:rounded-br-3xl drop-shadow-sm h-max m-5 sm:mr-5 sm:mb-5 sm:mt-0 sm:ml-0">
+      class="bg-white rounded-3xl sm:rounded-none sm:rounded-br-3xl h-max m-5 sm:mr-5 sm:mb-5 sm:mt-0 sm:ml-0">
     <div class="p-5">
       <div class="justify-between flex flex-row">
         <div><h5 class="text-2xl pb-2">Viited</h5></div>
diff --git a/src/components/SpecificSearch.vue b/src/components/SpecificSearch.vue
index b6f87cb9b82b1336c2eea1f2177d06969305837c..bfd1d01b3a5b9f8fe1d292b6f1bc0853a4d8f955 100644
--- a/src/components/SpecificSearch.vue
+++ b/src/components/SpecificSearch.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="pl-5 h-auto">
-    <form class=" items-center content-around flex">
-      <input class="placeholder: pl-3 py-1 rounded-2xl bg-white" type="search" id="query" name="query"
-             placeholder="Otsi..">
-      <button class="pl-2 text-xl">
-        <font-awesome-icon icon="fa-solid fa-magnifying-glass"/>
-      </button>
+    <form class=" items-center content-around flex rounded-2xl">
+      <div class="bg-gradient-to-r from-transparent to-gray-300 rounded-2xl pr-3 items-center">
+        <input class="placeholder: pl-3 py-1 rounded-2xl bg-[#F0F0F0]" type="search" id="query" name="query"
+               placeholder="Otsi..">
+        <button class="pl-2 text-xl">
+          <font-awesome-icon icon="fa-solid fa-magnifying-glass"/>
+        </button>
+      </div>
     </form>
   </div>
 </template>
diff --git a/src/firebase/News/index.js b/src/firebase/News/index.js
index 0505b5461ca1a193c56ce3d233f6ba349754ad5c..14b677bfb9d4df0d3dd985add1a5d83731371b0c 100644
--- a/src/firebase/News/index.js
+++ b/src/firebase/News/index.js
@@ -65,7 +65,7 @@ function returnLatestNews() {
     copy.sort(function (o2, o1) {
         return new Date(o1.created.seconds*1000) - new Date(o2.created.seconds*1000)
     })
-    return copy[0];
+    return copy.slice(0, 2);
 }
 
 export {
diff --git a/src/main.js b/src/main.js
index d1468abb2ddb396313e6993bb256369981d15f49..27a83df440312cacf773c84b8488f1024c302283 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,10 +23,15 @@ import "vue-toastification/dist/index.css"
 
 import './assets/tailwind.css'
 import 'tw-elements'
+import 'v-calendar/dist/style.css';
+import VCalendar from 'v-calendar';
+
 const app = createApp(App)
 
+
 app.use(router)
 app.use(store)
+app.use(VCalendar, {})
 app.use(Toast, {position: POSITION.TOP_CENTER, timeout: 2000})
 app.component('QuillEditor', QuillEditor)
 app.component('font-awesome-icon', FontAwesomeIcon)
diff --git a/src/router/index.js b/src/router/index.js
index 43c352193ec0010fbebd6e77e9f52f02eb8a7d13..b7c70936401e8ffa7dfe112538aadc279fe97848 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -108,6 +108,11 @@ const router = createRouter({
       name: 'login',
       component: () => import('../views/Login.vue'),
     },
+    {
+      path: '/lisajuhis',
+      name: 'lisajuhis',
+      component: () => import('../views/AddNewInstruction.vue')
+    }
   ]
 })
 
diff --git a/src/views/AddNewInstruction.vue b/src/views/AddNewInstruction.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf12eed9a2c570c886ef956e516bdb20d69d0499
--- /dev/null
+++ b/src/views/AddNewInstruction.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="bg-blue-300 m-10">
+    <div class="p-10 space-y-4">
+      <div>
+        <label>peatأ¼ki ID</label>
+        <input>
+      </div>
+      <div class="cursor-pointer">
+        <!-- TODO: dropdown menu-->
+        Lisa uus tekst
+        <font-awesome-icon icon="fa-solid fa-caret-down"/>
+      </div>
+      <div class="bg-white" v-if="quill">
+        <QuillEditor v-model:content="sisu" theme="snow" id="sisu"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
+export default {
+  name: "AddNewInstruction",
+  data() {
+    return {
+      quill: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
index 987486ac9334ab80d7565700374c95304f33436f..5bd3283dfd5759e91afeb21898ff3cbc00790e16 100644
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -1,27 +1,37 @@
 <template>
-  <div class="flex flex-col sm:grid sm:grid-cols-4">
-    <Sidebar class="order-last sm:order-first col-span-1"></Sidebar>
-    <div class="col-span-3 flex flex-col mb-5">
-
-      <div class="ml-5 sm:ml-0 mt-5 flex flex-row items-center justify-between">
-        <p class="text-4xl">Kontaktid</p>
-        <div class="flex flex-row justify-end mr-5">
-          <SpecificSearch class="mr-3"></SpecificSearch>
-          <router-link to="lisakontakt">
-          <button class="bg-[#EF426F] py-1 px-4 rounded-2xl text-white">
+  <body class="flex flex-col sm:grid sm:grid-cols-4">
+  <Sidebar class="order-last sm:order-first col-span-1"></Sidebar>
+  <main class="col-span-3 flex flex-col mb-5">
+    <div class="mr-5 ml-5 sm:ml-0  p-3 flex flex-row items-center justify-between bg-white rounded-b-3xl">
+      <h1 class="text-2xl">Kontaktid</h1>
+      <div class="flex flex-row justify-end">
+        <!--Searchbar-->
+        <div class="h-auto">
+          <form class="items-center content-around flex rounded-2xl">
+            <div class="">
+              <input class="border-b-2 border-[#b2a7b8] mr-3 placeholder: pl-3 py-1" type="search" id="query" name="query"
+                     placeholder="Otsi..">
+              <!--                <button class="pl-2 text-xl">-->
+              <!--                  <font-awesome-icon icon="fa-solid fa-magnifying-glass"/>-->
+              <!--                </button>-->
+            </div>
+          </form>
+        </div>
+        <!--Adding a new contact-->
+        <router-link to="lisakontakt">
+          <button class="bg-[#EF426F] py-1 px-4 rounded-md text-white">
             <font-awesome-icon class="mr-2" icon="fa-solid fa-user-plus"/>
             Lisa uus
           </button>
-          </router-link>
-        </div>
-      </div>
-
-      <div class="sm:mr-5 mt-5 sm:ml-0 mx-5" v-for="category in categories">
-        <ContactComponent class="" :category="category.category" :profiles="category.profile"></ContactComponent>
+        </router-link>
       </div>
     </div>
-
-  </div>
+    <!--Contactlist-->
+    <div class="sm:mr-5 mt-5 sm:ml-0 mx-5" v-for="category in categories">
+      <ContactComponent class="" :category="category.category" :profiles="category.profile"></ContactComponent>
+    </div>
+  </main>
+  </body>
 </template>
 
 <script>
diff --git a/src/views/FileView.vue b/src/views/FileView.vue
index d37b949e1afeefafe6357a34d9eb04ab055f4ad5..a5f5315dc921b98dd10d45deaf5f2a310e9aaf49 100644
--- a/src/views/FileView.vue
+++ b/src/views/FileView.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="flex flex-col sm:grid sm:grid-cols-4">
     <Sidebar class="order-last sm:order-first col-span-1"></Sidebar>
-    <div class="col-span-3 flex flex-col ml-5 sm:ml-0 mt-5 mr-5">
+    <div class="col-span-3 flex flex-col ml-5 sm:ml-0 mr-5">
 
-      <div class="head flex flex-row justify-between">
-        <p class="text-4xl">Dokumendid</p>
+      <div class="head flex flex-row justify-between bg-white p-3 rounded-b-3xl mb-5 items-center">
+        <p class="text-2xl">Dokumendid</p>
         <div>
-          <input type="text" class="border-2 mb-5 rounded h-10 p-2 mr-5" placeholder="Otsi dokumente"
+          <input type="text" class="border-2 rounded h-8 p-2 mr-5" placeholder="Otsi dokumente"
                  @input="onSearch"
           />
           <router-link to="juhendid">
-            <button class="bg-[#fff] py-1 px-4 rounded-2xl text-black h-10 mr-5 border-2 border-gray-200">
+            <button class="bg-[#fff] px-4 rounded-2xl h-8 text-black mr-5 border-2 border-gray-200">
               Tagasi juhendisse
             </button>
           </router-link>
           <router-link to="faililaadimine">
-            <button class="bg-[#EF426F] py-1 px-4 rounded-2xl text-white h-10">
+            <button class="bg-[#EF426F] py-1 px-4 rounded-md text-white">
               <font-awesome-icon class="mr-2" icon="fa-solid fa-file-circle-plus"/>
               Lisa uusi faile
             </button>
diff --git a/src/views/HelpdeskView.vue b/src/views/HelpdeskView.vue
index 35c01ff5f32c11d835d670c590222e68e53eb3a3..78a1f4202b0c4a9685d1a029efec1c8dadd582be 100644
--- a/src/views/HelpdeskView.vue
+++ b/src/views/HelpdeskView.vue
@@ -27,6 +27,7 @@
       <select v-model="tyyp" id="tأ¼أ¼p" name="tأ¼أ¼p" @change="changeEmail(tyyp)" required>
         <option value="Tehniline abi">Tehniline abi</option>
         <option value="Tagasiside">Tagasiside/Tأ¤nuavaldus</option>
+        <option value="Tagasiside">Tagasiside/Tأ¤nuavaldus</option>
         <option value="Muu">Muu teade</option>
       </select>
       <label for="osakond">Osakond</label>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ae441550043993902295ecebc0580b2c7c37f20c..418a2ef06138ac84f699cb93ca4c49ff0a7f3e38 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,11 +1,74 @@
-<script setup>
-import Sidebar from "../components/Sidebar.vue";
-import NewsFront from "../components/NewsComponents/NewsFront.vue";
-</script>
+<script setup></script>
 
 <template>
   <main class="flex flex-col sm:grid sm:grid-cols-4">
-    <Sidebar class="order-last sm:order-first"></Sidebar>
-    <NewsFront class="col-span-3 sm:mr-5 mt-5 sm:ml-0 mx-5 sm:mb-5  "></NewsFront>
+    <!--Sidebar(s)-->
+    <div class="sm:col-span-1">
+      <div class="p-10 m-7 bg-white rounded-xl divide-y divide-[#b2a7b8]">
+        <div>أœlesanded</div>
+        <div>
+          Sul ei ole uusi أ¼lesanded.
+        </div>
+      </div>
+
+      <div class="p-10 m-7 bg-white rounded-xl divide-y divide-[#b2a7b8]">
+        <div>Sأ¼nnipأ¤evad</div>
+        <div>Uusi sأ¼nnipأ¤evi pole.</div>
+      </div>
+
+      <div class="p-10 m-7 bg-white rounded-xl divide-y divide-[#b2a7b8]">
+        <div>Kalender</div>
+        <div class="items-center justify-center">
+          <v-calendar locale="et" class="mt-5" is-expanded></v-calendar>
+        </div>
+      </div>
+
+      <div class="p-10 m-7 bg-white rounded-xl divide-y divide-[#b2a7b8]">
+        <div>
+          Viited
+        </div>
+        <div>Viiteid pole.</div>
+      </div>
+    </div>
+    <!--Main dashboard-->
+    <div class="sm:col-span-3">
+      <div class="bg-white mt-7 rounded-xl pr-10 pl-10 pt-6 pb-6 mb-7 divide-y divide-[#b2a7b8] mr-7">
+        <!--Dashboard-->
+        <div class="flex flex-row justify-between items-center mb-6">
+          <div class="text-4xl">
+            Tere, kasutaja!</div>
+          <div class="flex flex-col">
+            <p>Tأ¤na on 8. veebruar.</p>
+            <p>Kell on 15.10.</p>
+          </div>
+        </div>
+        <!--Announcements-->
+        <div>
+          <div class="mt-6 mb-6">
+            <div>
+              <Announcements :size="'big'"></Announcements>
+            </div>
+          </div>
+        </div>
+        <!--News-->
+        <div class="">
+          <div class="mt-6">
+            <div class="pb-6"><h1 class="text-2xl">Uudised</h1></div>
+            <NewsFront class=""></NewsFront>
+          </div>
+        </div>
+      </div>
+    </div>
+
   </main>
 </template>
+<script>
+import NewsFront from "@/components/NewsComponents/NewsFront.vue";
+import Announcements from "@/components/Announcements.vue";
+
+
+export default {
+  components: {Announcements, NewsFront}
+
+}
+</script>
\ No newline at end of file
diff --git a/src/views/InstructionsView.vue b/src/views/InstructionsView.vue
index 9ba4ce0c22d52dbe52ce773cc567cd63895f00b7..41bccf03aa3241b2664c107768ffda089e79beb7 100644
--- a/src/views/InstructionsView.vue
+++ b/src/views/InstructionsView.vue
@@ -1,46 +1,100 @@
 <template>
   <div class="flex flex-col sm:grid sm:grid-cols-4">
+    <!--      SIDEBAR   -->
     <div class="flex flex-col">
-      <Sidebar class="order-last sm:order-first col-span-1"></Sidebar>
 
-      <div
-          class="bg-white sm:sticky-top sm:top-5  p-5 h-max col-span-1 rounded-3xl sm:rounded-none sm:rounded-br-3xl sm:rounded-tr-3xl drop-shadow-sm h-max m-5 sm:mr-5 sm:mb-5 sm:mt-0 sm:ml-0">
+      <!--      SIDEBAR   -->
+      <Sidebar class="order-last sm:order-first col-span-1"></Sidebar>
 
-        <div class="text-2xl pb-5"><h1 >Sisukord</h1></div>
-        <div v-for="chapter in book">
-          <ContentComp :book="chapter"></ContentComp>
+      <!--      TABLE OF CONTENTS   -->
+      <div id="table"
+          class="max-h-screen overflow-x-hidden overflow-scroll bg-white sm:sticky-top sm:top-5 p-5 h-max col-span-1 rounded-3xl sm:rounded-none sm:rounded-br-3xl sm:rounded-tr-3xl h-max m-5 sm:mr-5 sm:mb-5 sm:mt-0 sm:ml-0">
+        <div class="">
+          <div class="text-2xl pb-5"><h1>Sisukord</h1></div>
+          <div v-for="(chapter, index) in book" :key="chapter.id">
+            <ContentComp :id="(index + 1).toString()" @idList="idList" :book="chapter" :original="book"></ContentComp>
+          </div>
         </div>
       </div>
-
     </div>
-    <div class="col-span-3 flex flex-col ml-5 sm:ml-0 mt-5 mr-5 pb-5">
-
-      <div class="head flex flex-row justify-between">
-        <p class="text-4xl">Kvaliteedikأ¤siraamat</p>
-        <div>
-          <input type="text" class="border-2 mb-5 rounded h-10 p-2 mr-5" placeholder="Otsi mأ¤rksأµnu"
-                 @input="onSearch"
-          />
-          <button class="bg-[#EF426F] py-1 px-4 rounded-2xl text-white h-10 ">
-            <font-awesome-icon class="mr-2" icon="fa-solid fa-file-circle-plus"/>
-            Muuda kأ¤siraamatut
+
+    <div class="col-span-3 flex flex-col ml-5 sm:ml-0 mr-5 pb-5 ">
+
+      <!--      HEADING   -->
+      <div class="head md:flex md:flex-row md:justify-between bg-white mb-5 rounded-b-xl p-3">
+
+        <p class="text-2xl">Kvaliteedikأ¤siraamat</p>
+
+        <div class="md:flex md:flex-row">
+          <button @click="!enableEdit ? enableEdit = true : saveBook()"
+                  class="bg-[#EF426F] font-medium py-1 px-4 rounded-md text-white flex flex-row items-center">
+            <font-awesome-icon v-if="!enableEdit" class="mr-2" icon="fa-solid fa-file-circle-plus"/>
+            <p v-if="!enableEdit">Muuda kأ¤siraamatut</p>
+            <font-awesome-icon v-if="enableEdit" class="mr-2" icon="fa-solid fa-floppy-disk"/>
+            <p v-if="enableEdit">Salvesta kأ¤siraamat</p>
           </button>
+
         </div>
       </div>
 
+      <!--      QUALITY ASSURANCE BOOK    -->
       <div class="flex flex-row justify-between bg-white p-5 rounded-xl text-xl ">
 
         <div class="flex flex-col">
+          <p v-if="enableEdit" class="font-bold text-red-600 mb-4">Kأ„SIRAAMAT MUUTMISEL!</p>
+
+          <!--    FIRST HEADING     -->
+          <div class="justify-center">
+            <div class="flex flex-col divide-y divide-[#b2a7b8] max-w-max">
+              <div>{{ doc_name }}</div>
+              <div>Kinnitatud: {{ confirmed_by }} {{ last_change }}</div>
+              <div>Koostatud: {{ made_by }}</div>
+              <div>Kehtivus: {{ valid_til }}</div>
+            </div>
+          </div>
+
           <div class="pt-5 pb-5 text-xl space-y-5">
             <div v-for="sentence in text" class="max-w-[900px]">
               <p class="first-letter:text-3xl"> {{ sentence }} </p>
             </div>
           </div>
-          <div v-for="chapter in book" class="flex flex-col">
-            <TreeView :book="chapter" :toggle="false"></TreeView>
+
+          <!--    RECURSIVE BOOK ELEMENTS      -->
+          <div v-for="(chapter, index) in book" class="flex flex-col" :key="chapter.id">
+            <TreeView :id="(index + 1).toString()" :book="book" :chapter="chapter" @sendRefs="getRefs" :edit="enableEdit"></TreeView>
           </div>
-        </div>
 
+          <div v-if="enableEdit" class="flex flex-col" @mouseleave="editingMenu = false">
+            <div class="cursor-pointer hover:bg-gray-200 max-w-max mb-2 -m-2 p-2 hover:rounded-md select-none"
+                 @click="editingMenu ? editingMenu = false : editingMenu = true">
+<!--              <font-awesome-icon class="mr-2" icon="fa-solid fa-file-pen"/>-->
+              Lisa kأ¤siraamatusse..
+            </div>
+            <Transition name="optionsMenu">
+              <div v-if="editingMenu" class="ml-[250px] absolute -mt-[122px]">
+                <div class="bg-[#ebebeb] max-w-max p-6 rounded-md shadow-2xl border-2 border-solid border-black"
+                     v-if="editingMenu"
+                     @mouseleave="editingMenu = false">
+                  <div class=" items-start space-y-4  items-center">
+                    <button class="max-w-max items-center">
+                      <font-awesome-icon class="mr-3 cursor-pointer" icon="fa-solid fa-paragraph"/>
+                      Lisa uus paragrahv
+                    </button>
+                    <button class="flex flex-row items-center">
+                      <font-awesome-icon class="mr-5 cursor-pointer" icon="fa-solid fa-file-lines"/>
+                      Lisa uus tekstivأ¤li
+                    </button>
+                    <button class="flex flex-row items-center">
+                      <font-awesome-icon class="mr-4 cursor-pointer" icon="fa-solid fa-image"/>
+                      Lisa uus pilt
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </Transition>
+
+          </div>
+        </div>
       </div>
 
     </div>
@@ -62,15 +116,60 @@ export default {
     return {
       book: [],
       text: [],
-      id_counter: 0
+      refs: {},
+      enableEdit: false,
+      editingMenu: false,
+      last_change: "",
+      made_by: "",
+      confirmed_by: "",
+      valid_til: "",
+      doc_name: ""
     }
   },
   mounted() {
     this.text = qabook.text
     this.book = qabook.chapters
+    this.last_change = qabook.last_change
+    this.made_by = qabook.made_by
+    this.confirmed_by = qabook.confirmed_by
+    this.valid_til = qabook.valid_til
+    this.doc_name = qabook.doc_name
+  },
+  methods: {
+    saveBook() {
+      console.log("Book saving..")
+      this.enableEdit = false
+    },
+    idList(id) {
+      this.$nextTick(() => {
+        this.refs[id].scrollIntoView({behavior: "smooth"})
+      });
+    },
+    getRefs(ref) {
+      this.refs[ref.id] = ref.ref
+    },
   }
 }
 </script>
 
 <style scoped>
+/* Hiding the scrollbar on the table of contents because A E S T H E T I C S */
+#table {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+#table::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.optionsMenu-enter-active,
+.optionsMenu-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.optionsMenu-enter-from,
+.optionsMenu-leave-to {
+  opacity: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/NewsPage.vue b/src/views/NewsPage.vue
index 1dbe3ff83fbc176d186d69ed4aebd2224247a8c5..fc870ae557b404fbc4c4673bff4cb52e723745af 100644
--- a/src/views/NewsPage.vue
+++ b/src/views/NewsPage.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="flex justify-center flex-col sm:grid sm:grid-cols-4">
     <Sidebar class=" order-last sm:order-first"></Sidebar>
-    <div class="rounded-3xl col-span-3 sm:mr-5 mt-5 sm:ml-0 mx-5 sm:mb-5 ">
+    <div class="rounded-3xl col-span-3 sm:mr-5 sm:ml-0 mx-5 sm:mb-5 ">
 
-      <div class="flex flex-row justify-between items-center">
-        <h1 class="text-4xl">Uudised</h1>
+      <div class="flex flex-row justify-between items-center bg-white p-3 rounded-b-3xl">
+        <h1 class="text-2xl">Uudised</h1>
         <div class="flex flex-row">
 
           <RouterLink to="lisauudis">
-            <button class="bg-[#EF426F] py-1 px-4 rounded-2xl text-white">
+            <button class="bg-[#EF426F] py-1 px-4 rounded-md text-white">
               <font-awesome-icon class="" icon="fa-solid fa-pen-to-square"/>
               Lisa uus
             </button>
@@ -16,13 +16,13 @@
         </div>
       </div>
 
-      <div class="bg-white p-5 rounded-3xl mt-5">
+      <div class="bg-white p-5 rounded-3xl mt-5 ">
           <!-- Kuu kaupa v-for -->
           <div v-for="(newObject, name, index) in sortedNews" class="">
 
             <div class="grid grid-cols-9 gap-4">
               <!-- Kuu ja aasta -->
-              <div class="col-span-1 pt-8">
+              <div class="col-span-1 pt-8 mb-4 border-r-2 border-[#b2a7b8]">
                 {{ this.returnMonth(this.format(newObject[0].created).month) }}
                 {{ this.format(newObject[0].created).year }}
               </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index f6309f765fcf99f9b1fb16eab521e435ffbe2651..719a765c53ec5bb25dcaf337779a798dedb66fd7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,10 @@ module.exports = {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
     './node_modules/tw-elements/dist/js/**/*.js',
   ],
+  experimental: {
+    optimizeUniversalDefaults:true
+
+  },
   theme: {
     extend: {},
   },