diff --git a/packages/core-components/src/components/LogViewer/index.ts b/packages/core-components/src/components/LogViewer/index.ts
index 839f34f81e..f99695f163 100644
--- a/packages/core-components/src/components/LogViewer/index.ts
+++ b/packages/core-components/src/components/LogViewer/index.ts
@@ -16,3 +16,4 @@
 
 export { LogViewer } from './LogViewer';
 export type { LogViewerProps } from './LogViewer';
+export type { LogViewerClassKey } from './styles';
diff --git a/packages/core-components/src/components/LogViewer/styles.ts b/packages/core-components/src/components/LogViewer/styles.ts
index 4f4312bdd9..edb2086675 100644
--- a/packages/core-components/src/components/LogViewer/styles.ts
+++ b/packages/core-components/src/components/LogViewer/styles.ts
@@ -19,114 +19,149 @@ import * as colors from '@material-ui/core/colors';
 
 export const HEADER_SIZE = 40;
 
-export const useStyles = makeStyles(theme => ({
-  root: {
-    background: theme.palette.background.paper,
-  },
-  header: {
-    height: HEADER_SIZE,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  },
-  log: {
-    fontFamily: '"Monaco", monospace',
-    fontSize: theme.typography.pxToRem(12),
-  },
-  line: {
-    position: 'relative',
-    whiteSpace: 'pre',
+export type LogViewerClassKey =
+  | 'root'
+  | 'header'
+  | 'log'
+  | 'line'
+  | 'lineSelected'
+  | 'lineCopyButton'
+  | 'lineNumber'
+  | 'textHighlight'
+  | 'textSelectedHighlight'
+  | 'modifierBold'
+  | 'modifierItalic'
+  | 'modifierUnderline'
+  | 'modifierForegroundBlack'
+  | 'modifierForegroundRed'
+  | 'modifierForegroundGreen'
+  | 'modifierForegroundYellow'
+  | 'modifierForegroundBlue'
+  | 'modifierForegroundMagenta'
+  | 'modifierForegroundCyan'
+  | 'modifierForegroundWhite'
+  | 'modifierForegroundGrey'
+  | 'modifierBackgroundBlack'
+  | 'modifierBackgroundRed'
+  | 'modifierBackgroundGreen'
+  | 'modifierBackgroundYellow'
+  | 'modifierBackgroundBlue'
+  | 'modifierBackgroundMagenta'
+  | 'modifierBackgroundCyan'
+  | 'modifierBackgroundWhite'
+  | 'modifierBackgroundGrey';
 
-    '&:hover': {
-      background: theme.palette.action.hover,
+export const useStyles = makeStyles(
+  theme => ({
+    root: {
+      background: theme.palette.background.paper,
     },
-  },
-  lineSelected: {
-    background: theme.palette.action.selected,
+    header: {
+      height: HEADER_SIZE,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+    },
+    log: {
+      fontFamily: '"Monaco", monospace',
+      fontSize: theme.typography.pxToRem(12),
+    },
+    line: {
+      position: 'relative',
+      whiteSpace: 'pre',
 
-    '&:hover': {
+      '&:hover': {
+        background: theme.palette.action.hover,
+      },
+    },
+    lineSelected: {
       background: theme.palette.action.selected,
+
+      '&:hover': {
+        background: theme.palette.action.selected,
+      },
     },
-  },
-  lineCopyButton: {
-    position: 'absolute',
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-  lineNumber: {
-    display: 'inline-block',
-    textAlign: 'end',
-    width: 60,
-    marginRight: theme.spacing(1),
-    cursor: 'pointer',
-  },
-  textHighlight: {
-    background: alpha(theme.palette.info.main, 0.15),
-  },
-  textSelectedHighlight: {
-    background: alpha(theme.palette.info.main, 0.4),
-  },
-  modifierBold: {
-    fontWeight: theme.typography.fontWeightBold,
-  },
-  modifierItalic: {
-    fontStyle: 'italic',
-  },
-  modifierUnderline: {
-    textDecoration: 'underline',
-  },
-  modifierForegroundBlack: {
-    color: colors.common.black,
-  },
-  modifierForegroundRed: {
-    color: colors.red[500],
-  },
-  modifierForegroundGreen: {
-    color: colors.green[500],
-  },
-  modifierForegroundYellow: {
-    color: colors.yellow[500],
-  },
-  modifierForegroundBlue: {
-    color: colors.blue[500],
-  },
-  modifierForegroundMagenta: {
-    color: colors.purple[500],
-  },
-  modifierForegroundCyan: {
-    color: colors.cyan[500],
-  },
-  modifierForegroundWhite: {
-    color: colors.common.white,
-  },
-  modifierForegroundGrey: {
-    color: colors.grey[500],
-  },
-  modifierBackgroundBlack: {
-    background: colors.common.black,
-  },
-  modifierBackgroundRed: {
-    background: colors.red[500],
-  },
-  modifierBackgroundGreen: {
-    background: colors.green[500],
-  },
-  modifierBackgroundYellow: {
-    background: colors.yellow[500],
-  },
-  modifierBackgroundBlue: {
-    background: colors.blue[500],
-  },
-  modifierBackgroundMagenta: {
-    background: colors.purple[500],
-  },
-  modifierBackgroundCyan: {
-    background: colors.cyan[500],
-  },
-  modifierBackgroundWhite: {
-    background: colors.common.white,
-  },
-  modifierBackgroundGrey: {
-    background: colors.grey[500],
-  },
-}));
+    lineCopyButton: {
+      position: 'absolute',
+      paddingTop: 0,
+      paddingBottom: 0,
+    },
+    lineNumber: {
+      display: 'inline-block',
+      textAlign: 'end',
+      width: 60,
+      marginRight: theme.spacing(1),
+      cursor: 'pointer',
+    },
+    textHighlight: {
+      background: alpha(theme.palette.info.main, 0.15),
+    },
+    textSelectedHighlight: {
+      background: alpha(theme.palette.info.main, 0.4),
+    },
+    modifierBold: {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+    modifierItalic: {
+      fontStyle: 'italic',
+    },
+    modifierUnderline: {
+      textDecoration: 'underline',
+    },
+    modifierForegroundBlack: {
+      color: colors.common.black,
+    },
+    modifierForegroundRed: {
+      color: colors.red[500],
+    },
+    modifierForegroundGreen: {
+      color: colors.green[500],
+    },
+    modifierForegroundYellow: {
+      color: colors.yellow[500],
+    },
+    modifierForegroundBlue: {
+      color: colors.blue[500],
+    },
+    modifierForegroundMagenta: {
+      color: colors.purple[500],
+    },
+    modifierForegroundCyan: {
+      color: colors.cyan[500],
+    },
+    modifierForegroundWhite: {
+      color: colors.common.white,
+    },
+    modifierForegroundGrey: {
+      color: colors.grey[500],
+    },
+    modifierBackgroundBlack: {
+      background: colors.common.black,
+    },
+    modifierBackgroundRed: {
+      background: colors.red[500],
+    },
+    modifierBackgroundGreen: {
+      background: colors.green[500],
+    },
+    modifierBackgroundYellow: {
+      background: colors.yellow[500],
+    },
+    modifierBackgroundBlue: {
+      background: colors.blue[500],
+    },
+    modifierBackgroundMagenta: {
+      background: colors.purple[500],
+    },
+    modifierBackgroundCyan: {
+      background: colors.cyan[500],
+    },
+    modifierBackgroundWhite: {
+      background: colors.common.white,
+    },
+    modifierBackgroundGrey: {
+      background: colors.grey[500],
+    },
+  }),
+  { name: 'BackstageLogViewer' },
+);
diff --git a/packages/core-components/src/overridableComponents.ts b/packages/core-components/src/overridableComponents.ts
index af35445e24..98b8f83abd 100644
--- a/packages/core-components/src/overridableComponents.ts
+++ b/packages/core-components/src/overridableComponents.ts
@@ -34,6 +34,7 @@ import {
   LifecycleClassKey,
   MarkdownContentClassKey,
   LoginRequestListItemClassKey,
+  LogViewerClassKey,
   OAuthRequestDialogClassKey,
   OverflowTooltipClassKey,
   GaugeClassKey,
@@ -110,6 +111,7 @@ type BackstageComponentsNameToClassKey = {
   BackstageLifecycle: LifecycleClassKey;
   BackstageMarkdownContent: MarkdownContentClassKey;
   BackstageLoginRequestListItem: LoginRequestListItemClassKey;
+  BackstageLogViewer: LogViewerClassKey;
   OAuthRequestDialog: OAuthRequestDialogClassKey;
   BackstageOverflowTooltip: OverflowTooltipClassKey;
   BackstageGauge: GaugeClassKey;