diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..23fd35f0
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}
\ No newline at end of file
diff --git a/examples/ahiqar-arabic-karshuni-local.html b/examples/ahiqar-arabic-karshuni-local.html
index 419983b3..9da1759e 100644
--- a/examples/ahiqar-arabic-karshuni-local.html
+++ b/examples/ahiqar-arabic-karshuni-local.html
@@ -72,6 +72,26 @@
                         all: true,
                       },
                       citationKey: "Citation",
+                      orderDocuments: ["manifest", "collection", "item"],
+                      orderCollectionMetadata: [
+                        "title",
+                        "collector",
+                        "description",
+                      ],
+                      orderManifestMetadata: [
+                        "Label",
+                        "License",
+                        "Date of creation",
+                        "Place of origin",
+                        "Current location",
+                        "TEI document",
+                      ],
+                      orderItemMetadata: [
+                        "label",
+                        "language",
+                        "image_license",
+                        "image_notes",
+                      ],
                     },
                   },
                 },
diff --git a/src/.prettierrc.json b/src/.prettierrc.json
new file mode 100644
index 00000000..b2095be8
--- /dev/null
+++ b/src/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/src/components/metadata/CollectionMetadata.vue b/src/components/metadata/CollectionMetadata.vue
index f510268b..a5e5c632 100644
--- a/src/components/metadata/CollectionMetadata.vue
+++ b/src/components/metadata/CollectionMetadata.vue
@@ -1,52 +1,58 @@
 <template>
-  <div
-    v-if="metadata.length > 0"
-    class="collection-metadata t-mb-7"
-  >
+  <div v-if="metadata.length > 0" class="collection-metadata t-mb-7">
     <h3 class="t-text-xl t-font-semibold t-mb-2">
       {{ $t('collection') }}
     </h3>
-    <div
-      v-for="(meta, idx) in metadata"
-      :key="idx"
-      class="t-mb-4"
-    >
+    <div v-for="(meta, idx) in metadata" :key="idx" class="t-mb-4">
       <MetadataItem :item="meta" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useContentsStore } from '@/stores/contents'
+import { useConfigStore } from '@/stores/config'
+import MetadataItem from '@/components/metadata/MetadataItem.vue'
+import { orderMetadataItems } from '@/utils/metadata'
 
-import { computed } from 'vue';
-import { useContentsStore } from '@/stores/contents';
-import MetadataItem from '@/components/metadata/MetadataItem.vue';
+import { getMetadataView } from '@/utils/metadata'
 
-const contentStore = useContentsStore();
+const contentStore = useContentsStore()
 
-function getCollectorsName(collection: Collection) : string | null {
-  if (!collection) return null;
-  if (collection.collector.length === 0) return null;
-  if (collection.collector.length === 1) return collection.collector[0].name;
+function getCollectorsName(collection: Collection): string | null {
+  if (!collection) return null
+  if (collection.collector.length === 0) return null
+  if (collection.collector.length === 1) return collection.collector[0].name
 
   return collection.collector.map((collector) => collector.name).join(', ')
 }
 
-const collection = computed<Collection>(() => contentStore.collection);
+const collection = computed<Collection>(() => contentStore.collection)
 
 const metadata = computed(() => {
-  if (!collection.value) return [];
+  let collectionOrderMetadata = getMetadataView(useConfigStore().config.panels)
+    .connector.options.orderCollectionMetadata
+
+  let collectionOrderMetadataLower
+  if (collectionOrderMetadata?.length > 0) {
+    collectionOrderMetadataLower = collectionOrderMetadata.map((word) =>
+      word.toLowerCase()
+    )
+  }
+
+  if (!collection.value) return []
 
   const mappings = {
     main: 'title',
     sub: 'subtitle',
-  };
+  }
 
-  const collectorsName: string | null = getCollectorsName(collection.value);
-  const { description } = collection.value;
-  const collectionTitle: Title[] = collection.value.title;
+  const collectorsName: string | null = getCollectorsName(collection.value)
+  const { description } = collection.value
+  const collectionTitle: Title[] = collection.value.title
 
-  return [
+  const defaultMetadata = [
     ...collectionTitle
       .filter((c) => c)
       .map((title) => ({
@@ -55,6 +61,17 @@ const metadata = computed(() => {
       })),
     ...(collectorsName ? [{ key: 'collector', value: collectorsName }] : []),
     ...(description ? [{ key: 'description', value: description }] : []),
-  ];
-});
+  ]
+
+  let orderedMetadata = []
+  if (collectionOrderMetadataLower?.length > 0) {
+    orderedMetadata = orderMetadataItems(
+      collectionOrderMetadataLower,
+      defaultMetadata
+    )
+    return orderedMetadata
+  }
+
+  return defaultMetadata
+})
 </script>
