diff --git a/.changeset/hip-drinks-bow.md b/.changeset/hip-drinks-bow.md
new file mode 100644
index 000000000000..2bf10b687857
--- /dev/null
+++ b/.changeset/hip-drinks-bow.md
@@ -0,0 +1,8 @@
+---
+"@gradio/app": minor
+"@gradio/image": minor
+"@gradio/theme": minor
+"gradio": minor
+---
+
+feat:image fixes
diff --git a/js/app/src/main.ts b/js/app/src/main.ts
index 4f4caadd13f5..138d1b8e49eb 100644
--- a/js/app/src/main.ts
+++ b/js/app/src/main.ts
@@ -1,4 +1,7 @@
-import "@gradio/theme";
+import "@gradio/theme/src/reset.css";
+import "@gradio/theme/src/global.css";
+import "@gradio/theme/src/pollen.css";
+import "@gradio/theme/src/typography.css";
 import { client, upload_files } from "@gradio/client";
 import { mount_css } from "./css";
 import Index from "./Index.svelte";
diff --git a/js/image/interactive/Image.svelte b/js/image/interactive/Image.svelte
index 3613aefcbe3c..41e8ef86129b 100644
--- a/js/image/interactive/Image.svelte
+++ b/js/image/interactive/Image.svelte
@@ -51,11 +51,15 @@
 
 	function handle_upload({ detail }: CustomEvent<string>): void {
 		if (tool === "color-sketch") {
-			static_image = normalise_file(detail, root, null);
+			static_image = normalise_file(detail, root, null)?.data;
 		} else {
-			value = { image: normalise_file(detail, root, null), mask: null };
+			value =
+				(source === "upload" || source === "webcam") && tool === "sketch"
+					? { image: normalise_file(detail, root, null), mask: null }
+					: normalise_file(detail, root, null);
 		}
-		dispatch("upload", detail);
+
+		dispatch("upload", normalise_file(detail, root, null));
 	}
 
 	function handle_clear({ detail }: CustomEvent<null>): void {
@@ -191,8 +195,6 @@
 			dispatch("select", { index: coordinates, value: null });
 		}
 	}
-
-	$: console.log(value);
 </script>
 
 <BlockLabel
@@ -240,7 +242,7 @@
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 				<img
-					src={value_.image.data}
+					src={value_.data}
 					alt=""
 					class:scale-x-[-1]={source === "webcam" && mirror_webcam}
 					class:selectable
@@ -252,11 +254,12 @@
 					<img
 						bind:this={value_img}
 						class="absolute-img"
-						src={static_image || value?.image || value}
+						src={static_image || value?.image?.data || value?.data}
 						alt=""
 						on:load={handle_image_load}
 						class:webcam={source === "webcam" && mirror_webcam}
 						loading="lazy"
+						crossorigin="anonymous"
 					/>
 				{/key}
 				{#if img_width > 0}
@@ -297,7 +300,7 @@
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 				<img
-					src={value.image.data || value.data}
+					src={value.image || value.data}
 					alt="hello"
 					class:webcam={source === "webcam" && mirror_webcam}
 					class:selectable
diff --git a/js/image/interactive/Sketch.svelte b/js/image/interactive/Sketch.svelte
index ea2654080f46..9566cfb86ff1 100644
--- a/js/image/interactive/Sketch.svelte
+++ b/js/image/interactive/Sketch.svelte
@@ -40,6 +40,8 @@
 
 	let last_value_img;
 
+	$: console.log(value_img);
+
 	$: {
 		if (mounted && value_img !== last_value_img) {
 			last_value_img = value_img;
diff --git a/js/theme/src/index.ts b/js/theme/src/index.ts
index 3e95fd72eee2..7f3f2253a1ff 100644
--- a/js/theme/src/index.ts
+++ b/js/theme/src/index.ts
@@ -1,6 +1,6 @@
-export { default as reset } from "./reset.css";
-export { default as global } from "./global.css";
-export { default as css } from "./pollen.css";
-export { default as typography } from "./typography.css";
+// export { default as reset } from "./reset.css";
+// export { default as global } from "./global.css";
+// export { default as css } from "./pollen.css";
+// export { default as typography } from "./typography.css";
 
 export * from "./colors";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93dce5858eeb..79b60f0a1028 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -914,22 +914,34 @@ importers:
         specifier: ^4.4.9
         version: 4.4.9(@types/node@20.3.1)(less@4.1.3)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.60.0)(sugarss@4.0.1)
 
-  js/gradio-preview/test/newcomp/frontend:
+  js/gradio-preview/test/imageslider/frontend:
     dependencies:
       '@gradio/atoms':
         specifier: workspace:^
         version: link:../../../../atoms
+      '@gradio/icons':
+        specifier: workspace:^
+        version: link:../../../../icons
       '@gradio/statustracker':
         specifier: workspace:^
         version: link:../../../../statustracker
+      '@gradio/upload':
+        specifier: workspace:^
+        version: link:../../../../upload
       '@gradio/utils':
         specifier: workspace:^
         version: link:../../../../utils
-      '@zerodevx/svelte-json-view':
-        specifier: ^1.0.7
-        version: 1.0.7(svelte@4.2.0)
+      cropperjs:
+        specifier: ^1.5.12
+        version: 1.5.12
+      lazy-brush:
+        specifier: ^1.0.1
+        version: 1.0.1
+      resize-observer-polyfill:
+        specifier: ^1.5.1
+        version: 1.5.1
 
-  js/gradio-preview/test/newtextbox/frontend:
+  js/gradio-preview/test/newnewtext/frontend:
     dependencies:
       '@gradio/atoms':
         specifier: workspace:^
@@ -944,6 +956,12 @@ importers:
         specifier: workspace:^
         version: link:../../../../utils
 
+  js/gradio-preview/test/newtext/frontend:
+    dependencies:
+      '@zerodevx/svelte-json-view':
+        specifier: ^1.0
+        version: 1.0.7(svelte@4.2.0)
+
   js/group: {}
 
   js/highlightedtext: