diff --git a/components/content/ArticleDoi.vue b/components/content/ArticleDoi.vue
new file mode 100644
index 0000000000000000000000000000000000000000..03ce4602a6dc93e87fc77c075555e24aaa5edb89
--- /dev/null
+++ b/components/content/ArticleDoi.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const props = defineProps<{
+    doi: string;
+}>();
+
+const { article } = useFetchArticle(props.doi)
+
+const show = ref(false)
+console.log(article)
+
+</script>
+<template>
+    <v-list-item :href="article?.href" :target="article?.target">
+        <template #prepend>
+            <v-avatar>
+                <v-icon>{{ article?.prependIcon }}</v-icon>
+            </v-avatar>
+        </template>
+        <v-card flat color="transparent" density="compact">
+
+            <v-card-item density="compact">
+                <v-card-title><span class="text-subtitle-1 font-weight-bold">{{ article?.title ?? 'no title' }}</span></v-card-title>
+                <v-card-subtitle> {{ article?.subtitle ?? "no subtitle" }}</v-card-subtitle>
+                <v-card-subtitle> {{ article?.containerTitle ?? "no containerTitle" }} ({{ article?.year
+                }})</v-card-subtitle>
+            </v-card-item>
+            <v-card-actions v-if="article?.abstract" density="compact">
+                <v-btn size="x-small" variant="outlined" :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                    @click.stop.prevent="show = !show">Abstract</v-btn>
+            </v-card-actions>
+
+            <v-expand-transition>
+                <v-card v-show="show" flat color="transparent">
+                    <v-card-text>
+                        {{ article?.abstract }}
+                    </v-card-text>
+                </v-card>
+
+            </v-expand-transition>
+        </v-card>
+    </v-list-item>
+    <v-divider inset></v-divider>
+</template>
\ No newline at end of file
diff --git a/components/content/ArticleDoiList.vue b/components/content/ArticleDoiList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c436e9aba9d2b3f85935880a6119a16f91da28ef
--- /dev/null
+++ b/components/content/ArticleDoiList.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+    items: string[];
+}>();
+</script>
+<template>
+    <v-list>
+        <ArticleDoi v-for="item in items" :key="item" :doi="item" />
+       
+    </v-list>
+</template>
\ No newline at end of file
diff --git a/components/content/ReferencesList.vue b/components/content/ReferencesList.vue
index 4f9b0868743a1c33f790774d7af819d77f3c62c3..c617230727fc5dda0b9544866e2964ec0014a059 100644
--- a/components/content/ReferencesList.vue
+++ b/components/content/ReferencesList.vue
@@ -1,30 +1,3 @@
-<template>
-  <ClientOnly fallback-tag="span" fallback="Loading references...">
-    <v-list v-if="computedItems.length > 0">
-      <v-list-item v-for="item in computedItems" :key="item.title" :title="item.title" lines="three" :href="item.href"
-        :target="item.target">
-        <template #title="{ title }">
-          <span class="font-weight-bold">{{ title }}</span>
-        </template>
-        <template #prepend>
-          <v-avatar>
-            <v-icon>{{ item.prependIcon }}</v-icon>
-          </v-avatar>
-        </template>
-        <template #subtitle>
-          <div>{{ item.subtitle }}</div>
-          <div>{{ item.containerTitle }} ({{ item.year }})</div>
-        </template>
-        <v-card flat color="transparent" class="text-justify my-2">
-          {{ item.abstract }}
-        </v-card>
-      </v-list-item>
-
-
-    </v-list>
-  </ClientOnly>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useFetch as useFetchVueUse } from "@vueuse/core";
@@ -35,6 +8,10 @@ const props = defineProps<{
   items: string[];
 }>();
 
