diff --git a/src/webui/components/Dependencies/index.js b/src/webui/components/Dependencies/index.js
index da27fa6c5..f4c991de1 100644
--- a/src/webui/components/Dependencies/index.js
+++ b/src/webui/components/Dependencies/index.js
@@ -7,11 +7,10 @@
 
 import React, { Component, Fragment } from 'react';
 import { withRouter } from 'react-router-dom';
+import CardContent from '@material-ui/core/CardContent';
 
 import { DetailContextConsumer } from '../../pages/version';
-import Chip from '@material-ui/core/Chip';
-import { Content, CardWrap, Heading, ListItem, CardContent } from './styles';
-import List from '@material-ui/core/List';
+import { Content, CardWrap, Heading, Tags, Tag } from './styles';
 
 class DepDetail extends Component<any, any> {
   constructor(props: any) {
@@ -27,11 +26,7 @@ class DepDetail extends Component<any, any> {
   render() {
     const { name, version } = this.state;
     const tagText = `${name}@${version}`;
-    return (
-      <ListItem>
-        <Chip clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />
-      </ListItem>
-    );
+    return <Tag clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
   }
 
   handleOnClick = () => {
@@ -46,7 +41,7 @@ class DepDetail extends Component<any, any> {
 const WrappDepDetail = withRouter(DepDetail);
 
 class DependencyBlock extends Component<any, any> {
-  renderList = (deps: object, enableLoading: boolean) =>
+  renderTags = (deps: object, enableLoading: boolean) =>
     deps.map(dep => {
       const [name, version] = dep;
 
@@ -65,7 +60,7 @@ class DependencyBlock extends Component<any, any> {
             <CardWrap>
               <CardContent>
                 <Heading variant={'subheading'}>{title}</Heading>
-                <List>{this.renderList(deps, enableLoading)}</List>
+                <Tags>{this.renderTags(deps, enableLoading)}</Tags>
               </CardContent>
             </CardWrap>
           );
diff --git a/src/webui/components/Dependencies/styles.js b/src/webui/components/Dependencies/styles.js
index 8254a5993..d867c221b 100644
--- a/src/webui/components/Dependencies/styles.js
+++ b/src/webui/components/Dependencies/styles.js
@@ -6,8 +6,7 @@
 import styled from 'react-emotion';
 import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
-import { default as MuiListItem } from '@material-ui/core/ListItem';
-import { default as MuiCardContent } from '@material-ui/core/CardContent';
+import Chip from '@material-ui/core/Chip';
 
 export const Content = styled.div`
   && {
@@ -15,12 +14,6 @@ export const Content = styled.div`
   }
 `;
 
-export const CardContent = styled(MuiCardContent)`
-  && {
-    padding-bottom: 0;
-  }
-`;
-
 export const CardWrap = styled(Card)`
   && {
     margin: 0 0 25px;
@@ -33,9 +26,17 @@ export const Heading = styled(Typography)`
   }
 `;
 
-export const ListItem = styled(MuiListItem)`
+export const Tags = styled('div')`
   && {
-    padding-left: 0;
-    padding-right: 0;
+    display: flex;
+    justify-content: start;
+    flex-wrap: wrap;
+    margin: 0 -5px;
+  }
+`;
+
+export const Tag = styled(Chip)`
+  && {
+    margin: 5px;
   }
 `;