diff --git a/package-lock.json b/package-lock.json
index 2833a3c0..2f9e5e58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7365,9 +7365,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
-      "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "license": "ISC"
     },
     "node_modules/flot": {
diff --git a/package.json b/package.json
index 217e5aee..1cbbb458 100644
--- a/package.json
+++ b/package.json
@@ -148,7 +148,7 @@
       "minimatch": "^9.0.7"
     },
     "@typescript-eslint/utils": {
-      "flatted": "^3.4.0"
+      "flatted": "^3.4.2"
     },
     "copy-webpack-plugin": {
       "schema-utils": "^4.3.3",
@@ -161,10 +161,10 @@
       "minimatch": "^3.1.4"
     },
     "eslint-webpack-plugin": {
-      "flatted": "^3.4.0"
+      "flatted": "^3.4.2"
     },
     "flat-cache": {
-      "flatted": "^3.4.0"
+      "flatted": "^3.4.2"
     },
     "fork-ts-checker-webpack-plugin": {
       "ajv": "^8.18.0",
diff --git a/src/components/ClearFilterData.tsx b/src/components/ClearFilterData.tsx
index 1b452d80..c21ceafe 100644
--- a/src/components/ClearFilterData.tsx
+++ b/src/components/ClearFilterData.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Button } from '@grafana/ui'
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
+import { Button, useStyles2 } from '@grafana/ui'
 import { clearFilterEditorData } from '../lib/localStorageService'
 
 export const ClearFilterData: React.FC<{}> = () => {
@@ -10,20 +12,19 @@ export const ClearFilterData: React.FC<{}> = () => {
     setFilterDataCleared(true)
   }
 
+  const getStyles = (theme: GrafanaTheme2) => ({
+    spacer: css`
+      margin-top: ${theme.spacing(2)};
+      margin-bottom: ${theme.spacing(2)};
+    `,
+  })
+
+  const s = useStyles2(getStyles)
+
   return (
     <>
-      <style>
-        {
-          `
-          .spacer {
-            margin-top: 10px;
-            margin-bottom: 10px;
-          }
-          `
-      }
-      </style>
-      <h3 className='spacer'>Filter Data</h3>
-      <div className='spacer'>
+      <h3 className={s.spacer}>Filter Data</h3>
+      <div className={s.spacer}>
         OpenNMS Filter Panel data is stored in browser local storage.
         Click here to remove any existing filter data.
       </div>
@@ -34,7 +35,7 @@ export const ClearFilterData: React.FC<{}> = () => {
       </Button>
       {
         filterDataCleared &&
-        <div className='spacer'>Filter data was cleared.</div>
+        <div className={s.spacer}>Filter data was cleared.</div>
       }
     </>
   )
diff --git a/src/datasources/entity-ds/EntityClauseEditor.tsx b/src/datasources/entity-ds/EntityClauseEditor.tsx
index 1e2d5f3b..721a45f3 100644
--- a/src/datasources/entity-ds/EntityClauseEditor.tsx
+++ b/src/datasources/entity-ds/EntityClauseEditor.tsx
@@ -1,4 +1,7 @@
 import React, { useEffect } from 'react'
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
+import { useStyles2 } from '@grafana/ui'
 import { EntityClause } from './EntityClause'
 import { ClauseActionType, OnmsEntityType, SearchOption } from './types'
 import { API } from 'opennms'
@@ -12,6 +15,14 @@ interface EntityClauseEditorProps {
 }
 
 export const EntityClauseEditor = ({ setFilter, loading, propertiesAsArray, clauses, dispatchClauses }: EntityClauseEditorProps) => {
+    const getStyles = (theme: GrafanaTheme2) => ({
+        spacer: css`
+        margin-top: ${theme.spacing(2)};
+        margin-bottom: ${theme.spacing(2)};
+        `,
+    })
+
+    const s = useStyles2(getStyles)
 
     useEffect(() => {
         const updatedFilter = new API.Filter();
@@ -74,7 +85,7 @@ export const EntityClauseEditor = ({ setFilter, loading, propertiesAsArray, clau
                             hasMultipleClauses={clauses.length > 1}
                         />
 
-                        <div className='spacer' />
+                        <div className={s.spacer} />
                     </>
                 )
             })}
diff --git a/src/datasources/entity-ds/EntityQueryEditor.tsx b/src/datasources/entity-ds/EntityQueryEditor.tsx
index 784e7392..60b37789 100644
--- a/src/datasources/entity-ds/EntityQueryEditor.tsx
+++ b/src/datasources/entity-ds/EntityQueryEditor.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useReducer } from 'react'
+import { css } from '@emotion/css'
 import {
     InlineField,
     InlineFieldRow,
@@ -7,8 +8,9 @@ import {
     SegmentSection,
     Spinner,
     Switch,
+    useStyles2
 } from '@grafana/ui'
-import { SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { useEntityProperties } from '../../hooks/useEntityProperties';
 import { isInteger } from '../../lib/utils'
 import { EntityClauseEditor } from './EntityClauseEditor';
@@ -84,6 +86,23 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
     const [featuredAttributes, setFeaturedAttributes] = useState(true)
     const { propertiesLoading, propertiesAsArray } = useEntityProperties(value.label || '', featuredAttributes, client)
 
+    const getStyles = (theme: GrafanaTheme2) => ({
+        spacer: css`
+        margin-top: ${theme.spacing(2)};
+        margin-bottom: ${theme.spacing(2)};
+        `,
+        maxInput: css`
+        max-width: 150px;
+        `,
+        biggerLabels: css`
+        label {
+            min-width: 32px;
+        }
+        `
+    })
+
+    const s = useStyles2(getStyles)
+
     useEffect(() => {
         if (propertiesLoading) {
             setLoading(true)
@@ -116,20 +135,7 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
         })
     }
 
-    return (<div className='bigger-labels'>
-        <style>
-            {`
-                .bigger-labels label {
-                    min-width: 32px;
-                }
-                .spacer {
-                    margin-bottom: 6px;
-                }
-                .max-input {
-                    max-width: 150px;
-                }
-            `}
-        </style>
+    return (<div className={s.biggerLabels}>
         <SegmentSection label='Select'>
             <Segment
                 value={value}
@@ -151,7 +157,7 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
                 <Spinner />
             </div>}
         </SegmentSection>
-        <div className='spacer' />
+        <div className={s.spacer} />
 
         <EntityClauseEditor
             clauses={clauses}
@@ -167,10 +173,10 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
             searchAttributes={propertiesAsArray}
         />
 
-        <div className='spacer' />
+        <div className={s.spacer} />
         <InlineFieldRow>
             <InlineField label='Limit'>
-                <Input className='max-input' type='number' value={limit}
+                <Input className={s.maxInput} type='number' value={limit}
                     onChange={(ev) => {
                         const elem = (ev.target as HTMLInputElement)
                         if (elem) {
@@ -179,7 +185,7 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
                     }} />
             </InlineField>
         </InlineFieldRow>
-        <div className='spacer' />
+        <div className={s.spacer} />
         <InlineFieldRow>
             <InlineField label='Featured attributes'>
                 <div style={{ display: 'flex', alignItems: 'center', height: '32px' }}>
diff --git a/src/datasources/perf-ds/PerformanceAttribute.tsx b/src/datasources/perf-ds/PerformanceAttribute.tsx
index 85b1ac1f..79dcc294 100644
--- a/src/datasources/perf-ds/PerformanceAttribute.tsx
+++ b/src/datasources/perf-ds/PerformanceAttribute.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { SelectableValue } from '@grafana/data'
-import { Segment, SegmentAsync, SegmentInput } from '@grafana/ui'
+import { css } from '@emotion/css'
+import { GrafanaTheme2, SelectableValue } from '@grafana/data'
+import { Segment, SegmentAsync, SegmentInput, useStyles2 } from '@grafana/ui'
 import { SegmentSectionWithIcon } from 'components/SegmentSectionWithIcon'
 import { ValueOverrideSwitch } from 'components/ValueOverrideSwitch'
 import { getTemplateVariables, isTemplateVariable } from 'lib/variableHelpers'
@@ -40,6 +41,15 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
     const [isResourceOverride, setIsResourceOverride] = useState<boolean>(false)
     const [resourceOverrideValue, setResourceOverrideValue] = useState<string>('')
 
+    const getStyles = (theme: GrafanaTheme2) => ({
+        spacer: css`
+        margin-top: ${theme.spacing(2)};
+        margin-bottom: ${theme.spacing(2)};
+        `,
+    })
+
+    const s = useStyles2(getStyles)
+
     useEffect(() => {
         // Note: this could result in invalid queries if not all parameters have been selected.
         // However, not updating the query results in old parameters still being used. This way,
@@ -154,7 +164,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                 }
             `}
             </style>
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Node' icon='tree'>
                 <SegmentAsync
                     value={performanceState?.node}
@@ -177,7 +187,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                 }
             </SegmentSectionWithIcon>
 
-            <div className='spacer' />
+            <div className={s.spacer} />
             {
                 (performanceState?.node?.id || performanceState?.node?.label) &&
                 <SegmentSectionWithIcon label='Resource' icon='leaf'>
@@ -197,7 +207,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                     }
                 </SegmentSectionWithIcon>
             }
-            <div className='spacer' />
+            <div className={s.spacer} />
             {
                 (performanceState?.node?.id || performanceState?.node?.label) &&
                 (performanceState?.resource?.id || performanceState?.resource?.label) &&
@@ -212,7 +222,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                             }}
                         />
                     </SegmentSectionWithIcon>
-                    <div className='spacer' />
+                    <div className={s.spacer} />
                     <SegmentSectionWithIcon label='Sub-Attribute' icon='flash'>
                         <SegmentInput
                             value={performanceState?.subAttribute || ''}
@@ -222,7 +232,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                             }}
                         />
                     </SegmentSectionWithIcon>
-                    <div className='spacer' />
+                    <div className={s.spacer} />
                     <SegmentSectionWithIcon label='Fallback Attribute' icon='tag'>
                         <SegmentAsync
                             value={performanceState?.fallbackAttribute}
@@ -233,7 +243,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                             }}
                         />
                     </SegmentSectionWithIcon>
-                    <div className='spacer' />
+                    <div className={s.spacer} />
                     <SegmentSectionWithIcon label='Aggregation' icon='calendar'>
                         <Segment
                             value={performanceState?.aggregation}
@@ -246,7 +256,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                     </SegmentSectionWithIcon>
                 </>
             }
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Label' icon='font'>
                 <SegmentInput
                     value={performanceState?.label}
diff --git a/src/datasources/perf-ds/PerformanceConfigEditor.tsx b/src/datasources/perf-ds/PerformanceConfigEditor.tsx
index e02700c6..0513ff2e 100644
--- a/src/datasources/perf-ds/PerformanceConfigEditor.tsx
+++ b/src/datasources/perf-ds/PerformanceConfigEditor.tsx
@@ -1,40 +1,39 @@
 import React from 'react';
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { css } from '@emotion/css'
+import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
+import { DataSourceHttpSettings, useStyles2 } from '@grafana/ui';
 import { InputValueOverrideConfig } from './InputValueOverrideConfig'
 import { NodeAttributeLimitOverrideConfig } from './NodeAttributeLimitOverrideConfig'
 import { PerformanceDataSourceOptions } from './types';
 
 interface Props extends DataSourcePluginOptionsEditorProps<PerformanceDataSourceOptions> { }
 
+const getStyles = (theme: GrafanaTheme2) => ({
+    spacer: css`
+        margin-top: ${theme.spacing(1.25)};
+        margin-bottom: ${theme.spacing(1.25)};
+    `,
+})
+
 export const PerformanceConfigEditor: React.FC<Props> = ({ onOptionsChange, options }) => {
+    const s = useStyles2(getStyles)
+
     return (
         <>
-          <style>
-            {
-              `
-              .spacer {
-                margin-top: 10px;
-                margin-bottom: 10px;
-              }
-              `
-          }
-          </style>
-
          <DataSourceHttpSettings
               defaultUrl="https://api.example.com"
               dataSourceConfig={options}
               onChange={onOptionsChange}
           />
 
-          <h3 className='spacer'>Additional Options</h3>
+          <h3 className={s.spacer}>Additional Options</h3>
 
           <InputValueOverrideConfig
             onOptionsChange={onOptionsChange}
             options={options}
           />
 
-          <div className='spacer' />
+          <div className={s.spacer} />
 
           <NodeAttributeLimitOverrideConfig
             onOptionsChange={onOptionsChange}
diff --git a/src/datasources/perf-ds/PerformanceExpression.tsx b/src/datasources/perf-ds/PerformanceExpression.tsx
index 8f7634aa..40c50b15 100644
--- a/src/datasources/perf-ds/PerformanceExpression.tsx
+++ b/src/datasources/perf-ds/PerformanceExpression.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import { SegmentInput } from '@grafana/ui';
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
+import { SegmentInput, useStyles2 } from '@grafana/ui';
 import { SegmentSectionWithIcon } from 'components/SegmentSectionWithIcon';
 import { PerformanceQuery } from './types'
 
@@ -8,9 +10,16 @@ export interface PerformanceExpressionProps {
     updateQuery: Function;
 }
 
+const getStyles = (theme: GrafanaTheme2) => ({
+    spacer: css`
+        margin-top: ${theme.spacing(1)};
+    `,
+})
+
 export const PerformanceExpression: React.FC<PerformanceExpressionProps> = ({ query, updateQuery }) => {
     const [expression, setExpression] = useState<string | number>(query.expression || '')
     const [label, setLabel] = useState<string | number>(query.label || '')
+    const s = useStyles2(getStyles)
 
     useEffect(() => {
         updateQuery(expression, label)
@@ -19,7 +28,7 @@ export const PerformanceExpression: React.FC<PerformanceExpressionProps> = ({ qu
 
     return (
         <>
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Expression' icon='calendar'>
                 <SegmentInput
                     value={expression}
@@ -32,7 +41,7 @@ export const PerformanceExpression: React.FC<PerformanceExpressionProps> = ({ qu
                     }}
                 />
             </SegmentSectionWithIcon>
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Label' icon='font'>
                 <SegmentInput
                     value={label}
diff --git a/src/datasources/perf-ds/PerformanceFilter.tsx b/src/datasources/perf-ds/PerformanceFilter.tsx
index 2d37d6b3..e656c02b 100644
--- a/src/datasources/perf-ds/PerformanceFilter.tsx
+++ b/src/datasources/perf-ds/PerformanceFilter.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import { SelectableValue } from '@grafana/data'
-import { Segment, SegmentAsync, SegmentInput } from '@grafana/ui'
+import { css } from '@emotion/css'
+import { GrafanaTheme2, SelectableValue } from '@grafana/data'
+import { Segment, SegmentAsync, SegmentInput, useStyles2 } from '@grafana/ui'
 import { SegmentSectionWithIcon } from 'components/SegmentSectionWithIcon'
 import { PerformanceQuery, PerformanceQueryFilterParameter } from './types'
 
@@ -23,9 +24,16 @@ export interface PerformanceFilterProps {
   loadFilters: (query?: string | undefined) => Promise<Array<SelectableValue<FilterResponse>>>
 }
 
+const getStyles = (theme: GrafanaTheme2) => ({
+  spacer: css`
+    margin-top: ${theme.spacing(1)};
+  `,
+})
+
 export const PerformanceFilter: React.FC<PerformanceFilterProps> = ({ query, updateQuery, loadFilters }) => {
   const [filter, setFilter] = useState<SelectableValue<FilterResponse>>(query.filter)
   const [filterState, setFilterState] = useState<Record<string, {value: any, filter: any}>>(query.filterState || {})
+  const s = useStyles2(getStyles)
 
   const updateFilterState = (propertyName: string | undefined, value: {value: any, filter: any}) => {
     if (propertyName !== undefined) {
@@ -51,7 +59,7 @@ export const PerformanceFilter: React.FC<PerformanceFilterProps> = ({ query, upd
 
   return (
     <>
-      <div className='spacer' />
+      <div className={s.spacer} />
       <SegmentSectionWithIcon label='Filter' icon='filter'>
         <SegmentAsync
           value={filter}
@@ -65,7 +73,7 @@ export const PerformanceFilter: React.FC<PerformanceFilterProps> = ({ query, upd
       { filter?.parameter?.map((param: PerformanceQueryFilterParameter, index) => {
         return (
             <>
-              <div className='spacer' />
+              <div className={s.spacer} />
               <SegmentSectionWithIcon label={param.displayName || ''} key={index} >
                 {param.type === 'boolean' &&
                   <Segment
diff --git a/src/datasources/perf-ds/PerformanceStringProperty.tsx b/src/datasources/perf-ds/PerformanceStringProperty.tsx
index d6ef0c7d..7b1d84af 100644
--- a/src/datasources/perf-ds/PerformanceStringProperty.tsx
+++ b/src/datasources/perf-ds/PerformanceStringProperty.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import { SegmentAsync } from '@grafana/ui'
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
+import { SegmentAsync, useStyles2 } from '@grafana/ui'
 import { SegmentSectionWithIcon } from 'components/SegmentSectionWithIcon'
 import { PerformanceStringPropertyProps, PerformanceStringPropertyState } from './types'
 import { isTemplateVariable } from '../../lib/variableHelpers'
@@ -10,6 +12,12 @@ export const defaultPerformanceStringState = {
     stringProperty: { label: '', value: '' }
 }
 
+const getStyles = (theme: GrafanaTheme2) => ({
+    spacer: css`
+        margin-top: ${theme.spacing(1)};
+    `,
+})
+
 export const PerformanceStringProperty: React.FC<PerformanceStringPropertyProps> = ({
     query,
     updateQuery,
@@ -19,6 +27,7 @@ export const PerformanceStringProperty: React.FC<PerformanceStringPropertyProps>
     loadStringPropertiesForState
 }) => {
     const [performanceState, setPerformanceState] = useState<PerformanceStringPropertyState>(query.stringPropertyState || defaultPerformanceStringState)
+    const s = useStyles2(getStyles)
 
     const setPerformanceStateProperty = (propertyName: string, propertyValue: unknown) => {
         setPerformanceState({ ...performanceState, [propertyName]: propertyValue })
@@ -33,7 +42,7 @@ export const PerformanceStringProperty: React.FC<PerformanceStringPropertyProps>
 
     return (
         <>
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Node' icon='tree'>
                 <SegmentAsync
                     value={performanceState?.node}
@@ -44,7 +53,7 @@ export const PerformanceStringProperty: React.FC<PerformanceStringPropertyProps>
                     }}
                 />
             </SegmentSectionWithIcon>
-            <div className='spacer' />
+            <div className={s.spacer} />
 
             {
                 (performanceState?.node?.id  || isTemplateVariable(performanceState?.node)) &&
@@ -60,7 +69,7 @@ export const PerformanceStringProperty: React.FC<PerformanceStringPropertyProps>
                     />
                 </SegmentSectionWithIcon>
             }
-            <div className='spacer' />
+            <div className={s.spacer} />
             {
                 (performanceState?.node?.id || isTemplateVariable(performanceState?.node)) && 
                 (performanceState?.resource?.id || isTemplateVariable(performanceState?.resource)) &&
diff --git a/src/panels/alarm-table/AlarmTableColumnSizes.tsx b/src/panels/alarm-table/AlarmTableColumnSizes.tsx
index 424814df..306fab0b 100644
--- a/src/panels/alarm-table/AlarmTableColumnSizes.tsx
+++ b/src/panels/alarm-table/AlarmTableColumnSizes.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from 'react'
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
 import {
   Collapse,
   Combobox,
@@ -6,7 +8,8 @@ import {
   InlineFieldRow,
   Input,
   Stack,
-  Switch
+  Switch,
+  useStyles2
 } from '@grafana/ui'
 import { FieldDisplay } from 'components/FieldDisplay'
 import { AlarmTableColumnSizeItem, AlarmTableColumnSizeState } from './AlarmTableTypes'
@@ -17,10 +20,17 @@ interface AlarmTableColumnSizeProps {
     context: any
 }
 
+const getStyles = (theme: GrafanaTheme2) => ({
+  spacer: css`
+    margin-top: ${theme.spacing(2)};
+  `,
+})
+
 export const AlarmTableColumnSizes: React.FC<AlarmTableColumnSizeProps> = ({ onChange, columnState, context }) => {
   const [isOpen, setIsOpen] = useState<boolean>(columnState?.active || false)
   const [active, setActive] = useState<boolean>(columnState?.active || false)
   const [columnSizes, setColumnSizes] = useState<AlarmTableColumnSizeItem[]>(columnState?.columnSizes || [])
+  const s = useStyles2(getStyles)
 
   const onAddColumn = (fieldName?: string) => {
     if (fieldName && !columnSizes.some(c => c.fieldName === fieldName)) {
@@ -71,10 +81,6 @@ export const AlarmTableColumnSizes: React.FC<AlarmTableColumnSizeProps> = ({ onC
       <style>
       {
         `
-          .spacer {
-            margin-top: 1em;
-          }
-
           .field-display-width {
             width: 200px;
           }
@@ -94,7 +100,7 @@ export const AlarmTableColumnSizes: React.FC<AlarmTableColumnSizeProps> = ({ onC
         `
       }
       </style>
-      <div className="spacer"></div>
+      <div className={s.spacer}></div>
       <Collapse label="Column Sizes" isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)}>
         <InlineFieldRow>
           <InlineField label='Set column sizes' tooltip={tooltipText}>
@@ -140,7 +146,7 @@ export const AlarmTableColumnSizes: React.FC<AlarmTableColumnSizeProps> = ({ onC
             </Stack>
           </div>
         :
-          <div className='spacer'>
+          <div className={s.spacer}>
             No configured column sizes.
           </div>
         }
diff --git a/src/panels/filter-panel/FilterPanelFilterSelector.tsx b/src/panels/filter-panel/FilterPanelFilterSelector.tsx
index a3eb30bf..f485845a 100644
--- a/src/panels/filter-panel/FilterPanelFilterSelector.tsx
+++ b/src/panels/filter-panel/FilterPanelFilterSelector.tsx
@@ -1,4 +1,6 @@
 import React, { useState } from 'react'
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
 import {
     Button,
     Combobox,
@@ -7,7 +9,8 @@ import {
     InlineFieldRow,
     Label,
     Stack,
-    Switch
+    Switch,
+    useStyles2
 } from '@grafana/ui'
 import { GrafanaDatasource } from 'hooks/useDataSources'
 import { useEntities } from 'hooks/useEntities'
@@ -33,6 +36,14 @@ export const FilterPanelFilterSelector: React.FC<FilterPanelFilterSelectorProps>
     const { propertiesAsArray } = useEntityProperties(entity?.label || '', featuredAttributes, client as any)
     const { getFilterId, getFilterIdFromParts } = useFilterData()
 
+    const getStyles = (theme: GrafanaTheme2) => ({
+        spacer: css`
+            margin-bottom: ${theme.spacing(0.75)};
+        `,
+    })
+
+    const s = useStyles2(getStyles)
+
     const isDisabled = () => {
         if (!entity || !attribute || !datasource || attribute.label === 'Select Attribute') {
             return true
@@ -72,13 +83,6 @@ export const FilterPanelFilterSelector: React.FC<FilterPanelFilterSelectorProps>
 
     return (
         <>
-            <style>
-                {`
-                    .spacer {
-                        margin-bottom: 6px;
-                    }
-                `}
-            </style>
              <Label style={{ marginTop: 12 }}>
                 Filters
             </Label>
@@ -87,7 +91,7 @@ export const FilterPanelFilterSelector: React.FC<FilterPanelFilterSelectorProps>
                 <Combobox placeholder='Attribute' options={getAttributeOptions().map(o => ({ label: o.label, value: o.id } ))} onChange={(e) => setAttribute(e)} value={attribute} />
                 <Button disabled={isDisabled()} onClick={addFilterRow}>Add Filter Row</Button>
             </Stack>
-            <div className='spacer' />
+            <div className={s.spacer} />
             <InlineFieldRow>
                 <InlineField label='Featured attributes'>
                     <div style={{ display: 'flex', alignItems: 'center', height: '32px' }}>