diff --git a/packages/grafana-sql/src/components/ConfirmModal.tsx b/packages/grafana-sql/src/components/ConfirmModal.tsx
index 52090012b79..a926b5d74eb 100644
--- a/packages/grafana-sql/src/components/ConfirmModal.tsx
+++ b/packages/grafana-sql/src/components/ConfirmModal.tsx
@@ -25,7 +25,7 @@ export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmMod
   return (
     <Modal
       title={
-        <div className="modal-header-title">
+        <div className={styles.modalHeaderTitle}>
           <Icon name="exclamation-triangle" size="lg" />
           <span className={styles.titleText}>Warning</span>
         </div>
@@ -57,4 +57,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
   titleText: css({
     paddingLeft: theme.spacing(2),
   }),
+  modalHeaderTitle: css({
+    fontSize: theme.typography.size.lg,
+    float: 'left',
+    paddingTop: theme.spacing(1),
+    margin: theme.spacing(0, 2),
+  }),
 });
diff --git a/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx b/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx
index 1efe5b489e4..85f5a979287 100644
--- a/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx
+++ b/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx
@@ -1,5 +1,9 @@
+import { css } from '@emotion/css';
 import * as React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
 import { IconName } from '../../types';
 
 interface Props {
@@ -11,11 +15,23 @@ interface Props {
 
 /** @internal */
 export const ModalTabContent = ({ children }: React.PropsWithChildren<Props>) => {
+  const styles = useStyles2(getStyles);
+
   return (
-    <div className="share-modal-body">
-      <div className="share-modal-header">
-        <div className="share-modal-content">{children}</div>
+    <div>
+      <div className={styles.header}>
+        <div className={styles.content}>{children}</div>
       </div>
     </div>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  header: css({
+    display: 'flex',
+    margin: theme.spacing(0, 0, 3, 0),
+  }),
+  content: css({
+    flexGrow: 1,
+  }),
+});
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
index 800a79b2b03..6586dbb6e0d 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
@@ -337,6 +337,13 @@ export function getElementStyles(theme: GrafanaTheme2) {
     '.template-variable': {
       color: theme.colors.primary.text,
     },
+
+    '.modal-header-title': {
+      fontSize: theme.typography.size.lg,
+      float: 'left',
+      paddingTop: theme.spacing(1),
+      margin: theme.spacing(0, 2),
+    },
   });
 }
 