diff --git a/src/components/metadata/ItemMetadata.vue b/src/components/metadata/ItemMetadata.vue
index 469d278f..a03a1ca1 100644
--- a/src/components/metadata/ItemMetadata.vue
+++ b/src/components/metadata/ItemMetadata.vue
@@ -3,40 +3,52 @@
     <h3 class="t-text-xl t-font-semibold t-mb-2">
       {{ $t(labels.item) }} {{ number }} / {{ total }}
     </h3>
-    <div
-      v-for="(meta, idx) in metadata"
-      :key="idx"
-      class="t-mb-4"
-    >
+    <div v-for="(meta, idx) in metadata" :key="idx" class="t-mb-4">
       <MetadataItem :item="meta" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useConfigStore } from '@/stores/config'
+import { useContentsStore } from '@/stores/contents'
+import { orderMetadataItems } from '@/utils/metadata'
 
-import { computed } from 'vue';
-import { useConfigStore } from '@/stores/config';
-import { useContentsStore } from '@/stores/contents';
+import MetadataItem from '@/components/metadata/MetadataItem.vue'
+import { getMetadataView } from '@/utils/metadata'
 
-import MetadataItem from '@/components/metadata/MetadataItem.vue';
+const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
-const configStore = useConfigStore();
-const contentStore = useContentsStore();
+const item = computed<Item>(() => contentStore.item)
+const itemUrl = computed<string>(() => contentStore.itemUrl)
+const manifest = computed<Manifest>(() => contentStore.manifest)
+const itemsCount = computed<number>(() => manifest.value?.sequence.length)
+const labels = computed<Labels>(() => configStore.config.labels)
+const number = computed<number>(() =>
+  manifest.value
+    ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1
+    : 1
+)
+const total = computed<number>(() => itemsCount.value ?? 1)
 
