diff --git a/public/app/features/logs/components/LogDetails.tsx b/public/app/features/logs/components/LogDetails.tsx
index c030bf9f8d0..c0c423efbaa 100644
--- a/public/app/features/logs/components/LogDetails.tsx
+++ b/public/app/features/logs/components/LogDetails.tsx
@@ -126,7 +126,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
                           name="question-circle"
                           size="xs"
                           className={css`
-                            margin-left: 4px;
+                            margin-left: ${theme.spacing(0.5)};
                           `}
                         />
                       </Tooltip>
diff --git a/public/app/features/logs/components/LogDetailsRow.tsx b/public/app/features/logs/components/LogDetailsRow.tsx
index 6b7d85ecb9d..763fd652fed 100644
--- a/public/app/features/logs/components/LogDetailsRow.tsx
+++ b/public/app/features/logs/components/LogDetailsRow.tsx
@@ -57,9 +57,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: absolute;
       top: 0px;
       justify-content: center;
-      border-radius: 20px;
-      width: 26px;
-      height: 26px;
+      border-radius: ${theme.shape.borderRadius(10)};
+      width: ${theme.spacing(3.25)};
+      height: ${theme.spacing(3.25)};
     `,
     wrapLine: css`
       label: wrapLine;
@@ -67,6 +67,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     `,
   };
 };
+
 class UnThemedLogDetailsRow extends PureComponent<Props, State> {
   state: State = {
     showFieldsStats: false,
diff --git a/public/app/features/logs/components/LogLabelStats.tsx b/public/app/features/logs/components/LogLabelStats.tsx
index 65c71415833..f2c5d1ba160 100644
--- a/public/app/features/logs/components/LogLabelStats.tsx
+++ b/public/app/features/logs/components/LogLabelStats.tsx
@@ -39,7 +39,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
     `,
     logsStatsBody: css`
       label: logs-stats__body;
-      padding: 5px 0;
+      padding: 5px 0px;
     `,
   };
 });
