diff --git a/public/app/core/components/sidemenu/BottomSection.tsx b/public/app/core/components/sidemenu/BottomSection.tsx
index f8fa6bbd879..0e8d489dd70 100644
--- a/public/app/core/components/sidemenu/BottomSection.tsx
+++ b/public/app/core/components/sidemenu/BottomSection.tsx
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { cloneDeep } from 'lodash';
 import { css } from '@emotion/css';
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
-import { Icon, IconName, styleMixins, useTheme2 } from '@grafana/ui';
+import { Icon, IconName, useTheme2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import appEvents from '../../app_events';
 import { ShowModalReactEvent } from '../../../types/events';
@@ -100,7 +100,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   container: css`
     display: none;
 
-    @media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
+    ${theme.breakpoints.up('md')} {
       display: block;
       margin-bottom: ${theme.spacing(2)};
     }
diff --git a/public/app/core/components/sidemenu/SideMenu.tsx b/public/app/core/components/sidemenu/SideMenu.tsx
index 5a2f8c16fbb..f22e7a2b91b 100644
--- a/public/app/core/components/sidemenu/SideMenu.tsx
+++ b/public/app/core/components/sidemenu/SideMenu.tsx
@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { css, cx } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, styleMixins, useTheme2 } from '@grafana/ui';
+import { Icon, useTheme2 } from '@grafana/ui';
 import appEvents from '../../app_events';
 import { Branding } from 'app/core/components/Branding/Branding';
 import config from 'app/core/config';
@@ -56,7 +56,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     width: ${theme.components.sidemenu.width}px;
     z-index: ${theme.zIndex.sidemenu};
 
-    @media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
+    ${theme.breakpoints.up('md')} {
       background-color: ${theme.colors.background.primary};
       position: relative;
     }
@@ -94,7 +94,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
       width: ${theme.spacing(3.5)};
     }
 
-    @media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
+    ${theme.breakpoints.up('md')} {
       align-items: center;
       display: flex;
       justify-content: center;
@@ -116,7 +116,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     justify-content: space-between;
     padding: ${theme.spacing(2)};
 
-    @media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
+    ${theme.breakpoints.up('md')} {
       display: none;
     }
   `,
diff --git a/public/app/core/components/sidemenu/SideMenuItem.tsx b/public/app/core/components/sidemenu/SideMenuItem.tsx
index c4d9fd28a6a..c3a5d21cbdd 100644
--- a/public/app/core/components/sidemenu/SideMenuItem.tsx
+++ b/public/app/core/components/sidemenu/SideMenuItem.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
-import { Link, styleMixins, useTheme2 } from '@grafana/ui';
+import { Link, useTheme2 } from '@grafana/ui';
 import SideMenuDropDown from './SideMenuDropDown';
 
 export interface Props {
@@ -86,7 +86,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
       }
     }
 
-    @media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
+    ${theme.breakpoints.up('md')} {
       color: ${isActive ? theme.colors.text.primary : theme.colors.text.secondary};
 
       &:hover {
diff --git a/public/app/core/components/sidemenu/TopSection.tsx b/public/app/core/components/sidemenu/TopSection.tsx
index 3d9ed42760e..e385aa297cd 100644
--- a/public/app/core/components/sidemenu/TopSection.tsx
+++ b/public/app/core/components/sidemenu/TopSection.tsx
@@ -4,7 +4,7 @@ import { cloneDeep } from 'lodash';
 import { css } from '@emotion/css';
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Icon, IconName, styleMixins, useTheme2 } from '@grafana/ui';
+import { Icon, IconName, useTheme2 } from '@grafana/ui';
 import config from '../../config';
 import { isLinkActive, isSearchActive } from './utils';
 import SideMenuItem from './SideMenuItem';
@@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: none;
     flex-grow: 1;
 
-    @media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
+    ${theme.breakpoints.up('md')} {
       display: block;
       margin-top: ${theme.spacing(5)};
     }