diff --git a/.github/workflows/test-prs.yml b/.github/workflows/test-prs.yml
index 363c1f9..daf681a 100644
--- a/.github/workflows/test-prs.yml
+++ b/.github/workflows/test-prs.yml
@@ -37,6 +37,7 @@ jobs:
         uses: actions/upload-artifact@v4
         if: matrix.platform == 'ubuntu-22.04'
         with:
+          name: linux-packages.zip
           path: |
             ${{ github.workspace }}/src-tauri/target/release/bundle/**/*.deb
             ${{ github.workspace }}/src-tauri/target/release/bundle/**/*.rpm
@@ -46,6 +47,7 @@ jobs:
         uses: actions/upload-artifact@v4
         if: matrix.platform == 'windows-latest'
         with:
+          name: windows-installers.zip
           path: |
             ${{ github.workspace }}\src-tauri\target\release\bundle\**\*.exe
             ${{ github.workspace }}\src-tauri\target\release\bundle\**\*.nsis
diff --git a/README.md b/README.md
index 4fdd8b9..9016f55 100644
--- a/README.md
+++ b/README.md
@@ -3,8 +3,8 @@
 NER Annotator for SpaCy allows you to create training data for creating a custom NER Model with custom tags.
 
 - Web Application: [https://tecoholic.github.io/ner-annotator/](https://tecoholic.github.io/ner-annotator/)
-- Linux: [Debian Package or an AppImage](https://github.com/tecoholic/ner-annotator/releases)
-- Windows: [x64 MSI Installer](https://github.com/tecoholic/ner-annotator/releases)
+- Linux: [Debian Packages & AppImage](https://github.com/tecoholic/ner-annotator/releases)
+- Windows: [Installers](https://github.com/tecoholic/ner-annotator/releases)
 
 ## Features
 
@@ -37,33 +37,33 @@ The JSON file created by the tool is generic and simply lists the start and end
 
 ### Requirements
 
-1. Node JS 14.x
+1. NodeJS v21.x
 2. Yarn Package Manager
-3. Rust (for building desktop versions)
+3. Rust toolchain (for building desktop versions)
 
 ### Running it locally for development
 
 1. Open another terminal and start the server for the UI
 
 ```sh
-yarn
-yarn serve
+yarn install
+yarn dev
 ```
 
-Now go to [http://localhost:8081/ner-annotator/](http://localhost:8081/ner-annotator/)
+Now go to [http://localhost:5173](http://localhost:5173)
 
 ### Developing the desktop application
 
-The desktop applications have been created using [Tauri](https://tauri.studio).
+The desktop applications have been created using [Tauri](https://v2.tauri.app/).
 
 ```sh
-yarn tauri:serve
+yarn tauri dev
 ```
 
 To build the final binaries run
 
 ```sh
-yarn tauri:build
+yarn tauri build
 ```
 
 ## Credits
diff --git a/package.json b/package.json
index cb6217b..8596d81 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ner-annotator",
-  "version": "2.0.0-alpha",
+  "version": "2.0.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -15,6 +15,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@fontsource-variable/nunito": "^5.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
@@ -46,7 +47,6 @@
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/test-utils": "^2.4.6",
-    "bulma": "^1.0.2",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-playwright": "^1.6.2",
diff --git a/public/assets/step-1.png b/public/assets/step-1.png
index f591793..a7d7f79 100644
Binary files a/public/assets/step-1.png and b/public/assets/step-1.png differ
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index c781c7a..ad5adc1 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "productName": "NER Annotator",
   "mainBinaryName": "NER Annotator",
-  "version": "2.0.0-alpha",
+  "version": "2.0.0",
   "identifier": "in.arunmozhi.ner-annotator",
   "build": {
     "beforeDevCommand": "yarn dev",
diff --git a/src/App.vue b/src/App.vue
index c486376..723d0b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,21 @@
 <template>
   <div
     class="fullscreen"
-    style="overflow-y:scroll;"
+    style="overflow-y: scroll"
     @dragover.prevent="onDragEnter"
     @dragenter="onDragEnter"
     @dragleave.self="onDragLeave"
     @drop.stop.prevent="onDrop"
   >
-    <div :style="{'pointer-events': overlayActive ? 'none' : 'auto'}">
-      <q-layout view="hHh lpR fFf">
-        <menu-bar v-if="currentPage !== 'start'" />
+    <div :style="{ 'pointer-events': overlayActive ? 'none' : 'auto' }">
+      <q-layout view="hHh lpR lFf">
+        <menu-bar />
 
         <q-drawer
-          :model-value="currentPage !== 'start'"
+          behavior="desktop"
           bordered
+          side="left"
+          :model-value="currentPage === 'annotate'"
           :class="$q.dark.isActive ? 'bg-dark' : 'bg-grey-2'"
         >
           <annotation-sidebar />
@@ -27,7 +29,12 @@
           <annotation-page v-if="currentPage === 'annotate'" />
         </q-page-container>
       </q-layout>
-      <drag-n-drop-overlay :style="{'visibility': overlayActive && pendingFileDrop == null ? 'visible' : 'hidden'}" />
+      <drag-n-drop-overlay
+        :style="{
+          visibility:
+            overlayActive && pendingFileDrop == null ? 'visible' : 'hidden',
+        }"
+      />
       <exit-dialog
         :show="pendingFileDrop != null && currentPage != 'start'"
         @hide="pendingFileDrop = null"
@@ -55,7 +62,7 @@ export default {
     AnnotationPage,
     AnnotationSidebar,
     DragNDropOverlay,
-    ExitDialog
+    ExitDialog,
   },
   setup() {
     const $q = useQuasar();
@@ -79,19 +86,22 @@ export default {
   },
   data() {
     return {
-      currentPage: "start",
       overlayActive: false,
       pendingFileDrop: null,
     };
   },
   computed: {
-    ...mapState(["annotations", "classes"]),
+    ...mapState(["annotations", "classes", "currentPage"]),
   },
   methods: {
-    ...mapMutations(["loadClasses", "loadAnnotations", "setInputSentences", "clearAllAnnotations", "resetIndex"]),
-    switchToPage(page) {
-      this.currentPage = page;
-    },
+    ...mapMutations([
+      "loadClasses",
+      "loadAnnotations",
+      "setInputSentences",
+      "clearAllAnnotations",
+      "resetIndex",
+      "switchToPage",
+    ]),
     onDragEnter() {
       this.overlayActive = true;
     },
@@ -100,15 +110,15 @@ export default {
     },
     onDrop(event) {
       this.overlayActive = false;
-      this.pendingFileDrop = event.dataTransfer.files[0]
-      if (this.currentPage == "start")  this.processFileDrop();
+      this.pendingFileDrop = event.dataTransfer.files[0];
+      if (this.currentPage == "start") this.processFileDrop();
     },
     processFileDrop() {
       let reader = new FileReader();
       reader.onload = (ev) => {
         let file = ev.target.result;
         try {
-          if (this.currentPage == "start")  throw new Error("Not a text file.");
+          if (this.currentPage == "start") throw new Error("Not a text file.");
           this.loadAnnotations(JSON.parse(file));
           this.notify(
             "fa fa-check",
@@ -117,7 +127,8 @@ export default {
           );
         } catch (e) {
           try {
-            if (this.currentPage == "start")  throw new Error("Not a text file.");
+            if (this.currentPage == "start")
+              throw new Error("Not a text file.");
             this.loadClasses(JSON.parse(file));
             this.notify(
               "fa fa-check",
@@ -129,7 +140,7 @@ export default {
               this.setInputSentences(file);
               this.clearAllAnnotations();
               this.resetIndex();
-              this.switchToPage('annotate');
+              this.switchToPage("annotate");
             } catch (e) {
               this.notify("fas fa-exclamation-circle", "Invalid file", "red-6");
             }
diff --git a/src/assets/styles.scss b/src/assets/styles.scss
deleted file mode 100644
index a0f6785..0000000
--- a/src/assets/styles.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@charset "utf-8";
-
-$primary: #2a9d8f;
-
-@import 'bulma/css/bulma.css';
\ No newline at end of file
diff --git a/src/components/AboutDialog.vue b/src/components/AboutDialog.vue
index 92b7d8a..9046c7c 100644
--- a/src/components/AboutDialog.vue
+++ b/src/components/AboutDialog.vue
@@ -1,13 +1,8 @@
 <template>
-  <q-dialog
-    :model-value="show"
-    @hide="$emit('hide')"
-  >
+  <q-dialog :model-value="show" @hide="$emit('hide')">
     <q-card style="min-width: 400px; padding: 10px; border-radius: 10px">
       <q-card-section>
-        <div class="text-h6">
-          NER Annotator
-        </div>
+        <div class="text-h6">NER Annotator</div>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
@@ -19,19 +14,23 @@
           </a>
         </p>
         <p>
-          <strong>Author:</strong>
-          @tecoholic (<a href="https://github.com/tecoholic">Github</a>,
-          <a href="https://github.com/tecoholic">Twitter</a>)
+          <strong>Contributors: </strong>
+          <a
+            href="https://github.com/tecoholic/ner-annotator/graphs/contributors"
+          >
+            See on Github
+          </a>
         </p>
+        <ul>
+          <li>Author: <a href="https://github.com/tecoholic">tecoholic</a></li>
+          <li>
+            Maintainer: <a href="https://github.com/alvi-khan">alvi-khan</a>
+          </li>
+        </ul>
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn
-          v-close-popup
-          flat
-          label="OK"
-          color="primary"
-        />
+        <q-btn v-close-popup flat label="OK" color="primary" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -47,7 +46,7 @@ export default {
     },
   },
   emits: ["hide"],
-  data: function() {
+  data: function () {
     return {
       // eslint-disable-next-line no-undef
       version: APPLICATION_VERSION,
diff --git a/src/components/AnnotationPage.vue b/src/components/AnnotationPage.vue
index 7ca6ed5..b39f330 100644
--- a/src/components/AnnotationPage.vue
+++ b/src/components/AnnotationPage.vue
@@ -1,10 +1,7 @@
 <template>
   <div>
     <classes-block />
-    <div
-      class="q-pa-lg"
-      style="height:60vh; overflow-y:scroll;"
-    >
+    <div class="q-pa-lg" style="height: 60vh; overflow-y: scroll">
       <component
         :is="t.type === 'token' ? 'Token' : 'TokenBlock'"
         v-for="t in tm.tokens"
@@ -16,10 +13,7 @@
       />
     </div>
 
-    <div
-      class="q-pa-md"
-      style="border-top: 1px solid #ccc"
-    >
+    <div class="q-pa-md" style="border-top: 1px solid #ccc">
       <q-btn
         color="red"
         outline
@@ -67,7 +61,7 @@ export default {
     TokenBlock,
     ClassesBlock,
   },
-  data: function() {
+  data: function () {
     return {
       tm: new TokenManager([]),
       currentSentence: {},
@@ -101,14 +95,14 @@ export default {
     },
     annotationPrecision() {
       this.tokenizeCurrentSentence();
-    }
+    },
   },
   created() {
     if (this.inputSentences.length) {
       this.tokenizeCurrentSentence();
     }
     document.addEventListener("mouseup", this.selectTokens);
-    document.addEventListener('keydown', this.keypress);
+    document.addEventListener("keydown", this.keypress);
   },
   beforeUnmount() {
     document.removeEventListener("mouseup", this.selectTokens);
@@ -118,29 +112,38 @@ export default {
     ...mapMutations(["nextSentence", "previousSentence", "resetIndex"]),
     keypress(event) {
       if (!this.enableKeyboardShortcuts) {
-        return
+        return;
       }
-      if (event.keyCode == 32) { // Space
+      if (event.keyCode == 32) {
+        // Space
         this.saveTags();
-      } else if (event.keyCode == 39) { // right arrow
+      } else if (event.keyCode == 39) {
+        // right arrow
         this.skipCurrentSentence();
-      } else if (event.keyCode == 37) { // left arrow
+      } else if (event.keyCode == 37) {
+        // left arrow
         this.backOneSentence();
-      } else if (event.keyCode == 82 || event.keyCode == 27) { // r / R or ESC
+      } else if (event.keyCode == 82 || event.keyCode == 27) {
+        // r / R or ESC
         this.resetBlocks();
       }
       // stop event from bubbling up
-      event.stopPropagation()
+      event.stopPropagation();
     },
     tokenizeCurrentSentence() {
+      if (this.currentIndex == this.inputSentences.length) {
+        // last sentence done
+        return;
+      }
+
       this.currentSentence = this.inputSentences[this.currentIndex];
       this.currentAnnotation = this.annotations[this.currentIndex];
 
       let tokens, spans;
 
       if (this.$store.state.annotationPrecision == "char") {
-        tokens = this.currentSentence.text.split('');
-        spans = []
+        tokens = this.currentSentence.text.split("");
+        spans = [];
         for (let i = 0; i < this.currentSentence.text.length; i++) {
           spans.push([i, i + 1]);
         }
@@ -163,22 +166,26 @@ export default {
       ) {
         return;
       }
-      
+
       const rangeStart = selection.getRangeAt(0);
       const rangeEnd = selection.getRangeAt(selection.rangeCount - 1);
       let start, end;
       try {
-        start = parseInt(rangeStart.startContainer.parentElement.id.replace("t", ""));
-        let offsetEnd = parseInt(rangeEnd.endContainer.parentElement.id.replace("t", ""));
+        start = parseInt(
+          rangeStart.startContainer.parentElement.id.replace("t", "")
+        );
+        let offsetEnd = parseInt(
+          rangeEnd.endContainer.parentElement.id.replace("t", "")
+        );
         end = offsetEnd + rangeEnd.endOffset;
-        if(!end){
-          /* 
-            If last node of selected text contains tag name 
+        if (!end) {
+          /*
+            If last node of selected text contains tag name
             Fetch the previous node
           */
           const endContainerParent = rangeEnd.endContainer.parentNode;
           const previousNode = endContainerParent.previousSibling;
-          offsetEnd = parseInt(previousNode.parentElement.id.replace("t",""))
+          offsetEnd = parseInt(previousNode.parentElement.id.replace("t", ""));
           end = offsetEnd + rangeEnd.endOffset;
         }
       } catch {
@@ -192,7 +199,7 @@ export default {
         selection.empty();
         return;
       }
-      
+
       this.tm.addNewBlock(start, end, this.currentClass);
       selection.empty();
     },
diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
new file mode 100644
index 0000000..c9e3147
--- /dev/null
+++ b/src/components/HelpDialog.vue
@@ -0,0 +1,145 @@
+<template>
+  <q-dialog :model-value="show" persistent maximized>
+    <q-card>
+      <q-bar>
+        <q-space />
+        <q-btn
+          dense
+          flat
+          icon="fa fa-close"
+          v-close-popup
+          @click="$emit('hide')"
+        >
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+      <q-card-section>
+        <div class="text-h4">How to use the NER Annotator?</div>
+      </q-card-section>
+      <q-card-section>
+        <div :class="[$q.dark.isActive ? 'bg-dark' : 'bg-grey-1', 'q-pa-lg']">
+          <div class="q-mx-auto" style="max-width: 600px">
+            <q-timeline>
+              <q-timeline-entry
+                subtitle="Step 1"
+                title="Load your text file with contents to annotate"
+                icon="fa fa-upload"
+                color="blue"
+              >
+                <q-img
+                  src="/assets/step-1.png"
+                  spinner-color="white"
+                  class="rounded-borders"
+                  style="border: 1px solid #ccc; width: 80%"
+                />
+                <p class="text-subtitle q-my-md">
+                  <q-icon name="fa fa-star" color="amber" />
+                  <strong> Tips to prepare the text file </strong>
+                </p>
+                <ul>
+                  <li>Break your content in paragraphs or passages</li>
+                  <li>
+                    Maintain a consistent seperator between the passages. <br />
+                    e.g., a newline, an empty line or a text seperator like
+                    <code>---</code>
+                  </li>
+                  <li>
+                    For large datasets, break the text into smaller files and
+                    tag them seperately
+                  </li>
+                </ul>
+              </q-timeline-entry>
+              <q-timeline-entry
+                subtitle="Step 2"
+                title="Create some tags and start tagging your text"
+                icon="fa fa-tag"
+                color="pink"
+              >
+                <q-img
+                  src="/assets/step-2.png"
+                  spinner-color="white"
+                  class="rounded-borders"
+                  style="border: 1px solid #ccc"
+                />
+                <ul class="q-my-md">
+                  <li>
+                    Use the <strong>New Tag</strong> button to create new tags
+                  </li>
+                  <li>
+                    Use the <strong>Edit Tag</strong> button to remove unwanted
+                    tags
+                  </li>
+                  <li>
+                    Click the <strong>Save</strong> button once you are done
+                    annotating an entry and to move to the next one
+                  </li>
+                  <li>
+                    Adjust the <strong>Text Seperator</strong> break your
+                    content correctly into entries
+                  </li>
+                  <li>
+                    Use the <strong>Tags</strong> menu to Export/Import tags to
+                    share with your team
+                  </li>
+                </ul>
+              </q-timeline-entry>
+              <q-timeline-entry
+                subtitle="Step 3"
+                title="Download your annotations as a JSON file that can be used for training"
+                icon="fa fa-download"
+                color="green"
+              >
+                <q-img
+                  src="/assets/step-3.png"
+                  spinner-color="white"
+                  class="rounded-borders"
+                  style="border: 1px solid #ccc; width: 70%"
+                />
+              </q-timeline-entry>
+
+              <q-timeline-entry
+                subtitle="Finally"
+                title="Convert to DocBin format and use it for training"
+                icon="fa fa-file-archive"
+                color="purple"
+              >
+                <p>
+                  See the spaCy documentation
+                  <a
+                    :class="$q.dark.isActive && 'text-light-blue-4'"
+                    href="https://spacy.io/api/data-formats#json-input"
+                    >here</a
+                  >
+                  on how to convert the annotations from JSON to DocBin format.
+                </p>
+              </q-timeline-entry>
+            </q-timeline>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import { ref } from "vue";
+
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["hide"],
+};
+</script>
+
+<style lang="css">
+ul {
+  list-style: square;
+}
+li {
+  margin-top: 0.25rem;
+}
+</style>
diff --git a/src/components/StartPage.vue b/src/components/StartPage.vue
index 438e335..cc8bb74 100644
--- a/src/components/StartPage.vue
+++ b/src/components/StartPage.vue
@@ -1,172 +1,73 @@
 <template>
-  <q-icon
-    :name="$q.dark.isActive ? 'fas fa-sun' : 'fas fa-moon'"
-    :class="[
-      $q.dark.isActive ? 'text-white' : 'text-black',
-      'cursor-pointer fixed-top-right q-mx-xl q-my-lg text-h5',
-    ]"
-    @click="toggleDarkMode"
-  />
-  <div
-    class="q-mx-auto q-my-xl"
-    style="max-width: 600px"
-  >
-    <h5 class="text-h4 q-mb-sm">
-      NER Text Annotator
-    </h5>
-    <p :class="['text-subtitle1', $q.dark.isActive ? 'text-grey-4' : 'text-grey-7']">
+  <div class="q-mx-auto q-my-xl" style="max-width: 600px">
+    <h1 class="text-h4 q-mb-sm text-center">NER Text Annotator</h1>
+    <p class="text-subtitle1 text-center">
       Annotate text for spaCy NER Model training
     </p>
 
     <div class="q-my-xl q-py-md column">
-      <div class="row justify-between items-center">
-        <div>
-          <p :class="['text-h6 q-my-md', $q.dark.isActive ? 'text-grey-4' : 'text-grey-7']">
-            Select your file(s), then press 'Begin'!
+      <div class="row justify-around q-my-xl">
+        <div class="col-5 q-mx-sm">
+          <q-file
+            v-model="textFile"
+            accept=".txt"
+            filled
+            label="Load a text file"
+            color="primary"
+            :label-color="highlightTextFileInput ? 'red-8' : ''"
+            :bg-color="highlightTextFileInput ? 'red-1' : ''"
+            @rejected="
+              fileSelectionError(
+                'Only text files (.txt) can be used for creating annotations.'
+              )
+            "
+          >
+            <template v-slot:prepend>
+              <q-icon name="fas fa-file-text" :class="highlightTextFileInput ? 'text-red-8' : ''"/>
+            </template>
+          </q-file>
+
+          <p :class="['text-caption q-mx-sm q-my-sm', $q.dark.isActive ? 'text-grey-6' : 'text-grey-8']">
+            You can also drag and drop a file into this window!
           </p>
-          <p :class="['text-subtitle1 q-my-md', $q.dark.isActive ? 'text-grey-4' : 'text-grey-7']">
-            Hint: You can also drag and drop files into this window!
+        </div>
+        <div class="col-5 q-mx-sm">
+          <q-file
+            v-model="annotationFile"
+            accept=".json"
+            filled
+            label="Load annotations"
+            color="primary"
+            @rejected="fileSelectionError('Invalid annotation file')"
+          >
+            <template #prepend>
+              <q-icon name="fas fa-file-code" />
+            </template>
+          </q-file>
+          <p :class="['text-caption q-mx-sm q-my-sm', $q.dark.isActive ? 'text-grey-6' : 'text-grey-8']">
+            Optional
           </p>
         </div>
+      </div>
+
+      <div class="row justify-center q-my-xl">
         <q-btn
           v-close-popup
-          outline
-          label="Begin!"
-          :color="!textFile ? 'grey-7' : 'blue'"
-          :disable="!textFile"
+          label="Start Annotating"
+          color="primary"
+          class="q-py-md"
           @click="onConfirmation"
         />
       </div>
-      <div class="row items-center">
-        <q-file
-          class="col-5 q-mx-sm"
-          v-model="textFile"
-          accept=".txt"
-          filled
-          label="Text file"
-          :bg-color="$q.dark.isActive ? 'black-1' : 'light-blue-1'"
-          @rejected="fileSelectionError('Invalid text file')"
-        >
-          <template #prepend>
-            <q-icon name="fas fa-upload" />
-          </template>
-        </q-file>
-        <q-file
-          class="col-5 q-mx-sm"
-          v-model="annotationFile"
-          accept=".json"
-          filled
-          label="(Optional) Annotations"
-          :bg-color="$q.dark.isActive ? 'black-1' : 'light-blue-1'"
-          @rejected="fileSelectionError('Invalid annotation file')"
-        >
-          <template #prepend>
-            <q-icon name="fas fa-upload" />
-          </template>
-        </q-file>
-      </div>
     </div>
-  </div>
-  <q-separator />
-  <div :class="[$q.dark.isActive ? 'bg-dark' : 'bg-grey-1', 'q-pa-lg']">
-    <div
-      class="q-mx-auto"
-      style="max-width: 600px"
-    >
-      <h4 class="text-h4">
-        How to use the NER Annotator?
-      </h4>
-      <q-timeline>
-        <q-timeline-entry
-          subtitle="Step 1"
-          title="Load your text file with contents to annotate"
-          icon="fa fa-upload"
-          color="yellow-8"
-        >
-          <q-img
-            src="/assets/step-1.png"
-            spinner-color="white"
-            class="rounded-borders"
-            style="border: 1px solid #ccc; width: 80%"
-          />
-          <p class="text-subtitle1 q-my-md">
-            Tips to prepare the text file
-          </p>
-          <ul>
-            <li>Break your content in paragraphs or passages</li>
-            <li>
-              Maintain a consistent seperator between the passages. <br>
-              Eg., newline, empty line or a text seperator like <code>---</code>
-            </li>
-            <li>
-              For large datasets, break the text into smaller files and tag them
-              seperately
-            </li>
-          </ul>
-        </q-timeline-entry>
-        <q-timeline-entry
-          subtitle="Step 2"
-          title="Create some tags and start tagging your text"
-          icon="fa fa-tag"
-          color="orange-6"
-        >
-          <q-img
-            src="/assets/step-2.png"
-            spinner-color="white"
-            class="rounded-borders"
-            style="border: 1px solid #ccc"
-          />
-          <ul class="q-my-md">
-            <li>Use the <strong>New Tag</strong> button to create new tags</li>
-            <li>
-              Use the <strong>Edit Tag</strong> button to remove unwanted tags
-            </li>
-            <li>
-              Click the <strong>Save</strong> button once you are done
-              annotating an entry and to move to the next one
-            </li>
-            <li>
-              Adjust the <strong>Text Seperator</strong> break your content
-              correctly into entries
-            </li>
-            <li>
-              Use the <strong>Tags</strong> menu to Export/Import tags to share
-              with your team
-            </li>
-          </ul>
-        </q-timeline-entry>
-        <q-timeline-entry
-          subtitle="Step 3"
-          title="Download your annotations as a JSON file that can be used for training"
-          icon="fa fa-download"
-          color="red-6"
-        >
-          <q-img
-            src="/assets/step-3.png"
-            spinner-color="white"
-            class="rounded-borders"
-            style="border: 1px solid #ccc; width: 70%"
-          />
-        </q-timeline-entry>
 
-        <q-timeline-entry
-          subtitle="Finally"
-          title="Convert to DocBin format and use it for training"
-          icon="fa fa-file"
-          color="red-10"
-        >
-          <p>
-            See the spaCy documentation
-            <a
-              :class="$q.dark.isActive ? 'text-light-blue-4' : 'text-dark-blue'"
-              href="https://spacy.io/api/data-formats#json-input"
-            >
-              here
-            </a>
-            on how to convert the annotations from JSON to DocBin format.
-          </p>
-        </q-timeline-entry>
-      </q-timeline>
+    <div class="row">
+      <p :class="['col-12 text-sm text-center', $q.dark.isActive ? 'text-grey-6' : 'text-grey-8']">
+        <q-icon name="fa fa-hand-holding-heart" class="q-mr-sm" />
+        Wondering what to do? See <strong>Help</strong>
+        <q-icon name="fa fa-arrow-right" class="q-mx-xs" />
+        <strong>How to Use?</strong>
+      </p>
     </div>
   </div>
 </template>
@@ -180,26 +81,40 @@ export default {
   data() {
     return {
       textFile: null,
-      annotationFile: null
+      annotationFile: null,
+      highlightTextFileInput: false,
     };
   },
+  watch: {
+    textFile() {
+      this.highlightTextFileInput = false;
+    },
+  },
   methods: {
     ...mapMutations(["setInputSentences", "loadAnnotations"]),
     onConfirmation() {
+      this.highlightTextFileInput = false;
+      if (!this.textFile) {
+        this.fileSelectionError(
+          "No text file selected. Open a text file to start annotating."
+        );
+        this.highlightTextFileInput = true;
+        return;
+      }
       try {
         let reader = new FileReader();
         reader.addEventListener("load", (event) => {
           this.setInputSentences(event.target.result);
         });
         reader.readAsText(this.textFile);
-      } catch(e) {
-        this.fileSelectionError('Invalid text file');
+      } catch (e) {
+        this.fileSelectionError("Invalid text file");
         return;
       }
 
-      if (!this.annotationFile)  {
+      if (!this.annotationFile) {
         this.$emit("file-loaded");
-        return
+        return;
       }
 
       try {
@@ -208,8 +123,8 @@ export default {
           this.loadAnnotations(JSON.parse(event.target.result));
         });
         reader.readAsText(this.annotationFile);
-      } catch(e) {
-        this.fileSelectionError('Invalid annotation file');
+      } catch (e) {
+        this.fileSelectionError("Invalid annotation file");
         return;
       }
 
@@ -217,17 +132,14 @@ export default {
     },
     fileSelectionError(msg) {
       this.$q.notify({
-        icon: "fas fa-exclamation-circle",
+        type: "negative",
+        icon: "fas fa-file-circle-exclamation",
         message: msg,
-        color: "red-6",
-        position: "top",
-        timeout: 2000,
-        actions: [{label: "Dismiss", color: "white"}],
+        position: "center",
+        timeout: 5000,
+        actions: [{ label: "Dismiss", color: "white" }],
       });
     },
-    toggleDarkMode() {
-      this.$q.dark.toggle();
-    },
   },
 };
 </script>
diff --git a/src/components/TokenBlock.vue b/src/components/TokenBlock.vue
index 07729f0..b1c0f08 100644
--- a/src/components/TokenBlock.vue
+++ b/src/components/TokenBlock.vue
@@ -39,7 +39,7 @@ export default {
     },
   },
   emits: ["remove-block"],
-  data: function() {
+  data: function () {
     return {
       showClose: false,
     };
@@ -48,20 +48,19 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'quasar/src/css/variables';
+@import "quasar/src/css/variables";
 
 mark {
   padding: 0.5rem;
   position: relative;
   background-color: burlywood;
-  border: 1px solid $grey-7;
-  border-radius: 0.35rem;
+  box-shadow: 2px 2px 4px rgba(180, 180, 180, 0.4);
+  border-radius: 0.25rem;
 }
 .tag {
   background-color: whitesmoke;
   padding: 4px 0 4px 8px;
-  border: 1px solid grey;
-  border-radius: 0.35rem;
+  border-radius: 0.25rem;
   font-size: x-small;
 }
 .close-btn {
diff --git a/src/components/menubar/ExportAnnotations.vue b/src/components/menubar/ExportAnnotations.vue
index 62613f0..1094fd2 100644
--- a/src/components/menubar/ExportAnnotations.vue
+++ b/src/components/menubar/ExportAnnotations.vue
@@ -3,6 +3,7 @@
     v-close-popup
     clickable
     @click="generateJSONExport()"
+    :disable="!annotations.length"
   >
     <q-item-section>Export</q-item-section>
   </q-item>
@@ -21,10 +22,10 @@ export default {
     async generateJSONExport() {
       const output = {
         classes: this.classes.map((c) => c.name),
-        annotations: this.annotations.map((a) => ([
+        annotations: this.annotations.map((a) => [
           a.text,
-          {entities: a.entities}
-        ])),
+          { entities: a.entities },
+        ]),
       };
       const jsonStr = JSON.stringify(output);
       await exportFile(jsonStr, "annotations.json");
diff --git a/src/components/menubar/MenuBar.vue b/src/components/menubar/MenuBar.vue
index b5d3d5d..9a9c727 100644
--- a/src/components/menubar/MenuBar.vue
+++ b/src/components/menubar/MenuBar.vue
@@ -3,29 +3,18 @@
     <div class="q-pa-sm q-pl-md row items-center">
       <div>
         <q-avatar size="xs">
-          <img src="/assets/icon_32.png">
+          <img src="/assets/icon_32.png" />
         </q-avatar>
         <span class="q-ml-sm">
-          <strong>
-            NER Annotator
-          </strong>
+          <strong> NER Annotator </strong>
         </span>
       </div>
 
       <div class="q-ml-md cursor-pointer non-selectable">
-        <span>
-          File
-        </span>
-        <q-menu style="border-radius: 0.5rem;">
-          <q-list
-            dense
-            style="min-width: 100px"
-          >
-            <q-item
-              v-close-popup
-              clickable
-              @click="pendingClick = $refs.file"
-            >
+        <span> File </span>
+        <q-menu>
+          <q-list dense style="min-width: 100px">
+            <q-item v-close-popup clickable @click="pendingClick = $refs.file">
               <q-item-section>Open File</q-item-section>
               <input
                 ref="file"
@@ -33,26 +22,22 @@
                 accept=".txt"
                 style="display: none"
                 @change="openFile"
-              >
+              />
             </q-item>
           </q-list>
         </q-menu>
       </div>
 
       <div class="q-ml-md cursor-pointer non-selectable">
-        <span>
-          Annotations
-        </span>
-        <q-menu style="border-radius: 0.5rem;">
-          <q-list
-            dense
-            style="min-width: 100px"
-          >
+        <span> Annotations </span>
+        <q-menu>
+          <q-list dense style="min-width: 100px">
             <export-annotations />
             <q-item
               v-close-popup
               clickable
               @click="pendingClick = $refs.file"
+              :disable="currentPage === 'start'"
             >
               <q-item-section>Import</q-item-section>
               <input
@@ -61,25 +46,21 @@
                 accept=".json"
                 style="display: none"
                 @change="importAnnotations"
-              >
+              />
             </q-item>
           </q-list>
         </q-menu>
       </div>
 
       <div class="q-ml-md cursor-pointer non-selectable">
-        <span>
-          Tags
-        </span>
-        <q-menu style="border-radius: 0.5rem;">
-          <q-list
-            dense
-            style="min-width: 100px"
-          >
+        <span> Tags </span>
+        <q-menu>
+          <q-list dense style="min-width: 100px">
             <q-item
               v-close-popup
               clickable
               @click="exportTags()"
+              :disable="currentPage == 'start'"
             >
               <q-item-section>Export</q-item-section>
             </q-item>
@@ -87,6 +68,7 @@
               v-close-popup
               clickable
               @click="$refs.file.click()"
+              :disable="currentPage == 'start'"
             >
               <q-item-section>Import</q-item-section>
               <input
@@ -95,7 +77,7 @@
                 accept=".json"
                 style="display: none"
                 @change="importTags"
-              >
+              />
             </q-item>
           </q-list>
         </q-menu>
@@ -103,31 +85,30 @@
 
       <q-space />
 
-      <q-icon
-        style="margin-top: 5px"
-        color="white"
-        :name="$q.dark.isActive ? 'fas fa-sun' : 'fas fa-moon'"
-        class="cursor-pointer"
-        @click="toggleDarkMode"
-      />
+      <div class="q-ml-md">
+        <q-icon
+          color="white"
+          :name="$q.dark.isActive ? 'fa fa-sun' : 'fa fa-moon'"
+          class="cursor-pointer"
+          @click="toggleDarkMode"
+        />
+      </div>
 
       <div class="q-ml-md cursor-pointer non-selectable">
         <span>Help</span>
 
-        <q-menu style="border-radius: 0.5rem;">
-          <q-list
-            dense
-            style="min-width: 100px"
-          >
+        <q-menu>
+          <q-list dense style="min-width: 100px">
+            <q-item v-close-popup clickable @click="showHelp = true">
+              <q-item-section>How to use?</q-item-section>
+            </q-item>
             <q-item
               v-close-popup
               clickable
               href="https://github.com/tecoholic/ner-annotator/discussions"
               target="_blank"
             >
-              <q-item-section>
-                Forum
-              </q-item-section>
+              <q-item-section>Forum</q-item-section>
             </q-item>
             <q-item
               v-close-popup
@@ -135,36 +116,25 @@
               href="https://github.com/tecoholic/ner-annotator/issues"
               target="_blank"
             >
-              Report Issue
+              <q-item-section>Report Issue</q-item-section>
             </q-item>
             <q-separator />
-            <q-item
-              v-close-popup
-              clickable
-              @click="showAbout = true"
-            >
+            <q-item v-close-popup clickable @click="showAbout = true">
               <q-item-section>About</q-item-section>
             </q-item>
           </q-list>
         </q-menu>
 
-        <about-dialog
-          :show="showAbout"
-          @hide="showAbout = false"
-        />
+        <about-dialog :show="showAbout" @hide="showAbout = false" />
+        <help-dialog :show="showHelp" @hide="showHelp = false" />
       </div>
     </div>
   </q-header>
 
-  <q-dialog
-    v-model="promptForProject"
-    persistent
-  >
+  <q-dialog v-model="promptForProject" persistent>
     <q-card style="min-width: 350px">
       <q-card-section>
-        <div class="text-h6">
-          Project Name
-        </div>
+        <div class="text-h6">Project Name</div>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
@@ -176,20 +146,9 @@
         />
       </q-card-section>
 
-      <q-card-actions
-        align="right"
-        class="text-primary"
-      >
-        <q-btn
-          v-close-popup
-          flat
-          label="Cancel"
-        />
-        <q-btn
-          v-close-popup
-          flat
-          label="Create Project"
-        />
+      <q-card-actions align="right" class="text-primary">
+        <q-btn v-close-popup flat label="Cancel" />
+        <q-btn v-close-popup flat label="Create Project" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -208,10 +167,11 @@ import { exportFile } from "./utils";
 import { useQuasar } from "quasar";
 import AboutDialog from "../AboutDialog.vue";
 import ExitDialog from "../ExitDialog.vue";
+import HelpDialog from "../HelpDialog.vue";
 
 export default {
   name: "MenuBar",
-  components: { ExportAnnotations, AboutDialog, ExitDialog },
+  components: { ExportAnnotations, AboutDialog, HelpDialog, ExitDialog },
   setup() {
     const $q = useQuasar();
     return {
@@ -232,24 +192,32 @@ export default {
       },
     };
   },
-  data: function() {
+  data: function () {
     return {
       promptForProject: false,
       newProjectName: "",
       showAbout: false,
       pendingClick: null,
+      showHelp: false,
     };
   },
   computed: {
-    ...mapState(["annotations", "classes"]),
+    ...mapState(["annotations", "classes", "currentPage"]),
   },
   methods: {
-    ...mapMutations(["loadClasses", "loadAnnotations", "setInputSentences", "clearAllAnnotations", "resetIndex"]),
+    ...mapMutations([
+      "loadClasses",
+      "loadAnnotations",
+      "setInputSentences",
+      "clearAllAnnotations",
+      "resetIndex",
+      "switchToPage",
+    ]),
     // Funtion that exports the tags to a JSON file
-    exportTags: async function() {
+    exportTags: async function () {
       await exportFile(JSON.stringify(this.classes), "tags.json");
     },
-    importTags: function(e) {
+    importTags: function (e) {
       let file = e.target.files[0];
       let filereader = new FileReader();
       filereader.onload = (ev) => {
@@ -266,7 +234,7 @@ export default {
       };
       filereader.readAsText(file);
     },
-    openFile: function(e) {
+    openFile: function (e) {
       let file = e.target.files[0];
       let filereader = new FileReader();
       filereader.onload = (ev) => {
@@ -275,8 +243,11 @@ export default {
       };
       filereader.readAsText(file);
       this.resetIndex();
+      if (this.currentPage != "annotate") {
+        this.switchToPage("annotate");
+      }
     },
-    importAnnotations: function(e) {
+    importAnnotations: function (e) {
       let file = e.target.files[0];
       let filereader = new FileReader();
       filereader.onload = (ev) => {
@@ -293,7 +264,7 @@ export default {
       };
       filereader.readAsText(file);
     },
-    toggleDarkMode: function() {
+    toggleDarkMode: function () {
       this.$q.dark.toggle();
     },
   },
diff --git a/src/main.js b/src/main.js
index e82b234..84df087 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 import { Quasar } from "quasar";
-import "@quasar/extras/material-icons/material-icons.css";
 import "quasar/src/css/index.sass";
 
 import App from "./App.vue";
@@ -9,7 +8,7 @@ import { createStore } from "vuex";
 import store from "./store";
 
 import quasarUserOptions from "./quasar-user-options";
-import "./assets/styles.scss";
+import "@fontsource-variable/nunito";
 import "./styles/quasar.scss";
 
 const app = createApp(App)
diff --git a/src/quasar-user-options.js b/src/quasar-user-options.js
index c1e0784..8471f81 100644
--- a/src/quasar-user-options.js
+++ b/src/quasar-user-options.js
@@ -1,13 +1,14 @@
-import "./styles/quasar.scss";
-import iconSet from "quasar/icon-set/fontawesome-v5.js";
-import "@quasar/extras/fontawesome-v5/fontawesome-v5.css";
-import "@quasar/extras/ionicons-v4/ionicons-v4.css";
-import { Notify } from "quasar";
+import { Dark, Notify } from "quasar";
+import iconSet from "quasar/icon-set/fontawesome-v6";
+import "@quasar/extras/fontawesome-v6/fontawesome-v6.css";
 
 // To be used on app.use(Quasar, { ... })
 export default {
-  config: {},
+  config: {
+    dark: "auto",
+  },
   plugins: {
+    Dark,
     Notify,
   },
   iconSet: iconSet,
diff --git a/src/store/index.js b/src/store/index.js
index 9c7ba0e..e9361ee 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -42,7 +42,7 @@ export const mutations = {
       id: lastIndex + 1,
       name: payload,
       color: niceColors[lastIndex % niceColors.length],
-    }
+    };
     state.classes = [...state.classes, newClass];
     if (state.classes.length === 1) {
       state.currentClass = state.classes[0];
@@ -81,6 +81,10 @@ export const mutations = {
       state.currentIndex += 1;
       state.currentAnnotation = state.annotations[state.currentIndex] || {};
     } else {
+      if (state.currentIndex == state.inputSentences.length - 1) {
+        // last sentence
+        state.currentIndex += 1;
+      }
       alert("You have completed all the sentences");
     }
   },
@@ -116,9 +120,10 @@ export const mutations = {
     LocalStorage.set("tags", state.classes);
   },
   loadAnnotations(state, payload) {
-    let isValid = typeof payload === "object" &&
-    "annotations" in payload &&
-    "classes" in payload;
+    let isValid =
+      typeof payload === "object" &&
+      "annotations" in payload &&
+      "classes" in payload;
 
     if (!isValid) {
       throw new Error("loadAnnotations: payload has invalid schema");
@@ -139,19 +144,22 @@ export const mutations = {
     for (var i = 0; i < annotations.length; i++) {
       if (annotations[i] == null) continue;
       let annotation = {
-        'text': annotations[i][0],
-        'entities': annotations[i][1].entities,
-      }
+        text: annotations[i][0],
+        entities: annotations[i][1].entities,
+      };
       newAnnotations[i] = annotation;
     }
     state.annotations = newAnnotations;
     state.currentAnnotation = state.annotations[state.currentIndex];
 
-    for(let c of classes) {
+    for (let c of classes) {
       this.commit("addClass", c);
     }
     LocalStorage.set("tags", state.classes);
   },
+  switchToPage(state, payload) {
+    state.currentPage = payload;
+  },
 };
 
 export const getters = {};
@@ -174,8 +182,9 @@ const actions = {
   },
 };
 
-window.addEventListener('beforeunload', async (event) => {
-  event.returnValue = "Please make sure you export annotations before closing the file.";
+window.addEventListener("beforeunload", async (event) => {
+  event.returnValue =
+    "Please make sure you export annotations before closing the file.";
 });
 
 export default {
@@ -191,9 +200,10 @@ export default {
       annotationPrecision: "word",
       // current state
       currentAnnotation: {},
-      currentClass: tags && tags[0] || {},
+      currentClass: (tags && tags[0]) || {},
       currentIndex: 0,
       currentSentence: "",
+      currentPage: "start",
     };
   },
   getters,
diff --git a/src/styles/quasar.scss b/src/styles/quasar.scss
index 3672af7..ad7a044 100644
--- a/src/styles/quasar.scss
+++ b/src/styles/quasar.scss
@@ -1,15 +1,19 @@
-// @import "./quasar.variables.scss";
-// @import 'quasar/src/css/variables';
-// @import "~quasar-styl";
-// @import '~quasar-addon-styl';
+@import "./quasar.variables.scss";
 
 * {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-
-body.body--dark {
-  background: #1d1d1d;
+  font-family:
+    "Nunito Variable",
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
 }
 
 .q-btn--outline::before {
@@ -34,12 +38,12 @@ body.body--dark {
 }
 
 .q-field--outlined .q-field__control {
-  border-radius: 0.75rem;
+  border-radius: 0.5rem;
 }
 
 .q-field--outlined .q-field__control::before {
   border-width: 0.1rem;
-  border-radius: 0.75rem;
+  border-radius: 0.5rem;
 }
 
 .q-field--outlined .q-field__control:hover::before {
@@ -49,6 +53,5 @@ body.body--dark {
 .q-menu {
   box-shadow: none;
   border: 0.1rem solid $grey-5;
-  border-radius: 0.75rem;
   margin-top: 0.2rem !important;
 }
diff --git a/yarn.lock b/yarn.lock
index c805260..36e9e63 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -800,6 +800,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
   integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
+"@fontsource-variable/nunito@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/nunito/-/nunito-5.1.0.tgz#cefbd850fb6665f40f392592650eb228607efa15"
+  integrity sha512-58KMaWHfR+cci4ZMPvoa2hVF9PV0g1gV8jilgFWDxToh3UrpOtrAiGluDZ8eqK5jDZX7v1GbMAKohvjJRBmgfg==
+
 "@fortawesome/fontawesome-common-types@6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
@@ -2192,11 +2197,6 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
-bulma@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.2.tgz#47395a660755c9566db3cf981fd4e3a2b637af19"
-  integrity sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==
-
 bundle-name@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-4.1.0.tgz#f3b96b34160d6431a19d7688135af7cfb8797889"