diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index ba83ffa..b5f160e 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -10,7 +10,7 @@ export default defineNuxtConfig({
       {
         name: 'admin',
         password: 'admin123',
-      }
-    ]
+      },
+    ],
   },
 })
diff --git a/playground/pages/animation_test.vue b/playground/pages/animation_test.vue
index b987226..ef8bbbf 100644
--- a/playground/pages/animation_test.vue
+++ b/playground/pages/animation_test.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-
 const section1 = ref<HTMLElement | null>(null)
-const animation = useScrollAnimation({element:section1})
+const animation = useScrollAnimation({ element: section1 })
 
-const globalScroll = useScrollAnimation({global: true})
-const screenScroll = useScrollAnimation({screenHeight: true})
+const globalScroll = useScrollAnimation({ global: true })
+const screenScroll = useScrollAnimation({ screenHeight: true })
 </script>
 
 <template>
@@ -16,19 +15,20 @@ const screenScroll = useScrollAnimation({screenHeight: true})
       </div>
     </div>
 
-
-    <div class="fixed top-0 left-0 font-bold text-2xl text-black bg-white p-4 border border-black rounded-lg">
-      <span>GlobalScroll: {{globalScroll}}</span>
+    <div class="fixed bottom-0 left-0 font-bold text-2xl text-black bg-white p-4 border border-black rounded-lg">
+      <span>GlobalScroll: {{ globalScroll }}</span>
 
       <br>
 
-      <span>ScreenScroll: {{screenScroll}}</span>
-
+      <span>ScreenScroll: {{ screenScroll }}</span>
     </div>
 
-    <div class="h-screen w-full bg-gray-100 flex flex-col items-center justify-between" ref="section1">
+    <div
+      ref="section1"
+      class="h-screen w-full bg-gray-100 flex flex-col items-center justify-between"
+    >
       <h2>SECTION 1</h2>
-      <p>{{animation}}</p>
+      <p>{{ animation }}</p>
     </div>
     <div class="h-screen w-full bg-red-100 flex flex-col items-center justify-center">
       <h2>SECTION 2</h2>