diff --git a/public/app/features/logs/components/LogLabelStatsRow.tsx b/public/app/features/logs/components/LogLabelStatsRow.tsx
index 2681a4bb187..2960c807658 100644
--- a/public/app/features/logs/components/LogLabelStatsRow.tsx
+++ b/public/app/features/logs/components/LogLabelStatsRow.tsx
@@ -28,23 +28,23 @@ const getStyles = (theme: GrafanaTheme2) => ({
   logsStatsRowCount: css`
     label: logs-stats-row__count;
     text-align: right;
-    margin-left: 0.5em;
+    margin-left: ${theme.spacing(0.75)};
   `,
   logsStatsRowPercent: css`
     label: logs-stats-row__percent;
     text-align: right;
-    margin-left: 0.5em;
-    width: 3em;
+    margin-left: ${theme.spacing(0.75)};
+    width: ${theme.spacing(4.5)};
   `,
   logsStatsRowBar: css`
     label: logs-stats-row__bar;
-    height: 4px;
+    height: ${theme.spacing(0.5)};
     overflow: hidden;
     background: ${theme.colors.text.disabled};
   `,
   logsStatsRowInnerBar: css`
     label: logs-stats-row__innerbar;
-    height: 4px;
+    height: ${theme.spacing(0.5)};
     overflow: hidden;
     background: ${theme.colors.primary.main};
   `,
diff --git a/public/app/features/logs/components/LogLabels.tsx b/public/app/features/logs/components/LogLabels.tsx
index b499b19f02d..a8eaf446b5b 100644
--- a/public/app/features/logs/components/LogLabels.tsx
+++ b/public/app/features/logs/components/LogLabels.tsx
@@ -53,10 +53,10 @@ const getStyles = (theme: GrafanaTheme2) => {
     logsLabel: css`
       label: logs-label;
       display: flex;
-      padding: 0 2px;
+      padding: ${theme.spacing(0, 0.25)};
       background-color: ${theme.colors.background.secondary};
       border-radius: ${theme.shape.borderRadius(1)};
-      margin: 1px 4px 0 0;
+      margin: ${theme.spacing(0.125, 0.5, 0, 0)};
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -64,7 +64,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     logsLabelValue: css`
       label: logs-label__value;
       display: inline-block;
-      max-width: 20em;
+      max-width: ${theme.spacing(25)};
       text-overflow: ellipsis;
       overflow: hidden;
     `,
diff --git a/public/app/features/logs/components/LogRowContext.tsx b/public/app/features/logs/components/LogRowContext.tsx
index 6f96c756dc2..346082b35c5 100644
--- a/public/app/features/logs/components/LogRowContext.tsx
+++ b/public/app/features/logs/components/LogRowContext.tsx
@@ -49,7 +49,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
         top: 100%;
       `
     : css`
-        margin-top: 20px;
+        margin-top: ${theme.spacing(2.5)};
       `;
   return {
     width: css`
@@ -61,22 +61,22 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
       z-index: ${theme.zIndex.dropdown};
       overflow: hidden;
       background: ${theme.colors.background.primary};
-      box-shadow: 0 0 10px ${theme.v1.palette.black};
+      box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
       border: 1px solid ${theme.colors.background.secondary};
       border-radius: ${theme.shape.borderRadius(2)};
       font-family: ${theme.typography.fontFamily};
     `,
     header: css`
       height: ${headerHeight}px;
-      padding: 0 10px;
+      padding: ${theme.spacing(0, 1.25)};
       display: flex;
       align-items: center;
       background: ${theme.colors.background.canvas};
     `,
     top: css`
       border-radius: 0 0 ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)};
-      box-shadow: 0 0 10px ${theme.v1.palette.black};
-      clip-path: inset(0px -10px -10px -10px);
+      box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
+      clip-path: inset(0px -${theme.spacing(1.25)} -${theme.spacing(1.25)} -${theme.spacing(1.25)});
     `,
     title: css`
       position: absolute;
@@ -87,8 +87,8 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
       background: ${theme.colors.background.secondary};
       border: 1px solid ${theme.colors.background.secondary};
       border-radius: ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)} 0 0;
-      box-shadow: 0 0 10px ${theme.v1.palette.black};
-      clip-path: inset(-10px -10px 0px -10px);
+      box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
+      clip-path: inset(-${theme.spacing(1.25)} -${theme.spacing(1.25)} 0px -${theme.spacing(1.25)});
       font-family: ${theme.typography.fontFamily};
 
       display: flex;
@@ -107,11 +107,11 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
       display: flex;
     `,
     headerButton: css`
-      margin-left: 8px;
+      margin-left: ${theme.spacing(1)};
     `,
     logs: css`
       height: ${logsHeight}px;
-      padding: 10px;
+      padding: ${theme.spacing(1.25)};
       font-family: ${theme.typography.fontFamilyMonospace};
 
       .scrollbar-view {
diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index cad836d24c0..8a2efcc694c 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@@ -64,18 +64,18 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
       position: absolute;
       top: 0;
       bottom: auto;
-      height: 36px;
+      height: ${theme.spacing(4.5)};
       background: ${theme.colors.background.primary};
       box-shadow: ${theme.shadows.z3};
       padding: ${theme.spacing(0, 0, 0, 0.5)};
       z-index: 100;
       visibility: hidden;
-      width: ${showContextButton ? '80px' : '40px'};
+      width: ${showContextButton ? theme.spacing(10) : theme.spacing(5)};
     `,
     logRowMenuCell: css`
       position: absolute;
       right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`};
-      margin-top: -1px;
+      margin-top: -${theme.spacing(0.125)};
     `,
   };
 };
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index 1ef851e803d..14f8b6017d4 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@@ -83,7 +83,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
     `,
     logsRowLevel: css`
       label: logs-row__level;
-      max-width: 10px;
+      max-width: ${theme.spacing(1.25)};
       cursor: default;
       &::after {
         content: '';
@@ -92,7 +92,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
         top: 1px;
         bottom: 1px;
         width: 3px;
-        left: 4px;
+        left: ${theme.spacing(0.5)};
         background-color: ${logColor};
       }
     `,
@@ -130,8 +130,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
       label: logs-row-details-table;
       border: 1px solid ${theme.colors.border.medium};
       padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
-      border-radius: 3px;
-      margin: 20px 8px 20px 16px;
+      border-radius: ${theme.shape.borderRadius(1.5)};
+      margin: ${theme.spacing(2.5)} ${theme.spacing(1)} ${theme.spacing(2.5)} ${theme.spacing(2)};
       cursor: default;
     `,
     logDetailsTable: css`
@@ -146,8 +146,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
       label: logs-row-details__icon;
       position: relative;
       color: ${theme.v1.palette.gray3};
-      padding-top: 6px;
-      padding-left: 6px;
+      padding-top: ${theme.spacing(0.75)};
+      padding-left: ${theme.spacing(0.75)};
     `,
     logDetailsLabel: css`
       label: logs-row-details__label;