diff --git a/nginx/vue/src/components/text/InlineLink.vue b/nginx/vue/src/components/text/InlineLink.vue
new file mode 100644
index 0000000..e9dfc12
--- /dev/null
+++ b/nginx/vue/src/components/text/InlineLink.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    href: { type: String, default: "" },
+    to: { type: String, default: "" },
+    target: { type: String, default: undefined },
+    rel: { type: String, default: undefined },
+});
+
+const computedRel = computed(() => {
+    if (props.rel !== undefined) return props.rel;
+    if (props.target === "_blank") return "noopener noreferrer";
+    return undefined;
+});
+</script>
+
+<template>
+    <RouterLink v-if="to" :to="to" class="inline-link">
+        <slot />
+    </RouterLink>
+    <a v-else :href="href" :target="target" :rel="computedRel" class="inline-link">
+        <slot />
+    </a>
+</template>
+
+<style scoped>
+.inline-link {
+    color: var(--primary);
+    font-weight: bold;
+    font-style: italic;
+    text-decoration: none;
+    transition: color 0.15s ease;
+}
+
+.inline-link:hover {
+    color: var(--tertiary);
+}
+</style>
diff --git a/nginx/vue/src/components/text/Link.vue b/nginx/vue/src/components/text/Link.vue
index e69de29..b9d8fc5 100644
--- a/nginx/vue/src/components/text/Link.vue
+++ b/nginx/vue/src/components/text/Link.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    href: { type: String, default: "" },
+    to: { type: String, default: "" },
+    target: { type: String, default: undefined },
+    rel: { type: String, default: undefined },
+    bare: { type: Boolean, default: false },
+});
+
+const computedRel = computed(() => {
+    if (props.rel !== undefined) return props.rel;
+    if (props.target === "_blank") return "noopener noreferrer";
+    return undefined;
+});
+</script>
+
+<template>
+    <RouterLink v-if="to" :to="to" :class="{ link: !bare }">
+        <slot />
+    </RouterLink>
+    <a v-else :href="href" :target="target" :rel="computedRel" :class="{ link: !bare }">
+        <slot />
+    </a>
+</template>
+
+<style scoped>
+.link {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.15s ease;
+}
+
+.link:hover {
+    color: var(--tertiary);
+}
+</style>