-const item = computed<Item>(() => contentStore.item);
-const itemUrl = computed<string>(() => contentStore.itemUrl);
-const manifest = computed<Manifest>(() => contentStore.manifest);
-const itemsCount = computed<number>(() => manifest.value?.sequence.length);
-const labels = computed<Labels>(() => configStore.config.labels);
-const number = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1));
-const total = computed<number>(() => itemsCount.value ?? 1);
-const metadata = computed(() => (
-  [
+const metadata = computed(() => {
+  let itemOrderMetadata = getMetadataView(useConfigStore().config.panels)
+    .connector.options.orderItemMetadata
+
+  let defaultMetadata = [
     { key: 'label', value: item.value.n },
     { key: 'language', value: item.value?.lang?.join(',') },
     { key: 'image_license', value: item.value?.image?.license?.id },
     { key: 'image_notes', value: item.value?.image?.license?.notes },
   ].filter((i) => i.value)
-));
+
+  let orderedMetadata = []
+  if (itemOrderMetadata?.length > 0) {
+    orderedMetadata = orderMetadataItems(itemOrderMetadata, defaultMetadata)
+    return orderedMetadata
+  }
+  return defaultMetadata
+})
 </script>
diff --git a/src/components/metadata/ManifestMetadata.vue b/src/components/metadata/ManifestMetadata.vue
index 7c688df8..7a17903a 100644
--- a/src/components/metadata/ManifestMetadata.vue
+++ b/src/components/metadata/ManifestMetadata.vue
@@ -1,16 +1,9 @@
 <template>
-  <div
-    v-if="manifestHasItems"
-    class="manifest-metadata t-mb-7"
-  >
+  <div v-if="manifestHasItems" class="manifest-metadata t-mb-7">
     <h3 class="t-text-xl t-font-semibold t-mb-2">
       {{ $t(labels.manifest) }} {{ number }} / {{ total }}
     </h3>
-    <div
-      v-for="(meta, idx) in metadata"
-      :key="idx"
-      class="t-mb-4"
-    >
+    <div v-for="(meta, idx) in metadata" :key="idx" class="t-mb-4">
       <MetadataItem :item="meta" />
     </div>
     <Actor :data="actor" />
@@ -18,32 +11,58 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useConfigStore } from '@/stores/config';
-import { useContentsStore } from '@/stores/contents';
-
-import MetadataItem from '@/components/metadata/MetadataItem.vue';
-import Actor from '@/components/metadata/Actor.vue';
-
-const configStore = useConfigStore();
-const contentStore = useContentsStore();
-
-const manifest = computed<Manifest>(() => contentStore.manifest);
-const manifests = computed<Manifest[]>(() => contentStore.manifests);
-const manifestHasItems = computed<boolean>(() => manifest.value?.sequence.length > 0);
-const number = computed<number>(() => (manifests.value !== null ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1 : 1));
-const total = computed<number>(() => (manifests.value !== null ? manifests.value.length : 1));
-const labels = computed<Labels>(() => configStore.config.labels);
+import { computed } from 'vue'
+import { useConfigStore } from '@/stores/config'
+import { useContentsStore } from '@/stores/contents'
+import { orderMetadataItems } from '@/utils/metadata'
+
+import { getMetadataView } from '@/utils/metadata'
+
+import MetadataItem from '@/components/metadata/MetadataItem.vue'
+import Actor from '@/components/metadata/Actor.vue'
+
+const configStore = useConfigStore()
+const contentStore = useContentsStore()
+
+const manifest = computed<Manifest>(() => contentStore.manifest)
+const manifests = computed<Manifest[]>(() => contentStore.manifests)
+const manifestHasItems = computed<boolean>(
+  () => manifest.value?.sequence.length > 0
+)
+const number = computed<number>(() =>
+  manifests.value !== null
+    ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1
+    : 1
+)
+const total = computed<number>(() =>
+  manifests.value !== null ? manifests.value.length : 1
+)
+const labels = computed<Labels>(() => configStore.config.labels)
 const metadata = computed(() => {
-  if (!manifest.value) return [];
-  return [
-    { key: 'label', value: manifest.value.label },
+  if (!manifest.value) return []
+
+  let manifestOrderMetadata = getMetadataView(useConfigStore().config.panels)
+    .connector.options.orderManifestMetadata
+
+  let defaultMetadata = [
+    { key: 'Label', value: manifest.value.label },
     ...(manifest.value.license || []).map((license) => ({
       key: 'License',
       value: license.id,
     })),
-    ...(manifest.value.metadata || []),
-  ];
-});
-const actor = computed<Actor[] | undefined>(() => manifest.value?.actor);
+    ...(manifest.value.metadata || []).map((metaItem) => ({
+      key: metaItem.key,
+      value: metaItem.value,
+    })),
+  ]
+
+  let orderedMetadata = []
+  if (manifestOrderMetadata?.length > 0) {
+    orderedMetadata = orderMetadataItems(manifestOrderMetadata, defaultMetadata)
+    return orderedMetadata
+  }
+
+  return defaultMetadata
+})
+const actor = computed<Actor[] | undefined>(() => manifest.value?.actor)
 </script>
diff --git a/src/components/metadata/MetadataItem.vue b/src/components/metadata/MetadataItem.vue
index 98a2d5a8..5ca5af8c 100644
--- a/src/components/metadata/MetadataItem.vue
+++ b/src/components/metadata/MetadataItem.vue
@@ -1,20 +1,10 @@
 <template>
   <div>
-    <h4
-      v-if="!isLink()"
-      class="t-font-semibold t-text-sm t-text-gray-400"
-    >
+    <h4 v-if="!isLink()" class="t-font-semibold t-text-sm t-text-gray-400">
       {{ $t(label) }}
     </h4>
-    <MetadataLink
-      v-if="isLink()"
-      :url="item.key"
-      :text="item.value"
-    />
-    <MetadataValue
-      v-else
-      :value="item.value"
-    />
+    <MetadataLink v-if="isLink()" :url="item.key" :text="item.value" />
+    <MetadataValue v-else :value="item.value" />
     <CopyCitation
       v-if="showCopyCitation(item.key, configStore.config)"
       :value="item.value"
