diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 5eab1ffb..a83c403d 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -26,8 +26,8 @@ public function register()
      */
     public function boot()
     {
-        // if ($this->app->environment('production')) {
-        //     \URL::forceScheme('https');
-        // }
+        if ($this->app->environment('production')) {
+            \URL::forceScheme('https');
+        }
     }
 }
diff --git a/resources/js/Mixins/Global.js b/resources/js/Mixins/Global.js
index bcf2084f..09a896dc 100644
--- a/resources/js/Mixins/Global.js
+++ b/resources/js/Mixins/Global.js
@@ -74,13 +74,15 @@ export default {
 
             return str;
         },
-        copyToClipboard(text, id) {
-            document.getElementById(id).select();
-            copyText(text, undefined, (error, event) => {
+        copyToClipboard(text, element) {
+            if (typeof element == "string") {
+                document.getElementById(id).select();
+            } else {
+                element.select();
+            }
+            copyText(text, undefined, (error) => {
                 if (error) {
                     console.log(error);
-                } else {
-                    // console.log(event)
                 }
             });
         },
diff --git a/resources/js/Pages/Project/Show.vue b/resources/js/Pages/Project/Show.vue
index 3a90d71c..4f0426ac 100644
--- a/resources/js/Pages/Project/Show.vue
+++ b/resources/js/Pages/Project/Show.vue
@@ -306,7 +306,7 @@
                             v-if="project.identifier"
                             class="text-gray-400 mt-2"
                         >
-                            <img :src="'/badge/doi/' + project.identifier" />
+                            <DOIBadge :doi="project.doi"></DOIBadge>
                         </div>
                         <div
                             class="mt-2 flex items-center text-xs text-gray-400"
@@ -567,6 +567,7 @@ import Citation from "@/Shared/Citation.vue";
 import Publish from "@/Shared/Publish.vue";
 import AuthorCard from "@/Shared/AuthorCard.vue";
 import CitationCard from "@/Shared/CitationCard.vue";
+import DOIBadge from "@/Shared/DOIBadge.vue";
 
 export default {
     components: {
@@ -585,6 +586,7 @@ export default {
         Publish,
         AuthorCard,
         CitationCard,
+        DOIBadge,
     },
     props: [
         "project",
diff --git a/resources/js/Pages/Public/Project/Dataset.vue b/resources/js/Pages/Public/Project/Dataset.vue
index 108f3c96..f70c4f32 100644
--- a/resources/js/Pages/Public/Project/Dataset.vue
+++ b/resources/js/Pages/Public/Project/Dataset.vue
@@ -10,7 +10,10 @@
                     </span>
                     <div class="text-sm">
                         <span class="text-gray-400 pt-2">
-                            <img :src="'badge/doi/' + study.data.identifier" />
+                            <DOIBadge
+                                :doi="study.data.doi"
+                                color="bg-yellow-300"
+                            ></DOIBadge>
                         </span>
                     </div>
                     <div class="float-right">
@@ -97,7 +100,7 @@
                         </div>
                     </div>
                 </h1>
-                <div class="mt-4">
+                <!-- <div class="mt-4">
                     <div class="relative">
                         <div
                             class="absolute inset-0 flex items-center"
@@ -118,7 +121,7 @@
                         class="prose mt-1 text-sm text-blue-gray-500"
                         v-html="md(study.data.description)"
                     ></p>
-                </div>
+                </div> -->
                 <div v-if="study.data.tags.length > 0" class="mt-4">
                     <div class="relative">
                         <div
@@ -309,11 +312,10 @@
                         ><br />
                         <div class="text-sm">
                             <span class="text-gray-400 pt-2">
-                                <img
-                                    :src="
-                                        'badge/doi/' + dataset.data.identifier
-                                    "
-                                />
+                                <DOIBadge
+                                    :doi="dataset.data.doi"
+                                    color="bg-green-100"
+                                ></DOIBadge>
                             </span>
                         </div>
                     </h1>
@@ -338,6 +340,7 @@ import ProjectLayout from "@/Pages/Public/Project/Layout.vue";
 import { ShareIcon, ClipboardDocumentIcon } from "@heroicons/vue/24/solid";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import SpectraViewer from "@/Shared/SpectraViewer.vue";
+import DOIBadge from "@/Shared/DOIBadge.vue";
 
 export default {
     components: {
@@ -349,6 +352,7 @@ export default {
         MenuItem,
         MenuItems,
         SpectraViewer,
+        DOIBadge,
     },
     props: ["project", "tab", "study", "dataset"],
     data() {
diff --git a/resources/js/Pages/Public/Project/Files.vue b/resources/js/Pages/Public/Project/Files.vue
index 8d248053..e94d0af1 100644
--- a/resources/js/Pages/Public/Project/Files.vue
+++ b/resources/js/Pages/Public/Project/Files.vue
@@ -1,7 +1,9 @@
 <template>
     <project-layout :project="project" :selected-tab="tab">
         <template #project-content>
-            <div class="pb-10 mb-10 max-w-7xl mx-auto py-4">
+            <div
+                class="pb-10 mb-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4 pb-6"
+            >
                 <div v-if="project.data.files">
                     <nav
                         v-if="$page.props.selectedFolder"
diff --git a/resources/js/Pages/Public/Project/Layout.vue b/resources/js/Pages/Public/Project/Layout.vue
index b591e26b..ebfe08d6 100644
--- a/resources/js/Pages/Public/Project/Layout.vue
+++ b/resources/js/Pages/Public/Project/Layout.vue
@@ -108,18 +108,15 @@
                                         >
                                     </h1>
                                     <p class="text-gray-700 pl-1 pt-2">
-                                        <img
-                                            :src="
-                                                'badge/doi/' +
-                                                project.data.identifier
-                                            "
-                                        />
+                                        <DOIBadge
+                                            :doi="project.data.doi"
+                                        ></DOIBadge>
                                     </p>
                                     <div class="sm:col-span-12 pt-4">
                                         <span
                                             v-for="tag in project.data.tags"
                                             :key="tag.id"
-                                            class="mt-1 inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+                                            class="mt-1 mr-1 inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
                                             target="_blank"
                                             :href="
                                                 '/projects?tag=' + tag.name.en
@@ -179,11 +176,13 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { Link, router } from "@inertiajs/vue3";
 import { ArrowDownTrayIcon } from "@heroicons/vue/24/solid";
+import DOIBadge from "@/Shared/DOIBadge.vue";
 export default {
     components: {
         AppLayout,
         Link,
         ArrowDownTrayIcon,
+        DOIBadge,
     },
     props: ["project", "selectedTab"],
     data() {
diff --git a/resources/js/Pages/Public/Project/Samples.vue b/resources/js/Pages/Public/Project/Samples.vue
index 1be08863..dd623430 100644
--- a/resources/js/Pages/Public/Project/Samples.vue
+++ b/resources/js/Pages/Public/Project/Samples.vue
@@ -1,7 +1,9 @@
 <template>
     <project-layout :project="project" :selected-tab="tab">
         <template #project-content>
-            <div class="p-8">
+            <div
+                class="pb-10 mb-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4 pb-6"
+            >
                 <div class="flex items-baseline justify-between">
                     <div>
                         <h2 class="text-lg mb-3 font-bold">Studies</h2>
@@ -70,7 +72,7 @@
                     </div>
                     <div v-else>
                         <div
-                            class="mt-8 mx-auto max-w-md grid gap-8 sm:max-w-lg lg:grid-cols-3 lg:max-w-7xl"
+                            class="mt-8 mx-auto max-w-md grid gap-8 sm:max-w-lg lg:grid-cols-4 lg:max-w-7xl"
                         >
                             <div
                                 v-for="study in studies.data"
diff --git a/resources/js/Pages/Public/Project/Show.vue b/resources/js/Pages/Public/Project/Show.vue
index f8cc6192..cd89e4ee 100644
--- a/resources/js/Pages/Public/Project/Show.vue
+++ b/resources/js/Pages/Public/Project/Show.vue
@@ -2,8 +2,17 @@
     <project-layout :project="project" :selected-tab="tab">
         <template #project-content>
             <div
-                class="pb-10 mb-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"
+                class="pb-10 mb-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4 pb-6"
             >
+                <div
+                    class="-mx-4"
+                    v-if="project.data.is_public && project.data.doi != null"
+                >
+                    <Citation
+                        :model="'project'"
+                        :doi="project.data.doi"
+                    ></Citation>
+                </div>
                 <div class="mt-2 space-y-4 divide-y divide-y-blue-gray-200">
                     <div>
                         <h3 class="text-xl font-extrabold text-blue-gray-900">
@@ -22,7 +31,7 @@
                         </div>
                     </div>
 
-                    <div class="pt-2">
+                    <div v-if="project.data.species" class="pt-2">
                         <h3 class="text-xl font-extrabold text-blue-gray-900">
                             Organism
                         </h3>
@@ -146,12 +155,14 @@ import ProjectLayout from "@/Pages/Public/Project/Layout.vue";
 import AuthorCard from "@/Shared/AuthorCard.vue";
 import CitationCard from "@/Shared/CitationCard.vue";
 import "ontology-elements/dist/index.js";
+import Citation from "@/Shared/Citation.vue";
 
 export default {
     components: {
         ProjectLayout,
         AuthorCard,
         CitationCard,
+        Citation,
     },
     props: ["project", "tab"],
     data() {
diff --git a/resources/js/Pages/Public/Project/Study.vue b/resources/js/Pages/Public/Project/Study.vue
index 97dc2921..f27f914a 100644
--- a/resources/js/Pages/Public/Project/Study.vue
+++ b/resources/js/Pages/Public/Project/Study.vue
@@ -8,10 +8,11 @@
                     <div class="text-blue-500">
                         {{ study.data.name }}
                     </div>
-                    <div class="text-sm float-left">
-                        <span class="text-gray-400 pt-2">
-                            <img :src="'badge/doi/' + study.data.identifier" />
-                        </span>
+                    <div class="text-sm float-left my-3">
+                        <DOIBadge
+                            :doi="study.data.doi"
+                            color="bg-yellow-300"
+                        ></DOIBadge>
                     </div>
                     <div class="float-right">
                         <span class="flex-0.5 self-center">
@@ -98,6 +99,7 @@
                     </div>
                 </h1>
                 <br />
+                <br />
                 <div
                     v-if="
                         study.data.description &&
@@ -331,17 +333,6 @@
                                 >
                             </option>
                         </select> -->
-                    <!-- <div v-if="selectedDataset" class="text-sm my-2">
-                            <span class="text-gray-400 pt-2">
-                                <img
-                                    :src="
-                                        'badge/doi/' +
-                                        selectedDataset.identifier
-                                    "
-                                />
-                            </span>
-                        </div>
-                    </div> -->
                     <div class="mt-3">
                         <SpectraViewer
                             ref="spectraViewerREF"
@@ -403,16 +394,13 @@
                                                     ></a
                                                 >
                                                 <p class="text-gray-500">
-                                                    <img
-                                                        :src="
-                                                            'badge/doi/' +
-                                                            dataset.identifier
-                                                        "
-                                                    />
+                                                    <DOIBadge
+                                                        color="bg-green-100"
+                                                        :doi="dataset.doi"
+                                                    ></DOIBadge>
                                                 </p>
                                             </div>
                                             <div class="flex-shrink-0 pr-2">
-                                                <!-- {{ dataset.identifier }} -->
                                                 <svg
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     fill="none"
@@ -433,21 +421,6 @@
                                 </li>
                             </ul>
                         </div>
-                        <!-- 
-                        <span
-                               
-                                :value="dataset"
-                            >
-                            <span class="text-gray-400 float-left mr-1 pt-2">
-                                
-                                <img
-                                    :src="
-                                        'badge/doi/' +
-                                        dataset.identifier
-                                    "
-                                />
-                            </span>
-                        </span> -->
                     </div>
                     <div>&emsp;</div>
                 </div>
@@ -465,6 +438,8 @@ import { ShareIcon, ClipboardDocumentIcon } from "@heroicons/vue/24/solid";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import SpectraViewer from "@/Shared/SpectraViewer.vue";
 import Depictor2D from "@/Shared/Depictor2D.vue";
+import DOIBadge from "@/Shared/DOIBadge.vue";
+
 export default {
     components: {
         ProjectLayout,
@@ -476,6 +451,7 @@ export default {
         MenuItems,
         SpectraViewer,
         Depictor2D,
+        DOIBadge,
     },
     props: ["project", "tab", "study"],
     data() {
diff --git a/resources/js/Shared/Citation.vue b/resources/js/Shared/Citation.vue
index 457cf82a..163de046 100644
--- a/resources/js/Shared/Citation.vue
+++ b/resources/js/Shared/Citation.vue
@@ -72,7 +72,7 @@ export default {
         dataciteURL() {
             return this.$page.props.dataciteURL
                 ? String(this.$page.props.dataciteURL) + "/dois/"
-                : "https://api.test.datacite.org/dois/";
+                : "https://api.datacite.org/dois/";
         },
     },
     watch: {
diff --git a/resources/js/Shared/DOIBadge.vue b/resources/js/Shared/DOIBadge.vue
new file mode 100644
index 00000000..10e84826
--- /dev/null
+++ b/resources/js/Shared/DOIBadge.vue
@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <div v-if="doi">
+            <div
+                class="inline-flex items-center cursor-pointer"
+                @click.prevent="copyDOIToClipboard"
+            >
+                <span
+                    class="inline-flex items-center rounded-l-md border-r bg-gray-800 px-2 py-1 text-sm font-medium text-white"
+                    >DOI:</span
+                >
+                <span
+                    :class="[
+                        color ? color : 'bg-blue-100',
+                        'inline-flex items-center rounded-r-md px-2 py-1 text-sm font-medium text-gray-900',
+                    ]"
+                    >{{ doi }}</span
+                >
+                <input
+                    readonly
+                    type="hidden"
+                    :value="doi"
+                    class="rounded-l-md focus:ring-gray-500 focus:border-gray-500 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300"
+                    @focus="$event.target.select()"
+                />
+                <span v-if="isVisible" class="text-gray-500 text-xs ml-2"
+                    >Copied to clipboard!</span
+                >
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {},
+    props: ["doi", "color"],
+    data() {
+        return {
+            isVisible: false,
+        };
+    },
+    methods: {
+        copyDOIToClipboard(event) {
+            let targetInput =
+                event.target.parentElement.getElementsByTagName("input")[0];
+            if (targetInput) {
+                this.isVisible = true;
+                setTimeout(() => {
+                    this.isVisible = false;
+                }, 2500);
+                this.copyToClipboard(this.doi, targetInput);
+            }
+        },
+    },
+};
+</script>