diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx
index 0f9d17732b5..964a04c6c72 100644
--- a/public/app/features/explore/NoDataSourceCallToAction.tsx
+++ b/public/app/features/explore/NoDataSourceCallToAction.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { LinkButton, CallToActionCard, Icon, useTheme } from '@grafana/ui';
+import { LinkButton, CallToActionCard, Icon, useTheme2 } from '@grafana/ui';
 
 export const NoDataSourceCallToAction = () => {
-  const theme = useTheme();
+  const theme = useTheme2();
 
   const message =
     'Explore requires at least one data source. Once you have added a data source, you can query it here.';
@@ -29,8 +29,8 @@ export const NoDataSourceCallToAction = () => {
   );
 
   const cardClassName = css`
-    max-width: ${theme.breakpoints.lg};
-    margin-top: ${theme.spacing.md};
+    max-width: ${theme.breakpoints.values.lg}px;
+    margin-top: ${theme.spacing(2)};
     align-self: center;
   `;