diff --git a/frontend/src/component/archive/archive-list-component.jsx b/frontend/src/component/archive/archive-list-component.jsx
index 61379f99ee..1ad902bea7 100644
--- a/frontend/src/component/archive/archive-list-component.jsx
+++ b/frontend/src/component/archive/archive-list-component.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
-import { DataTable, TableHeader, IconButton, Icon, Grid, Cell } from 'react-mdl';
-import { HeaderTitle } from '../common';
+import { DataTable, TableHeader, IconButton, Icon, Card } from 'react-mdl';
+import { styles as commonStyles } from '../common';
 
 class ArchiveList extends Component {
     componentDidMount () {
@@ -14,31 +14,29 @@ class ArchiveList extends Component {
             e.reviveName = e.name;
         });
         return (
-            <Grid className="mdl-color--white">
-                <Cell col={12}>
-                    <HeaderTitle title="Toggle Archive" />
-                    <div style={{ overflowX: 'scroll' }}>
-                        {
-                            archive.length > 0 ?
-                            <DataTable
-                                rows={archive}
-                                style={{ width: '100%' }}>
-                                <TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
-                                    <IconButton colored name="undo" onClick={() => revive(reviveName)} />
-                                )}>Revive</TableHeader>
-                                <TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>
-                                    Enabled</TableHeader>
-                                <TableHeader name="name">Toggle name</TableHeader>
-                                <TableHeader numeric name="createdAt">Created</TableHeader>
-                            </DataTable> :
-                            <div style={{ textAlign: 'center' }}>
-                                <Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br />
-                                No archived feature toggles, go see <Link to="/features">active toggles here</Link>
-                            </div>
-                        }
+            <Card shadow={0} className={commonStyles.fullwidth}>
+                {
+                    archive.length > 0 ?
+                    <div className={commonStyles.horisontalScroll}>
+                        <DataTable
+                            rows={archive}
+                            className={commonStyles.fullwidth}
+                            style={{ border: 0 }}>
+                            <TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
+                                <IconButton colored name="undo" onClick={() => revive(reviveName)} />
+                            )}>Revive</TableHeader>
+                            <TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>
+                                Enabled</TableHeader>
+                            <TableHeader name="name">Toggle name</TableHeader>
+                            <TableHeader numeric name="createdAt">Created</TableHeader>
+                        </DataTable>
+                    </div> :
+                    <div className={commonStyles.emptyState}>
+                            <Icon name="archive" className="mdl-color-text--grey-300" style={{ fontSize: '56px' }}/><br />
+                            No archived feature toggles, go see <Link to="/features">active toggles here</Link>
                     </div>
-                </Cell>
-            </Grid>
+                }
+            </Card>
         );
     }
 }
diff --git a/frontend/src/component/common/common.scss b/frontend/src/component/common/common.scss
index 749541c0de..497ff9ae73 100644
--- a/frontend/src/component/common/common.scss
+++ b/frontend/src/component/common/common.scss
@@ -8,12 +8,12 @@
     width: 100%;
 }
 
-.horizontalScroll {
+.horisontalScroll {
     overflow-x: scroll;
     -webkit-overflow-scrolling: touch;
 }
 
-.horizontalScroll::-webkit-scrollbar {
+.horisontalScroll::-webkit-scrollbar {
     display: none;
 }
 
@@ -64,4 +64,12 @@
         display: inline-block;
         padding-right: 8px;
     }
+}
+
+.emptyState {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 200px;
 }
\ No newline at end of file
diff --git a/frontend/src/component/history/history-list-component.jsx b/frontend/src/component/history/history-list-component.jsx
index 39d4d2daef..c72c8d6e8a 100644
--- a/frontend/src/component/history/history-list-component.jsx
+++ b/frontend/src/component/history/history-list-component.jsx
@@ -49,7 +49,7 @@ class HistoryList extends Component {
                         Full events
                     </SwitchWithLabel>
                 }/>
-                <div className={commonStyles.horizontalScroll}>
+                <div className={commonStyles.horisontalScroll}>
                     {entries}
                 </div>
             </div>