diff --git a/package.json b/package.json
index 107caa9a1a0..f7b71676aec 100644
--- a/package.json
+++ b/package.json
@@ -275,7 +275,7 @@
     "dangerously-set-html-content": "1.0.9",
     "date-fns": "2.25.0",
     "debounce-promise": "3.1.2",
-    "emotion": "10.0.27",
+    "emotion": "11.0.0",
     "eventemitter3": "4.0.0",
     "fast-deep-equal": "^3.1.3",
     "fast-json-patch": "3.1.0",
diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index f7a41bc9114..3225dfe06e3 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -48,7 +48,7 @@
     "clipboard": "2.0.4",
     "core-js": "3.10.0",
     "d3": "5.15.0",
-    "emotion": "10.0.27",
+    "emotion": "11.0.0",
     "hoist-non-react-statics": "3.3.2",
     "immutable": "3.8.2",
     "is-hotkey": "0.1.6",
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
index 5e99390677d..7fdc9dba1a0 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import Calendar from 'react-calendar';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '../../../themes';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx
index 75f2c39cff3..4da79364423 100644
--- a/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Alert, useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { DashboardInitError, AppNotificationSeverity } from 'app/types';
diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
index 40e168bc5d0..aea6b7dbd87 100644
--- a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui';
 import { locationService } from '@grafana/runtime';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 47d9ab6c6d8..438c62f0847 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { connect, ConnectedProps } from 'react-redux';
 import { locationService } from '@grafana/runtime';
 import { selectors } from '@grafana/e2e-selectors';
diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx
index e36ce658258..70d9a3ffb4f 100644
--- a/public/app/features/explore/LogsContainer.tsx
+++ b/public/app/features/explore/LogsContainer.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Collapse } from '@grafana/ui';
 import {
   AbsoluteTimeRange,
diff --git a/public/app/features/explore/LogsNavigation.tsx b/public/app/features/explore/LogsNavigation.tsx
index 746e7e6d67f..7d992321559 100644
--- a/public/app/features/explore/LogsNavigation.tsx
+++ b/public/app/features/explore/LogsNavigation.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect, useRef } from 'react';
 import { isEqual } from 'lodash';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { LogsSortOrder, AbsoluteTimeRange, TimeZone, DataQuery, GrafanaTheme2 } from '@grafana/data';
 import { Button, Icon, Spinner, useTheme2 } from '@grafana/ui';
 import { LogsNavigationPages } from './LogsNavigationPages';
diff --git a/public/app/features/explore/LogsNavigationPages.tsx b/public/app/features/explore/LogsNavigationPages.tsx
index 9c1bfa89d28..16f92cb9d47 100644
--- a/public/app/features/explore/LogsNavigationPages.tsx
+++ b/public/app/features/explore/LogsNavigationPages.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { dateTimeFormat, systemDateFormats, TimeZone, AbsoluteTimeRange, GrafanaTheme2 } from '@grafana/data';
 import { CustomScrollbar, Spinner, useTheme2 } from '@grafana/ui';
 import { LogsPage } from './LogsNavigation';
diff --git a/public/app/plugins/panel/nodeGraph/Marker.tsx b/public/app/plugins/panel/nodeGraph/Marker.tsx
index cee0ff33b93..89ef5c9512f 100644
--- a/public/app/plugins/panel/nodeGraph/Marker.tsx
+++ b/public/app/plugins/panel/nodeGraph/Marker.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEvent, memo } from 'react';
 import { NodesMarker } from './types';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory, useTheme } from '@grafana/ui';
 
 const nodeR = 40;
diff --git a/public/app/plugins/panel/nodeGraph/Node.tsx b/public/app/plugins/panel/nodeGraph/Node.tsx
index d0c712f65ee..e17599abdd3 100644
--- a/public/app/plugins/panel/nodeGraph/Node.tsx
+++ b/public/app/plugins/panel/nodeGraph/Node.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Field, getFieldColorModeForField, GrafanaTheme2 } from '@grafana/data';
 import { useStyles2, useTheme2 } from '@grafana/ui';
 import { NodeDatum } from './types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 import { statToString } from './utils';
 
diff --git a/yarn.lock b/yarn.lock
index d875520d222..a9a62003f15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2764,7 +2764,7 @@ __metadata:
     css-minimizer-webpack-plugin: ^3.1.1
     csstype: 3.0.9
     d3: 5.15.0
-    emotion: 10.0.27
+    emotion: 11.0.0
     enzyme: 3.11.0
     expose-loader: 3.0.0
     hoist-non-react-statics: 3.3.2
@@ -15213,7 +15213,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emotion@npm:10.0.27, emotion@npm:^10.0.14":
+"emotion@npm:11.0.0":
+  version: 11.0.0
+  resolution: "emotion@npm:11.0.0"
+  checksum: ab160e73785c49216652ba85e33db6d4426fd7cb28bd5341fea42542e4e24dd671e508226bf4f8dbd99b946fff2e1f1441c58169356659e60f89dc2276f97993
+  languageName: node
+  linkType: hard
+
+"emotion@npm:^10.0.14":
   version: 10.0.27
   resolution: "emotion@npm:10.0.27"
   dependencies:
@@ -18040,7 +18047,7 @@ __metadata:
     dangerously-set-html-content: 1.0.9
     date-fns: 2.25.0
     debounce-promise: 3.1.2
-    emotion: 10.0.27
+    emotion: 11.0.0
     enzyme: 3.11.0
     enzyme-to-json: 3.4.4
     es-abstract: 1.18.0-next.1