diff --git a/ts/Manager/App.scss b/ts/Manager/App.scss
index 57c8ae7..7b1f295 100644
--- a/ts/Manager/App.scss
+++ b/ts/Manager/App.scss
@@ -102,6 +102,16 @@ pre {
     margin-bottom: 1em;
   }
 
+  .button.success {
+    background-color: var(--color-success);
+    border-color: var(--color-success-hover);
+    color: var(--color-primary-text);
+
+    &:hover {
+      background-color: var(--color-success-hover);
+    }
+  }
+
   .icon {
     display: inline-block;
     opacity: 0;
diff --git a/ts/Manager/RoomRow.tsx b/ts/Manager/RoomRow.tsx
index d346a10..40de45b 100644
--- a/ts/Manager/RoomRow.tsx
+++ b/ts/Manager/RoomRow.tsx
@@ -188,7 +188,7 @@ const RoomRow: React.FC<Props> = (props) => {
 		<>
 			<tr className={showRecordings ? 'selected-row' : ''}>
 				<td className="start">
-					<a href={api.getRoomUrl(room)} className="button primary" target="_blank" rel="noopener noreferrer" title={t('bbb', 'Open room')}>
+					<a href={api.getRoomUrl(room)} className={`button ${room.running ? 'success' : 'primary'}`} target="_blank" rel="noopener noreferrer" title={t('bbb', 'Open room')}>
 						{room.running ? t('bbb', 'Join') : t('bbb', 'Start')}
 					</a>
 				</td>