@@ -29,53 +19,38 @@
 </template>
 
 <script setup lang="ts">
-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";
+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'
 
+import { getMetadataView } from '@/utils/metadata'
 const props = defineProps<{
-  item: Metadata;
-}>();
+  item: Metadata
+}>()
 
-const label = computed<string>(() => props.item?.key || "other");
-const childItems = computed<Metadata>(() => props.item?.metadata || []);
-const configStore = useConfigStore();
+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+&@#/%=~_|])/gi;
+    /(\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]
-  }
+    typeof props.item?.key === 'string' ? props.item?.key?.match(regex) : null
 
-  return null
+  return matches !== null
 }
 
 function showCopyCitation(key, config) {
   if (!config.panels || config.panels.length === false) return false
-  const metadataView = getMetadataView(config.panels);
+  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 metadataView.connector.options.citationKey === key
   }
-  return false;
+  return false
 }
 </script>
 
diff --git a/src/components/metadata/MetadataView.vue b/src/components/metadata/MetadataView.vue
index 55f2d2ff..8d28333f 100644
--- a/src/components/metadata/MetadataView.vue
+++ b/src/components/metadata/MetadataView.vue
@@ -1,19 +1,55 @@
 <template>
   <div class="metadata-view t-overflow-auto t-break-all t-px-4 t-pt-4">
-    <CollectionMetadata v-if="options.collection?.all" />
-    <ManifestMetadata v-if="options.manifest?.all" />
-    <ItemMetadata v-if="options.manifest?.all" />
+    <component
+      v-for="(documentType, i) in orderDocumentsMetadata"
+      :is="resolveComponent(documentType)"
+      :key="i"
+    >
+    </component>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useConfigStore } from '@/stores/config'
+import { resolveComponent } from 'vue'
 
-import CollectionMetadata from '@/components/metadata/CollectionMetadata.vue';
-import ManifestMetadata from '@/components/metadata/ManifestMetadata.vue';
-import ItemMetadata from '@/components/metadata/ItemMetadata.vue';
+import { getMetadataView } from '@/utils/metadata'
 
 defineProps({
   options: Object,
-});
+})
 
+const configStore = useConfigStore()
+
+const config = computed(() => configStore.config)
+
+const metadataView = computed(() => getMetadataView(config.value.panels))
+
+const userOrderDocuments = computed(
+  () => metadataView.value.connector.options.orderDocuments
+)
+
+let orderDocumentsMetadata = computed(() =>
+  getOrderDocuments(userOrderDocuments.value)
+)
+
+function getOrderDocuments(userOrderDocuments) {
+  let orderDocumentsMetadata = []
+
+  if (!userOrderDocuments || userOrderDocuments.length === 0)
+    return ['CollectionMetadata', 'ManifestMetadata', 'ItemMetadata']
+
+  for (let i = 0; i < userOrderDocuments.length; i++) {
+    const document = userOrderDocuments[i].toLowerCase()
+
+    if (document.includes('collection'))
+      orderDocumentsMetadata.push('CollectionMetadata')
+    if (document.includes('manifest'))
+      orderDocumentsMetadata.push('ManifestMetadata')
+    if (document.includes('item')) orderDocumentsMetadata.push('ItemMetadata')
+  }
+
+  return orderDocumentsMetadata
+}
 </script>
diff --git a/src/main.js b/src/main.js
index 05e0863c..2bd0a265 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,83 +1,92 @@
-import { createApp, h } from 'vue';
-import PrimeVue from 'primevue/config';
-import { createPinia } from 'pinia';
-import { i18n } from './i18n';
-import App from './App.vue';
-
-import './css/preflight.scss';
-import './css/style.css';
-import './css/style.scss';
-import { getRGBColor } from '@/utils/color';
-
-import { useToggle } from '@vueuse/core/index';
-import { isDark } from '@/utils/is-dark';
-
+import { createApp, h } from 'vue'
+import PrimeVue from 'primevue/config'
+import { createPinia } from 'pinia'
+import { i18n } from './i18n'
+import App from './App.vue'
+import CollectionMetadata from '@/components/metadata/CollectionMetadata.vue'
+import ManifestMetadata from '@/components/metadata/ManifestMetadata.vue'
+import ItemMetadata from '@/components/metadata/ItemMetadata.vue'
+
+import './css/preflight.scss'
+import './css/style.css'
+import './css/style.scss'
+import { getRGBColor } from '@/utils/color'
+
+import { useToggle } from '@vueuse/core/index'
+import { isDark } from '@/utils/is-dark'
 
 function generateId() {
-  return Math.random().toString(36).slice(2, 16);
+  return Math.random().toString(36).slice(2, 16)
 }
 
 window.Tido = function Tido(config = {}) {
-  const pinia = createPinia();
+  const pinia = createPinia()
 
-  this.config = { ...config };
+  this.config = { ...config }
 
   this.app = createApp({
     setup() {
-      return () => h(App);
+      return () => h(App)
     },
-  });
+  })
 
