diff --git a/examples/ahiqar-arabic-karshuni-local.html b/examples/ahiqar-arabic-karshuni-local.html
index ab130454..419983b3 100644
--- a/examples/ahiqar-arabic-karshuni-local.html
+++ b/examples/ahiqar-arabic-karshuni-local.html
@@ -1,175 +1,187 @@
 <!DOCTYPE html>
 <html>
-<head><title>TIDO</title>
-  <meta charset="utf-8">
-  <meta name="description" content="">
-  <meta name="format-detection" content="telephone=no">
-  <meta name="msapplication-tap-highlight" content="no">
-  <meta name="viewport" content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="dist/tido.css">
-  <style>
-    html, body {
-      margin: 0;
-    }
-    #app {
-      height: 100vh;
-    }
-  </style>
-</head>
-<body>
-<noscript><strong>We're sorry but TIDO doesn't work properly without JavaScript enabled. Please enable it to
-  continue.</strong></noscript>
+  <head>
+    <title>TIDO</title>
+    <meta charset="utf-8" />
+    <meta name="description" content="" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width"
+    />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="stylesheet" href="dist/tido.css" />
+    <style>
+      html,
+      body {
+        margin: 0;
+      }
+      #app {
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript
+      ><strong
+        >We're sorry but TIDO doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong
+      ></noscript
+    >
 
