diff --git a/public/style/style.css b/public/style/style.css
index 79d45aa..4bcde49 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -75,7 +75,15 @@ body {
   font-weight: 700;
 }
 
-.container .left span {
+.container .right {
+  width: 110vw;
+}
+
+.container .right img {
+  height: 60vh;
+}
+
+span {
   color: green;
   font-weight: 900;
   cursor: pointer;
@@ -83,20 +91,19 @@ body {
   transition: 500ms;
 }
 
-.container .left span:hover {
+span:hover {
   color: #ffe93e;
 }
 
-.container .right {
-  width: 110vw;
-}
-
-.container .right img {
-  height: 60vh;
-}
-
 .characters {
   margin-top: 10vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.characters .left_char {
+  width: 50vw;
 }
 
 .characters .left_char img {
@@ -104,7 +111,34 @@ body {
 }
 
 .characters .right_char {
-  width: 90vw;
-  border: 2px solid green;
+  font-size: 6vw;
+  margin-top: 20vh;
+  font-family: "Patrick Hand", cursive;
+  font-weight: 700;
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #000;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #ffe93e;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Up and Down Button*/
+::-webkit-scrollbar-button {
+  background-color: #000;
 }
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/public/style/style.css.map b/public/style/style.css.map
index e4373b1..54812d9 100644
--- a/public/style/style.css.map
+++ b/public/style/style.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,OAAO,CAAC,yEAAI;AACZ,OAAO,CAAC,gGAAI;AAWZ,AAAA,CAAC,CAAA;EACG,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACzB;;AAED,AAAA,IAAI,CAAA;EACA,gBAAgB,EAAE,mBAAmB;EACrC,iBAAiB,EAAE,SAAS;EAC5B,mBAAmB,EAAE,KAAK;EAC1B,qBAAqB,EAAE,KAAK;EAC5B,UAAU,EAAE,MAAM;CACrB;;AAGD,AAAA,OAAO,CAAA;EAnBH,OAAO,EAAE,IAAI;EAqBb,OAAO,EAAE,GAAG;EACZ,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,aAAa;EAC9B,WAAW,EA5BP,cAAc,EAAE,OAAO;CAmD9B;;AA5BD,AAOQ,OAPD,CAMH,KAAK,CACD,GAAG,CAAA;EACC,MAAM,EAAE,IAAI;CACf;;AATT,AAWI,OAXG,CAWH,GAAG,CAAA;EACC,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;CAahC;;AA3BL,AAeQ,OAfD,CAWH,GAAG,CAIC,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,OAAe;EACtB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,OAAO;EAChB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,GAAG,CAAC,KAAK,CA9C3B,OAAO;CAkDP;;AA1BT,AAuBY,OAvBL,CAWH,GAAG,CAIC,CAAC,AAQI,MAAM,CAAA;EACH,gBAAgB,EAhDvB,OAAO;CAiDH;;AAMb,AAAA,UAAU,CAAA;EACN,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EArDZ,OAAO,EAAE,IAAI;EAuDb,WAAW,EA3DP,cAAc,EAAE,OAAO;CAiF9B;;AA3BD,AAMI,UANM,CAMN,KAAK,CAAA;EACD,SAAS,EAAE,GAAG;EACd,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,OAAO;EAChB,WAAW,EAAE,GAAG;CAUnB;;AApBL,AAWQ,UAXE,CAMN,KAAK,CAKD,IAAI,CAAA;EACA,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,KAAK;CAIpB;;AAnBT,AAgBY,UAhBF,CAMN,KAAK,CAKD,IAAI,AAKC,MAAM,CAAA;EACH,KAAK,EAxEZ,OAAO;CAyEH;;AAlBb,AAqBI,UArBM,CAqBN,MAAM,CAAA;EACF,KAAK,EAAE,KAAK;CAIf;;AA1BL,AAuBQ,UAvBE,CAqBN,MAAM,CAEF,GAAG,CAAA;EACC,MAAM,EAAE,IAAI;CACf;;AAKT,AAAA,WAAW,CAAA;EACP,UAAU,EAAE,IAAI;CAUnB;;AAXD,AAGQ,WAHG,CAEP,UAAU,CACN,GAAG,CAAA;EACC,MAAM,EAAE,IAAI;CACf;;AALT,AAOI,WAPO,CAOP,WAAW,CAAA;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,eACZ;CAAC",
+    "mappings": "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",
     "sources": [
         "style.scss"
     ],
diff --git a/public/style/style.scss b/public/style/style.scss
index ce8a28f..de1983b 100644
--- a/public/style/style.scss
+++ b/public/style/style.scss
@@ -5,9 +5,6 @@ $yellow: #ffe93e;
 $font1: 'Patrick Hand', cursive;
 $font2: 'Ubuntu', sans-serif;
 
-@mixin flex() {
-    display: flex;
-}
 
 
 *{
@@ -26,7 +23,7 @@ body{
 
 // navbar
 .navbar{
-    @include flex();
+    display: flex;
     padding: 3vh;
     align-items: center;
     justify-content: space-between;
@@ -60,22 +57,13 @@ body{
     width: 100vw;
     margin-top: 20vh;
     height: 60vh;
-    @include flex();
+    display: flex;
     font-family: $font1;
     .left{
         font-size: 5vw;
         width: 90vw;
         padding: 6vh 5vw;
         font-weight: 700;
-        span{
-            color: green;
-            font-weight: 900;
-            cursor: pointer;
-            transition: 500ms;
-            &:hover{
-                color: $yellow;
-            }
-        }
     }
     .right{
         width: 110vw;
@@ -85,16 +73,60 @@ body{
     }
 }
 
+
+span{
+    color: green;
+    font-weight: 900;
+    cursor: pointer;
+    transition: 500ms;
+    &:hover{
+        color: $yellow;
+    }
+}
+
 // characters
 .characters{
     margin-top: 10vh;
+    display: flex;
     .left_char{
+        width: 50vw;
         img{
             height: 90vh;
         }
     }
     .right_char{
-        width: 90vw;
-        border: 2px solid green
+        font-size: 6vw;
+        margin-top: 20vh;
+        font-family: $font1;
+        font-weight: 700;
     }
-}
\ No newline at end of file
+}
+
+
+
+
+// scroll bar
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #000; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: $yellow; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+  
+  /* Up and Down Button*/
+  ::-webkit-scrollbar-button{
+      background-color: #000;
+  }
\ No newline at end of file