diff --git a/src/webui/components/NoItems/index.js b/src/webui/components/NoItems/index.js
index 67430f2eb..1e48a9139 100644
--- a/src/webui/components/NoItems/index.js
+++ b/src/webui/components/NoItems/index.js
@@ -1,18 +1,16 @@
+/**
+ * @prettier
+ * @flow
+ */
+
 import React from 'react';
-import PropTypes from 'prop-types';
+import { IProps } from './types';
+import { Wrapper } from './styles';
 
-import classes from './noItems.scss';
-
-const NoItems = (props) => {
-    return (
-      <div className={classes.noItems}>
-        <h2>{props.text}</h2>
-      </div>
-    );
-};
-
-NoItems.propTypes = {
-  text: PropTypes.string.isRequired
-};
+const NoItems = ({ text }: IProps) => (
+  <Wrapper>
+    <h2>{text}</h2>
+  </Wrapper>
+);
 
 export default NoItems;
diff --git a/src/webui/components/NoItems/noItems.scss b/src/webui/components/NoItems/noItems.scss
deleted file mode 100644
index 81a2a9ec9..000000000
--- a/src/webui/components/NoItems/noItems.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.noItems {
-  margin: 5em 0;
-}
diff --git a/src/webui/components/NoItems/styles.js b/src/webui/components/NoItems/styles.js
new file mode 100644
index 000000000..1a0085de8
--- /dev/null
+++ b/src/webui/components/NoItems/styles.js
@@ -0,0 +1,12 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+
+export const Wrapper = styled.div`
+  && {
+    margin: 5em 0;
+  }
+`;
diff --git a/src/webui/components/NoItems/types.js b/src/webui/components/NoItems/types.js
new file mode 100644
index 000000000..50115e670
--- /dev/null
+++ b/src/webui/components/NoItems/types.js
@@ -0,0 +1,8 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  text: string;
+}
diff --git a/test/unit/webui/components/__snapshots__/noitems.spec.js.snap b/test/unit/webui/components/__snapshots__/noitems.spec.js.snap
index cfb8d0a5b..56f50160c 100644
--- a/test/unit/webui/components/__snapshots__/noitems.spec.js.snap
+++ b/test/unit/webui/components/__snapshots__/noitems.spec.js.snap
@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<NoItem /> component should set html from props 1`] = `"<div class=\\"noItems\\"><h2>This is a test string</h2></div>"`;
+exports[`<NoItem /> component should load the component in default state 1`] = `"<div class=\\"css-6ghnff e1ggl3im0\\"><h2></h2></div>"`;
+
+exports[`<NoItem /> component should set html from props 1`] = `"<div class=\\"css-6ghnff e1ggl3im0\\"><h2>This is a test string</h2></div>"`;
diff --git a/test/unit/webui/components/noitems.spec.js b/test/unit/webui/components/noitems.spec.js
index 30938a9c0..b3c964bae 100644
--- a/test/unit/webui/components/noitems.spec.js
+++ b/test/unit/webui/components/noitems.spec.js
@@ -3,15 +3,15 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import NoItems from '../../../../src/webui/components/NoItems/index';
 
 console.error = jest.fn();
 
 describe('<NoItem /> component', () => {
-  it('should give error for the required fields', () => {
-    shallow(<NoItems />);
-    expect(console.error).toBeCalled();
+  it('should load the component in default state', () => {
+    const wrapper = mount(<NoItems />);
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should set html from props', () => {