diff --git a/public/assets/icons/arrow.svg b/public/assets/icons/arrow.svg
new file mode 100644
index 0000000..7a7ff9a
--- /dev/null
+++ b/public/assets/icons/arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/shapes/character-select-header-shape.svg b/public/assets/shapes/character-select-header-shape.svg
new file mode 100644
index 0000000..d466e56
--- /dev/null
+++ b/public/assets/shapes/character-select-header-shape.svg
@@ -0,0 +1 @@
+<svg width="170" xmlns="http://www.w3.org/2000/svg" height="40" id="screenshot-2ec5776a-76a9-8039-8004-71e1627cda51" viewBox="0 0 170 40" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71e1627cda51"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71e1627cda51"><path d="M170.000,22.776L170.000,40.000L0.000,40.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L147.224,0.000C147.076,0.979,147.000,1.980,147.000,3.000C147.000,14.038,155.962,23.000,167.000,23.000C168.020,23.000,169.021,22.924,170.000,22.776Z" style="fill: rgb(71, 65, 230); fill-opacity: 0.6;"/></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/character-select-shape-unselected.svg b/public/assets/shapes/character-select-shape-unselected.svg
new file mode 100644
index 0000000..f288adc
--- /dev/null
+++ b/public/assets/shapes/character-select-shape-unselected.svg
@@ -0,0 +1 @@
+<svg width="170" xmlns="http://www.w3.org/2000/svg" height="275" id="screenshot-2ec5776a-76a9-8039-8004-71e29b2b325b" viewBox="0 0 170 275" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71e29b2b325b"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71e29b2b325b"><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" style="fill: rgb(177, 178, 181); fill-opacity: 0.8;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71e29b2b325b" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0"/></clipPath><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0" style="fill: none; stroke-width: 4; stroke: rgb(177, 178, 181); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/character-select-shape.svg b/public/assets/shapes/character-select-shape.svg
new file mode 100644
index 0000000..df67d53
--- /dev/null
+++ b/public/assets/shapes/character-select-shape.svg
@@ -0,0 +1 @@
+<svg width="170" xmlns="http://www.w3.org/2000/svg" height="275" id="screenshot-2ec5776a-76a9-8039-8004-71df57dfd568" viewBox="0 0 170 275" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71df57dfd568"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71df57dfd568"><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" style="fill: rgb(255, 255, 255); fill-opacity: 0.8;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71df57dfd568" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0"/></clipPath><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index ec922be..f647ae9 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -24,8 +24,11 @@
         </div>
       </div>
 
-      <div class="buttons-wrapper">
-        <button v-if="selected_character" @click="select_character()">Play</button>
+      <div class="button-wrapper">
+        <button v-if="selected_character" @click="select_character()">
+          Play
+          <img src="/assets/icons/arrow.svg">
+        </button>
       </div>
     </div>
   </div>
@@ -117,21 +120,24 @@ function create() {
       width: 100%;
 
       .character {
-        width: 150px;
-        height: 250px;
+        width: 170px;
+        height: 275px;
         display: flex;
         flex-direction: column;
-        background-color: rgba($white, 0.8);
-        outline: 1px solid $white;
+        background-image: url('/assets/shapes/character-select-shape-unselected.svg');
+        background-repeat: no-repeat;
+
         border-radius: 20px;
         position: relative;
 
         &.active {
-          background: rgba($light-gray, 0.8);
+          background-image: url('/assets/shapes/character-select-shape.svg');
         }
 
         &.new-character {
           background-color: rgba($light-gray, 0.5);
+          background-image: none;
+
           button {
             background-color: transparent;
             border: none;
@@ -168,7 +174,8 @@ function create() {
           top: 0;
           width: 100%;
           height: 40px;
-          background-color: rgba($purple, 0.6);
+          background-image: url('/assets/shapes/character-select-header-shape.svg');
+          background-repeat: no-repeat;
           border-radius: 20px 20px 0 0;
         }
 
@@ -188,6 +195,7 @@ function create() {
           height: 100%;
           width: 100%;
           position: absolute;
+          margin: 0;
         }
 
         label {
@@ -209,7 +217,7 @@ function create() {
           border-radius: 100%;
           z-index: 1;
           right: -10px;
-          top: 0;
+          top: 5px;
           transform: translateY(-50%);
           position: absolute;
 
@@ -238,11 +246,11 @@ function create() {
       }
     }
 
-    .buttons-wrapper {
+    .button-wrapper {
       display: flex;
       gap: 30px;
       button {
-        padding: 10px 16px;
+        padding: 8px 10px 8px 20px;
         min-width: 6.25rem;
         text-align: center;
         position: relative;
@@ -251,12 +259,20 @@ function create() {
         border-radius: 5px;
         color: $white;
         font-size: 18px;
+        display: flex;
+        gap: 10px;
+        align-items: center;
 
         span {
           color: $white;
           margin: auto;
         }
 
+        img {
+          height: 35px;
+          opacity: 0.3;
+        }
+
         &:hover {
           background-color: rgba($lilac, 0.75);
         }
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 8c9d985..5d84efb 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -90,8 +90,9 @@ onUnmounted(() => {
   position: fixed;
   top: 0;
   left: 0;
-  width: 30%;
-  height: 40%;
+  max-width: 500px;
+  min-width: 350px;
+  min-height: 300px;
   border-radius: 20px;
   background-color: rgba($white, 0.8);
   z-index: 999;