diff --git a/src/components/ControlBar/DashboardItemChip.js b/src/components/ControlBar/DashboardItemChip.js
index 32f6d60b1..cae0be174 100644
--- a/src/components/ControlBar/DashboardItemChip.js
+++ b/src/components/ControlBar/DashboardItemChip.js
@@ -17,7 +17,6 @@ export const DashboardItemChip = ({
 }) => {
     const chipProps = {
         selected,
-        className: classes.chip,
     };
 
     if (starred) {
diff --git a/src/components/ControlBar/Filter.js b/src/components/ControlBar/Filter.js
index e0832ed6f..ac17d0631 100644
--- a/src/components/ControlBar/Filter.js
+++ b/src/components/ControlBar/Filter.js
@@ -1,14 +1,28 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core/styles';
 import InputField from '@material-ui/core/Input';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import SearchIcon from '@material-ui/icons/Search';
+import { colors } from '@dhis2/ui-core';
 
 import ClearButton from './ClearButton';
 import { DEFAULT_STATE_DASHBOARDS_FILTER_NAME } from '../../reducers/dashboardsFilter';
 
-import classes from './styles/Filter.module.css';
+const styles = {
+    filterField: {
+        fontSize: '14px',
+        width: '200px',
+        height: '30px',
+        top: '-4px',
+    },
+    searchIcon: {
+        color: colors.grey700,
+        width: '20px',
+        height: '20px',
+    },
+};
 
 export const KEYCODE_ENTER = 13;
 export const KEYCODE_ESCAPE = 27;
@@ -48,7 +62,7 @@ export class Filter extends Component {
     };
 
     render() {
-        const { name, onChangeName } = this.props;
+        const { classes, name, onChangeName } = this.props;
 
         const startAdornment = (
             <InputAdornment position="start">
@@ -78,6 +92,7 @@ export class Filter extends Component {
 }
 
 Filter.propTypes = {
+    classes: PropTypes.object,
     name: PropTypes.string,
     onChangeName: PropTypes.func,
     onKeypressEnter: PropTypes.func,
@@ -88,4 +103,4 @@ Filter.defaultProps = {
     onChangeName: Function.prototype,
 };
 
-export default Filter;
+export default withStyles(styles)(Filter);
diff --git a/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap
index e6cb24863..fd82bacbb 100644
--- a/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap
+++ b/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap
@@ -48,9 +48,7 @@ ShallowWrapper {
             >
               <AddCircleIcon />
             </ForwardRef>
-            <Filter
-              name=""
-              onChangeName={[Function]}
+            <WithStyles(Filter)
               onKeypressEnter={[Function]}
             />
           </div>
@@ -91,9 +89,7 @@ ShallowWrapper {
               >
                 <AddCircleIcon />
               </ForwardRef>
-              <Filter
-                name=""
-                onChangeName={[Function]}
+              <WithStyles(Filter)
                 onKeypressEnter={[Function]}
               />
             </div>,
@@ -127,9 +123,7 @@ ShallowWrapper {
                 >
                   <AddCircleIcon />
                 </ForwardRef>,
-                <Filter
-                  name=""
-                  onChangeName={[Function]}
+                <WithStyles(Filter)
                   onKeypressEnter={[Function]}
                 />,
               ],
@@ -180,8 +174,8 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "name": "",
-                  "onChangeName": [Function],
+                  "name": undefined,
+                  "onChangeName": undefined,
                   "onKeypressEnter": [Function],
                 },
                 "ref": null,
@@ -243,9 +237,7 @@ ShallowWrapper {
               >
                 <AddCircleIcon />
               </ForwardRef>
-              <Filter
-                name=""
-                onChangeName={[Function]}
+              <WithStyles(Filter)
                 onKeypressEnter={[Function]}
               />
             </div>
@@ -286,9 +278,7 @@ ShallowWrapper {
                 >
                   <AddCircleIcon />
                 </ForwardRef>
-                <Filter
-                  name=""
-                  onChangeName={[Function]}
+                <WithStyles(Filter)
                   onKeypressEnter={[Function]}
                 />
               </div>,
@@ -322,9 +312,7 @@ ShallowWrapper {
                   >
                     <AddCircleIcon />
                   </ForwardRef>,
-                  <Filter
-                    name=""
-                    onChangeName={[Function]}
+                  <WithStyles(Filter)
                     onKeypressEnter={[Function]}
                   />,
                 ],
@@ -375,8 +363,8 @@ ShallowWrapper {
                   "key": undefined,
                   "nodeType": "class",
                   "props": Object {
-                    "name": "",
-                    "onChangeName": [Function],
+                    "name": undefined,
+                    "onChangeName": undefined,
                     "onKeypressEnter": [Function],
                   },
                   "ref": null,
@@ -498,9 +486,7 @@ ShallowWrapper {
             >
               <AddCircleIcon />
             </ForwardRef>
-            <Filter
-              name=""
-              onChangeName={[Function]}
+            <WithStyles(Filter)
               onKeypressEnter={[Function]}
             />
           </div>
@@ -541,9 +527,7 @@ ShallowWrapper {
               >
                 <AddCircleIcon />
               </ForwardRef>
-              <Filter
-                name=""
-                onChangeName={[Function]}
+              <WithStyles(Filter)
                 onKeypressEnter={[Function]}
               />
             </div>,
@@ -577,9 +561,7 @@ ShallowWrapper {
                 >
                   <AddCircleIcon />
                 </ForwardRef>,
-                <Filter
-                  name=""
-                  onChangeName={[Function]}
+                <WithStyles(Filter)
                   onKeypressEnter={[Function]}
                 />,
               ],
@@ -630,8 +612,8 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "name": "",
-                  "onChangeName": [Function],
+                  "name": undefined,
+                  "onChangeName": undefined,
                   "onKeypressEnter": [Function],
                 },
                 "ref": null,
@@ -693,9 +675,7 @@ ShallowWrapper {
               >
                 <AddCircleIcon />
               </ForwardRef>
-              <Filter
-                name=""
-                onChangeName={[Function]}
+              <WithStyles(Filter)
                 onKeypressEnter={[Function]}
               />
             </div>
@@ -736,9 +716,7 @@ ShallowWrapper {
                 >
                   <AddCircleIcon />
                 </ForwardRef>
-                <Filter
-                  name=""
-                  onChangeName={[Function]}
+                <WithStyles(Filter)
                   onKeypressEnter={[Function]}
                 />
               </div>,
@@ -772,9 +750,7 @@ ShallowWrapper {
                   >
                     <AddCircleIcon />
                   </ForwardRef>,
-                  <Filter
-                    name=""
-                    onChangeName={[Function]}
+                  <WithStyles(Filter)
                     onKeypressEnter={[Function]}
                   />,
                 ],
@@ -825,8 +801,8 @@ ShallowWrapper {
                   "key": undefined,
                   "nodeType": "class",
                   "props": Object {
-                    "name": "",
-                    "onChangeName": [Function],
+                    "name": undefined,
+                    "onChangeName": undefined,
                     "onKeypressEnter": [Function],
                   },
                   "ref": null,
@@ -948,9 +924,7 @@ ShallowWrapper {
             >
               <AddCircleIcon />
             </ForwardRef>
-            <Filter
-              name=""
-              onChangeName={[Function]}
+            <WithStyles(Filter)
               onKeypressEnter={[Function]}
             />
           </div>
@@ -991,9 +965,7 @@ ShallowWrapper {
               >
                 <AddCircleIcon />
               </ForwardRef>
-              <Filter
-                name=""
-                onChangeName={[Function]}
+              <WithStyles(Filter)
                 onKeypressEnter={[Function]}
               />
             </div>,
@@ -1027,9 +999,7 @@ ShallowWrapper {
                 >
                   <AddCircleIcon />
                 </ForwardRef>,
-                <Filter
-                  name=""
-                  onChangeName={[Function]}
+                <WithStyles(Filter)
                   onKeypressEnter={[Function]}
                 />,
               ],
@@ -1080,8 +1050,8 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "name": "",
-                  "onChangeName": [Function],
+                  "name": undefined,
+                  "onChangeName": undefined,
                   "onKeypressEnter": [Function],
                 },
                 "ref": null,
@@ -1143,9 +1113,7 @@ ShallowWrapper {
               >
                 <AddCircleIcon />
               </ForwardRef>
-              <Filter
-                name=""
-                onChangeName={[Function]}
+              <WithStyles(Filter)
                 onKeypressEnter={[Function]}
               />
             </div>
@@ -1186,9 +1154,7 @@ ShallowWrapper {
                 >
                   <AddCircleIcon />
                 </ForwardRef>
-                <Filter
-                  name=""
-                  onChangeName={[Function]}
+                <WithStyles(Filter)
                   onKeypressEnter={[Function]}
                 />
               </div>,
@@ -1222,9 +1188,7 @@ ShallowWrapper {
                   >
                     <AddCircleIcon />
                   </ForwardRef>,
-                  <Filter
-                    name=""
-                    onChangeName={[Function]}
+                  <WithStyles(Filter)
                     onKeypressEnter={[Function]}
                   />,
                 ],
@@ -1275,8 +1239,8 @@ ShallowWrapper {
                   "key": undefined,
                   "nodeType": "class",
                   "props": Object {
-                    "name": "",
-                    "onChangeName": [Function],
+                    "name": undefined,
+                    "onChangeName": undefined,
                     "onKeypressEnter": [Function],
                   },
                   "ref": null,
@@ -1412,9 +1376,7 @@ ShallowWrapper {
             >
               <AddCircleIcon />
             </ForwardRef>
-            <Filter
-              name=""
-              onChangeName={[Function]}
+            <WithStyles(Filter)
               onKeypressEnter={[Function]}
             />
           </div>
@@ -1467,9 +1429,7 @@ ShallowWrapper {
               >
                 <AddCircleIcon />
               </ForwardRef>
-              <Filter
-                name=""
-                onChangeName={[Function]}
+              <WithStyles(Filter)
                 onKeypressEnter={[Function]}
               />
             </div>,
@@ -1516,9 +1476,7 @@ ShallowWrapper {
                 >
                   <AddCircleIcon />
                 </ForwardRef>,
-                <Filter
-                  name=""
-                  onChangeName={[Function]}
+                <WithStyles(Filter)
                   onKeypressEnter={[Function]}
                 />,
               ],
@@ -1569,8 +1527,8 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "name": "",
-                  "onChangeName": [Function],
+                  "name": undefined,
+                  "onChangeName": undefined,
                   "onKeypressEnter": [Function],
                 },
                 "ref": null,
@@ -1660,9 +1618,7 @@ ShallowWrapper {
               >
                 <AddCircleIcon />
               </ForwardRef>
-              <Filter
-                name=""
-                onChangeName={[Function]}
+              <WithStyles(Filter)
                 onKeypressEnter={[Function]}
               />
             </div>
@@ -1715,9 +1671,7 @@ ShallowWrapper {
                 >
                   <AddCircleIcon />
                 </ForwardRef>
-                <Filter
-                  name=""
-                  onChangeName={[Function]}
+                <WithStyles(Filter)
                   onKeypressEnter={[Function]}
                 />
               </div>,
@@ -1764,9 +1718,7 @@ ShallowWrapper {
                   >
                     <AddCircleIcon />
                   </ForwardRef>,
-                  <Filter
-                    name=""
-                    onChangeName={[Function]}
+                  <WithStyles(Filter)
                     onKeypressEnter={[Function]}
                   />,
                 ],
@@ -1817,8 +1769,8 @@ ShallowWrapper {
                   "key": undefined,
                   "nodeType": "class",
                   "props": Object {
-                    "name": "",
-                    "onChangeName": [Function],
+                    "name": undefined,
+                    "onChangeName": undefined,
                     "onKeypressEnter": [Function],
                   },
                   "ref": null,
diff --git a/src/components/ControlBar/__tests__/__snapshots__/Filter.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/Filter.spec.js.snap
index 0fa3040e3..6c452f7a5 100644
--- a/src/components/ControlBar/__tests__/__snapshots__/Filter.spec.js.snap
+++ b/src/components/ControlBar/__tests__/__snapshots__/Filter.spec.js.snap
@@ -22,7 +22,7 @@ ShallowWrapper {
     "key": undefined,
     "nodeType": "class",
     "props": Object {
-      "className": "filterField",
+      "className": undefined,
       "endAdornment": <WithStyles(WithFormControlContext(InputAdornment))
         position="end"
       >
@@ -36,9 +36,7 @@ ShallowWrapper {
       "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
         position="start"
       >
-        <UNDEFINED
-          className="searchIcon"
-        />
+        <UNDEFINED />
       </WithStyles(WithFormControlContext(InputAdornment))>,
       "value": "",
     },
@@ -52,7 +50,7 @@ ShallowWrapper {
       "key": undefined,
       "nodeType": "class",
       "props": Object {
-        "className": "filterField",
+        "className": undefined,
         "endAdornment": <WithStyles(WithFormControlContext(InputAdornment))
           position="end"
         >
@@ -66,9 +64,7 @@ ShallowWrapper {
         "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
           position="start"
         >
-          <UNDEFINED
-            className="searchIcon"
-          />
+          <UNDEFINED />
         </WithStyles(WithFormControlContext(InputAdornment))>,
         "value": "",
       },
diff --git a/src/components/ControlBar/styles/DashboardItemChip.module.css b/src/components/ControlBar/styles/DashboardItemChip.module.css
index c84bb72a5..8bfae7b39 100644
--- a/src/components/ControlBar/styles/DashboardItemChip.module.css
+++ b/src/components/ControlBar/styles/DashboardItemChip.module.css
@@ -1,8 +1,4 @@
-.chip {
-    margin: 3px;
-}
 .link {
-    color: var(--colors-grey600);
     display: inline-block;
     text-decoration: none;
     vertical-align: top;
diff --git a/src/components/ControlBar/styles/Filter.module.css b/src/components/ControlBar/styles/Filter.module.css
deleted file mode 100644
index 201f91da6..000000000
--- a/src/components/ControlBar/styles/Filter.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.filterField {
-    font-size: 14px;
-    width: 200px;
-    height: 30px;
-    top: -4px;
-}
-.searchIcon {
-    color: var(--colors-grey700);
-    width: 20px;
-    height: 20px;
-}
diff --git a/src/components/ControlBar/styles/ShowMoreButton.module.css b/src/components/ControlBar/styles/ShowMoreButton.module.css
index a3b67aacc..5a51028dd 100644
--- a/src/components/ControlBar/styles/ShowMoreButton.module.css
+++ b/src/components/ControlBar/styles/ShowMoreButton.module.css
@@ -1,8 +1,8 @@
 .showMore {
     color: var(--colors-grey700);
     cursor: pointer;
-    font-size: 11;
-    padding-top: 5;
+    font-size: 11px;
+    padding-top: 5px;
 }
 
 .showMore:hover {
@@ -10,8 +10,8 @@
 }
 
 .disabled {
-    padding-top: 5;
+    padding-top: 5px;
     color: var(--colors-grey500);
-    font-size: 11;
+    font-size: 11px;
     cursor: not-allowed;
 }
diff --git a/src/components/Item/VisualizationItem/styles/LoadingMask.module.css b/src/components/Item/VisualizationItem/styles/LoadingMask.module.css
index 50769d7c6..8a9d1c1f8 100644
--- a/src/components/Item/VisualizationItem/styles/LoadingMask.module.css
+++ b/src/components/Item/VisualizationItem/styles/LoadingMask.module.css
@@ -1,6 +1,6 @@
 .progress {
-    margin: 16;
-    max-width: 200;
+    margin: var(--spacers-dp16);
+    max-width: 200px;
     text-align: center;
     align-self: center;
 }
diff --git a/src/components/TitleBar/styles/ViewTitleBar.module.css b/src/components/TitleBar/styles/ViewTitleBar.module.css
index 08d0ee2fc..b796e5d03 100644
--- a/src/components/TitleBar/styles/ViewTitleBar.module.css
+++ b/src/components/TitleBar/styles/ViewTitleBar.module.css
@@ -14,8 +14,8 @@
     align-items: flex-start;
 }
 .titleBarIcon {
-    margin-left: 5;
+    margin-left: 5px;
     position: relative;
-    top: 1;
+    top: 1px;
     cursor: pointer;
 }