diff --git a/components/content/Ref.vue b/components/content/Ref.vue
index 7f7ad49220bfce1abf9b9cd8669b357baa5fca4d..2a06d992242bfa9eeccb2f058774f7182842c5ce 100644
--- a/components/content/Ref.vue
+++ b/components/content/Ref.vue
@@ -11,10 +11,8 @@ const dois = computed(() => {
 
 </script>
 <template>
-  (
-  <template v-for="doi, index in dois" :key="doi">
+  (<template v-for="doi, index in dois" :key="doi">
     <RefArticle :doi="doi"></RefArticle>
     <span v-if="index < dois.length - 1">, </span>
-  </template>
-  )
+  </template>)
 </template>
\ No newline at end of file
diff --git a/components/content/RefArticle.vue b/components/content/RefArticle.vue
index fd998940d9c88def1dd19f125a74f2afa4e1f8f2..4242f444d04dc76146a45053479c1d6d0180dd9c 100644
--- a/components/content/RefArticle.vue
+++ b/components/content/RefArticle.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useTheme } from "vuetify";
+const theme = useTheme();
 export interface Props {
     doi: string;
 }
@@ -7,7 +9,17 @@ const props = withDefaults(defineProps<Props>(), {});
 const { article } = useFetchArticle(props.doi);
 </script>
 <template>
-    <v-chip v-if="article" variant="text" :href="`#ref-${props.doi}`" class="pa-0 text-caption font-italic">{{
+    <!-- <v-chip v-if="article" variant="text" :href="`#ref-${props.doi}`" class="pa-0 font-italic">{{
         article?.author[0]?.family ?? "test" }} et al,
-        {{ article?.year }}</v-chip>
-</template>
\ No newline at end of file
+        {{ article?.year }}</v-chip> -->
+    <NuxtLink v-if="article" :href="`#ref-${props.doi}`"
+        :class="theme.global.current.value.dark ? 'text-grey-lighten-1' : 'text-grey-darken-2'" class="pa-0 ">{{
+            article?.author[0]?.family ?? "test" }} et al,
+        {{ article?.year }}</NuxtLink>
+</template>
+<style scoped>
+.ref-link {
+    /* color: rgba(var(--v-theme-tertiary)); */
+    color: grey-darken-3;
+}
+</style>
\ No newline at end of file