diff --git a/src/ConfigEditor.tsx b/src/ConfigEditor.tsx
index 194b87a..eba3249 100644
--- a/src/ConfigEditor.tsx
+++ b/src/ConfigEditor.tsx
@@ -1,10 +1,8 @@
 import React, { ChangeEvent } from 'react';
-import { LegacyForms } from '@grafana/ui';
+import { InlineField, SecretInput } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { MyDataSourceOptions, MySecureJsonData } from './shared/types';
 
-const { SecretFormField } = LegacyForms;
-
 interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions, MySecureJsonData> {}
 
 export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }) => {
@@ -34,19 +32,15 @@ export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }) => {
   };
 
   return (
-    <div className="gf-form-group">
-      <div className="gf-form">
-        <SecretFormField
-          isConfigured={secureJsonFields && secureJsonFields.apiToken}
-          value={secureJsonData?.apiToken || ''}
-          label="API Token"
-          placeholder="Your Netdata Cloud API Token"
-          labelWidth={6}
-          inputWidth={20}
-          onReset={onResetAPIToken}
-          onChange={onAPITokenChange}
-        />
-      </div>
-    </div>
+    <InlineField label="API Token" labelWidth={20} tooltip="Your Netdata Cloud API Token">
+      <SecretInput
+        isConfigured={secureJsonFields && secureJsonFields.apiToken}
+        value={secureJsonData?.apiToken || ''}
+        placeholder="Your Netdata Cloud API Token"
+        width={40}
+        onReset={onResetAPIToken}
+        onChange={onAPITokenChange}
+      />
+    </InlineField>
   );
 };