+
+
+const panel = ref([0, 1])
+const disabled = ref(false)
 const doiBaseUrl = ref(new URL("https://doi.org/"));
 const fetchedDoi = ref(
   await Promise.all(
@@ -107,3 +84,35 @@ function getReferenceUrl(doi) {
   return new URL(doi, doiBaseUrl.value).href;
 }
 </script>
+
+
+<template>
+  <ClientOnly fallback-tag="span" fallback="Loading references...">
+
+
+    <v-list v-if="computedItems.length > 0">
+      <v-list-item v-for="item in computedItems" :key="item.title" :title="item.title" lines="three" :href="item.href"
+        :target="item.target">
+        <template #title="{ title }">
+          <span class="font-weight-bold">{{ title }}</span>
+        </template>
+        <template #prepend>
+          <v-avatar>
+            <v-icon>{{ item.prependIcon }}</v-icon>
+          </v-avatar>
+        </template>
+        <template #subtitle>
+          <div>{{ item.subtitle }}</div>
+          <div>{{ item.containerTitle }} ({{ item.year }})</div>
+        </template>
+        <v-card flat color="transparent" class="text-justify my-2">
+          {{ item.abstract }}
+        </v-card>
+      </v-list-item>
+
+
+    </v-list>
+  </ClientOnly>
+</template>
+
+
diff --git a/composables/useFetchArticle.ts b/composables/useFetchArticle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..918e837fbfbb1215ce0d3be49b4dfff1450fdf8b
--- /dev/null
+++ b/composables/useFetchArticle.ts
@@ -0,0 +1,92 @@
+export interface ArticleMessage {
+    DOI: string;
+    issue: number;
+    title: string;
+    author: Array<{ family: string; given: string }>;
+    "container-title-short": string;
+    "container-title": string;
+    abstract: string;
+    published: {
+        "date-parts": string[];
+    };
+}
+
+
+export interface Article {
+    DOI: string
+    title: string
+    subtitle: string
+    containerTitle: string
+    abstract: string
+    year: string
+    href: string
+    target: string
+    prependIcon: string
+}
+export interface RawArticle {
+    message: ArticleMessage
+
+}
+
+
+
+export function useFetchArticle(doi: string) {
+
+    const article = ref<Article | null>(null)
+    const pending = ref(false)
+    const doiBaseUrl = ref(new URL("https://doi.org/"));
+    const url = ref(new URL(`/works/${doi}`, " https://api.crossref.org/").href);
+    console.log("dans useFetchArticle")
+    console.log(url.value)
+    watchEffect(async () => {
+        console.log("dans watch effect")
+        article.value = null
+        const { data, pending: pendingUseFetch, error, refresh } = await useFetch<RawArticle>(toValue(url), {
+        })
+        console.log(data)
+        if (data.value?.message) {
+            const {
+                DOI,
+                title,
+                "container-title-short": cts,
+                "container-title": ct,
+                abstract,
+                published,
+                author,
+                ...rest
+            } = data.value.message;
+            let sanitizedAbstract = abstract
+            console.log(DOI)
+            if (sanitizedAbstract) {
+                sanitizedAbstract = /\<jats\:p\>(.*)\<\/jats\:p\>/.exec(sanitizedAbstract)?.[1] ?? ''
+            }
+            article.value = {
+                DOI,
+                title: title[0],
+                subtitle: toAuthorsString(author || []),
+                containerTitle: cts?.length > 0 ? cts[0] : ct?.length > 0 ? ct[0] : "",
+                abstract: sanitizedAbstract,
+                year: published["date-parts"][0][0],
+                href: getReferenceUrl(DOI),
+                target: "_blank",
+                prependIcon: "mdi-newspaper-variant-outline",
+            }
+            console.log(article.value)
+        }
+        pending.value = pendingUseFetch.value
+
+
+    })
+    function toAuthorsString(authors: Array<{ family: string; given: string }>) {
+        return authors
+            .map((curr) => {
+                return `${curr.family} ${curr.given}`;
+            })
+            .join(", ");
+    }
+
+    function getReferenceUrl(doi: string) {
+        return new URL(doi, doiBaseUrl.value).href;
+    }
+    return { article, pending }
+}
\ No newline at end of file
diff --git a/content/1.general-concepts/1.abortive-infection.md b/content/1.general-concepts/1.abortive-infection.md
index 11d861e589200b1c27367545f8b5737c30951dff..2e5c1975b13f8ef5dca161a567840a8bb6c8820b 100644
--- a/content/1.general-concepts/1.abortive-infection.md
+++ b/content/1.general-concepts/1.abortive-infection.md
@@ -6,3 +6,7 @@ toc: true
 
 
 This section is empty. You can help by adding to it.
+
+
+## test article
+
diff --git a/content/2.defense-systems/abia.md b/content/2.defense-systems/abia.md
index b10dd9da9f592022bb535ab24559e99e5b95fc6d..ea5fc81f4dd62e55d6c94e9568a3e85f34126888 100644
--- a/content/2.defense-systems/abia.md
+++ b/content/2.defense-systems/abia.md
@@ -33,7 +33,7 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ## Relevant abstracts
 
 
-::references-list
+::article-doi-list
 ---
 items:
     - 10.1016/j.mib.2005.06.006
diff --git a/content/2.defense-systems/avast.md b/content/2.defense-systems/avast.md
index e3f5aca25ea1f2feb7d1f75ce4cf8dd758a40ee0..7909a710c29fc096b4daeaef7d483e34df426a66 100644
--- a/content/2.defense-systems/avast.md
+++ b/content/2.defense-systems/avast.md
@@ -94,18 +94,10 @@ Subsystem CcAvs4 with a system from *Corallococcus coralloides* in *Escherichia
 
 ## Relevant abstracts
 
-
-::references-list
+::article-doi-list
 ---
 items:
     - 10.1126/science.abm4096
     - 10.1126/science.aba0372
 ---
-::
-
-**Gao, L. A. et al. Prokaryotic innate immunity through pattern recognition of conserved viral proteins. Science 377, eabm4096 (2022).**
-Many organisms have evolved specialized immune pattern-recognition receptors, including nucleotide-binding oligomerization domain-like receptors (NLRs) of the STAND superfamily that are ubiquitous in plants, animals, and fungi. Although the roles of NLRs in eukaryotic immunity are well established, it is unknown whether prokaryotes use similar defense mechanisms. Here, we show that antiviral STAND (Avs) homologs in bacteria and archaea detect hallmark viral proteins, triggering Avs tetramerization and the activation of diverse N-terminal effector domains, including DNA endonucleases, to abrogate infection. Cryo-electron microscopy reveals that Avs sensor domains recognize conserved folds, active-site residues, and enzyme ligands, allowing a single Avs receptor to detect a wide variety of viruses. These findings extend the paradigm of pattern recognition of pathogen-specific proteins across all three domains of life.
-
-**Gao, L. et al. Diverse enzymatic activities mediate antiviral immunity in prokaryotes. Science 369, 1077-1084 (2020).**
-Bacteria and archaea are frequently attacked by viruses and other mobile genetic elements and rely on dedicated antiviral defense systems, such as restriction endonucleases and CRISPR, to survive. The enormous diversity of viruses suggests that more types of defense systems exist than are currently known. By systematic defense gene prediction and heterologous reconstitution, here we discover 29 widespread antiviral gene cassettes, collectively present in 32% of all sequenced bacterial and archaeal genomes, that mediate protection against specific bacteriophages. These systems incorporate enzymatic activities not previously implicated in antiviral defense, including RNA editing and retron satellite DNA synthesis. In addition, we computationally predict a diverse set of other putative defense genes that remain to be characterized. These results highlight an immense array of molecular functions that microbes use against viruses.
-
+::
\ No newline at end of file
diff --git a/content/2.defense-systems/paris.md b/content/2.defense-systems/paris.md
index fc6d7898f19abd749c0c02e6f7d60317060efbb5..7f57f0478a78ca15e4de2e282d67ffe421bbd86c 100644
--- a/content/2.defense-systems/paris.md
+++ b/content/2.defense-systems/paris.md
@@ -50,11 +50,11 @@ Paris type II merge system in _Desulfovibrio desulfuricans_ (GCF\__000025705.1).
 
 ## References 
 
-::references-list
+::article-doi-list
 ---
 items:
     - 10.1101/2021.01.21.427644
     - 10.1093/nar/gkaa290
     - 10.1016/0022-2836(75)90083-2
 ---
-::
+::
\ No newline at end of file
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index e0c2b132aae1a4bc07b1ad7291c2eee020d2dd61..9c9bf619593d96b76a11deffcd089d6df558fdf6 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -4,6 +4,8 @@
       <v-card flat color="transparent" max-width="1280">
         <v-card-text>
           <ContentDoc />
-        </v-card-text> </v-card></v-col>
+        </v-card-text>
+      </v-card></v-col>
   </v-row>
 </template>
+