diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js
index 42e868594..fa309d6f6 100644
--- a/src/components/DimensionsPanel/List/DimensionItem.js
+++ b/src/components/DimensionsPanel/List/DimensionItem.js
@@ -9,7 +9,7 @@ import {
 } from '../../../modules/predefinedDimensions.js'
 import OptionsButton from './OptionsButton.js'
 import RecommendedIcon from './RecommendedIcon.js'
-import style from './styles/DimensionItem.module.css'
+import styles from './styles/DimensionItem.style.js'
 
 class DimensionItem extends Component {
     state = { mouseOver: false }
@@ -28,7 +28,7 @@ class DimensionItem extends Component {
     getDimensionIcon = () => {
         const Icon = getPredefinedDimensionProp(this.props.id, 'icon')
         return Icon ? (
-            <Icon className={style.fixedDimensionIcon} />
+            <Icon className="fixedDimensionIcon" />
         ) : (
             <DynamicDimensionIcon className="dynamic-dimension-icon" />
         )
@@ -93,10 +93,10 @@ class DimensionItem extends Component {
                     onMouseLeave={this.onMouseExit}
                     ref={innerRef}
                     className={cx(
-                        style.item,
+                        'item',
                         {
-                            [style.deactivated]: isDeactivated,
-                            [style.selected]: isSelected && !isDeactivated,
+                            deactivated: isDeactivated,
+                            selected: isSelected && !isDeactivated,
                         },
                         className
                     )}
@@ -105,13 +105,13 @@ class DimensionItem extends Component {
                     {...rest}
                 >
                     <div
-                        className={style.label}
+                        className="label"
                         tabIndex={0}
                         data-test={`${dataTest}-button-${id}`}
                     >
-                        <div className={style.iconWrapper}>{Icon}</div>
-                        <div className={style.labelWrapper}>
-                            <span className={style.labelText}>{Label}</span>
+                        <div className="iconWrapper">{Icon}</div>
+                        <div className="labelWrapper">
+                            <span className="labelText">{Label}</span>
                             <RecommendedIcon
                                 isRecommended={isRecommended}
                                 dataTest={`${dataTest}-recommended-icon`}
@@ -120,7 +120,7 @@ class DimensionItem extends Component {
                     </div>
                     {onOptionsClick ? (
                         <div
-                            className={style.optionsWrapper}
+                            className="optionsWrapper"
                             ref={optionsRef}
                             data-test={`${dataTest}-menu-${id}`}
                         >
@@ -136,10 +136,9 @@ class DimensionItem extends Component {
                             ) : null}
                         </div>
                     ) : null}
-                    {isLocked && (
-                        <div className={style.lockWrapper}>{LockIcon}</div>
-                    )}
+                    {isLocked && <div className="lockWrapper">{LockIcon}</div>}
                 </li>
+                <style jsx>{styles}</style>
             </>
         )
     }
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
deleted file mode 100644
index 88dc05214..000000000
--- a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.item {
-    color: var(--colors-grey900);
-    background-color: transparent;
-    fill: var(--colors-grey800);
-    display: flex;
-    outline: none;
-    justify-content: space-between;
-    padding: 0 0 0 4px;
-    margin: 0;
-    border-radius: 2px;
-    cursor: pointer;
-    min-height: 22px;
-    border: 1px solid transparent;
-}
-
-.item:not(.deactivated):not(.dragging):hover {
-    background-color: var(--colors-grey100);
-    border-color: var(--colors-grey400);
-}
-
-.label {
-    display: flex;
-    align-items: center;
-}
-.labelWrapper {
-    display: flex;
-    align-items: center;
-}
-.labelText {
-    font-size: 13px;
-    line-height: 15px;
-    margin-top: 1px;
-}
-
-.iconWrapper {
-    width: 16px;
-    height: 16px;
-    margin: 2px 4px 0 0;
-    flex: 0 0 auto;
-    align-self: flex-start;
-}
-
-.item.deactivated {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.item.selected {
-    background-color: var(--colors-teal100);
-    border: 1px solid var(--colors-teal200);
-    color: var(--colors-teal900);
-    fill: var(--colors-teal800);
-    font-weight: 400;
-}
-.item.selected:not(.deactivated):hover {
-    background: #cdeae8;
-    border-color: #93c4bf;
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.optionsWrapper {
-    width: 20px;
-    height: 20px;
-}
-
-.lockWrapper svg path {
-    fill: var(--colors-grey800);
-}
-
-.lockWrapper {
-    background: var(--colors-grey300);
-    height: 20px;
-    padding: 0 1px 0 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.item.selected .lockWrapper {
-    background: #cbe7e5;
-}
-.item.selected .lockWrapper svg path {
-    fill: var(--colors-teal900);
-}
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
new file mode 100644
index 000000000..a4e9aed8f
--- /dev/null
+++ b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
@@ -0,0 +1,88 @@
+import { colors } from '@dhis2/ui'
+import css from 'styled-jsx/css'
+
+export default css`
+    .item {
+        color: ${colors.grey900};
+        background-color: transparent;
+        fill: ${colors.grey800};
+        display: flex;
+        outline: none;
+        justify-content: space-between;
+        padding: 0 0 0 4px;
+        margin: 0;
+        border-radius: 2px;
+        cursor: pointer;
+        min-height: 22px;
+        border: 1px solid transparent;
+    }
+
+    .item:not(.deactivated):not(.dragging):hover {
+        background-color: ${colors.grey100};
+        border-color: ${colors.grey400};
+    }
+
+    .label {
+        display: flex;
+        align-items: center;
+    }
+    .labelWrapper {
+        display: flex;
+        align-items: center;
+    }
+    .labelText {
+        font-size: 13px;
+        line-height: 15px;
+        margin-top: 1px;
+    }
+
+    .iconWrapper {
+        width: 16px;
+        height: 16px;
+        margin: 2px 4px 0 0;
+        flex: 0 0 auto;
+        align-self: flex-start;
+    }
+
+    .item.deactivated {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    .item.selected {
+        background-color: ${colors.teal100};
+        border: 1px solid ${colors.teal200};
+        color: ${colors.teal900};
+        fill: ${colors.teal800};
+        font-weight: 400;
+    }
+    .item.selected:not(.deactivated):hover {
+        background: #cdeae8;
+        border-color: #93c4bf;
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    }
+
+    .optionsWrapper {
+        width: 20px;
+        height: 20px;
+    }
+
+    .lockWrapper svg path {
+        fill: ${colors.grey800};
+    }
+
+    .lockWrapper {
+        background: ${colors.grey300};
+        height: 20px;
+        padding: 0 1px 0 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .item.selected .lockWrapper {
+        background: #cbe7e5;
+    }
+    .item.selected .lockWrapper svg path {
+        fill: ${colors.teal900};
+    }
+`