diff --git a/src/App.vue b/src/App.vue
index f0719dd..1301d9f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,30 +13,7 @@ export default {
 </script>
 
 <template>
-  <div class="gradient-bg">
-    <svg xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <filter id="goo">
-          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
-          <feColorMatrix
-            in="blur"
-            mode="matrix"
-            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
-            result="goo"
-          />
-          <feBlend in="SourceGraphic" in2="goo" />
-        </filter>
-      </defs>
-    </svg>
-    <div class="gradients-container">
-      <div class="g1"></div>
-      <div class="g2"></div>
-      <div class="g3"></div>
-      <div class="g4"></div>
-      <div class="g5"></div>
-      <!-- <div class="interative"></div> -->
-    </div>
-  </div>
+  <div class="black-bg"></div>
   <div class="container">
     <ChatBox id="chatbox" />
   </div>
@@ -46,4 +23,15 @@ export default {
 #chatbox {
   height: calc(100vh);
 }
+
+.black-bg {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  overflow: hidden;
+  background: rgb(0, 0, 0);
+  top: 0;
+  left: 0;
+  z-index: -2;
+}
 </style>
diff --git a/src/assets/aurora.css b/src/assets/aurora.css
deleted file mode 100644
index f0493c7..0000000
--- a/src/assets/aurora.css
+++ /dev/null
@@ -1,177 +0,0 @@
-:root {
-  --color-bg1: rgb(110, 79, 179);
-  --color-bg2: rgb(8, 17, 82);
-  --color1: 58, 41, 142;
-  /* blue */
-  --color2: 148, 97, 205;
-  /* purple */
-  --color3: 100, 220, 255;
-  /* light blue*/
-  --color4: 110, 79, 179;
-  /* light blue */
-  --color5: 52, 193, 246;
-  /* light blue*/
-
-  --color-interactive: 148, 100, 255;
-  /* light purple */
-
-  --circle-size: 200%;
-  --blending: hard-light;
-  --opacity: 0.4;
-}
-
-@keyframes moveInCircle {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  50% {
-    transform: rotate(180deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes moveVertical {
-  0% {
-    transform: translateY(-50%);
-  }
-
-  50% {
-    transform: translateY(50%);
-  }
-
-  100% {
-    transform: translateY(-50%);
-  }
-}
-
-@keyframes moveHorizontal {
-  0% {
-    transform: translateX(-50%), translateY(-10%);
-  }
-
-  50% {
-    transform: translateX(50%), translateY(10%);
-  }
-
-  100% {
-    transform: translateX(-50%), translateY(-10%);
-  }
-}
-
-.gradient-bg {
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-  overflow: hidden;
-  background: linear-gradient(58deg, rgb(22, 13, 63) 0%, rgb(42, 13, 68) 49%, rgb(35, 20, 60) 66%, rgb(76, 36, 133) 86%, rgb(14, 4, 38) 100%);
-  top: 0;
-  left: 0;
-  z-index: -2;
-}
-
-svg {
-  display: none;
-}
-
-.gradients-container {
-  filter: url(#goo) blur(40px);
-  width: 100%;
-  height: 100%;
-}
-
-.g1 {
-  position: absolute;
-  background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
-  mix-blend-mode: var(--blending);
-
-  width: var(--circle-size);
-  height: var(--circle-size);
-  top: calc(50% - var(--circle-size) / 2);
-  left: calc(50% - var(--circle-size) / 2);
-
-  transform-origin: center center;
-  animation: moveVertical 15s ease infinite;
-
-  opacity: var(--opacity);
-}
-
-.g2 {
-  position: absolute;
-  background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
-  mix-blend-mode: var(--blending);
-
-  width: var(--circle-size);
-  height: var(--circle-size);
-  top: calc(50% - var(--circle-size) / 2);
-  left: calc(50% - var(--circle-size) / 2);
-
-  transform-origin: calc(50% - 400px);
-  animation: moveInCircle 10s reverse infinite;
-
-  opacity: var(--opacity);
-}
-
-.g3 {
-  position: absolute;
-  background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
-  mix-blend-mode: var(--blending);
-
-  width: var(--circle-size);
-  height: var(--circle-size);
-  top: calc(50% - var(--circle-size) / 2 + 200px);
-  left: calc(50% - var(--circle-size) / 2 - 500px);
-
-  transform-origin: calc(50% + 400px);
-  animation: moveInCircle 20s linear infinite;
-
-  opacity: var(--opacity);
-}
-
-.g4 {
-  position: absolute;
-  background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
-  mix-blend-mode: var(--blending);
-
-  width: var(--circle-size);
-  height: var(--circle-size);
-  top: calc(50% - var(--circle-size) / 2);
-  left: calc(50% - var(--circle-size) / 2);
-
-  transform-origin: calc(50% - 200px);
-  animation: moveHorizontal 20s ease infinite;
-
-  opacity: var(--opacity);
-}
-
-.g5 {
-  position: absolute;
-  background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
-  mix-blend-mode: var(--blending);
-
-  width: var(--circle-size);
-  height: var(--circle-size);
-  top: calc(50% - var(--circle-size) / 2);
-  left: calc(50% - var(--circle-size) / 2);
-
-  transform-origin: calc(50% - 800px) calc(50% + 200px);
-  animation: moveInCircle 10s ease infinite;
-
-  opacity: var(--opacity);
-}
-
-.interactive {
-  position: absolute;
-  background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
-  mix-blend-mode: var(--blending);
-
-  width: 100%;
-  height: 100%;
-  top: -50%;
-  left: -50%;
-
-  opacity: 0.7;
-}
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index de42cc3..ebee963 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,4 +1,3 @@
-@import './aurora.css';
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
 
 html {
diff --git a/src/components/ChatBalloon.vue b/src/components/ChatBalloon.vue
index 6900eb0..2878868 100644
--- a/src/components/ChatBalloon.vue
+++ b/src/components/ChatBalloon.vue
@@ -86,7 +86,7 @@ export default {
 
 .user {
   color: #ffffffee;
-  background-color: #6944b1;
+  background-color: #FF481E;
   border-radius: 15px 15px 0px 15px;
   right: calc(-100% + 30px);
   transform: translate(-100%, 0%);
@@ -99,9 +99,6 @@ export default {
   left: -50px;
   bottom: -20px;
 }
-.demo {
-  color: red;
-}
 .ellipsis {
   width: 5px;
   height: 5px;
diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue
index 2abe686..b3b412a 100644
--- a/src/components/ChatBox.vue
+++ b/src/components/ChatBox.vue
@@ -217,7 +217,7 @@ export default {
           setTimeout(() => {
             this.chatArray[index - 1].data.content += words[i];
             resolve();
-          }, 30);
+          }, 20);
         });
         this.scrollToBottom(false);
       }
@@ -421,7 +421,7 @@ input:focus {
 
 .connect-button.connected {
   border: 1px solid #ffffff99;
-  color: rgb(32, 6, 71); /* Blank text */
+  color: rgb(0, 0, 0); /* Blank text */
   padding: 10px 20px;
   text-align: center;
   text-decoration: none;