diff --git a/packages/core/src/layout/InfoCard/InfoCard.stories.tsx b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx
index 7d888f5486..3e476c5480 100644
--- a/packages/core/src/layout/InfoCard/InfoCard.stories.tsx
+++ b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx
@@ -15,9 +15,8 @@
  */
 import React, { FC } from 'react';
 import { InfoCard } from '.';
-import { Grid } from '@material-ui/core';
+import { Grid, Typography } from '@material-ui/core';
 
-const cardContentStyle = { height: 200, width: 500 };
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
 
 export default {
@@ -25,24 +24,35 @@ export default {
   component: InfoCard,
 };
 
+const text = (
+  <Typography paragraph>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </Typography>
+);
+
 const Wrapper: FC<{}> = ({ children }) => (
   <Grid container spacing={4}>
-    <Grid item>{children}</Grid>
+    <Grid item xs={4}>
+      {children}
+    </Grid>
   </Grid>
 );
 
 export const Default = () => (
   <Wrapper>
-    <InfoCard title="Information Card">
-      <div style={cardContentStyle} />
-    </InfoCard>
+    <InfoCard title="Information Card">{text}</InfoCard>
   </Wrapper>
 );
 
 export const Subhead = () => (
   <Wrapper>
-    <InfoCard title="Information Card" subheader="Subhead">
-      <div style={cardContentStyle} />
+    <InfoCard title="Information Card" subheader="Subheader">
+      {text}
     </InfoCard>
   </Wrapper>
 );
@@ -50,7 +60,7 @@ export const Subhead = () => (
 export const LinkInFooter = () => (
   <Wrapper>
     <InfoCard title="Information Card" deepLink={linkInfo}>
-      <div style={cardContentStyle} />
+      {text}
     </InfoCard>
   </Wrapper>
 );
diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx
index aec99967dc..0b91875546 100644
--- a/packages/core/src/layout/Page/Page.stories.tsx
+++ b/packages/core/src/layout/Page/Page.stories.tsx
@@ -97,7 +97,7 @@ const columns: TableColumn[] = [
 const tabs = [
   { label: 'Overview' },
   { label: 'CI/CD' },
-  { label: 'Cost Efficency' },
+  { label: 'Cost Efficiency' },
   { label: 'Code Coverage' },
   { label: 'Test' },
   { label: 'Compliance Advisor' },
@@ -137,38 +137,38 @@ const DataGrid = () => (
     </Grid>
     <Grid item xs>
       <InfoCard
-        title="Information Card"
-        deepLink={{ title: 'LEARN MORE ABOUT RIGHTSIZING FOR GKE', link: '' }}
+        title="Additional Information"
+        deepLink={{ title: 'Learn more about GKE', link: '' }}
       >
-        <b>Rightsize GKE deployment</b>
-        <p>
+        <Typography variant="h6">Rightsize GKE deployment</Typography>
+        <Typography paragraph>
           Services are considered underutilized in GKE when the average usage of
           requested cores is less than 80%.
-        </p>
-        <b>What can I do?</b>
-        <p>
+        </Typography>
+        <Typography variant="h6">What can I do?</Typography>
+        <Typography paragraph>
           Review requested core and limit settings. Check HPA target scaling
-          settings in hpa.yaml. The recommended value for
-          targetCPUUtilizationPercentage is 80.
-        </p>
-        <p>
+          settings in <code>hpa.yaml</code>. The recommended value for&nbsp;
+          <code>targetCPUUtilizationPercentage</code> is <code>80</code>.
+        </Typography>
+        <Typography paragraph>
           For single pods, there is of course no HPA. But it can also be useful
           to think about a single pod out of a larger deployment, then modify
           based on HPA requirements. Within a pod, each container has its own
           CPU and memory requests and limits.
-        </p>
-        <b>Definitions</b>
-        <p>
+        </Typography>
+        <Typography variant="h6">Definitions</Typography>
+        <Typography paragraph>
           A request is a minimum reserved value; a container will never have
           less than this amount allocated to it, even if it doesn't actually use
           it. Requests are used for determining what nodes to schedule pods on
           (bin-packing). The tension here is between not allocating resources we
           don't need, and having easy-enough access to enough resources to be
           able to function.
-        </p>
-        <b>
+        </Typography>
+        <Typography paragraph>
           Contact <Link>#cost-awareness</Link> for information and support.
-        </b>
+        </Typography>
       </InfoCard>
     </Grid>
   </Grid>
@@ -195,37 +195,41 @@ const ExampleContentHeader = ({ selectedTab }: { selectedTab?: number }) => (
 export const PluginWithData = () => {
   const [selectedTab, setSelectedTab] = useState<number>(2);
   return (
-    <Page theme={pageTheme.tool}>
-      <ExampleHeader />
-      <HeaderTabs
-        selectedIndex={selectedTab}
-        onChange={index => setSelectedTab(index)}
-        tabs={tabs.map(({ label }, index) => ({
-          id: index.toString(),
-          label,
-        }))}
-      />
-      <Content>
-        <ExampleContentHeader selectedTab={selectedTab} />
-        <DataGrid />
-      </Content>
-    </Page>
+    <div style={{ border: '1px solid #ddd' }}>
+      <Page theme={pageTheme.tool}>
+        <ExampleHeader />
+        <HeaderTabs
+          selectedIndex={selectedTab}
+          onChange={index => setSelectedTab(index)}
+          tabs={tabs.map(({ label }, index) => ({
+            id: index.toString(),
+            label,
+          }))}
+        />
+        <Content>
+          <ExampleContentHeader selectedTab={selectedTab} />
+          <DataGrid />
+        </Content>
+      </Page>
+    </div>
   );
 };
 
 export const PluginWithTable = () => {
   return (
-    <Page theme={pageTheme.tool}>
-      <ExampleHeader />
-      <Content>
-        <ExampleContentHeader />
-        <Table
-          options={{ paging: true, padding: 'dense' }}
-          data={generateTestData(10)}
-          columns={columns}
-          title="Example Content"
-        />
-      </Content>
-    </Page>
+    <div style={{ border: '1px solid #ddd' }}>
+      <Page theme={pageTheme.tool}>
+        <ExampleHeader />
+        <Content>
+          <ExampleContentHeader />
+          <Table
+            options={{ paging: true, padding: 'dense' }}
+            data={generateTestData(10)}
+            columns={columns}
+            title="Example Content"
+          />
+        </Content>
+      </Page>
+    </div>
   );
 };