diff --git a/.changeset/legal-geese-agree.md b/.changeset/legal-geese-agree.md
new file mode 100644
index 0000000000000..1b6c36628729b
--- /dev/null
+++ b/.changeset/legal-geese-agree.md
@@ -0,0 +1,7 @@
+---
+"@gradio/image": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Remove the styles from the Image/Video primitive components and Fix the container styles
diff --git a/js/image/Example.svelte b/js/image/Example.svelte
index fba0a58d8897a..b082fe7829721 100644
--- a/js/image/Example.svelte
+++ b/js/image/Example.svelte
@@ -17,6 +17,11 @@
 </div>
 
 <style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
 	.container.selected {
 		border-color: var(--border-color-accent);
 	}
@@ -25,13 +30,13 @@
 		margin: 0 auto;
 		border: 2px solid var(--border-color-primary);
 		border-radius: var(--radius-lg);
+		overflow: hidden;
 		width: var(--size-20);
 		height: var(--size-20);
 		object-fit: cover;
 	}
 
 	.container.gallery {
-		border: 2px solid var(--border-color-primary);
 		height: var(--size-20);
 		max-height: var(--size-20);
 		object-fit: cover;
diff --git a/js/image/shared/Image.svelte b/js/image/shared/Image.svelte
index f8542172a42f2..1354ea4aab240 100644
--- a/js/image/shared/Image.svelte
+++ b/js/image/shared/Image.svelte
@@ -13,11 +13,3 @@
 {:catch error}
 	<p style="color: red;">{error.message}</p>
 {/await}
-
-<style>
-	img {
-		width: 100%;
-		height: 100%;
-		border-radius: var(--radius-lg);
-	}
-</style>
diff --git a/js/video/Example.svelte b/js/video/Example.svelte
index e04bbebce86a8..b91b02b468198 100644
--- a/js/video/Example.svelte
+++ b/js/video/Example.svelte
@@ -43,10 +43,13 @@
 <style>
 	.container {
 		flex: none;
-		border: 2px solid var(--border-color-primary);
-		border-radius: var(--radius-lg);
 		max-width: none;
 	}
+	.container :global(video) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;
+	}
 
 	.container:hover,
 	.container.selected {
@@ -54,6 +57,9 @@
 	}
 	.container.table {
 		margin: 0 auto;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
 		width: var(--size-20);
 		height: var(--size-20);
 		object-fit: cover;
diff --git a/js/video/shared/Player.svelte b/js/video/shared/Player.svelte
index b2c33824fbd00..a262df9715feb 100644
--- a/js/video/shared/Player.svelte
+++ b/js/video/shared/Player.svelte
@@ -254,4 +254,8 @@
 		width: var(--size-full);
 		border-radius: var(--radius-xl);
 	}
+	.wrap :global(video) {
+		height: var(--size-full);
+		width: var(--size-full);
+	}
 </style>
diff --git a/js/video/shared/Video.svelte b/js/video/shared/Video.svelte
index bdb0e6e94d83e..996b03c830516 100644
--- a/js/video/shared/Video.svelte
+++ b/js/video/shared/Video.svelte
@@ -121,13 +121,4 @@
 			background: #fff;
 		}
 	}
-
-	video {
-		position: inherit;
-		background-color: black;
-		width: var(--size-full);
-		height: var(--size-full);
-		object-fit: contain;
-		border-radius: var(--radius-xl);
-	}
 </style>