-  this.app.provide('config', this.config);
-  this.app.use(PrimeVue);
-  this.app.use(pinia);
-  this.app.use(i18n);
+  this.app.provide('config', this.config)
+  this.app.use(PrimeVue)
+  this.app.use(pinia)
+  this.app.use(i18n)
+  this.app.component('CollectionMetadata', CollectionMetadata)
+  this.app.component('ManifestMetadata', ManifestMetadata)
+  this.app.component('ItemMetadata', ItemMetadata)
 
-  let mounted = false;
+  let mounted = false
   this.mount = (container) => {
     if (mounted) {
-      throw new Error('Tido is already mounted');
+      throw new Error('Tido is already mounted')
     }
 
-    const containerEl = typeof container === 'string'
-      ? document.querySelector(container)
-      : container;
+    const containerEl =
+      typeof container === 'string'
+        ? document.querySelector(container)
+        : container
 
     if (!containerEl) {
-      throw new Error('Container element not found');
+      throw new Error('Container element not found')
     }
 
-    containerEl.classList.add('tido-container');
+    containerEl.classList.add('tido-container')
 
-    this.app.mount(containerEl);
+    this.app.mount(containerEl)
 
-    const instanceId = generateId();
-    this.app.provide('instanceId', instanceId);
+    const instanceId = generateId()
+    this.app.provide('instanceId', instanceId)
 
-    const style = document.createElement('style');
+    const style = document.createElement('style')
 
-    style.id = instanceId;
+    style.id = instanceId
     style.innerHTML = `
-      ${this.config.container || '#app'} { ${getRGBColor(this.config.colors?.primary ?? '#3456aa', 'primary')} }
-    `;
-    containerEl.appendChild(style);
-
-    mounted = true;
-  };
+      ${this.config.container || '#app'} { ${getRGBColor(
+      this.config.colors?.primary ?? '#3456aa',
+      'primary'
+    )} }
+    `
+    containerEl.appendChild(style)
+
+    mounted = true
+  }
 
-  const container = this.config?.container || '#app';
+  const container = this.config?.container || '#app'
 
-  this.mount(container);
+  this.mount(container)
 
   this.setTheme = (name) => {
-    if (!name || name !== 'light' && name !== 'dark') return;
-    const toggleDark = useToggle(isDark);
+    if (!name || (name !== 'light' && name !== 'dark')) return
+    const toggleDark = useToggle(isDark)
 
-    let darkValue = false;
-    if (name === 'dark') darkValue = true;
+    let darkValue = false
+    if (name === 'dark') darkValue = true
 
-    toggleDark(darkValue);
+    toggleDark(darkValue)
   }
-};
+}
 
-export default window.Tido;
+export default window.Tido
diff --git a/src/utils/metadata.js b/src/utils/metadata.js
new file mode 100644
index 00000000..5cdecf0c
--- /dev/null
+++ b/src/utils/metadata.js
@@ -0,0 +1,32 @@
+export function orderMetadataItems(orderConfig, defaultMetadata) {
+  // orderConfig: metadata keys given by "User" in an array in the desired order for a certain documentType
+  // defaultMetadata: the created metadata array according to a "TIDO" specified order
+
+  let orderedMetadata = []
+  if (orderConfig?.length) {
+    orderConfig.forEach((key) => {
+      const metadataItem = defaultMetadata.find(
+        (metadata) => metadata.key.toLowerCase() === key.toLowerCase()
+      )
+      if (metadataItem)
+        orderedMetadata.push({ key: key, value: metadataItem.value })
+    })
+  }
+  return orderedMetadata
+}
+
+export 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
+}