diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx
index 5ebdbdafe..8f2f766b8 100644
--- a/client/modules/IDE/components/Header/Toolbar.jsx
+++ b/client/modules/IDE/components/Header/Toolbar.jsx
@@ -61,7 +61,6 @@ const Toolbar = (props) => {
       </button>
       <button
         className={playButtonClass}
-        id="play-sketch"
         onClick={() => {
           props.syncFileContent();
           dispatch(startSketch());
@@ -104,7 +103,10 @@ const Toolbar = (props) => {
             return (
               <p className="toolbar__project-project.owner">
                 {t('Toolbar.By')}{' '}
-                <Link to={`/${project.owner.username}/sketches`}>
+                <Link
+                  className="toolbar__username"
+                  to={`/${project.owner.username}/sketches`}
+                >
                   {project.owner.username}
                 </Link>
               </p>
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 00f2be6ec..ea3dc756e 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -126,6 +126,23 @@
 	}
 }
 
+.toolbar__username {
+	cursor: pointer;
+	@include themify() {
+	  color: getThemifyVariable('secondary-text-color');
+	  
+	  &:hover {
+		// Default hover color for light/dark theme
+		color: $p5-light-pink;
+  
+		// If the logo color is yellow, override the hover color
+		@if (getThemifyVariable('logo-color') == $yellow) {
+		  color: $yellow;
+		}
+	  }
+	}
+  }
+
 .toolbar__autorefresh-label {
 	cursor: pointer;
 	@include themify() {