diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index ea7109b57c88c11b2231853d27debb7fb1f7abf6..71d8385aa1c350dbea7dadcbdf8ac710d8b2349f 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -3,19 +3,35 @@ import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
 import { useRuntimeConfig, computed } from '#imports'
 export interface Props {
     height?: number
-    dataUrls: string[]
+    dataUrls?: string[]
+    dataUrl?: string
 }
 // const selectedPdb = ref('')
 const refinedDataUrls = computed(() => {
-    return props.dataUrls.map((dataUrl) => {
-        if (dataUrl?.startsWith('/') && !dataUrl.startsWith('//')) {
+
+    function refinedUrl(url: string) {
+        if (url?.startsWith('/') && !url.startsWith('//')) {
             const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
-            if (_base !== '/' && !dataUrl.startsWith(_base)) {
-                return joinURL(_base, dataUrl)
+            if (_base !== '/' && !url.startsWith(_base)) {
+                return joinURL(_base, url)
             }
         }
-        return dataUrl
-    })
+        return url
+    }
+
+    let urls: string[] = []
+
+    if (props?.dataUrls && props?.dataUrls?.length > 0) {
+        urls = [...props.dataUrls.map((dataUrl) => {
+            return refinedUrl(dataUrl)
+        })]
+    }
+    if (props?.dataUrl) {
+        urls = [...urls, refinedUrl(props.dataUrl)]
+    }
+    return urls
+
+
 })
 
 // const selectedPdb = ref(refinedDataUrls.value?.length > 0 ? refinedDataUrls.value[0] : null)