diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index 82c1b64d..9baf8a10 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -70,11 +70,30 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
             }}>
               {
                 !isRecording ? (
-                  <IconButton
-                    aria-label="new"
-                    size={"small"}
-                    onClick={handleNewRecording}
-                    sx={{
+                  <>
+                    <IconButton
+                      aria-label="new"
+                      size={"small"}
+                      onClick={handleNewRecording}
+                      sx={{
+                        width: '140px',
+                        borderRadius: '5px',
+                        padding: '8px',
+                        background: '#ff00c3',
+                        color: 'white',
+                        marginRight: '10px',
+                        fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+                        fontWeight: '500',
+                        fontSize: '0.875rem',
+                        lineHeight: '1.75',
+                        letterSpacing: '0.02857em',
+                        '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
+                      }
+                      }
+                    >
+                      <Add sx={{ marginRight: '5px' }} /> Create Robot
+                    </IconButton>
+                    <IconButton sx={{
                       width: '140px',
                       borderRadius: '5px',
                       padding: '8px',
@@ -87,11 +106,10 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                       lineHeight: '1.75',
                       letterSpacing: '0.02857em',
                       '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
-                    }
-                    }
-                  >
-                    <Add sx={{ marginRight: '5px' }} /> Create Robot
-                  </IconButton>
+                    }} onClick={logout}>
+                      <Logout sx={{ marginRight: '5px' }} />
+                      Logout</IconButton>
+                  </>
                 ) : ""
               }
               {
@@ -113,22 +131,6 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                 <MeetingRoomIcon sx={{ marginRight: '5px' }} />
                 exit</Button>
                 : null}
-              <IconButton sx={{
-                width: '140px',
-                borderRadius: '5px',
-                padding: '8px',
-                background: '#ff00c3',
-                color: 'white',
-                marginRight: '10px',
-                fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                fontWeight: '500',
-                fontSize: '0.875rem',
-                lineHeight: '1.75',
-                letterSpacing: '0.02857em',
-                '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
-              }} onClick={logout}>
-                <Logout sx={{ marginRight: '5px' }} />
-                Logout</IconButton>
             </div>
           </>
         ) : ""