diff --git a/client/src/components/App.scss b/client/src/components/App.scss
index fd7c1d3..2ef9a16 100644
--- a/client/src/components/App.scss
+++ b/client/src/components/App.scss
@@ -1,7 +1,7 @@
 $bg-color1: white;
 $bg-color2: #f4f4f4;
 $font-color1: black;
-$font-color1-disabled: lightgray;
+$color-disabled: lightgray;
 
 $color1: black;
 $color2: rgb(214, 214, 214);
@@ -185,6 +185,10 @@ body {
         color: white;
         border: none;
     }
+    &:disabled {
+        color: $color-disabled;
+        border-color: $color-disabled;
+    }
 }
 
 .header-item {
diff --git a/client/src/components/App.tsx b/client/src/components/App.tsx
index 1d43509..a8d1e91 100644
--- a/client/src/components/App.tsx
+++ b/client/src/components/App.tsx
@@ -11,7 +11,7 @@ import { relayNode } from 'src/app/constants';
 const App = () => {
     const [client, setClient] = useState<FluenceClient | null>(null);
     const [isInRoom, setIsInRoom] = useState<boolean>(false);
-    const [nickName, setNickName] = useState('myNickName');
+    const [nickName, setNickName] = useState('');
 
     useEffect(() => {
         const fn = async () => {
@@ -80,7 +80,11 @@ const App = () => {
                                 }}
                             />
 
-                            <button className="join-button" disabled={isInRoom || !client} onClick={joinRoom}>
+                            <button
+                                className="join-button"
+                                disabled={isInRoom || !client || !nickName}
+                                onClick={joinRoom}
+                            >
                                 Join
                             </button>
                         </div>