diff --git a/.changeset/strange-stingrays-refuse.md b/.changeset/strange-stingrays-refuse.md
new file mode 100644
index 0000000000..7dfbabd4b7
--- /dev/null
+++ b/.changeset/strange-stingrays-refuse.md
@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-page': patch
+'@toptal/picasso': patch
+---
+
+### PageSidebar
+
+- migrate `PageSidebar` to TailwindCSS
diff --git a/packages/base/Page/src/PageSidebar/PageSidebar.tsx b/packages/base/Page/src/PageSidebar/PageSidebar.tsx
index d65ef2ee1c..a77fcbfecb 100644
--- a/packages/base/Page/src/PageSidebar/PageSidebar.tsx
+++ b/packages/base/Page/src/PageSidebar/PageSidebar.tsx
@@ -1,9 +1,6 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { useSidebar } from '@toptal/picasso-provider'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import cx from 'classnames'
-import { twMerge } from '@toptal/picasso-tailwind-merge'
+import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge'
 import type { ReactNode } from 'react'
 import React, { forwardRef, useCallback, useEffect, useState } from 'react'
 import { ButtonCircular } from '@toptal/picasso-button'
@@ -20,7 +17,6 @@ import { SidebarItem } from '../SidebarItem'
 import { SidebarLogo } from '../SidebarLogo'
 import { SidebarMenu } from '../SidebarMenu'
 import { SidebarContextProvider } from './SidebarContextProvider'
-import styles from './styles'
 import type { VariantType } from './types'
 
 export interface Props extends BaseProps {
@@ -47,9 +43,16 @@ export interface Props extends BaseProps {
   onCollapse?: () => void
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PageSidebar',
-})
+const classesByVariant = {
+  light: 'shadow-gray-200 bg-gray-100',
+  dark: 'shadow-graphite-800 bg-graphite-800',
+}
+
+const classesBySize = {
+  small: 'w-[212px]',
+  medium: 'w-[236px]',
+  large: 'w-[280px]',
+}
 
 export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
   props,
@@ -68,7 +71,7 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
     disableSticky,
     onCollapse = noop,
   } = props
-  const classes = useStyles()
+
   const { setHasSidebar } = useSidebar()
   const [isCollapsed, setIsCollapsed] = useState(!!defaultCollapsed)
   const [isHovered, setIsHovered] = useState(false)
@@ -101,10 +104,32 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
     <Container
       ref={ref}
       style={style}
-      className={cx(classes.root, className, classes[variant], classes[size], {
-        [classes.rootCollapsed]: collapsible && isCollapsed,
-        [classes.hamburgerNotAvailable]: !hasTopBar,
-      })}
+      className={twMerge(
+        'h-full',
+        'shadow-[inset_-1px_0_0_0]',
+        'text-lg/[inherit]',
+        'relative',
+        'transition-[width] ease-in-out delay-[225ms]',
+        'hidden min-[1280px]:block',
+        '[&]:before:absolute',
+        '[&]:before:content-[""]',
+        '[&]:before:left-0',
+        '[&]:before:top-0',
+        '[&]:before:w-[15.5rem]',
+        '[&]:before:h-full',
+        className,
+        classesByVariant[variant],
+        classesBySize[size],
+        'xs:max-md:overflow-y-scroll',
+        collapsible &&
+          isCollapsed && [
+            'w-[5rem]',
+            '[&]:before:w-[5.75rem]',
+            '[&_.scrollable-content]:[-ms-overflow-style:none]',
+            '[&_.scrollable-content]:[scrollbar-width:none]',
+          ],
+        !hasTopBar && 'block'
+      )}
       data-testid={testIds?.container}
       onMouseEnter={collapsible ? () => setIsHovered(true) : noop}
       onMouseLeave={collapsible ? () => setIsHovered(false) : noop}
@@ -115,14 +140,16 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
         style={{
           maxHeight: wrapperMaxHeight,
         }}
