diff --git a/packages/core/src/layout/Sidebar/Page.tsx b/packages/core/src/layout/Sidebar/Page.tsx
index 1e2537f167..2a4cf0fbb2 100644
--- a/packages/core/src/layout/Sidebar/Page.tsx
+++ b/packages/core/src/layout/Sidebar/Page.tsx
@@ -57,7 +57,7 @@ export const SidebarPage: FC<{}> = props => {
   return (
     <SidebarPinStateContext.Provider
       value={{
-        isPinned: true,
+        isPinned,
         toggleSidebarPinState,
       }}
     >
diff --git a/packages/core/src/layout/Sidebar/PinButton.tsx b/packages/core/src/layout/Sidebar/PinButton.tsx
index 5d245dadf1..8c52eeb24d 100644
--- a/packages/core/src/layout/Sidebar/PinButton.tsx
+++ b/packages/core/src/layout/Sidebar/PinButton.tsx
@@ -26,19 +26,20 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
   return {
     root: {
       position: 'relative',
+      alignSelf: 'stretch',
     },
     arrowButtonWrapper: {
       position: 'absolute',
       right: 0,
       width: ARROW_BUTTON_SIZE,
       height: ARROW_BUTTON_SIZE,
-      top: `calc(-50% - ${ARROW_BUTTON_SIZE / 2}px)`,
+      top: -(theme.spacing(6) + ARROW_BUTTON_SIZE) / 2,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '2px 0px 0px 2px',
-      background: 'blue',
-      color: theme.palette.pinSidebarButton.background,
+      background: theme.palette.pinSidebarButton.background,
+      color: theme.palette.pinSidebarButton.icon,
       border: 'none',
       outline: 'none',
       cursor: 'pointer',
@@ -50,7 +51,6 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
 });
 
 export const SidebarPinButton: FC<{}> = () => {
-  console.log('hello');
   const { isOpen } = useContext(SidebarContext);
   const { isPinned, toggleSidebarPinState } = useContext(
     SidebarPinStateContext,
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index fe3c71a212..55aa5a2900 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -57,8 +57,8 @@ export const lightTheme = createTheme({
     gold: yellow.A700,
     sidebar: '#171717',
     pinSidebarButton: {
-      icon: '#BDBDBD',
-      background: '#404040',
+      icon: '#181818',
+      background: '#BDBDBD',
     },
   },
 });
@@ -103,7 +103,7 @@ export const darkTheme = createTheme({
     gold: yellow.A700,
     sidebar: '#424242',
     pinSidebarButton: {
-      icon: '#181818',
+      icon: '#404040',
       background: '#BDBDBD',
     },
   },