diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
index 4ee68fd73fd..cfe89819af9 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
@@ -33,16 +33,24 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
     return null;
   }
 
+  const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);
+
   return (
     <div className={containerStyles} {...innerProps} aria-label="Select option">
       <div className={cx(styles.leftColumn, styles.row)}>
         <div className={cx(styles.leftColumn, styles.wideRow)}>
           <TimeZoneTitle title={children} />
           <div className={styles.spacer} />
-          <TimeZoneDescription info={getTimeZoneInfo(data.value, timestamp)} />
+          <TimeZoneDescription info={timeZoneInfo} />
         </div>
         <div className={styles.rightColumn}>
-          <TimeZoneOffset timeZone={data.value} timestamp={timestamp} className={offsetClassName} />
+          <TimeZoneOffset
+            /* Use the timeZoneInfo to pass the correct timeZone name,
+               as 'Default' has value '' which defaults to browser timezone */
+            timeZone={timeZoneInfo?.ianaName || data.value}
+            timestamp={timestamp}
+            className={offsetClassName}
+          />
           {isSelected && (
             <span>
               <Icon name="check" />
@@ -65,6 +73,8 @@ export const CompactTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props,
     return null;
   }
 
+  const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);
+
   return (
     <div className={containerStyles} {...innerProps} aria-label="Select option">
       <div className={styles.body}>
@@ -82,10 +92,16 @@ export const CompactTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props,
         </div>
         <div className={styles.row}>
           <div className={styles.leftColumn}>
-            <TimeZoneDescription info={getTimeZoneInfo(data.value, timestamp)} />
+            <TimeZoneDescription info={timeZoneInfo} />
           </div>
           <div className={styles.rightColumn}>
-            <TimeZoneOffset timestamp={timestamp} timeZone={data.value} className={offsetClassName} />
+            <TimeZoneOffset
+              timestamp={timestamp}
+              /* Use the timeZoneInfo to pass the correct timeZone name,
+                 as 'Default' has value '' which defaults to browser timezone */
+              timeZone={timeZoneInfo?.ianaName || data.value}
+              className={offsetClassName}
+            />
           </div>
         </div>
       </div>