diff --git a/src/css/conversation.css b/src/css/conversation.css
index b415a66..8644a90 100644
--- a/src/css/conversation.css
+++ b/src/css/conversation.css
@@ -1,9 +1,34 @@
 .spriteBox {
-    height: 50vh;
-    width: 30vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 500px;
+  max-height: 500px;
+  margin: 0 auto;
+  overflow: hidden;
 }
+
+.spriteBox video {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+}
+
+
 @media (max-width: 768px) {
-    .spriteBox {
-        width: 75vw;
-    }
-}
\ No newline at end of file
+  .spriteBox {
+    width: 98vw;
+    max-height: 45vh;
+  }
+  .spriteBox video {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
diff --git a/src/css/option.css b/src/css/option.css
index 5cca0b1..7d823d1 100644
--- a/src/css/option.css
+++ b/src/css/option.css
@@ -20,11 +20,36 @@
 }
 
 .spriteBox {
-    height: 50vh;
-    width: 30vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 500px;
+  max-height: 500px;
+  margin: 0 auto;
+  overflow: hidden;
 }
+
+.spriteBox video {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+}
+
+
 @media (max-width: 768px) {
-    .spriteBox {
-        width: 75vw;
-    }
+  .spriteBox {
+    width: 98vw;
+    max-height: 45vh;
+  }
+  .spriteBox video {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
+