-<div id="app"></div>
-<script src="dist/tido.js"></script>
-<script>
-window.addEventListener('load', function () {
-  window.tido = new window.Tido({
-    "collection": "http://localhost:8181/ahiqar/textapi/ahiqar/arabic-karshuni/collection.json",
-    "labels": {
-      "item": "Sheet",
-      "manifest": "Manuscript"
-    },
-    "colors": {
-      "forceMode": "light",
-      "primary": "#1a3771"
-    },
-    "panels": [
-      {
-        "label": "contents_and_metadata",
-        "views": [
-          {
-            "id": "tree",
-            "label": "contents",
-            "connector": {
-              "id": 1
-            }
+    <div id="app"></div>
+    <script src="dist/tido.js"></script>
+    <script>
+      window.addEventListener("load", function () {
+        window.tido = new window.Tido({
+          collection:
+            "http://localhost:8181/ahiqar/textapi/ahiqar/arabic-karshuni/collection.json",
+          labels: {
+            item: "Sheet",
+            manifest: "Manuscript",
+          },
+          colors: {
+            forceMode: "light",
+            primary: "#1a3771",
           },
-          {
-            "id": "metadata",
-            "label": "metadata",
-            "connector": {
-              "id": 2,
-              "options": {
-                "collection": {
-                  "all": true
+          panels: [
+            {
+              label: "contents_and_metadata",
+              views: [
+                {
+                  id: "tree",
+                  label: "contents",
+                  connector: {
+                    id: 1,
+                  },
                 },
-                "manifest": {
-                  "all": true
+                {
+                  id: "metadata",
+                  label: "metadata",
+                  connector: {
+                    id: 2,
+                    options: {
+                      collection: {
+                        all: true,
+                      },
+                      manifest: {
+                        all: true,
+                      },
+                      item: {
+                        all: true,
+                      },
+                      citationKey: "Citation",
+                    },
+                  },
                 },
-                "item": {
-                  "all": true
-                }
-              }
-            }
-          }
-        ]
-      },
-      {
-        "label": "image",
-        "views": [
-          {
-            "id": "image",
-            "label": "Image",
-            "connector": {
-              "id": 3
-            }
-          }]
-      },
-      {
-        "label": "text",
-        "views": [
-          {
-            "id": "text1",
-            "label": "Transcription",
-            "default": true,
-            "connector": {
-              "id": 4,
-              "options": {
-                "type": "transcription"
-              }
-            }
-          },
-          {
-            "id": "text2",
-            "label": "Transliteration",
-            "connector": {
-              "id": 4,
-              "options": {
-                "type": "transliteration"
-              }
-            }
-          }
-        ]
-      },
-      {
-        "label": "annotations",
-        "views": [
-          {
-            "id": "annotations1",
-            "label": "Editorial",
-            "connector": {
-              "id": 5,
-              "options": {
-                "types": [
-                  {
-                    "name": "Person",
-                    "icon": "person"
+              ],
+            },
+            {
+              label: "image",
+              views: [
+                {
+                  id: "image",
+                  label: "Image",
+                  connector: {
+                    id: 3,
                   },
-                  {
-                    "name": "Place",
-                    "icon": "marker"
+                },
+              ],
+            },
+            {
+              label: "text",
+              views: [
+                {
+                  id: "text1",
+                  label: "Transcription",
+                  default: true,
+                  connector: {
+                    id: 4,
+                    options: {
+                      type: "transcription",
+                    },
                   },
-                  {
-                    "name": "Editorial Comment",
-                    "icon": "chat"
+                },
+                {
+                  id: "text2",
+                  label: "Transliteration",
+                  connector: {
+                    id: 4,
+                    options: {
+                      type: "transliteration",
+                    },
                   },
-                  {
-                    "name": "Reference",
-                    "icon": "externalLink"
-                  }
-                ]
-              }
-            }
-          },
-          {
-            "id": "annotations2",
-            "label": "Motif",
-            "connector": {
-              "id": 5,
-              "options": {
-                "types": [
-                  {
-                    "name": "Motif",
-                    "icon": "pen"
-                  }
-                ]
-              }
-            }
+                },
+              ],
+            },
+            {
+              label: "annotations",
+              views: [
+                {
+                  id: "annotations1",
+                  label: "Editorial",
+                  connector: {
+                    id: 5,
+                    options: {
+                      types: [
+                        {
+                          name: "Person",
+                          icon: "person",
+                        },
+                        {
+                          name: "Place",
+                          icon: "marker",
+                        },
+                        {
+                          name: "Editorial Comment",
+                          icon: "chat",
+                        },
+                        {
+                          name: "Reference",
+                          icon: "externalLink",
+                        },
+                      ],
+                    },
+                  },
+                },
+                {
+                  id: "annotations2",
+                  label: "Motif",
+                  connector: {
+                    id: 5,
+                    options: {
+                      types: [
+                        {
+                          name: "Motif",
+                          icon: "pen",
+                        },
+                      ],
+                    },
+                  },
+                },
+                {
+                  id: "annotations3",
+                  label: "Variants",
+                  connector: {
+                    id: 6,
+                  },
+                },
+              ],
+            },
+          ],
+          translations: {
+            en: {
+              contents_and_metadata: "Contents & Metadata",
+              next_item: "Next Sheet",
+              previous_item: "Previous Sheet",
+              next_manifest: "Next Manuscript",
+              previous_manifest: "Previous Manuscript",
+              item: "Sheet",
+            },
           },
-          {
-            "id": "annotations3",
-            "label": "Variants",
-            "connector": {
-              "id": 6
-            }
-          }
-        ]
-      }
-    ],
-    "translations": {
-      "en": {
-        "contents_and_metadata": "Contents & Metadata",
-        "next_item": "Next Sheet",
-        "previous_item": "Previous Sheet",
-        "next_manifest": "Next Manuscript",
-        "previous_manifest": "Previous Manuscript",
-        "item": "Sheet"
-      }
-    }
-  });
-});
-</script>
-</body>
+        });
+      });
+    </script>
+  </body>
 </html>
diff --git a/src/components/metadata/CopyCitation.vue b/src/components/metadata/CopyCitation.vue
new file mode 100644
index 00000000..84bd8b0d
--- /dev/null
+++ b/src/components/metadata/CopyCitation.vue
@@ -0,0 +1,67 @@
+<template>
+  <span class="t-ml-1 t-mb-2 t-relative">
+    <Button
+    class="t-h-7"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+   >
+    <BaseIcon
+      :name="getIconName()"
+      :class="{ 't-text-green-500': copiedCitation, 't-text-gray-400': !copiedCitation}"
+      class="t-text-xl t-align-middle"
+      @click="copyContentToClipboard()"
+    />
+  </Button>
+  <Message
+    v-show="copiedCitation || isHovered"
+    :pt="{
+      root: 't-bg-zinc-700 t-text-white t-text-sm t-absolute t-left-1/2 t--translate-x-1/2 t-w-fit t-whitespace-nowrap t-rounded',
+      wrapper: 't-flex t-flex-row t-pr-1',
+      icon: 't-hidden',
+      text: 't-pl-1',
+      closebutton: {
+        class: 't-hidden',
+      },
+    }"
+  >
+    {{ messageText }}
+  </Message>
+  </span>
+  
+</template>
+
+<script setup lang="ts">
+import Message from "primevue/message";
+import Button from "primevue/button";
+import BaseIcon from "@/components//base/BaseIcon.vue";
+import { ref } from "vue";
+
+const props = defineProps<{
+  value: string;
+}>();
+
+let copiedCitation = ref(false);
+let messageText = ref("Copy citation value");
+const isHovered = ref(false);
+
+async function copyContentToClipboard() {
+  try {
+    await navigator.clipboard.writeText(props.value);
+    copiedCitation.value = true;
+    messageText.value = "Copied!";
+    setTimeout(() => {
+      this.copiedCitation = false;
+      messageText.value = "Copy citation value";
+    }, 1200);
+  } catch (err) {
+    console.error("Citation could not be copied in the keyboard");
+  }
+}
+
+function getIconName() {
+  if (copiedCitation.value === true) {
+    return "check";
+  }
+  return "copy";
+}
+</script>
diff --git a/src/components/metadata/MetadataItem.vue b/src/components/metadata/MetadataItem.vue
index 62bd1147..98a2d5a8 100644
--- a/src/components/metadata/MetadataItem.vue
+++ b/src/components/metadata/MetadataItem.vue
@@ -15,6 +15,10 @@
       v-else
       :value="item.value"
     />
+    <CopyCitation
+      v-if="showCopyCitation(item.key, configStore.config)"
+      :value="item.value"
+    />
     <MetadataItem
       v-for="(childItem, idx) in childItems"
       :key="idx"
@@ -25,31 +29,59 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import MetadataLink from '@/components/metadata/MetadataLink.vue';
-import MetadataValue from '@/components/metadata/MetadataValue.vue';
+import { computed } from "vue";
+import MetadataLink from "@/components/metadata/MetadataLink.vue";
+import MetadataValue from "@/components/metadata/MetadataValue.vue";
+import CopyCitation from "@/components/metadata/CopyCitation.vue";
+import { useConfigStore } from "@/stores/config";
 
 const props = defineProps<{
-  item: Metadata,
+  item: Metadata;
 }>();
 
-const label = computed<string>(() => props.item?.key || 'other');
+const label = computed<string>(() => props.item?.key || "other");
 const childItems = computed<Metadata>(() => props.item?.metadata || []);
+const configStore = useConfigStore();
 
 function isLink(): boolean {
-  const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
-  const matches = (typeof props.item?.key === 'string') ? props.item?.key?.match(regex) : null;
+  const regex =
+    /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+  const matches =
+    typeof props.item?.key === "string" ? props.item?.key?.match(regex) : null;
 
   return matches !== null;
 }
 
+function getMetadataView(panels) {
+  let metadataView
+  for (let i = 0; i < panels.length; i++) {
+    const panel = panels[i]
+    const viewsPanel = panel.views
+
+    if (!viewsPanel || viewsPanel.length === 0) continue
+
+    metadataView = viewsPanel.filter((view) => view.connector.id === 2)
+
+    if (metadataView.length > 0) return metadataView[0]
+  }
+
+  return null
+}
+
+function showCopyCitation(key, config) {
+  if (!config.panels || config.panels.length === false) return false
+  const metadataView = getMetadataView(config.panels);
+  // when we retrieve each MetadataItem, we want to know whether we are in the row of the citation
+  if (metadataView.connector.options.citationKey) {
+    return metadataView.connector.options.citationKey === key;
+  }
+  return false;
+}
 </script>
 
 <style scoped>
-
 .nested-metadata {
   margin-left: 8px;
   margin-top: 2.5px;
 }
-
 </style>
diff --git a/src/components/metadata/MetadataValue.vue b/src/components/metadata/MetadataValue.vue
index 0b3a90fa..0b4b7dea 100644
--- a/src/components/metadata/MetadataValue.vue
+++ b/src/components/metadata/MetadataValue.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="metadata-value">
-    <span v-html="value" />
-  </div>
+  <span class="metadata-value" v-html="value" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/utils/icons/icons.js b/src/utils/icons/icons.js
index 0fcdf277..8e0748d8 100644
--- a/src/utils/icons/icons.js
+++ b/src/utils/icons/icons.js
@@ -28,4 +28,7 @@ export const code = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height=
 export const bug = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="currentColor"><path d="M4.978.855a.5.5 0 1 0-.956.29l.41 1.352A5 5 0 0 0 3 6h10a5 5 0 0 0-1.432-3.503l.41-1.352a.5.5 0 1 0-.956-.29l-.291.956A5 5 0 0 0 8 1a5 5 0 0 0-2.731.811l-.29-.956z"/><path d="M13 6v1H8.5v8.975A5 5 0 0 0 13 11h.5a.5.5 0 0 1 .5.5v.5a.5.5 0 1 0 1 0v-.5a1.5 1.5 0 0 0-1.5-1.5H13V9h1.5a.5.5 0 0 0 0-1H13V7h.5A1.5 1.5 0 0 0 15 5.5V5a.5.5 0 0 0-1 0v.5a.5.5 0 0 1-.5.5zm-5.5 9.975V7H3V6h-.5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 0-1 0v.5A1.5 1.5 0 0 0 2.5 7H3v1H1.5a.5.5 0 0 0 0 1H3v1h-.5A1.5 1.5 0 0 0 1 11.5v.5a.5.5 0 1 0 1 0v-.5a.5.5 0 0 1 .5-.5H3a5 5 0 0 0 4.5 4.975"/></g></svg>';
 export const dropdown = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>';
 export const popup = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M28 4H10a2.006 2.006 0 0 0-2 2v14a2.006 2.006 0 0 0 2 2h18a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2m0 16H10V6h18Z"/><path fill="currentColor" d="M18 26H4V16h2v-2H4a2.006 2.006 0 0 0-2 2v10a2.006 2.006 0 0 0 2 2h14a2.006 2.006 0 0 0 2-2v-2h-2Z"/></svg>';
-export default {};
+export const copy = 
+'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M9 2a2 2 0 0 0-2 2v2h2V4h11v11h-2v2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm0 2h11v11H4z"/></g></svg>';
+
+export default {};
\ No newline at end of file
