diff --git a/src/containers/pages/Invite.tsx b/src/containers/pages/Invite.tsx
index cac931e..6a25855 100644
--- a/src/containers/pages/Invite.tsx
+++ b/src/containers/pages/Invite.tsx
@@ -49,12 +49,14 @@ export function Invite() {
           {party?.memberCounter} online
         </div>
         <input
+        className={styles.ptt}
           onChange={(e) => setName(e.currentTarget.value)}
           value={name}
           placeholder={`What should we call you?`}
           type="text"
         />
         <button
+        className={styles.btt}
           onClick={async () => {
             const api = new ApiClient();
             const res = await api.register({
diff --git a/src/styles/invite.module.scss b/src/styles/invite.module.scss
index 9f6eb20..30eb80d 100644
--- a/src/styles/invite.module.scss
+++ b/src/styles/invite.module.scss
@@ -62,4 +62,38 @@
   }
 }
 
+.ptt {
+  margin-top: 10px;
+  width: calc(100% - 80px);
+  height: 100%;
+  color: rgba(255, 255, 255, 0.3);
+  font-family: Oswald;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+  padding: 12px;
+  border: none;
+  outline: none;
+  border-radius: 10px;
+  border: 1px solid rgba(#fff, 0.1);
+  background-color: #111;
+}
+.btt {
+  cursor: pointer;
+  margin-top: 10px;
+  width: calc(100% - 60px);
+  height: 41px;
+  border-radius: 10px;
+  background: #27ae60;
+  outline: none;
+  border: none;
+
+  color: #fff;
 
+  font-family: Oswald;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
diff --git a/src/styles/invite.module.scss.d.ts b/src/styles/invite.module.scss.d.ts
index 3f8b5eb..6e28f0a 100644
--- a/src/styles/invite.module.scss.d.ts
+++ b/src/styles/invite.module.scss.d.ts
@@ -5,5 +5,7 @@ declare const classNames: {
   readonly title: 'title';
   readonly divider: 'divider';
   readonly online: 'online';
+  readonly ptt: 'ptt';
+  readonly btt: 'btt';
 };
 export = classNames;