diff --git a/src/App.vue b/src/App.vue
index 59f0f62..53bcabd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,11 +28,11 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from "vue-class-component";
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 import router from "@/scripts/router";
 import {RouteLocationNormalized} from "vue-router";
 
-@Options({components: {}})
+@Component
 export default class App extends Vue
 {
     currentRoute = ''
diff --git a/src/components/BlogIndex.vue b/src/components/BlogIndex.vue
index 7cc7efa..2932f5c 100644
--- a/src/components/BlogIndex.vue
+++ b/src/components/BlogIndex.vue
@@ -10,14 +10,13 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 import Tag from "@/components/Tag.vue";
-import {Prop} from "vue-property-decorator";
 import {pushQuery} from "@/scripts/router";
 import {BlogMeta} from "@/scripts/models";
 import {globals} from "@/scripts/global";
 
-@Options({components: {Tag}})
+@Component({components: {Tag}})
 export default class BlogIndexLinks extends Vue
 {
     @Prop({default: 'tags'}) mode: 'tags' | 'categories' = 'tags'
diff --git a/src/components/Collapse.vue b/src/components/Collapse.vue
index d19a7ed..44ad6df 100644
--- a/src/components/Collapse.vue
+++ b/src/components/Collapse.vue
@@ -8,14 +8,13 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
-import {Prop} from "vue-property-decorator";
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 import {$} from '@/scripts/constants';
 
-@Options({components: {}})
+@Component
 export default class Collapse extends Vue
 {
-    @Prop() title!: string
+    @Prop title!: string
     @Prop({default: false}) active = false
 
     show = false
diff --git a/src/components/MetaTable.vue b/src/components/MetaTable.vue
index 54085c4..470e104 100644
--- a/src/components/MetaTable.vue
+++ b/src/components/MetaTable.vue
@@ -8,10 +8,9 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
-import {Prop} from "vue-property-decorator";
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 
-@Options({components: {}})
+@Component
 export default class MetaTable extends Vue
 {
     @Prop({required: true}) table!: {[id: string]: unknown}
diff --git a/src/components/ZoteroPublication.vue b/src/components/ZoteroPublication.vue
index fa5aada..413513b 100644
--- a/src/components/ZoteroPublication.vue
+++ b/src/components/ZoteroPublication.vue
@@ -24,8 +24,7 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
-import {Prop} from "vue-property-decorator";
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 import moment from "moment";
 import MetaTable from "@/components/MetaTable.vue";
 import {capitalize} from "@/scripts/utils";
@@ -33,7 +32,7 @@ import linkifyUrls from "linkify-urls";
 import {$} from '@/scripts/constants';
 import {ZoteroData, ZoteroItem} from "@/scripts/zotero";
 
-@Options({components: {MetaTable}})
+@Component({components: {MetaTable}})
 export default class ZoteroPublicationView extends Vue
 {
     @Prop({required: true}) item!: ZoteroItem
@@ -77,6 +76,7 @@ export default class ZoteroPublicationView extends Vue
 
     #details
         padding-left: calc(1.6em + 6px)
+        font-size: 0.8em
 
         > div
             margin-bottom: 1em
@@ -87,8 +87,6 @@ export default class ZoteroPublicationView extends Vue
         .label
             font-weight: bold
 
-        font-size: 0.8em
-
 .header
     align-items: center
 
diff --git a/src/views/About.vue b/src/views/About.vue
index 171dacb..ce86183 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 import {marked} from 'marked';
 import emojiRegex from 'emoji-regex';
 import {parseExtensions} from '@/scripts/extended_markdown'
@@ -19,7 +19,7 @@ import {hosts} from "@/scripts/constants";
 import Loading from "@/components/Loading.vue";
 import {ZoteroAttachment, ZoteroItem} from "@/scripts/zotero";
 
-@Options({components: {Loading, ZoteroPublication}})
+@Component({components: {Loading, ZoteroPublication}})
 export default class About extends Vue
 {
     html = ""
diff --git a/src/views/others/Friends.vue b/src/views/others/Friends.vue
index be12abe..ecbda59 100644
--- a/src/views/others/Friends.vue
+++ b/src/views/others/Friends.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 import {fab, hosts} from "@/scripts/constants";
 import {shuffle} from "@/scripts/utils";
 
@@ -41,7 +41,7 @@ const icons = {
   blog: 'fas fa-book'
 }
 
-@Options({components: {}})
+@Component
 export default class Friends extends Vue
 {
   friends: Friend[] = []
diff --git a/src/views/others/Menu.vue b/src/views/others/Menu.vue
index f6617a9..01cf1bb 100644
--- a/src/views/others/Menu.vue
+++ b/src/views/others/Menu.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 
 export enum Flavor
 {
@@ -141,7 +141,7 @@ export const menu: MenuCategory[] = [
   },
 ]
 
-@Options({components: {}})
+@Component
 export default class Menu extends Vue
 {
   max_cols = 2
@@ -191,6 +191,8 @@ export default class Menu extends Vue
     white-space: nowrap
 
 .category
+  margin-bottom: 1em
+
   .cat
     font-size: 1.2em
     font-weight: bold
@@ -200,8 +202,6 @@ export default class Menu extends Vue
     margin-bottom: 0.5em
     color: $color-text-light
 
-  margin-bottom: 1em
-
 .items
   .sub
     font-size: 0.7em
diff --git a/src/views/others/Projects.vue b/src/views/others/Projects.vue
index e9b47fe..3c84237 100644
--- a/src/views/others/Projects.vue
+++ b/src/views/others/Projects.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 
-@Options({components: {}})
+@Component
 export default class Projects extends Vue
 {