diff --git a/gsa/package.json b/gsa/package.json
index 4190f46b9a..dacb4b9752 100644
--- a/gsa/package.json
+++ b/gsa/package.json
@@ -37,7 +37,6 @@
     "downshift": "^1.31.6",
     "fast-deep-equal": "^1.1.0",
     "glamor": "^2.20.40",
-    "glamorous": "^4.13.1",
     "history": "^4.7.2",
     "hoist-non-react-statics": "^2.5.5",
     "i18next": "^11.3.3",
diff --git a/gsa/src/web/stories/chart/bar.js b/gsa/src/web/stories/chart/bar.js
index 26c3e26951..7b1261f509 100644
--- a/gsa/src/web/stories/chart/bar.js
+++ b/gsa/src/web/stories/chart/bar.js
@@ -22,12 +22,16 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
 import BarChart from 'web/components/chart/bar';
 
+const Div = styled.div`
+  color: ${props => props.color}
+`;
+
 const bardata = [{
   label: 'Foo',
   x: 'foo',
diff --git a/gsa/src/web/stories/chart/legend.js b/gsa/src/web/stories/chart/legend.js
index ece772f1d0..defe286c94 100644
--- a/gsa/src/web/stories/chart/legend.js
+++ b/gsa/src/web/stories/chart/legend.js
@@ -22,12 +22,17 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
 import Legend, {Label, Item, Line} from 'web/components/chart/legend';
 
+const Div = styled.div`
+  display: flex;
+  margin: ${props => props.margin};
+`;
+
 const data = [
 {
   label: 'G',
@@ -61,14 +66,14 @@ const data = [
 storiesOf('Chart/Legend', module)
   .add('default', () => {
     return (
-      <Div display="flex">
+      <Div>
         <Legend data={data}/>
       </Div>
     );
   })
   .add('line', () => {
     return (
-      <Div display="flex" margin="50">
+      <Div margin="50">
         <Legend
           data={[{
             color: 'red',
diff --git a/gsa/src/web/stories/chart/topology.js b/gsa/src/web/stories/chart/topology.js
index b0b3bb28e6..9357c53e92 100644
--- a/gsa/src/web/stories/chart/topology.js
+++ b/gsa/src/web/stories/chart/topology.js
@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
@@ -31,6 +31,12 @@ import HostsTopologyChart from 'web/components/chart/topology';
 import hosts from './hosts.json';
 import links from './links.json';
 
+const Div = styled.div`
+  border: 1px solid black;
+  margin: 25px;
+  display: inline-flex;
+`;
+
 const simpledata = {
   hosts: [{
     id: '192.168.123.73',
@@ -68,11 +74,7 @@ storiesOf('Chart/Topology', module)
   ))
   .add('Big Network', () => {
     return (
-      <Div
-        border="1px solid black"
-        margin="25px"
-        display="inline-flex"
-      >
+      <Div>
         <HostsTopologyChart
           width={500}
           height={300}
diff --git a/gsa/src/web/stories/dashboard/display.js b/gsa/src/web/stories/dashboard/display.js
index 706863d615..5d417ef22c 100644
--- a/gsa/src/web/stories/dashboard/display.js
+++ b/gsa/src/web/stories/dashboard/display.js
@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
@@ -34,6 +34,12 @@ import DisplayMenu from 'web/components/dashboard/display/displaymenu';
 
 const removeaction = action('on remove click');
 
+const Div = styled.div`
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: ${props => props.backgroundColor};
+`;
+
 storiesOf('Dashboard/Display', module)
   .add('default', () => {
     return (
diff --git a/gsa/src/web/stories/datepicker/index.js b/gsa/src/web/stories/datepicker/index.js
index 7282c0d078..984ff827bc 100644
--- a/gsa/src/web/stories/datepicker/index.js
+++ b/gsa/src/web/stories/datepicker/index.js
@@ -22,7 +22,7 @@
  */
 
 import React from 'react';
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import date from 'gmp/models/date';
 
@@ -68,13 +68,13 @@ ControlledDatePicker.propTypes = {
   value: PropTypes.date,
 };
 
-const StyledDatePicker = glamorous(ControlledDatePicker)({
-  border: '1px solid darkgreen',
-  background: 'lightgreen',
-  boxShadow: '5px 5px 10px black',
-  fontFamily: 'Trebuchet MS,Tahoma,Verdana,Arial,sans-serif',
-  fontSize: '14px',
-});
+const StyledDatePicker = styled(ControlledDatePicker)`
+  border: 1px solid darkgreen;
+  background: lightgreen;
+  box-shadow: 5px 5px 10px black;
+  font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+  font-size: 14px;
+`;
 
 storiesOf('Form/Datepicker', module)
   .add('default', () => {
diff --git a/gsa/src/web/stories/multiselect/index.js b/gsa/src/web/stories/multiselect/index.js
index bf222626d2..64c0ae362a 100644
--- a/gsa/src/web/stories/multiselect/index.js
+++ b/gsa/src/web/stories/multiselect/index.js
@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
@@ -32,34 +32,34 @@ import Divider from 'web/components/layout/divider.js';
 
 import os from 'web/utils/os.js';
 
-const Sizer = glamorous.div({
-  width: '300px',
-});
+const Sizer = styled.div`
+  width: 300px;
+`;
 
-const Box = glamorous.div({
-  width: '150px',
-  height: '50px',
-  border: '1px solid grey',
-  padding: '5px',
-  display: 'flex',
-  alignItems: 'center',
-});
+const Box = styled.div`
+  width: 150px;
+  height: 50px;
+  border: 1px solid grey;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+`;
 
 const items = os.operating_systems.map(o => ({
   value: o.pattern,
   label: o.title,
 }));
 
-const SelectBox = glamorous.div({
-  width: '120px', // this is the recommended minimum for MultiSelect
-  border: '1px solid blue',
-  padding: '5px',
-});
+const SelectBox = styled.div`
+  width: 120px; /* this is the recommended minimum for MultiSelect */
+  border: 1px solid blue;
+  padding: 5px;
+`;
 
-const StyledSelect = glamorous(MultiSelect)({
-  width: '120px',
-  height: '30px',
-});
+const StyledSelect = styled(MultiSelect)`
+  width: 120px;
+  height: 30px;
+`;
 
 class ControlledMultiSelect extends React.Component {
 
diff --git a/gsa/src/web/stories/powerfilter/index.js b/gsa/src/web/stories/powerfilter/index.js
index 55723e5b7c..26b4b49ff2 100644
--- a/gsa/src/web/stories/powerfilter/index.js
+++ b/gsa/src/web/stories/powerfilter/index.js
@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
@@ -40,11 +40,11 @@ const fakegmp = {
   },
 };
 
-const Box = glamorous.div({
-  display: 'flex',
-  padding: '5px',
-  border: '1px solid black',
-});
+const Box = styled.div`
+  display: flex;
+  padding: 5px;
+  border: 1px solid black;
+`;
 
 storiesOf('Powerfilter', module)
   .add('default', () => (
diff --git a/gsa/src/web/stories/select/index.js b/gsa/src/web/stories/select/index.js
index 832b902ba8..6230558023 100644
--- a/gsa/src/web/stories/select/index.js
+++ b/gsa/src/web/stories/select/index.js
@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
@@ -32,29 +32,29 @@ import Divider from 'web/components/layout/divider.js';
 
 import os from 'web/utils/os.js';
 
-const Sizer = glamorous.div({
-  width: '300px',
-});
-
-const Box = glamorous.div({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '200px',
-  border: '1px solid grey',
-  padding: '5px',
-});
-
-const SelectBox = glamorous.div({
-  width: '100px',
-  border: '1px solid blue',
-  padding: '5px',
-});
-
-const StyledSelect = glamorous(Select)({
-  height: '30px',
-});
+const Sizer = styled.div`
+  width: 300px;
+`;
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  border: 1px solid grey;
+  padding: 5px;
+`;
+
+const SelectBox = styled.div`
+  width: 100px;
+  border: 1px solid blue;
+  padding: 5px;
+`;
+
+const StyledSelect = styled(Select)`
+  height: 30px;
+`;
 
 const items = os.operating_systems.map(o => ({
   value: o.pattern,
diff --git a/gsa/src/web/stories/sortable/grid.js b/gsa/src/web/stories/sortable/grid.js
index 375e7359ca..168ccc72cd 100644
--- a/gsa/src/web/stories/sortable/grid.js
+++ b/gsa/src/web/stories/sortable/grid.js
@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
@@ -61,12 +61,12 @@ class ItemController extends React.Component {
   }
 }
 
-const Item = glamorous.span({
-  flexGrow: '1',
-  backgroundColor: 'blue',
-  padding: '5px',
-  color: 'white',
-});
+const Item = styled.span`
+  flex-grow: 1;
+  background-color: blue;
+  padding: 5px;
+  color: white;
+`;
 
 const getItems = (row, count) =>
   Array.from({length: count}, (v, k) => k).map(k =>
diff --git a/gsa/src/web/stories/sortable/resizer.js b/gsa/src/web/stories/sortable/resizer.js
index 27af84e9f1..16a64af466 100644
--- a/gsa/src/web/stories/sortable/resizer.js
+++ b/gsa/src/web/stories/sortable/resizer.js
@@ -22,19 +22,26 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
 import Resizer from 'web/components/sortable/resizer';
 
+const Div = styled.div`
+  display: flex;
+  width: 400px;
+  background-color: blue;
+  height: ${props => props.height}px;
+`;
+
 class ResizeContainer extends React.Component {
 
   constructor(...args) {
     super(...args);
 
     this.state = {
-      height: '100px',
+      height: '100',
     };
 
     this.handleResize = this.handleResize.bind(this);
@@ -54,9 +61,6 @@ class ResizeContainer extends React.Component {
     return (
       <div>
         <Div
-          display="flex"
-          width="400px"
-          backgroundColor="blue"
           height={height}
           innerRef={ref => this.div = ref}
         />
diff --git a/gsa/src/web/stories/tabs/index.js b/gsa/src/web/stories/tabs/index.js
index ac799d07c1..04c20d593b 100644
--- a/gsa/src/web/stories/tabs/index.js
+++ b/gsa/src/web/stories/tabs/index.js
@@ -23,24 +23,24 @@
 
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
-import PropTypes from '../../utils/proptypes.js';
+import PropTypes from 'web/utils/proptypes';
 
-import Layout from 'web/components/layout/layout.js';
+import Layout from 'web/components/layout/layout';
 
-import Tab from '../../components/tab/tab.js';
-import TabLayout from '../../components/tab/tablayout.js';
-import TabList from '../../components/tab/tablist.js';
-import TabPanel from '../../components/tab/tabpanel.js';
-import TabPanels from '../../components/tab/tabpanels.js';
-import Tabs from '../../components/tab/tabs.js';
+import Tab from 'web/components/tab/tab';
+import TabLayout from 'web/components/tab/tablayout';
+import TabList from 'web/components/tab/tablist';
+import TabPanel from 'web/components/tab/tabpanel';
+import TabPanels from 'web/components/tab/tabpanels';
+import Tabs from 'web/components/tab/tabs';
 
-const TabTitleCounts = glamorous.span({
-  fontSize: '0.7em',
-});
+const TabTitleCounts = styled.span`
+  font-size: 0.7em;
+`;
 
 const TabTitle = ({title, count}) => (
   <Layout flex="column" align={['center', 'center']}>
diff --git a/gsa/yarn.lock b/gsa/yarn.lock
index 60eadca9b0..e6dff67d5f 100644
--- a/gsa/yarn.lock
+++ b/gsa/yarn.lock
@@ -2569,10 +2569,6 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0:
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.5.tgz#4125484a3d42189a863943f23b9e4b80fedfa106"
-
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -3955,19 +3951,6 @@ glamorous@^4.12.1:
     react-html-attributes "^1.3.0"
     svg-tag-names "^1.1.0"
 
-glamorous@^4.13.1:
-  version "4.13.1"
-  resolved "https://registry.yarnpkg.com/glamorous/-/glamorous-4.13.1.tgz#8909afcbc7f09133c6eb26bedcc1250c1f774312"
-  dependencies:
-    brcast "^3.0.0"
-    csstype "^2.2.0"
-    fast-memoize "^2.2.7"
-    html-tag-names "^1.1.1"
-    is-function "^1.0.1"
-    is-plain-object "^2.0.4"
-    react-html-attributes "^1.4.2"
-    svg-tag-names "^1.1.0"
-
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -6996,12 +6979,6 @@ react-html-attributes@^1.3.0:
   dependencies:
     html-element-attributes "^1.0.0"
 
-react-html-attributes@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/react-html-attributes/-/react-html-attributes-1.4.2.tgz#0d2ccf134fc79b2d3543837dc1591d32b7b903f9"
-  dependencies:
-    html-element-attributes "^1.0.0"
-
 react-icon-base@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"