diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
index bb029c46cdf..a4affa49407 100644
--- a/packages/grafana-ui/src/components/Forms/FieldSet.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
@@ -1,7 +1,7 @@
 import React, { FC, HTMLProps } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaTheme } from '@grafana/data';
-import { stylesFactory, useTheme } from '../../themes';
+import { GrafanaTheme2 } from '@grafana/data';
+import { stylesFactory, useTheme2 } from '../../themes';
 import { Legend } from './Legend';
 
 export interface Props extends HTMLProps<HTMLFieldSetElement> {
@@ -11,7 +11,7 @@ export interface Props extends HTMLProps<HTMLFieldSetElement> {
 }
 
 export const FieldSet: FC<Props> = ({ label, children, className, ...rest }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getStyles(theme);
 
   return (
@@ -22,10 +22,10 @@ export const FieldSet: FC<Props> = ({ label, children, className, ...rest }) =>
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     wrapper: css`
-      margin-bottom: ${theme.spacing.formSpacingBase * 4}px;
+      margin-bottom: ${theme.spacing(4)};
 
       &:last-child {
         margin-bottom: 0;