diff --git a/playground/pages/image_test.vue b/playground/pages/image_test.vue
deleted file mode 100644
index 1aafab9..0000000
--- a/playground/pages/image_test.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const customImage = useKatzeImage({ key: 'image_link' })
-</script>
-
-<template>
-  <div>
-    <h1>Custom Image Test</h1>
-    <div class="flex flex-col">
-      <div class="flex flex-row">
-        <div
-          class="w-52 h-52"
-          kat-e="image_link"
-        >
-          <img
-            class="size-full"
-            :src="customImage.src"
-            :alt="customImage.alt"
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index a18e1aa..50f3488 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -8,10 +8,19 @@ const buttonText = useKatzeText({ key: 'button_text', default: 'The text on this
 const richTextExample = useKatzeRichText({ key: 'rich_text_example',
   default: '<span>This is a rich text example. You can edit this text add italics and boldness and more.</span>',
 })
+
+const customImage = useKatzeImage({ key: 'custom_image', default: { src: '/images/test.svg', alt: 'Placeholder Image' }})
 </script>
 
 <template>
   <div class="size-full flex flex-col items-center">
+    <NuxtLink
+      class="bg-red-500 hover:bg-red-700 text-white font-bold p-4 m-2 w-1/2 text-center transition-colors
+       rounded"
+      to="/cms"
+    >
+      Go to CMS
+    </NuxtLink>
     <h1 class="text-4xl font-bold font-mono py-20">
       Katze CMS Playground
     </h1>
@@ -22,12 +31,13 @@ const richTextExample = useKatzeRichText({ key: 'rich_text_example',
       >
         {{ editableText }}
       </p>
-      <button
+      <NuxtLink
         class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
         kat-e="button_text"
+        to="/animation_test"
       >
-        {{ buttonText }}
-      </button>
+        Hardcoded Text and {{ buttonText }}
+      </NuxtLink>
 
       <p
         class="text-2xl"
@@ -35,6 +45,17 @@ const richTextExample = useKatzeRichText({ key: 'rich_text_example',
       >
         <katze-rich-text :content="richTextExample" />
       </p>
+
+      <div
+        class="w-52 h-52"
+        kat-e="custom_image"
+      >
+        <img
+          class="size-full"
+          :src="customImage.src"
+          :alt="customImage.alt"
+        >
+      </div>
     </div>
   </div>
 </template>
diff --git a/playground/public/images/test.png b/playground/public/images/test.png
deleted file mode 100644
index 0f24a1b..0000000
Binary files a/playground/public/images/test.png and /dev/null differ
diff --git a/playground/public/images/test.svg b/playground/public/images/test.svg
new file mode 100644
index 0000000..9e92352
--- /dev/null
+++ b/playground/public/images/test.svg
@@ -0,0 +1,112 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="797.000000pt" height="707.000000pt" viewBox="0 0 797.000000 707.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,707.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2230 5486 c-48 -46 -64 -55 -115 -65 -103 -21 -111 -30 -40 -49 49
+-13 54 -24 34 -81 -6 -18 -9 -35 -5 -38 3 -3 32 19 64 49 50 48 66 57 118 67
+32 7 65 14 72 16 25 9 11 23 -32 34 -25 6 -47 14 -49 19 -3 4 1 25 9 47 25 72
+18 73 -56 1z"/>
+<path d="M5825 5404 c-22 -2 -89 -9 -150 -14 -525 -50 -1169 -218 -1811 -471
+l-200 -79 -221 0 c-123 0 -233 -4 -249 -10 -18 -7 -75 -63 -153 -155 -69 -80
+-127 -145 -130 -144 -3 0 -53 57 -111 127 -148 178 -140 175 -431 180 -350 6
+-450 -16 -569 -125 -73 -68 -101 -117 -216 -383 -144 -331 -143 -354 25 -554
+50 -59 91 -111 91 -115 0 -3 -55 -55 -121 -115 -196 -177 -415 -426 -542 -618
+-215 -322 -269 -655 -145 -892 73 -139 230 -257 434 -325 167 -56 311 -75 564
+-75 238 0 352 9 595 50 360 60 793 177 1113 300 l117 45 526 -1 526 0 26 26
+c14 14 29 35 32 45 9 27 21 24 47 -12 46 -62 10 -59 794 -59 394 0 718 -1 721
+-3 2 -2 -17 -52 -43 -111 -52 -122 -52 -133 3 -214 66 -96 116 -104 240 -37
+l83 45 58 -45 c72 -56 113 -69 156 -51 59 25 68 45 81 177 7 66 17 124 21 128
+5 5 46 38 92 76 45 37 90 81 98 97 22 42 11 85 -33 144 -48 63 -60 72 -105 80
+-21 4 -38 8 -38 9 0 2 11 27 25 57 32 68 31 86 -5 136 l-29 41 50 108 c49 105
+54 129 34 176 -6 15 1 17 74 17 68 0 84 3 102 21 31 31 189 367 189 403 0 25
+-28 64 -150 211 -83 99 -166 195 -185 213 l-35 32 -131 0 c-72 0 -129 4 -127
+8 2 4 50 72 108 150 75 102 110 142 125 142 11 -1 94 -11 185 -24 91 -13 166
+-23 167 -22 1 1 -48 57 -108 125 -73 81 -107 127 -101 134 5 7 59 78 121 160
+61 81 109 147 106 147 -3 0 -75 -32 -161 -71 -86 -38 -158 -68 -161 -66 -2 3
+5 27 16 54 45 108 56 164 56 293 -1 113 -3 131 -28 190 -69 165 -219 285 -458
+364 -175 59 -308 77 -579 81 -129 2 -253 1 -275 -1z m645 -155 c345 -37 580
+-194 630 -421 19 -85 8 -235 -24 -335 -15 -46 -31 -83 -35 -83 -5 0 -53 52
+-107 116 -116 135 -111 138 -114 -56 -4 -194 14 -170 -198 -264 -144 -63 -178
+-82 -160 -87 13 -3 94 -14 182 -24 l158 -19 -7 -160 c-4 -89 -10 -164 -14
+-168 -6 -7 -315 -10 -947 -9 l-312 1 19 61 c34 110 21 220 -35 293 -14 19 -26
+37 -26 40 0 3 26 6 58 6 71 0 86 13 103 90 14 66 7 136 -20 189 -11 22 -82
+112 -157 202 -184 217 -172 212 -470 217 -277 5 -363 -5 -452 -53 l-64 -36
+-36 42 c-34 37 -43 42 -97 48 l-60 6 145 52 c468 165 865 266 1313 333 239 36
+508 43 727 19z m-3855 -499 c86 -42 100 -125 43 -276 l-33 -89 -202 -3 c-112
+-1 -203 0 -203 3 0 2 14 39 31 82 17 43 40 99 50 126 l19 47 -58 0 -58 0 -56
+-137 c-31 -76 -91 -220 -132 -321 l-75 -183 60 3 61 3 52 127 51 128 203 0
+c137 0 202 -3 202 -11 0 -21 -64 -165 -91 -205 -42 -61 -113 -120 -178 -146
+-53 -21 -72 -23 -331 -26 -303 -4 -342 1 -390 50 -36 35 -46 84 -31 143 19 77
+198 477 239 535 45 63 139 132 210 154 36 11 110 15 311 15 244 1 268 -1 306
+-19z m1755 13 c0 -5 -59 -207 -132 -450 l-131 -443 -194 0 c-106 0 -193 3
+-193 6 0 3 54 174 120 380 66 206 120 377 120 379 0 3 -26 5 -58 5 l-58 0
+-124 -385 -125 -385 -192 0 c-110 0 -193 4 -193 9 0 8 235 692 255 744 6 15 0
+17 -53 17 l-60 0 -77 -224 -78 -224 -136 -161 -136 -161 -243 0 c-192 0 -242
+3 -236 13 8 12 588 686 702 815 l64 72 579 0 c318 0 579 -3 579 -7z m858 -8
+c94 -40 129 -117 106 -234 l-6 -31 -204 0 c-112 0 -204 1 -204 3 0 1 9 35 19
+75 l19 72 -59 0 -58 0 -12 -42 c-6 -24 -21 -80 -34 -125 l-22 -83 166 0 c91 0
+182 -5 203 -10 51 -15 105 -77 113 -133 8 -50 -13 -143 -45 -206 -28 -56 -86
+-109 -150 -140 -55 -26 -57 -26 -331 -29 -179 -2 -291 0 -317 8 -106 28 -154
+125 -121 243 l10 37 204 0 c113 0 205 -1 205 -3 0 -1 -9 -34 -20 -72 -11 -38
+-20 -73 -20 -77 0 -5 27 -8 60 -8 l59 0 11 43 c6 23 22 81 35 129 l23 86 -183
+4 c-204 3 -214 6 -262 78 -59 86 12 290 128 367 86 57 121 62 397 63 206 0
+259 -3 290 -15z m-3054 -1042 c2 -10 8 -42 11 -71 8 -60 16 -66 92 -77 29 -4
+55 -10 58 -15 3 -4 -27 -33 -65 -64 -74 -60 -75 -63 -85 -168 -4 -38 -9 -68
+-12 -68 -4 0 -31 19 -61 42 l-54 42 -74 -39 c-40 -22 -76 -37 -79 -34 -3 4 10
+43 29 87 l35 81 -40 62 c-22 34 -38 63 -36 66 3 2 38 9 79 15 40 5 78 14 85
+19 6 6 30 39 53 75 44 67 55 75 64 47z m676 -69 c0 -3 -156 -264 -347 -580
+l-346 -574 -189 0 c-104 0 -187 3 -185 8 16 31 373 610 384 623 8 10 23 14 37
+12 15 -3 32 4 49 19 23 20 28 35 36 108 9 84 10 85 53 120 93 75 101 87 96
+134 -4 36 0 52 23 90 l29 46 180 0 c99 0 180 -3 180 -6z m316 -273 l-279 -279
+-57 -299 -56 -298 -222 -3 c-122 -1 -222 0 -222 2 0 2 9 44 21 93 20 83 34
+110 261 488 201 335 254 414 320 488 l80 87 217 0 216 0 -279 -279z m1008 207
+c-8 -40 -57 -300 -110 -578 -53 -278 -97 -506 -99 -508 -1 -1 -108 -1 -237 0
+l-234 3 44 205 43 205 160 281 c87 155 159 284 159 288 0 3 -24 6 -54 6 l-54
+0 -283 -495 -284 -494 -187 -1 c-104 0 -188 2 -188 4 0 3 151 264 336 580
+l336 576 333 0 333 0 -14 -72z m1009 -13 l-44 -85 -92 0 -92 -1 -265 -491
+c-145 -269 -269 -492 -275 -494 -6 -3 -92 -3 -192 -2 l-181 3 273 493 273 492
+-84 0 c-61 0 -84 3 -84 13 0 6 18 45 40 85 l41 72 363 0 363 0 -44 -85z m927
+80 c0 -3 -18 -40 -39 -83 -37 -75 -57 -96 -461 -487 l-422 -410 211 -3 211 -2
+-42 -85 -42 -85 -439 0 -438 0 43 81 c41 78 62 100 471 493 l428 411 -200 3
+c-120 1 -201 6 -201 12 0 5 17 43 37 85 l37 75 423 0 c233 0 423 -2 423 -5z
+m922 -12 c-4 -10 -39 -84 -77 -165 l-70 -147 -182 0 c-101 -1 -183 1 -183 4 0
+3 16 37 35 75 19 38 35 72 35 75 0 3 -24 5 -53 5 l-52 0 -78 -155 c-42 -85
+-77 -157 -77 -160 0 -3 81 -5 180 -5 l180 0 -42 -85 -42 -85 -183 0 -183 0
+-80 -160 c-44 -88 -80 -162 -80 -165 0 -3 26 -5 58 -5 l57 0 39 85 39 85 188
+0 189 0 -24 -52 c-13 -29 -49 -106 -81 -170 l-58 -118 -434 0 c-238 0 -433 2
+-433 5 0 7 205 416 407 813 l175 342 419 0 c396 0 419 -1 411 -17z m-5157
+-187 c15 -23 15 -29 -14 -94 -17 -39 -31 -79 -31 -90 0 -29 61 -105 93 -116
+23 -8 39 -4 92 22 68 33 85 38 85 24 0 -5 -92 -159 -205 -342 -113 -184 -205
+-344 -205 -356 0 -29 33 -74 202 -276 84 -100 158 -178 170 -182 13 -3 116 -6
+230 -6 205 0 207 0 235 24 l28 25 23 -22 c25 -23 52 -24 702 -27 79 0 129 -4
+120 -9 -37 -21 -432 -108 -655 -145 -321 -53 -413 -61 -730 -61 -272 0 -311 3
+-413 23 -211 42 -346 105 -448 206 -81 82 -107 147 -108 271 -1 225 155 500
+476 841 66 69 326 313 335 314 2 0 10 -11 18 -24z m4936 -1084 c8 -56 18 -104
+21 -107 3 -3 49 -13 102 -23 53 -9 96 -21 96 -27 0 -6 -44 -47 -99 -92 -110
+-90 -104 -78 -117 -246 -4 -48 -10 -89 -13 -92 -4 -2 -40 23 -81 55 -41 33
+-81 59 -88 60 -8 0 -59 -23 -113 -51 -55 -28 -103 -48 -106 -45 -4 4 8 41 26
+84 18 42 40 96 49 119 l16 42 -57 86 c-32 47 -55 89 -53 94 3 4 36 11 73 15
+37 4 89 9 115 12 l47 6 72 110 c40 60 77 107 83 105 6 -2 18 -49 27 -105z
+m-3126 -234 c15 -22 14 -23 -22 -35 -20 -7 -38 -11 -41 -9 -5 6 30 66 40 66 4
+0 14 -10 23 -22z"/>
+<path d="M1720 5311 c-133 -138 -166 -156 -349 -185 -98 -16 -121 -27 -121
+-56 0 -13 10 -20 33 -25 93 -18 129 -29 151 -46 22 -17 23 -23 15 -61 -5 -24
+-18 -64 -29 -90 -27 -63 -26 -78 6 -78 19 0 50 26 127 104 116 118 143 132
+310 160 119 21 125 23 133 48 8 27 0 32 -76 47 -71 14 -118 35 -126 56 -3 7 8
+54 25 103 37 107 37 112 9 112 -16 0 -50 -29 -108 -89z"/>
+<path d="M7449 5190 l-56 -77 -92 -18 c-50 -10 -91 -19 -91 -21 0 -1 31 -19
+69 -39 l70 -37 6 -66 c3 -37 7 -75 8 -85 1 -13 20 5 57 56 l55 75 95 19 95 19
+-77 42 -77 43 -3 83 -3 83 -56 -77z"/>
+<path d="M1077 5140 c-25 -26 -79 -50 -114 -50 -7 0 -13 -4 -13 -10 0 -5 8
+-10 18 -10 35 0 46 -15 34 -49 -6 -17 -8 -31 -5 -31 3 0 23 16 44 35 25 22 53
+37 79 41 52 8 58 19 19 33 -28 9 -30 14 -24 41 8 38 -2 38 -38 0z"/>
+<path d="M528 2033 l-57 -80 -78 -13 c-43 -6 -84 -15 -90 -19 -8 -4 13 -21 56
+-44 l69 -37 7 -85 7 -85 55 72 c30 40 62 76 71 79 9 4 50 12 90 19 39 7 72 16
+72 20 0 4 -31 24 -70 45 l-69 38 -3 85 -3 84 -57 -79z"/>
+</g>
+</svg>
diff --git a/src/runtime/components/views/EditView.vue b/src/runtime/components/views/EditView.vue
index a55b411..0e91dfa 100644
--- a/src/runtime/components/views/EditView.vue
+++ b/src/runtime/components/views/EditView.vue
@@ -101,12 +101,19 @@ onMounted(
               element.addEventListener('mouseleave', () => {
                 hoveredElement.value = null
               })
+              element.removeAttribute('href')
+              element.removeAttribute('target')
               element.addEventListener('click', (event) => {
                 if (selectedElement.value === element) {
                   return
                 }
                 selectedElement.value = element
 
+                //cancel click event
+                event.preventDefault()
+                event.stopPropagation()
+                event.stopImmediatePropagation()
+
                 const attribute = selectedElement.value.getAttribute('kat-e')
                 if (attribute) {
                   const component = uiStore.getComponents(attribute)
diff --git a/src/runtime/composables/useUiComponents.ts b/src/runtime/composables/useUiComponents.ts
index 773a491..b9a5a24 100644
--- a/src/runtime/composables/useUiComponents.ts
+++ b/src/runtime/composables/useUiComponents.ts
@@ -1,7 +1,7 @@
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 import { ComponentType, useUiStore } from '../stores/UiStore'
-import type { KatzenUIComponent, KatzenUIOptions } from '~/src/runtime/stores/UiStore'
+import type { KatzenUIComponent } from '../stores/UiStore'
 import { useRuntimeConfig } from '#imports'
 
 export interface ImageContent {
@@ -9,6 +9,11 @@ export interface ImageContent {
   alt: string
 }
 
+export interface KatzenUIOptions {
+  key: string
+  default?: string | ImageContent
+}
+
 let fetchedContent: Record<string, unknown> | undefined
 
 export const setFetchedContent = (content: Record<string, unknown>) => {
@@ -22,7 +27,7 @@ export const getContent = () => {
   return useRuntimeConfig().public.content as Record<string, unknown> || {}
 }
 
-export const getContentByKey = <T = string>(key: string, defaultValue: string = '') => {
+export const getContentByKey = <T = string>(key: string, defaultValue: string|ImageContent = '') => {
   const content = getContent()
   if (content[key]) {
     return content[key] as T || defaultValue
@@ -39,7 +44,7 @@ export const useKatzeRichText = (options: KatzenUIOptions) => {
 
 export const useKatzeImage = (options: KatzenUIOptions) => {
   const uiStore = useUiStore()
-  const component: KatzenUIComponent = { type: ComponentType.Image, options, content: getContentByKey(options.key) }
+  const component: KatzenUIComponent = { type: ComponentType.Image, options, content: getContentByKey(options.key, options.default) }
   uiStore.addToContextStack(component)
   return reactiveProperty<ImageContent>(options.key)
 }
diff --git a/src/runtime/stores/UiStore.ts b/src/runtime/stores/UiStore.ts
index 57a9e54..897bb2f 100644
--- a/src/runtime/stores/UiStore.ts
+++ b/src/runtime/stores/UiStore.ts
@@ -1,9 +1,5 @@
 import { defineStore } from 'pinia'
-
-export interface KatzenUIOptions {
-  key: string
-  default?: string
-}
+import type {KatzenUIOptions} from '../composables/useUiComponents';
 
 export enum ComponentType {
   Text = 'text',