diff --git a/ui/packages/app/src/components/input/DataFrame/DataFrame.svelte b/ui/packages/app/src/components/input/DataFrame/DataFrame.svelte
index 569990e429..d443b10eea 100644
--- a/ui/packages/app/src/components/input/DataFrame/DataFrame.svelte
+++ b/ui/packages/app/src/components/input/DataFrame/DataFrame.svelte
@@ -358,12 +358,12 @@
 									/>
 								{/if}
 								<span
-									class=" cursor-default w-full"
+									class="cursor-default w-full"
 									class:opacity-0={editing === id}
 									tabindex="-1"
 									role="button"
 								>
-									{value}
+									{value ?? ""}
 								</span>
 							</div>
 						</td>
diff --git a/ui/packages/app/src/components/input/DataFrame/Example.svelte b/ui/packages/app/src/components/input/DataFrame/Example.svelte
new file mode 100644
index 0000000000..84d4431ba2
--- /dev/null
+++ b/ui/packages/app/src/components/input/DataFrame/Example.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let value: Array<Array<string | number>>;
+</script>
+
+<table class="input-dataframe-example">
+	{#each value.slice(0, 3) as row}
+		<tr>
+			{#each row.slice(0, 3) as cell}
+				<td class="p-2">{cell}</td>
+			{/each}
+			{#if row.length > 3}
+				<td class="p-2">...</td>
+			{/if}
+		</tr>
+	{/each}
+	{#if value.length > 3}
+		<tr>
+			{#each Array(Math.min(4, value[0].length)) as _}
+				<td class="p-2">...</td>
+			{/each}
+		</tr>
+	{/if}
+</table>
diff --git a/ui/packages/app/src/components/input/DataFrame/config.ts b/ui/packages/app/src/components/input/DataFrame/config.ts
index 7ec093bda7..e744cb0439 100644
--- a/ui/packages/app/src/components/input/DataFrame/config.ts
+++ b/ui/packages/app/src/components/input/DataFrame/config.ts
@@ -1,5 +1,7 @@
 import Component from "./DataFrame.svelte";
+import ExampleComponent from "./Example.svelte";
 
 export default {
-	component: Component
+	component: Component,
+	example: ExampleComponent
 };
diff --git a/ui/packages/app/src/components/input/Image/Image.svelte b/ui/packages/app/src/components/input/Image/Image.svelte
index 6f4994a693..0d361796c7 100644
--- a/ui/packages/app/src/components/input/Image/Image.svelte
+++ b/ui/packages/app/src/components/input/Image/Image.svelte
@@ -85,6 +85,8 @@
 				{static_src}
 			/>
 
+			<img class="w-full h-full object-contain" src={value} alt="" />
+		{:else}
 			<img class="w-full h-full object-contain" src={value} alt="" />
 		{/if}
 	</div>
diff --git a/ui/packages/app/src/components/utils/Webcam.svelte b/ui/packages/app/src/components/utils/Webcam.svelte
index 5b5110490b..17410dde49 100644
--- a/ui/packages/app/src/components/utils/Webcam.svelte
+++ b/ui/packages/app/src/components/utils/Webcam.svelte
@@ -66,10 +66,3 @@
 		/>
 	</button>
 </div>
-
-<style lang="postcss">
-	video {
-		-webkit-transform: scaleX(-1);
-		transform: scaleX(-1);
-	}
-</style>