diff --git a/public/app/features/dashboard-scene/sharing/ShareExportTab.tsx b/public/app/features/dashboard-scene/sharing/ShareExportTab.tsx
index 746caf6b1ce..6ec5e4138bb 100644
--- a/public/app/features/dashboard-scene/sharing/ShareExportTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareExportTab.tsx
@@ -111,7 +111,7 @@ function ShareExportTabRenderer({ model }: SceneComponentProps<ShareExportTab>)
     <>
       {!isViewingJSON && (
         <>
-          <p className="share-modal-info-text">
+          <p>
             <Trans i18nKey="share-modal.export.info-text">Export this dashboard.</Trans>
           </p>
           <Stack gap={2} direction="column">
diff --git a/public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx b/public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx
index 65461f1d3bf..3a1ae740f1e 100644
--- a/public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx
@@ -156,7 +156,7 @@ function ShareLinkTabRenderer({ model }: SceneComponentProps<ShareLinkTab>) {
 
   return (
     <>
-      <p className="share-modal-info-text">
+      <p>
         <Trans i18nKey="share-modal.link.info-text">
           Create a direct link to this dashboard or panel, customized with the options below.
         </Trans>
diff --git a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
index f584a8cfe6a..1e25452f58b 100644
--- a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
@@ -185,14 +185,14 @@ function ShareSnapshotTabRenderer({ model }: SceneComponentProps<ShareSnapshotTa
       {!Boolean(snapshotResult.value) && (
         <>
           <div>
-            <p className="share-modal-info-text">
+            <p>
               <Trans i18nKey="share-modal.snapshot.info-text-1">
                 A snapshot is an instant way to share an interactive dashboard publicly. When created, we strip
                 sensitive data like queries (metric, template, and annotation) and panel links, leaving only the visible
                 metric data and series names embedded in your dashboard.
               </Trans>
             </p>
-            <p className="share-modal-info-text">
+            <p>
               <Trans i18nKey="share-modal.snapshot.info-text-2">
                 Keep in mind, your snapshot <em>can be viewed by anyone</em> that has the link and can access the URL.
                 Share wisely.
diff --git a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
index 5dd04a46885..64b416053a7 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
@@ -54,7 +54,7 @@ export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeH
 
   return (
     <>
-      <p className="share-modal-info-text">
+      <p>
         <Trans i18nKey="share-modal.embed.info">Generate HTML for embedding an iframe with this panel.</Trans>
       </p>
       <Field label={t('share-modal.embed.time-range', 'Current time range')} description={timeRangeDescription}>
diff --git a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
index aa942ce4877..46341ce195f 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
@@ -101,7 +101,7 @@ export class ShareExport extends PureComponent<Props, State> {
 
     return (
       <>
-        <p className="share-modal-info-text">
+        <p>
           <Trans i18nKey="share-modal.export.info-text">Export this dashboard.</Trans>
         </p>
         <Field label={exportExternallyTranslation}>
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx b/public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx
index 94aca5e30fc..1b4f57c6a0e 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx
@@ -22,7 +22,7 @@ export const ShareLibraryPanel = ({ panel, initialFolderUid, onCreateLibraryPane
 
   return (
     <>
-      <p className="share-modal-info-text">
+      <p>
         <Trans i18nKey="share-modal.library.info">Create library panel.</Trans>
       </p>
       <AddLibraryPanelContents
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
index 31cdc11f142..3a1bb999bfb 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -102,7 +102,7 @@ export class ShareLink extends PureComponent<Props, State> {
 
     return (
       <>
-        <p className="share-modal-info-text">
+        <p>
           <Trans i18nKey="share-modal.link.info-text">
             Create a direct link to this dashboard or panel, customized with the options below.
           </Trans>
diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
index b6dd25275fb..d300289fe74 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
@@ -240,14 +240,14 @@ export class ShareSnapshot extends PureComponent<Props, State> {
     return (
       <>
         <div>
-          <p className="share-modal-info-text">
+          <p>
             <Trans i18nKey="share-modal.snapshot.info-text-1">
               A snapshot is an instant way to share an interactive dashboard publicly. When created, we strip sensitive
               data like queries (metric, template, and annotation) and panel links, leaving only the visible metric data
               and series names embedded in your dashboard.
             </Trans>
           </p>
-          <p className="share-modal-info-text">
+          <p>
             <Trans i18nKey="share-modal.snapshot.info-text-2">
               Keep in mind, your snapshot <em>can be viewed by anyone</em> that has the link and can access the URL.
               Share wisely.
@@ -317,14 +317,12 @@ export class ShareSnapshot extends PureComponent<Props, State> {
 
   renderStep3() {
     return (
-      <div className="share-modal-header">
-        <p className="share-modal-info-text">
-          <Trans i18nKey="share-modal.snapshot.deleted-message">
-            The snapshot has been deleted. If you have already accessed it once, then it might take up to an hour before
-            before it is removed from browser caches or CDN caches.
-          </Trans>
-        </p>
-      </div>
+      <p>
+        <Trans i18nKey="share-modal.snapshot.deleted-message">
+          The snapshot has been deleted. If you have already accessed it once, then it might take up to an hour before
+          before it is removed from browser caches or CDN caches.
+        </Trans>
+      </p>
     );
   }
 
diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss
index 2b3a07c87cc..34ffeb57e2c 100644
--- a/public/sass/_angular.scss
+++ b/public/sass/_angular.scss
@@ -2171,3 +2171,82 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
 div.flot-text {
   color: $text-color !important;
 }
+
+.modal-header {
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-header-close {
+  float: right;
+  padding: 9px $spacer;
+}
+
+// Body (where all modal content resides)
+.modal-body {
+  position: relative;
+}
+
+.modal-content {
+  padding: $spacer * 2;
+
+  &--has-scroll {
+    max-height: calc(100vh - 400px);
+    position: relative;
+  }
+}
+
+// Footer (for actions)
+.modal-footer {
+  padding: 14px 15px 15px;
+  border-top: 1px solid $panel-bg;
+  background-color: $panel-bg;
+  text-align: right; // right align buttons
+  // clear it in case folks use .pull-* classes on buttons
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+.confirm-modal {
+  max-width: 500px;
+
+  .confirm-modal-icon {
+    padding-top: 41px;
+    font-size: 280%;
+    color: $green-base;
+    padding-bottom: 20px;
+  }
+
+  .confirm-modal-text {
+    font-size: $font-size-h4;
+    color: $link-color;
+    margin-bottom: $spacer * 2;
+    padding-top: $spacer;
+  }
+
+  .confirm-modal-text2 {
+    font-size: $font-size-base;
+    padding-top: $spacer;
+  }
+
+  .confirm-modal-buttons {
+    margin-bottom: $spacer;
+    button {
+      margin-right: calc($spacer/2);
+    }
+  }
+
+  .modal-content-confirm-text {
+    margin-bottom: $space-xl;
+    span {
+      text-align: center;
+    }
+  }
+}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 272f946c31a..f46a1f671a7 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -14,7 +14,6 @@
 // COMPONENTS
 @import 'components/buttons';
 @import 'components/gf-form';
-@import 'components/modals';
 @import 'components/dropdown';
 @import 'components/dashboard_grid';
 
diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss
deleted file mode 100644
index 2c45bab98e1..00000000000
--- a/public/sass/components/_modals.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-//
-// Modals
-// --------------------------------------------------
-
-// Background
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-modal-backdrop;
-  background-color: $modal-backdrop-bg;
-}
-
-.modal-backdrop,
-.modal-backdrop.fade.in {
-  opacity: 0.7;
-}
-
-// Base modal
-.modal {
-  position: fixed;
-  z-index: $zindex-modal;
-  width: 100%;
-  background: $page-bg;
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  background-clip: padding-box;
-  outline: none;
-
-  max-width: 750px;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  top: 10%;
-}
-
-.modal-header {
-  background: $page-header-bg;
-  box-shadow: $page-header-shadow;
-  border-bottom: 1px solid $page-header-border-color;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.modal-header-title {
-  font-size: $font-size-lg;
-  float: left;
-  padding-top: $space-sm;
-  margin: 0 $space-md;
-}
-
-.modal-header-close {
-  float: right;
-  padding: 9px $spacer;
-}
-
-// Body (where all modal content resides)
-.modal-body {
-  position: relative;
-}
-
-.modal-content {
-  padding: $spacer * 2;
-
-  &--has-scroll {
-    max-height: calc(100vh - 400px);
-    position: relative;
-  }
-}
-
-// Remove bottom margin if need be
-.modal-form {
-  margin-bottom: 0;
-}
-
-// Footer (for actions)
-.modal-footer {
-  padding: 14px 15px 15px;
-  border-top: 1px solid $panel-bg;
-  background-color: $panel-bg;
-  text-align: right; // right align buttons
-  // clear it in case folks use .pull-* classes on buttons
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-.modal--narrow {
-  max-width: 500px;
-}
-
-.confirm-modal {
-  max-width: 500px;
-
-  .confirm-modal-icon {
-    padding-top: 41px;
-    font-size: 280%;
-    color: $green-base;
-    padding-bottom: 20px;
-  }
-
-  .confirm-modal-text {
-    font-size: $font-size-h4;
-    color: $link-color;
-    margin-bottom: $spacer * 2;
-    padding-top: $spacer;
-  }
-
-  .confirm-modal-text2 {
-    font-size: $font-size-base;
-    padding-top: $spacer;
-  }
-
-  .confirm-modal-buttons {
-    margin-bottom: $spacer;
-    button {
-      margin-right: calc($spacer/2);
-    }
-  }
-
-  .modal-content-confirm-text {
-    margin-bottom: $space-xl;
-    span {
-      text-align: center;
-    }
-  }
-}
-
-.share-modal-body {
-  .share-modal-options {
-    margin: 11px 0px 33px 0px;
-    display: inline-block;
-  }
-
-  .share-modal-big-icon {
-    margin-right: 8px;
-    margin-top: -7px;
-  }
-
-  .share-modal-info-text {
-    margin-top: 5px;
-    strong {
-      color: $text-color-emphasis;
-      font-weight: $font-weight-semi-bold;
-    }
-  }
-
-  .share-modal-header {
-    display: flex;
-    margin: 0px 0 22px 0;
-  }
-
-  .share-modal-content {
-    flex-grow: 1;
-  }
-
-  .share-modal-link {
-    max-width: 716px;
-    white-space: nowrap;
-    overflow: hidden;
-    display: block;
-    text-overflow: ellipsis;
-  }
-}