diff --git a/public/app/features/search/components/DashboardSearch.tsx b/public/app/features/search/components/DashboardSearch.tsx
index b30bf4703f7..381f89c635c 100644
--- a/public/app/features/search/components/DashboardSearch.tsx
+++ b/public/app/features/search/components/DashboardSearch.tsx
@@ -1,7 +1,7 @@
 import React, { FC, memo } from 'react';
 import { css } from '@emotion/css';
-import { useTheme, CustomScrollbar, stylesFactory, IconButton } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
+import { useTheme2, CustomScrollbar, stylesFactory, IconButton } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
 import { useSearchQuery } from '../hooks/useSearchQuery';
 import { useDashboardSearch } from '../hooks/useDashboardSearch';
 import { SearchField } from './SearchField';
@@ -15,7 +15,7 @@ export interface Props {
 export const DashboardSearch: FC<Props> = memo(({ onCloseSearch }) => {
   const { query, onQueryChange, onTagFilterChange, onTagAdd, onSortChange, onLayoutChange } = useSearchQuery({});
   const { results, loading, onToggleSection, onKeyDown } = useDashboardSearch(query, onCloseSearch);
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getStyles(theme);
 
   return (
@@ -56,7 +56,7 @@ DashboardSearch.displayName = 'DashboardSearch';
 
 export default DashboardSearch;
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     overlay: css`
       left: 0;
@@ -65,22 +65,22 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       bottom: 0;
       z-index: ${theme.zIndex.sidemenu};
       position: fixed;
-      background: ${theme.colors.dashboardBg};
+      background: ${theme.colors.background.canvas};
 
-      @media only screen and (min-width: ${theme.breakpoints.md}) {
-        left: 60px;
+      ${theme.breakpoints.up('md')} {
+        left: ${theme.components.sidemenu.width}px;
         z-index: ${theme.zIndex.navbarFixed + 1};
       }
     `,
     container: css`
       max-width: 1400px;
       margin: 0 auto;
-      padding: ${theme.spacing.md};
+      padding: ${theme.spacing(2)};
 
       height: 100%;
 
-      @media only screen and (min-width: ${theme.breakpoints.md}) {
-        padding: 32px;
+      ${theme.breakpoints.up('md')} {
+        padding: ${theme.spacing(4)};
       }
     `,
     closeBtn: css`