-        className={cx(classes.wrapper, {
-          [classes.sticky]: !disableSticky,
-        })}
+        className={twJoin(
+          'h-full',
+          !disableSticky &&
+            'max-h-[calc(100vh-var(--header-height,3.5rem))] sticky top-[var(--header-height,3.5rem)]'
+        )}
       >
         <Container
           flex
           direction='column'
-          className={classes.scrollableContent}
+          className='scrollable-content h-full overflow-y-auto pt-4 pb-2 px-0'
           data-testid={testIds?.scrollableContainer}
         >
           {collapsible && (
@@ -139,7 +166,7 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
               data-testid={testIds?.collapseButton}
             />
           )}
-          <div className={classes.spacer} />
+          <div className='order-[50] flex-1 h-full' />
           <SidebarContextProvider
             isCollapsed={isCollapsed}
             isHovered={isHovered}
diff --git a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
index cfefea7621..7f9fa3ceb5 100644
--- a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
@@ -6,16 +6,16 @@ exports[`PageSidebar renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
         </div>
       </div>
@@ -30,16 +30,16 @@ exports[`PageSidebar with menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
           <ul
             class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
@@ -59,16 +59,16 @@ exports[`PageSidebar with one normal and one bottom menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
           <ul
             class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
diff --git a/packages/base/Page/src/PageSidebar/styles.ts b/packages/base/Page/src/PageSidebar/styles.ts
deleted file mode 100644
index 2d7cc4dce1..0000000000
--- a/packages/base/Page/src/PageSidebar/styles.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-
-import { headerBreakingPointXL } from '../PageTopBar/constants'
-
-export default ({ palette, screens, transitions }: Theme) =>
-  createStyles({
-    root: {
-      height: '100%',
-      boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
-      fontSize: '1rem',
-      position: 'relative',
-      transition: `width ${transitions.duration.enteringScreen}ms ease-in-out`,
-      display: 'none',
-      [headerBreakingPointXL]: {
-        display: 'block',
-      },
-
-      [screens('xs', 'sm')]: {
-        width: '100vw',
-        overflowY: 'scroll',
-      },
-
-      '&::before': {
-        position: 'absolute',
-        content: '""',
-        left: 0,
-        top: 0,
-        width: '15.50rem',
-        height: '100%',
-      },
-    },
-    hamburgerNotAvailable: {
-      display: 'block',
-    },
-    wrapper: {
-      height: '100%',
-      '&$sticky': {
-        maxHeight: `calc(100vh - var(--header-height,3.5rem))`,
-        position: 'sticky',
-        top: 'var(--header-height, 3.5rem)',
-      },
-    },
-    scrollableContent: {
-      height: '100%',
-      overflowY: 'auto',
-      padding: '1rem 0 0.5rem',
-    },
-    small: {
-      width: rem('212px'),
-    },
-    medium: {
-      width: rem('236px'),
-    },
-    large: {
-      width: rem('280px'),
-    },
-    spacer: {
-      order: 50,
-      flex: 1,
-      height: '100%',
-    },
-    light: {
-      boxShadow: `inset -1px 0px 0px 0px ${palette.grey.lighter2}`,
-      backgroundColor: palette.grey.lighter,
-    },
-    dark: {
-      boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
-      backgroundColor: palette.grey.darker,
-    },
-    rootCollapsed: {
-      width: '5rem',
-      transition: `width ${transitions.duration.leavingScreen}ms ease-in-out`,
-
-      '&::before': {
-        width: '5.75rem',
-      },
-      '& $scrollableContent': {
-        '-ms-overflow-style': 'none',
-        'scrollbar-width': 'none',
-        '&::-webkit-scrollbar': {
-          display: 'none',
-        },
-      },
-    },
-    sticky: {},
-  })
diff --git a/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
index a4962a1623..c0650b2969 100644
--- a/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
@@ -6,16 +6,16 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
           <ul
             class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
@@ -152,16 +152,16 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
           <ul
             class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"