diff --git a/components/Toast/Toast.css b/components/Toast/Toast.css
index 7c0857c..f74158d 100644
--- a/components/Toast/Toast.css
+++ b/components/Toast/Toast.css
@@ -1,13 +1,17 @@
 .toast {
+  font-size: 14px;
+  font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", sans-serif;
   background: hsla(192, 55%, 42%, 1);
-  /* border: .1rem solid #ededed; */
-  border-radius: .3rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  display: flex;
+  align-items: center;
+  min-width: 320px;
+  width: 33vw;
   color: #fff;
-  display: block;
   padding: 1.4rem;
-  width: 100%;
-  font-size: 14px;
-  font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", sans-serif;
+  margin-bottom: 20px;
+  border-radius: .3rem;
+  animation: toast-in-anim 0.3s;
 }
 
 .toast-success {
@@ -25,65 +29,74 @@
   color: #fff;
 }
 
-.toast .btn-clear {
-  color: #fff;
-  float: right;
+.toast-icon {
+  fill: white;
   height: 24px;
   width: 24px;
-  border-radius: 48px;
-  padding: 0;
-}
-
-.toast .btn:not(.btn-clear) {
-  float: right;
-  padding: 5px 10px;
-  background: rgba(255,255,255,0.75)
+  padding: 3px;
+  flex-shrink: 0;
 }
 
-.app-toast-center .toast .btn-clear{
-  height: 24px;
-  width: 24px;
-  border-radius: 48px;
-}
-
-.show-outline .toast .btn:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #fff;
+.toast p {
+  margin: 0;
+  padding: 0;
 }
 
-.btn {
+.toast-btn {
   position: relative;
   -webkit-appearance: none;
-  background: white;
   border: none;
-  border-radius: .3rem;
   cursor: pointer;
   display: inline-block;
   outline: 0;
   text-align: center;
   text-decoration: none;
   user-select: none;
-  vertical-align: middle;
   white-space: nowrap;
   transition-duration: .2s;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 
-.btn-clear {
+.toast-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.toast-btn.dismiss-btn {
+  fill: #fff;
+  padding: 0;
+  height: 24px;
+  width: 24px;
+  border-radius: 48px;
   background: transparent;
-  border: 0;
-  color: #666;
-  margin-left: .3rem;
   opacity: .45;
-  padding: 0;
 }
-.btn-clear:hover {
-    opacity: .85;
-  }
-.btn-clear::before {
-    content: '\00d7';
-    font-size: 2rem;
+
+.toast-btn.dismiss-btn:hover,
+.toast-btn.dismiss-btn:focus {
+  opacity: .85;
 }
 
-button:active {
-  transform: translateY(1px)
+.toast-btn.dismiss-btn .dismiss-btn-icon {
+  outline: 0;
+}
+
+.toast-btn.action-btn {
+  padding: 8px 16px;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.toast-btn:active {
+  transform: translateY(1px);
+}
+
+@keyframes toast-in-anim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
\ No newline at end of file
diff --git a/components/Toast/Toast.d.ts b/components/Toast/Toast.d.ts
index 5798960..6097a45 100644
--- a/components/Toast/Toast.d.ts
+++ b/components/Toast/Toast.d.ts
@@ -3,7 +3,6 @@ import * as React from 'react'
 export interface IToast {
   id: string
   type: string
-  icon: string
   message: string
 }
 
diff --git a/components/Toast/Toast.js b/components/Toast/Toast.js
index 4a3f98a..14c6708 100644
--- a/components/Toast/Toast.js
+++ b/components/Toast/Toast.js
@@ -1,7 +1,16 @@
 import React, { Component } from 'react'
 
+import Icon from '@mdi/react'
+import { mdiCheck, mdiAlert, mdiAlertOctagon, mdiInformationOutline, mdiClose } from '@mdi/js'
+
 import './Toast.css'
 
+const IconMap = {
+  success: mdiCheck,
+  warning: mdiAlert,
+  danger: mdiAlertOctagon,
+}
+
 class Toast extends Component {
   componentDidMount() {
     if (!this.props.toast.callback && this.props.toast.type !== 'danger') {
@@ -22,30 +31,19 @@ class Toast extends Component {
         className={`toast toast-${toast.type}`}
         role="alert"
       >
-        {toast.icon && (
-          <i className={`icon fa ${toast.icon}`} />
-        )}
-        <span>{toast.message}</span>
+        <Icon className="toast-icon" path={IconMap[toast.type] ? IconMap[toast.type] : mdiInformationOutline} />
+        <p>{toast.message}</p>
         {toast.callback
-          ? <button className="btn btn-primary action" onClick={() => this.callback(toast.id)}>{toast.callback.label || 'Fix this'}</button>
-          : <button className="btn btn-clear" onClick={() => this.props.dismissToast(toast.id)} /> }
+          ? <button className="toast-btn action-btn" onClick={() => this.callback(toast.id)}>{toast.callback.label || 'Fix this'}</button>
+          : (
+            <button className="toast-btn dismiss-btn" aria-label="close" onClick={() => this.props.dismissToast(toast.id)}>
+              <Icon className="dismiss-btn-icon" path={mdiClose} tabIndex="-1" />
+            </button>
+            )
+          }
       </div>
     )
   }
 }
 
-// const types = {
-//   toast: {
-//    id: string
-//    type: string,
-//    icon: string,
-//    message: string,
-//    callback: {
-//     fn: fn,
-//     label: string
-//    },
-//   },
-//  dismissToast: fn (required)
-// }
-
 export default Toast
diff --git a/components/ToastCenter/ToastCenter.css b/components/ToastCenter/ToastCenter.css
index f647411..d2150ca 100644
--- a/components/ToastCenter/ToastCenter.css
+++ b/components/ToastCenter/ToastCenter.css
@@ -7,26 +7,4 @@
   max-height: 100vh;
   padding-top: 32px;
   overflow: auto;
-}
-.toast {
-  min-width: 320px;
-  width: 33vw;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  margin-bottom: 20px;
-  animation: toast-in-anim 0.3s;
-}
-.icon.fa {
-  margin-right: 10px;
-}
-.action {
-  margin-left: 32px;
-}
-
-@keyframes toast-in-anim {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+}
\ No newline at end of file
diff --git a/components/ToastCenter/ToastCenter.js b/components/ToastCenter/ToastCenter.js
index f0c6c8c..ac58b22 100644
--- a/components/ToastCenter/ToastCenter.js
+++ b/components/ToastCenter/ToastCenter.js
@@ -21,19 +21,4 @@ class ToastCenter extends Component {
   }
 }
 
-// const types = {
-//   id: string,
-//   toast: {
-//       id: string,
-//       type: string,
-//       icon: string,
-//       message: string,
-//       callback: {
-//       fn: function,
-//       label: string
-//       },
-//     },
-//   dismissToast: fn (required)
-// }
-
 export default ToastCenter
diff --git a/package-lock.json b/package-lock.json
index ec883d9..684b581 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2552,6 +2552,16 @@
       "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
       "dev": true
     },
+    "@mdi/js": {
+      "version": "3.3.92",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.3.92.tgz",
+      "integrity": "sha512-l+12IwTycHlijWMiRWBAssm0RSgkQiwMthIy/EcBAdSqtnsHnFjHq+aI2MBZ8/AYX0QBxNUv4+EN0SXZgNkWDg=="
+    },
+    "@mdi/react": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.1.0.tgz",
+      "integrity": "sha512-c0+avMYEZ6i7Pg1ULLFs+p7k8bDPiie9rrgGYs8VWQhw2tUUYz7r0lIPVzD3bzMghWfyhfkArj88K5Of0WTMNw=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -5040,7 +5050,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -5061,12 +5072,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -5081,17 +5094,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -5208,7 +5224,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -5220,6 +5237,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -5234,6 +5252,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -5241,12 +5260,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.2.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.1",
                 "yallist": "^3.0.0"
@@ -5265,6 +5286,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -5345,7 +5367,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -5357,6 +5380,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -5442,7 +5466,8 @@
             "safe-buffer": {
               "version": "5.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -5478,6 +5503,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -5497,6 +5523,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -5540,12 +5567,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -11585,12 +11614,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -11610,7 +11641,8 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
diff --git a/package.json b/package.json
index a5512a2..99d181d 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,8 @@
   },
   "homepage": "https://github.com/Stukent/timp#readme",
   "dependencies": {
+    "@mdi/js": "^3.3.92",
+    "@mdi/react": "^1.1.0",
     "babel-eslint": "^8.2.1",
     "babel-preset-react-app": "^7.0.0",
     "css-loader": "^0.28.9",
diff --git a/stories/Toast.js b/stories/Toast.js
index 4596496..67af935 100644
--- a/stories/Toast.js
+++ b/stories/Toast.js
@@ -13,12 +13,11 @@ setAddon(JSXAddon)
 storiesOf('Toast', module)
   .addDecorator(withReadme(ToastReadme))
   .addWithJSX('all toasts', () => (
-    <div>
+    <div id="story-root">
       <Toast
         toast={{
           id: 1,
           type: '',
-          icon: 'trash',
           message: 'I\'m the default toast!',
         }}
         dismissToast={() => {}}
@@ -27,7 +26,6 @@ storiesOf('Toast', module)
         toast={{
           id: 2,
           type: 'success',
-          icon: 'trash',
           message: 'I\'m the success toast!',
         }}
         dismissToast={() => {}}
@@ -36,7 +34,6 @@ storiesOf('Toast', module)
         toast={{
           id: 3,
           type: 'warning',
-          icon: 'trash',
           message: 'I\'m the warning toast!',
         }}
         dismissToast={() => {}}
@@ -45,46 +42,53 @@ storiesOf('Toast', module)
         toast={{
           id: 4,
           type: 'danger',
-          icon: 'trash',
           message: 'I\'m the danger toast!',
         }}
         dismissToast={() => {}}
       />
     </div>
   ))
-  .addWithJSX('default toast', () => (<Toast
-    toast={{
-      id: 5,
-      type: text('type', ''),
-      icon: text('icon', 'trash'),
-      message: text('message', 'Thank you for your feedback!'),
-    }}
-    dismissToast={() => {}}
-  />))
-  .addWithJSX('success toast', () => (<Toast
-    toast={{
-      id: 6,
-      type: text('type', 'success'),
-      icon: text('icon', 'trash'),
-      message: text('message', 'Success! This simulation has been reset.'),
-  }}
-    dismissToast={() => {}}
-  />))
-  .addWithJSX('warning toast', () => (<Toast
-    toast={{
-      id: 7,
-      type: text('type', 'warning'),
-      icon: text('icon', 'trash'),
-      message: text('message', 'Modifying a course currently in session will cause all simulations to be recalculated.'),
-  }}
-    dismissToast={() => {}}
-  />))
-  .addWithJSX('danger toast', () => (<Toast
-    toast={{
-      id: 8,
-      type: text('type', 'danger'),
-      icon: text('icon', 'trash'),
-      message: text('message', 'Simulation failed to save. Contact support if this continues.'),
-  }}
-    dismissToast={() => {}}
-  />))
+  .addWithJSX('default toast', () => (
+    <div id="story-root">
+      <Toast
+        toast={{
+          id: 5,
+          type: text('type', ''),
+          message: text('message', 'Thank you for your feedback!'),
+        }}
+        dismissToast={() => {}}
+      />
+    </div>))
+  .addWithJSX('success toast', () => (
+    <div id="story-root">
+      <Toast
+        toast={{
+          id: 6,
+          type: text('type', 'success'),
+          message: text('message', 'Success! This simulation has been reset.'),
+        }}
+        dismissToast={() => {}}
+      />
+    </div>))
+  .addWithJSX('warning toast', () => (
+    <div id="story-root">
+      <Toast
+        toast={{
+          id: 7,
+          type: text('type', 'warning'),
+          message: text('message', 'Modifying a course currently in session will cause all simulations to be recalculated.'),
+        }}
+        dismissToast={() => {}}
+      />
+    </div>))
+  .addWithJSX('danger toast', () => (
+    <div id="story-root">
+      <Toast
+        toast={{
+          id: 8,
+          type: text('type', 'danger'),
+          message: text('message', 'Simulation failed to save. Contact support if this continues.'),
+        }}
+        dismissToast={() => {}}
+      />
+    </div>))
diff --git a/stories/ToastCenter.js b/stories/ToastCenter.js
index a5d5d2d..da30a82 100644
--- a/stories/ToastCenter.js
+++ b/stories/ToastCenter.js
@@ -15,7 +15,7 @@ storiesOf('Toast Center', module)
   .addWithJSX('with a success toast', () => {
     const store = new Store({
       toasts: [{
-        type: 'success', icon: 'trash', message: 'Success! Your request was processed.', id: 0,
+        type: 'success', message: 'Success! Your request was processed.', id: 'success-1',
       }],
     })
     const removeToast = () => {
@@ -26,22 +26,24 @@ storiesOf('Toast Center', module)
     const addToast = () => {
       const toasts = store.get('toasts')
       const newToast = {
-        type: 'success', icon: 'trash', message: 'Success! Your request was processed.', id: toasts.length + 1,
+        type: 'success', message: 'Success! Your request was processed.', id: `success-${toasts.length + 1}`,
       }
       toasts.push(newToast)
       store.set({ toasts })
     }
     return (
-      <State store={store}>
-        <ToastCenter toasts={store.get('toasts')} toastRemovalFn={removeToast} />
-        <button onClick={addToast}>New Toast</button>
-      </State>
+      <div id="story-root">
+        <State store={store}>
+          <ToastCenter toasts={store.get('toasts')} toastRemovalFn={removeToast} />
+          <button onClick={addToast}>New Toast</button>
+        </State>
+      </div>
     )
   })
   .addWithJSX('with a danger toast', () => {
     const store = new Store({
       toasts: [{
-        type: 'danger', icon: 'trash', message: 'Request failed. Server responded with error: 404 - Not Found', id: 1,
+        type: 'danger', message: 'Request failed. Server responded with error: 404 - Not Found', id: 'danger-1',
       }],
     })
     const removeToast = () => {
@@ -52,22 +54,25 @@ storiesOf('Toast Center', module)
     const addToast = () => {
       const toasts = store.get('toasts')
       const newToast = {
-        type: 'danger', icon: 'trash', message: 'Request failed. Server responded with error: 404 - Not Found', id: toasts.length + 1,
+        type: 'danger', message: 'Request failed. Server responded with error: 404 - Not Found', id: `danger-${toasts.length + 1}`,
       }
       toasts.push(newToast)
       store.set({ toasts })
+      console.log(toasts)
     }
     return (
-      <State store={store}>
-        <ToastCenter toasts={store.get('toasts')} toastRemovalFn={removeToast} />
-        <button onClick={addToast}>New Toast</button>
-      </State>
+      <div id="story-root">
+        <State store={store}>
+          <ToastCenter toasts={store.get('toasts')} toastRemovalFn={removeToast} />
+          <button onClick={addToast}>New Toast</button>
+        </State>
+      </div>
     )
   })
   .addWithJSX('with toast with a callback', () => {
     const store = new Store({
       toasts: [{
-        id: 1, type: 'success', icon: 'trash', message: 'Invalid input. Click here to fix this.', callback: { fn: () => alert('Toast clicked!'), label: 'Fix me' },
+        id: 'callback-1', type: 'success', message: 'Invalid input. Click here to fix this.', callback: { fn: () => alert('Toast clicked!'), label: 'Go to place to fix this' },
       }],
     })
     const removeToast = () => {
@@ -78,15 +83,17 @@ storiesOf('Toast Center', module)
     const addToast = () => {
       const toasts = store.get('toasts')
       const newToast = {
-        id: toasts.length + 1, type: 'success', icon: 'trash', message: 'Invalid input. Click here to fix this.', callback: { fn: () => alert('Toast clicked!'), label: 'Fix me' },
+        id: `callback-${toasts.length + 1}`, type: 'success', message: 'Invalid input. Click here to fix this.', callback: { fn: () => alert('Toast clicked!'), label: 'Go to place to fix this' },
       }
       toasts.push(newToast)
       store.set({ toasts })
     }
     return (
-      <State store={store}>
-        <ToastCenter toasts={store.get('toasts')} toastRemovalFn={removeToast} />
-        <button onClick={addToast}>New Toast</button>
-      </State>
+      <div id="story-root">
+        <State store={store}>
+          <ToastCenter toasts={store.get('toasts')} toastRemovalFn={removeToast} />
+          <button onClick={addToast}>New Toast</button>
+        </State>
+      </div>
     )
   })