diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index 70822d08de186ebe1e628a8833adbfe51b72ee6f..5e40ebdfbbd47e0647ac60f4fa98f40a07fc2a15 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -1,9 +1,21 @@
 <script setup lang="ts">
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
+import { useRuntimeConfig, computed } from '#imports'
 export interface Props {
     height?: number
     dataUrl: string
 }
 
+const refinedDataUrl = computed(() => {
+    if (props.dataUrl?.startsWith('/') && !props.dataUrl.startsWith('//')) {
+        const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+        if (_base !== '/' && !props.dataUrl.startsWith(_base)) {
+            return joinURL(_base, props.dataUrl)
+        }
+    }
+    return props.dataUrl
+})
+
 const props = withDefaults(defineProps<Props>(), {
     height: 600,
 })
@@ -28,7 +40,7 @@ useHead({
 
 <template>
     <v-card flat color="transparent" :min-height="height" position="relative" class="my-3">
-        <pdbe-molstar :custom-data-url="dataUrl" custom-data-format="pdb" alphafold-view="true" landscape="true"
+        <pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" alphafold-view="true" landscape="true"
             hide-expand-icon sequence-panel></pdbe-molstar>
     </v-card>
 </template>