diff --git a/src/app/ModeView.ts b/src/app/ModeView.ts
index 1e7fdfb..eaff970 100644
--- a/src/app/ModeView.ts
+++ b/src/app/ModeView.ts
@@ -43,7 +43,7 @@ export class ModeView extends EmptyView {
         type: 'button',
         className: 'mode-form__remove-player-btn hidden',
       },
-      'remove player',
+      '+',
     );
     this.addPanelsWrapper = Render.elementFactory('div', {
       className: 'mode-players-wrapper',
@@ -95,6 +95,14 @@ export class ModeView extends EmptyView {
         'dynamic mode',
       ),
     );
+
+    const modeHeader = Render.elementFactory(
+      'div',
+      { className: 'mode-form__heading-wrapper' },
+      heading,
+      mode,
+    );
+
     const form = Render.elementFactory(
       'form',
       {
@@ -103,10 +111,13 @@ export class ModeView extends EmptyView {
         method: 'get',
         className: 'mode-form',
       },
-      heading,
-      mode,
-      this.addPanelsWrapper,
-      this.addPlayerButton,
+      modeHeader,
+      Render.elementFactory(
+        'div',
+        { className: 'mode-form__content-wrapper' },
+        this.addPanelsWrapper,
+        this.addPlayerButton,
+      ),
     );
     this.addPlayer();
 
@@ -164,7 +175,7 @@ export class ModeView extends EmptyView {
     this.backButton = Render.elementFactory(
       'button',
       {
-        className: 'button',
+        className: 'mode__button',
       },
       'back',
     );
@@ -173,7 +184,7 @@ export class ModeView extends EmptyView {
       {
         type: 'submit',
         form: 'mode-form',
-        className: 'button',
+        className: 'mode__button',
       },
       'play',
     );
@@ -196,6 +207,7 @@ export class ModeView extends EmptyView {
       name: indicator,
       placeholder: 'type nickname here',
       className: 'mode-form__input',
+      maxLength: '15',
     });
 
     return input;
@@ -213,6 +225,7 @@ export class ModeView extends EmptyView {
       'label',
       {
         className: 'mode-form__ai-label',
+        for: indicator,
       },
       'AI Player',
     );
diff --git a/styles/components/_modeView.scss b/styles/components/_modeView.scss
index 8c2ffa9..8b54c72 100644
--- a/styles/components/_modeView.scss
+++ b/styles/components/_modeView.scss
@@ -1,25 +1,201 @@
-.mode-form {
-  &__avatar {
-    width: 50px;
+.mode {
+  &-view {
+    &__heading {
+      top: 2rem;
+      left: 2rem;
+    }
   }
-  &__add-player-btn {
-  }
-  &__color-wrapper {
+  &-inputs-wrapper {
     display: flex;
   }
-  &__color-label {
-    width: 50px;
-    height: 50px;
-  }
-  &__color-radio {
-    // display: none;
+  &-players-wrapper {
+    display: inline-flex;
   }
-  &__colors {
+  &__buttons {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    margin: 6rem 0 0 0;
+  }
+  &__button {
+    width: 12rem;
+    height: 4rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-size: 1.3rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    &:first-child {
+      background: #fefefe;
+    }
+    &:last-child {
+      background: #71cfd7;
+    }
   }
-  &__avatars {
+  &-form {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    &__content-wrapper {
+      display: inline-flex;
+      justify-content: center;
+    }
+    &__heading-wrapper {
+      display: flex;
+      justify-content: space-between;
+    }
+    &__remove-player-btn {
+      position: absolute;
+      top: 0.5rem;
+      right: 1.2rem;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: 3rem;
+      transform: rotate(45deg);
+      &:focus {
+        outline: none;
+      }
+    }
+    &__mode {
+      top: 2rem;
+      right: 2rem;
+      display: flex;
+      height: 2.5rem;
+      align-items: center;
+      padding: 1rem;
+      background: #fefefe;
+      border-radius: 0.5rem;
+      &-input {
+        margin-right: 0.5rem;
+      }
+      &-label {
+        font-weight: bold;
+        text-transform: uppercase;
+      }
+    }
+    &__add-btn {
+      width: 25rem;
+      border: 3px dashed #555757;
+      margin: 3rem 1.3rem 0 1.3rem;
+      background: none;
+      border-radius: 16px;
+      cursor: pointer;
+      &:focus {
+        outline: none;
+      }
+    }
+    &__add-player {
+      position: relative;
+      display: flex;
+      width: 25rem;
+      height: 70vh;
+      flex-direction: column;
+      align-items: center;
+      padding: 2rem;
+      border: 2px solid black;
+      margin: 3rem 1.3rem 0 1.3rem;
+      background-color: #fefefe;
+      border-radius: 1rem;
+    }
+    // Styles for name input
+    &__input {
+      padding: 0.5rem;
+      border: none;
+      border-bottom: 2px solid #9ca4a4;
+      margin-bottom: 1.3rem;
+      font-size: 1.2rem;
+      font-weight: bold;
+      outline: none;
+      text-align: center;
+      &:focus-within {
+        border-bottom: 2px solid black;
+      }
+    }
+
+    &__avatars {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: 1rem 0;
+    }
+    &__avatar {
+      &-wrapper {
+        position: relative;
+      }
+      width: 4.3rem;
+      cursor: pointer;
+      &-label {
+        display: flex;
+        width: 110px;
+        height: 110px;
+        justify-content: center;
+        margin: 10px;
+      }
+
+      &-radio {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        opacity: 0;
+      }
+
+      &-radio:checked + .mode-form__avatar-label {
+        border: 2px solid black;
+        border-radius: 50%;
+      }
+    }
+
+    // Styles for colors
+    &__colors {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: 1rem;
+    }
+    &__color-wrapper {
+      position: relative;
+      display: flex;
+      margin: 10px 20px;
+    }
+    &__color-label {
+      width: 110px;
+      height: 110px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    &__color-radio {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      opacity: 0;
+    }
+
+    &__color-radio {
+      &:checked + .mode-form__color-label {
+        border: 2px solid black;
+        box-shadow: 0px 0px 0px 3px #fff inset;
+      }
+    }
+
+    // Styles for AI Player
+    &__ai {
+      &-input {
+        margin: 0 1rem;
+      }
+      &-label {
+        font-size: 1.5rem;
+      }
+    }
   }
 }
+
+.hidden-element {
+  cursor: initial;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.grey-background {
+  background: white;
+  opacity: 0.7;
+}