diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx
index 5c6c501a530..f8248ebe731 100644
--- a/packages/compass-components/src/components/accordion.tsx
+++ b/packages/compass-components/src/components/accordion.tsx
@@ -32,13 +32,13 @@ const buttonLightThemeStyles = css({
 const buttonDarkThemeStyles = css({
   color: uiColors.white,
 });
-const containerStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-});
 const buttonIconStyles = css({
   marginRight: spacing[1],
 });
+const buttonTextStyles = css({
+  alignItems: 'baseline',
+  display: 'flex',
+});
 const buttonHintStyles = css({
   margin: 0,
   marginLeft: spacing[1],
@@ -61,31 +61,31 @@ function UnthemedAccordion({
   const labelId = useId('label-');
   return (
     <>
-      <div className={containerStyles}>
-        <button
-          data-testid={props['data-testid']}
-          className={cx(
-            darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
-            buttonStyles
-          )}
-          id={labelId}
-          type="button"
-          aria-expanded={open ? 'true' : 'false'}
-          aria-controls={regionId}
-          onClick={() => {
-            setOpen((currentOpen) => !currentOpen);
-          }}
-        >
-          <Icon
-            className={buttonIconStyles}
-            glyph={open ? 'ChevronDown' : 'ChevronRight'}
-          />
+      <button
+        data-testid={props['data-testid']}
+        className={cx(
+          darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
+          buttonStyles
+        )}
+        id={labelId}
+        type="button"
+        aria-expanded={open ? 'true' : 'false'}
+        aria-controls={regionId}
+        onClick={() => {
+          setOpen((currentOpen) => !currentOpen);
+        }}
+      >
+        <Icon
+          className={buttonIconStyles}
+          glyph={open ? 'ChevronDown' : 'ChevronRight'}
+        />
+        <div className={buttonTextStyles}>
           {text}
           {hintText && (
             <Description className={buttonHintStyles}>{hintText}</Description>
           )}
-        </button>
-      </div>
+        </div>
+      </button>
 
       {open && (
         <div role="region" aria-labelledby={labelId} id={regionId}>
diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
index 373531ecaf7..72f421ca9be 100644
--- a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
+++ b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
@@ -1,13 +1,19 @@
+import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, SelectSize } from '@mongodb-js/compass-components';
-import _ from 'lodash';
+import { css } from '@mongodb-js/compass-components';
+
+const optionsSelectDropdownStyles = css({
+  zIndex: 1,
+  'button:focus, button:focus-within': {
+    zIndex: 20
+  }
+});
 
 import COLLATION_OPTIONS from '../../constants/collation';
 import FieldSet from '../field-set/field-set';
 
-import styles from './collation-fields.module.less';
-
 function CollationOptions(values) {
   const unifiedValues = values.map((elem) => ({
     value: (typeof elem === 'object') ? elem.value : elem,
@@ -57,7 +63,7 @@ function CollationFields({
       <FieldSet key={element.field}>
         <Select
           id={`collation-field-${element.field}`}
-          className={styles['options-select-dropdown']}
+          className={optionsSelectDropdownStyles}
           label={element.field}
           name={element.field}
           placeholder={`Select a value${
diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.module.less b/packages/databases-collections/src/components/collation-fields/collation-fields.module.less
deleted file mode 100644
index ea04cbe37cc..00000000000
--- a/packages/databases-collections/src/components/collation-fields/collation-fields.module.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.options-select-dropdown {
-  z-index: 1;
-
-  button:focus, button:focus-within {
-    z-index: 20;
-  }
-}
\ No newline at end of file
diff --git a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
index 54396b21807..e42530f08cb 100644
--- a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TextInput } from '@mongodb-js/compass-components';
+import { spacing, css } from '@mongodb-js/compass-components';
 
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 import FieldSet from '../field-set/field-set';
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
index 22652c3ab92..c536b789f9b 100644
--- a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
@@ -1,11 +1,17 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, TextInput } from '@mongodb-js/compass-components';
+import { spacing, css } from '@mongodb-js/compass-components';
 
 import FieldSet from '../field-set/field-set';
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 
-import styles from './time-series-fields.module.less';
+const optionsSelectDropdownStyles = css({
+  zIndex: 1,
+  'button:focus, button:focus-within': {
+    zIndex: 20
+  }
+});
 
 const TIME_FIELD_INPUT_DESCRIPTION = 'Specify which field should be used ' +
   'as timeField for the time-series collection. ' +
@@ -90,7 +96,7 @@ function TimeSeriesFields({
       <FieldSet>
         <Select
           id="timeSeries-granularity"
-          className={styles['options-select-dropdown']}
+          className={optionsSelectDropdownStyles}
           label="granularity"
           name="timeSeries.granularity"
           placeholder="Select a value [optional]"
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less b/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less
deleted file mode 100644
index ea04cbe37cc..00000000000
--- a/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.options-select-dropdown {
-  z-index: 1;
-
-  button:focus, button:focus-within {
-    z-index: 20;
-  }
-}
\ No newline at end of file
diff --git a/packages/databases-collections/src/components/field-set/field-set.module.less b/packages/databases-collections/src/components/field-set/field-set.module.less
index d21c87ebf90..6e83e991a4d 100644
--- a/packages/databases-collections/src/components/field-set/field-set.module.less
+++ b/packages/databases-collections/src/components/field-set/field-set.module.less
@@ -1,3 +1,7 @@
 .field-set {
   margin: 16px 0px;
+
+  fieldset {
+    padding-left: 24px;
+  }
 }