diff --git a/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx b/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx
index 734734c2cb0..d167d8c507a 100644
--- a/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx
+++ b/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx
@@ -55,6 +55,7 @@ export const LogRecordViewerByTimestamp = React.memo(
               key={key}
               data-testid={key}
               ref={(element) => element && timestampRefs.set(key, element)}
+              className={styles.listItemWrapper}
             >
               <Timestamp time={key} />
               <div className={styles.logsContainer}>
@@ -170,11 +171,17 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
   timestampWrapper: css`
     color: ${theme.colors.text.secondary};
-    padding: ${theme.spacing(1)} 0;
   `,
   timestampText: css`
     color: ${theme.colors.text.primary};
     font-size: ${theme.typography.bodySmall.fontSize};
     font-weight: ${theme.typography.fontWeightBold};
   `,
+  listItemWrapper: css`
+    background: transparent;
+    outline: 1px solid transparent;
+
+    transition: background 150ms, outline 150ms;
+    padding: ${theme.spacing(1)} ${theme.spacing(1.5)};
+  `,
 });
diff --git a/public/app/features/alerting/unified/components/rules/state-history/LogTimelineViewer.tsx b/public/app/features/alerting/unified/components/rules/state-history/LogTimelineViewer.tsx
index 74f351fbe07..b0d2d286b50 100644
--- a/public/app/features/alerting/unified/components/rules/state-history/LogTimelineViewer.tsx
+++ b/public/app/features/alerting/unified/components/rules/state-history/LogTimelineViewer.tsx
@@ -43,6 +43,7 @@ export const LogTimelineViewer = React.memo(({ frames, timeRange, onPointerMove
             { label: 'Pending', color: theme.colors.warning.main, yAxis: 1 },
             { label: 'Alerting', color: theme.colors.error.main, yAxis: 1 },
             { label: 'NoData', color: theme.colors.info.main, yAxis: 1 },
+            { label: 'Mixed', color: theme.colors.text.secondary, yAxis: 1 },
           ]}
         >
           {(builder) => {
diff --git a/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx b/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx
index 8ceb39ce0b7..115a127d65e 100644
--- a/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx
+++ b/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx
@@ -66,14 +66,24 @@ const LokiStateHistory = ({ ruleUID }: Props) => {
     setValue('query', '');
   }, [setInstancesFilter, setValue]);
 
+  const refToHighlight = useRef<HTMLElement | undefined>(undefined);
+
   const onTimelinePointerMove = useCallback(
     (seriesIdx: number, pointIdx: number) => {
-      const timestamp = frameSubsetTimestamps[pointIdx];
+      // remove the highlight from the previous refToHighlight
+      refToHighlight.current?.classList.remove(styles.highlightedLogRecord);
 
-      const refToScroll = logsRef.current.get(timestamp);
-      refToScroll?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const timestamp = frameSubsetTimestamps[pointIdx];
+      const newTimestampRef = logsRef.current.get(timestamp);
+
+      // now we have the new ref, add the styles
+      newTimestampRef?.classList.add(styles.highlightedLogRecord);
+      // keeping this here (commented) in case we decide we want to go back to this
+      // newTimestampRef?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+      refToHighlight.current = newTimestampRef;
     },
-    [frameSubsetTimestamps]
+    [frameSubsetTimestamps, styles.highlightedLogRecord]
   );
 
   if (isLoading) {
@@ -259,6 +269,11 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     display: grid;
     grid-template-columns: max-content auto;
   `,
+  // we need !important here to override the list item default styles
+  highlightedLogRecord: css`
+    background: ${theme.colors.primary.transparent} !important;
+    outline: 1px solid ${theme.colors.primary.shade} !important;
+  `,
 });
 
 export default LokiStateHistory;