diff --git a/src/QueryEditor.tsx b/src/QueryEditor.tsx
index a8dd98e..e7f1a9c 100644
--- a/src/QueryEditor.tsx
+++ b/src/QueryEditor.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { Input, LegacyForms, Select } from '@grafana/ui';
+import { Input, InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
+import { css } from '@emotion/css';
 import { DataSource } from './datasource';
 import { MyDataSourceOptions, MyQuery } from './shared/types';
 import { useFetchSpaces } from 'shared/hooks/useFetchSpaces';
-import './styles.css';
 import { useFetchRooms } from 'shared/hooks/useFetchRooms';
 import { useFetchContexts } from 'shared/hooks/useFetchContexts';
 import { useFetchNodes } from 'shared/hooks/useFetchNodes';
@@ -15,9 +15,14 @@ import PubSub from 'pubsub-js';
 
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
-const { FormField } = LegacyForms;
+const getStyles = () => ({
+  mt: css`
+    margin-top: 8px;
+  `,
+});
 
 const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRunQuery }) => {
+  const styles = useStyles2(getStyles);
   const { baseUrl } = datasource;
   const from = range!.from.valueOf();
   const to = range!.to.valueOf();
@@ -266,143 +271,117 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
 
   return (
     <>
-      <div className="flex mt">
-        <FormField
-          label="Space*"
-          inputEl={
-            <Select options={spaces} value={selectedSpace} onChange={onSpaceIdChange} allowCustomValue isSearchable />
-          }
-        />
-
-        <FormField
-          label="Room*"
-          inputEl={
-            <Select options={rooms} value={selectedRoom} onChange={onRoomIdChange} allowCustomValue isSearchable />
-          }
-        />
-      </div>
-
-      <div className="mt">
-        <FormField
-          label="Nodes"
-          tooltip="No selected Nodes means 'All Nodes' from the Room"
-          inputEl={
-            <Select
-              options={nodeList}
-              value={selectedNodes}
-              onChange={onNodesChange}
-              allowCustomValue
-              isSearchable
-              isMulti
-            />
-          }
-        />
-      </div>
-      <div className="flex mt">
-        <FormField
-          label="Context*"
-          inputEl={
-            <Select
-              options={contexts}
-              value={selectedContext}
-              onChange={onContextIdChange}
-              allowCustomValue
-              isSearchable
-            />
-          }
-        />
-
-        <FormField
-          label="Dimensions"
-          inputEl={
-            <Select
-              options={allDimensions}
-              value={selectedDimensions}
-              onChange={onDimensionsChange}
-              allowCustomValue
-              isSearchable
-              isMulti
-            />
-          }
-        />
-      </div>
-
-      <div className="flex mt">
-        <FormField
-          label="Grouping by*"
-          inputEl={
-            <Select
-              options={groupingByList}
-              value={selectedGroupBy}
-              onChange={onGroupByChange}
-              allowCustomValue
-              isSearchable
-            />
-          }
-        />
-        <FormField
+      <InlineFieldRow className={styles.mt}>
+        <InlineField label="Space*" grow>
+          <Select options={spaces} value={selectedSpace} onChange={onSpaceIdChange} allowCustomValue isSearchable />
+        </InlineField>
+
+        <InlineField label="Room*" grow>
+          <Select options={rooms} value={selectedRoom} onChange={onRoomIdChange} allowCustomValue isSearchable />
+        </InlineField>
+      </InlineFieldRow>
+
+      <InlineFieldRow className={styles.mt}>
+        <InlineField label="Nodes" tooltip="No selected Nodes means 'All Nodes' from the Room" grow>
+          <Select
+            options={nodeList}
+            value={selectedNodes}
+            onChange={onNodesChange}
+            allowCustomValue
+            isSearchable
+            isMulti
+          />
+        </InlineField>
+      </InlineFieldRow>
+
+      <InlineFieldRow className={styles.mt}>
+        <InlineField label="Context*" grow>
+          <Select
+            options={contexts}
+            value={selectedContext}
+            onChange={onContextIdChange}
+            allowCustomValue
+            isSearchable
+          />
+        </InlineField>
+
+        <InlineField label="Dimensions" grow>
+          <Select
+            options={allDimensions}
+            value={selectedDimensions}
+            onChange={onDimensionsChange}
+            allowCustomValue
+            isSearchable
+            isMulti
+          />
+        </InlineField>
+      </InlineFieldRow>
+
+      <InlineFieldRow className={styles.mt}>
+        <InlineField label="Grouping by*" grow>
+          <Select
+            options={groupingByList}
+            value={selectedGroupBy}
+            onChange={onGroupByChange}
+            allowCustomValue
+            isSearchable
+          />
+        </InlineField>
+
+        <InlineField
           label="Grouping function*"
           tooltip="The aggregation function to be applied when multiple data sources exists for one node (multiple instances). This is disabled when not applicable."
-          labelWidth={10}
-          inputEl={
-            <Select
-              disabled={!isGroupFunctionAvailable()}
-              options={Methods}
-              value={selectedMethod}
-              onChange={onMethodChange}
-              allowCustomValue
-              isSearchable
-            />
-          }
-        />
-        <FormField
-          label="Aggregation function*"
-          tooltip="Aggregation function over time"
-          labelWidth={11}
-          inputEl={
-            <Select
-              options={Aggreagations}
-              value={selectedAggregations}
-              onChange={onAggreagationChange}
-              allowCustomValue
-              isSearchable
-            />
-          }
-        />
-      </div>
-
-      <div className="flex mt">
-        <FormField
-          label="Filter by"
-          inputEl={
-            <Select
-              options={filterList}
-              value={selectedFilter}
-              onChange={onFilterByChange}
-              allowCustomValue
-              isSearchable
-            />
-          }
-        />
-        <FormField
-          label="Value"
-          labelWidth={8}
-          inputEl={
-            <Select
-              options={filterByValues}
-              value={selectedFilterValue}
-              onChange={onFilterValueChange}
-              allowCustomValue
-              isSearchable
-            />
-          }
-        />
-      </div>
-
-      <div className="flex mt">
-        <FormField label="Unit" labelWidth={8} inputEl={<Input value={units} disabled />} />
+          grow
+        >
+          <Select
+            disabled={!isGroupFunctionAvailable()}
+            options={Methods}
+            value={selectedMethod}
+            onChange={onMethodChange}
+            allowCustomValue
+            isSearchable
+          />
+        </InlineField>
+
+        <InlineField label="Aggregation function*" tooltip="Aggregation function over time" grow>
+          <Select
+            options={Aggreagations}
+            value={selectedAggregations}
+            onChange={onAggreagationChange}
+            allowCustomValue
+            isSearchable
+          />
+        </InlineField>
+      </InlineFieldRow>
+
+      <InlineFieldRow className={styles.mt}>
+        <InlineField label="Filter by" grow>
+          <Select
+            options={filterList}
+            value={selectedFilter}
+            onChange={onFilterByChange}
+            allowCustomValue
+            isSearchable
+          />
+        </InlineField>
+
+        <InlineField label="Value" grow>
+          <Select
+            options={filterByValues}
+            value={selectedFilterValue}
+            onChange={onFilterValueChange}
+            allowCustomValue
+            isSearchable
+          />
+        </InlineField>
+      </InlineFieldRow>
+
+      <InlineFieldRow className={styles.mt}>
+        <InlineField label="Unit" grow>
+          <Input value={units} disabled />
+        </InlineField>
         <div />
-      </div>
+      </InlineFieldRow>
     </>
   );
 };
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index 0b5a333..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.mt {
-    margin-top: 1em;
-}
-
-.flex {
-    display: flex;
-    justify-content: space-between;
-}
-.flex > * {
-    flex: 1;
-}
-.flex .gf-form-input {
-    width: 100% !important;
-}
diff --git a/yarn.lock b/yarn.lock
index edee5db..f476e81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6621,7 +6621,7 @@ react-custom-scrollbars-2@4.5.0:
     prop-types "^15.5.10"
     raf "^3.1.0"
 
-"react-data-grid@github:grafana/react-data-grid#a922856b5ede21d55db3fdffb6d38dc76bdc7c58":
+react-data-grid@grafana/react-data-grid#a922856b5ede21d55db3fdffb6d38dc76bdc7c58:
   version "7.0.0-beta.56"
   resolved "https://codeload.github.com/grafana/react-data-grid/tar.gz/a922856b5ede21d55db3fdffb6d38dc76bdc7c58"
   dependencies:
@@ -7460,8 +7460,16 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7543,7 +7551,14 @@ string_decoder@0.10:
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
   integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8249,8 +8264,16 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==