diff --git a/nginx/vue/src/views/Bookmarks.vue b/nginx/vue/src/views/Bookmarks.vue
index e4ed131..493229d 100644
--- a/nginx/vue/src/views/Bookmarks.vue
+++ b/nginx/vue/src/views/Bookmarks.vue
@@ -1,26 +1,81 @@
+<script setup>
+import LinkTable from "@/components/quick/LinkTable.vue";
+
+const radio_links = [
+    {
+        name: "Radio Helsinki",
+        link: "https://www.radiohelsinki.fi/",
+    },
+    {
+        name: "Palanga Street Radio",
+        link: "https://palanga.live/",
+    },
+    {
+        name: "IDA Radio",
+        link: "https://idaidaida.net/",
+    },
+    {
+        name: "Tīrkultūra",
+        link: "https://www.tirkultura.lv/",
+    },
+];
+
+const hacking_links = [
+    {
+        name: "pwn.college",
+        link: "https://pwn.college/",
+    },
+    {
+        name: "OSINT Framework",
+        link: "https://osintframework.com/",
+    },
+    {
+        name: "OverTheWire",
+        link: "https://overthewire.org/",
+    },
+    {
+        name: "TryHackMe",
+        link: "https://tryhackme.com/",
+    },
+];
+
+const chinese_links = [
+    {
+        name: "MDBG Chinese Dictionary",
+        link: "https://www.mdbg.net/chinese/dictionary",
+    },
+    {
+        name: "Stroke Order",
+        link: "https://www.strokeorder.com/",
+    },
+];
+
+const art_links = [
+    {
+        name: "Frida Kahlo",
+        link: "https://www.fridakahlo.org/",
+    },
+    {
+        name: "Cameron's World",
+        link: "https://www.cameronsworld.net/",
+    },
+];
+</script>
+
 <template>
-    <main>
-        <div>
-            <h1>Cyber Security</h1>
-            <a href="https://pwn.college/">pwn.college</a>
-            <a href="https://osintframework.com/">OSINT</a>
-            <a href="https://overthewire.org/">OverTheWire</a>
-            <a href="https://tryhackme.com/">TryHackMe</a>
-
-            <h1>Radio Stations</h1>
-            <a href="https://www.radiohelsinki.fi/">Radio Helsinki</a>
-            <a href="https://palanga.live/">Palanga Street Radio</a>
-            <a href="https://idaidaida.net/">IDA Radio</a>
-            <a href="https://www.tirkultura.lv/">Tīrkultūra</a>
-
+    <main class="center-content flex-col">
+        <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
+            <h1>Radio Links</h1>
+            <LinkTable :linkArr="radio_links" />
+            <span>---</span>
+            <h1>Hack</h1>
+            <LinkTable :linkArr="hacking_links" />
+            <span>---</span>
             <h1>Chinese</h1>
-            <a href="https://www.mdbg.net/chinese/dictionary"
-                >MDBG Chinese Dictionary</a
-            >
-
+            <LinkTable :linkArr="chinese_links" />
+            <span>---</span>
             <h1>Art</h1>
-            <a href="https://www.fridakahlo.org/">Frida Kahlo</a>
-            <a href="https://www.cameronsworld.net/">Cameron's world</a>
+            <LinkTable :linkArr="art_links" />
         </div>
     </main>
 </template>
diff --git a/nginx/vue/src/views/Shrines.vue b/nginx/vue/src/views/Shrines.vue
new file mode 100644
index 0000000..d068e77
--- /dev/null
+++ b/nginx/vue/src/views/Shrines.vue
@@ -0,0 +1,17 @@
+<script setup>
+import RouterTable from "@/components/quick/RouterTable.vue";
+const shrine_links = [
+    { name: "Demoman", link: "/shrines/demoman" },
+    { name: "Evangelion", link: "/shrines/evangelion" },
+    { name: "GTO", link: "/shrines/gto" },
+    { name: "Skipskipbenben", link: "/shrines/skipskipbenben" },
+];
+</script>
+
+<template>
+    <main class="center-content flex-col">
+        <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
+            <RouterTable :linkArr="shrine_links" />
+        </div>
+    </main>
+</template>