diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index eea9bea..ea61b21 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -1,6 +1,7 @@
 $primary-background-color: #282838;
 $primary-text-color: #ffffff;
 $error-text-color: #ff8000;
+$backdrop-color: rgba(40, 40, 56, 90%);
 
 
 // Text
diff --git a/client/src/components/Button.vue b/client/src/components/Button.vue
index 7048aa3..fa69032 100644
--- a/client/src/components/Button.vue
+++ b/client/src/components/Button.vue
@@ -1,12 +1,21 @@
 <template>
-  <button class="button" :class="{ disabled }" @click="click">
+  <button class="button" :class="{ disabled, border }" @click="click">
     <slot />
   </button>
 </template>
 
 <script>
 export default {
-  props: ['disabled'],
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
   methods: {
     click() {
       this.$emit('click')
@@ -22,20 +31,30 @@ export default {
   display: inline-block;
   margin: auto;
   padding: 4px 24px;
-  border: 4px solid $button-border-color;
-  border-radius: 8px;
-  background-color: $button-background-color;
-  color: $button-text-color;
+  background-color: inherit;
+  color: $text-secondary-text-color;
   text-align: center;
   font-family: $secondary-font;
   font-weight: bold;
   font-size: 24px;
+  border: none;
   cursor: pointer;
 
   &:hover {
-    border-color: $button-hover-border-color;
-    background-color: $button-hover-background-color;
-    color: $button-hover-text-color;
+    color: $text-secondary-hover-text-color;
+  }
+
+  &.border {
+    background-color: $button-background-color;
+    color: $button-text-color;
+    border: 4px solid $button-border-color;
+    border-radius: 8px;
+
+    &:hover {
+      border-color: $button-hover-border-color;
+      background-color: $button-hover-background-color;
+      color: $button-hover-text-color;
+    }
   }
 
   &.disabled,
diff --git a/client/src/components/CreateTeam.vue b/client/src/components/CreateTeam.vue
index 1f7d6ce..f3066ff 100644
--- a/client/src/components/CreateTeam.vue
+++ b/client/src/components/CreateTeam.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="create-team">
-    <div v-if="!showModal" class="create-team__button" @click="openModal">
+    <Button v-if="!showModal" :border="false" @click="openModal">
       {{ $t('create-team') }}
-    </div>
+    </Button>
+    <!-- <div v-if="!showModal" class="create-team__button" @click="openModal">
+      {{ $t('create-team') }}
+    </div> -->
     <template v-if="showModal">
       <div class="create-team__backdrop" />
       <div class="create-team__modal">
@@ -114,7 +117,7 @@ export default {
     width: 100%;
     height: 100%;
     z-index: 15;
-    background-color: rgba(36, 24, 72, 0.8);
+    background-color: $backdrop-color;
   }
 
   &__button {