diff --git a/src/lib/components/MessageCard.svelte b/src/lib/components/MessageCard.svelte
index 6b2c2e2..6380362 100644
--- a/src/lib/components/MessageCard.svelte
+++ b/src/lib/components/MessageCard.svelte
@@ -155,12 +155,26 @@
 		class:fork-selected={forkSelected}
 	>
 		<p class="mb-3 font-normal text-gray-700 dark:text-gray-100 prose max-w-full">
-			{#if isSource}
-				<CodeRenderer lang="markdown" text={content} />
-			{:else}
-				<SvelteMarkdown source={content} renderers={{ code: CodeRenderer }} />
-			{/if}
-		</p>
+    {#if Array.isArray(contentItems)}
+      {#each contentItems as item}
+        {#if item.type === 'text'}
+          {#if isSource}
+            <CodeRenderer lang="markdown" text={item.text} />
+          {:else}
+            <SvelteMarkdown source={item.text} renderers={{ code: CodeRenderer }} />
+          {/if}
+        {:else if item.type === 'image_url'}
+          <img src={item.image_url.url} alt="user image" class="thumbnail" />
+        {/if}
+      {/each}
+    {:else}
+      {#if isSource}
+        <CodeRenderer lang="markdown" text={contentItems} />
+      {:else}
+        <SvelteMarkdown source={contentItems} renderers={{ code: CodeRenderer }} />
+      {/if}
+    {/if}
+  </p>
 		<hr />
 		<div class="flex items-center justify-between py-2">
 			{#if alternativesCount > 1}