diff --git a/frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx b/frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx
index 8fc95bef3c..a92c963aa5 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx
@@ -7,7 +7,7 @@ export const SidebarPinnedButton = ({ state, component, updateState }) => {
     const tooltipMsg = state ? `Unpin ${component}` : `Pin ${component}`
     return (
         <SidebarPinnedButton.OverlayContainer tip={tooltipMsg}>
-            <div className={`btn btn-light btn-sm m-1 ${(component === 'Inspector') && "position-absolute end-0" }`} onClick={updateState} >
+            <div className={`btn btn-sm m-1 ${state ? 'btn-light' : 'btn-default'} ${(component === 'Inspector') && "position-absolute end-0" }`} onClick={updateState} >
                 <img className="svg-icon" src={`/assets/images/icons/editor/left-sidebar/pinned.svg`} width="16" height="16" />
             </div>            
         </SidebarPinnedButton.OverlayContainer>