diff --git a/packages/core/src/layout/InfoCard/BottomLink.js b/packages/core/src/layout/InfoCard/BottomLink.js
index 786fe59607..c3d7f1efc0 100644
--- a/packages/core/src/layout/InfoCard/BottomLink.js
+++ b/packages/core/src/layout/InfoCard/BottomLink.js
@@ -17,9 +17,24 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@material-ui/core';
-import { Divider, ListItemText } from '@material-ui/core';
+import { Divider, ListItemText, withStyles } from '@material-ui/core';
 import { ListItem, ListItemIcon } from '@material-ui/core';
 import ArrowIcon from '@material-ui/icons/ArrowForward';
+import grey from '@material-ui/core/colors/grey';
+
+const LinkBottomText = withStyles({
+  primary: {
+    fontWeight: '700',
+    color: grey[900],
+  },
+})(ListItemText);
+
+const ListItemBottom = withStyles({
+  root: {
+    maxWidth: 'fit-content',
+    padding: '16px 16px 16px 20px',
+  },
+})(ListItem);
 
 export default class BottomLink extends Component {
   static propTypes = {
@@ -34,12 +49,12 @@ export default class BottomLink extends Component {
       <div>
         <Divider />
         <Link href={link} onClick={onClick} highlight="none">
-          <ListItem>
+          <ListItemBottom>
+            <LinkBottomText>{title}</LinkBottomText>
             <ListItemIcon>
               <ArrowIcon />
             </ListItemIcon>
-            <ListItemText>{title}</ListItemText>
-          </ListItem>
+          </ListItemBottom>
         </Link>
       </div>
     );
diff --git a/packages/core/src/layout/InfoCard/InfoCard.js b/packages/core/src/layout/InfoCard/InfoCard.js
index 6e771c8200..0b2abfb164 100644
--- a/packages/core/src/layout/InfoCard/InfoCard.js
+++ b/packages/core/src/layout/InfoCard/InfoCard.js
@@ -29,7 +29,13 @@ import BottomLink from './BottomLink';
 
 import textContent from 'react-addons-text-content';
 
-const BoldHeader = withStyles({ title: { fontWeight: '700' } })(CardHeader);
+const BoldHeader = withStyles({
+  title: { fontWeight: '700' },
+  subheader: { paddingTop: '2px' },
+  root: {
+    padding: '16px 16px 16px 20px',
+  },
+})(CardHeader);
 const CardActionsTopRight = withStyles({
   root: {
     display: 'inline-block',
@@ -183,12 +189,15 @@ class InfoCard extends Component {
       >
         <ErrorBoundary slackChannel={slackChannel}>
           {title && (
-            <BoldHeader
-              title={title}
-              subheader={subheader}
-              style={{ display: 'inline-block', ...headerStyle }}
-              {...headerProps}
-            />
+            <>
+              <BoldHeader
+                title={title}
+                subheader={subheader}
+                style={{ display: 'inline-block', ...headerStyle }}
+                {...headerProps}
+              />
+              <Divider />
+            </>
           )}
           {actionsTopRight && (
             <CardActionsTopRight>{actionsTopRight}</CardActionsTopRight>
diff --git a/packages/core/src/layout/InfoCard/InfoCard.stories.tsx b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx
new file mode 100644
index 0000000000..945f233e16
--- /dev/null
+++ b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import InfoCard from '.';
+
+const linkInfo = { title: 'Go to XYZ Location', link: '#' };
+
+export default {
+  title: 'Information Card',
+  component: InfoCard,
+};
+
+export const Default = () => (
+  <InfoCard title="Information Card">
+    <div style={{ height: '200px' }} />
+  </InfoCard>
+);
+
+export const Subhead = () => (
+  <InfoCard title="Information Card" subheader="Subhead">
+    <div style={{ height: '200px' }} />
+  </InfoCard>
+);
+
+export const LinkInFooter = () => (
+  <InfoCard title="Information Card" deepLink={...linkInfo}>
+    <div style={{ height: '200px' }} />
+  </InfoCard>
+);
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index 7a51d41e0d..afed6723d8 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -5,17 +5,27 @@ module.exports = {
   ],
   addons: ['@storybook/addon-actions', '@storybook/addon-links'],
   webpackFinal: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
+    config.module.rules.push(
+      {
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+            options: {
+              transpileOnly: true,
+            },
           },
+        ],
+      },
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-react'],
+          plugins: ['@babel/plugin-proposal-class-properties'],
         },
-      ],
-    });
+      },
+    );
     config.resolve.extensions.push('.ts', '.tsx');
     return config;
   },