diff --git a/package-lock.json b/package-lock.json
index b363a4d..3cf0a15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,17 +5,18 @@
   "requires": true,
   "dependencies": {
     "@babel/runtime": {
-      "version": "7.5.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
-      "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+      "version": "7.0.0-beta.55",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.55.tgz",
+      "integrity": "sha1-C8M6paasCwEvN+JbnmqqLkiakWs=",
       "requires": {
-        "regenerator-runtime": "^0.13.2"
+        "core-js": "^2.5.7",
+        "regenerator-runtime": "^0.12.0"
       },
       "dependencies": {
         "regenerator-runtime": {
-          "version": "0.13.3",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
         }
       }
     },
@@ -57,6 +58,23 @@
         "react-transition-group": "^2.2.1",
         "recompose": "0.28.0 - 0.30.0",
         "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
+        }
       }
     },
     "@material-ui/icons": {
@@ -67,6 +85,23 @@
       "requires": {
         "@babel/runtime": "^7.2.0",
         "recompose": "0.28.0 - 0.30.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
+        }
       }
     },
     "@material-ui/styles": {
@@ -94,6 +129,14 @@
         "warning": "^4.0.1"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "@material-ui/utils": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.3.0.tgz",
@@ -129,6 +172,11 @@
             "object-assign": "^4.1.1",
             "react-is": "^16.8.1"
           }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -142,6 +190,23 @@
         "deepmerge": "^3.0.0",
         "prop-types": "^15.6.0",
         "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
+        }
       }
     },
     "@material-ui/types": {
@@ -161,6 +226,23 @@
         "@babel/runtime": "^7.2.0",
         "prop-types": "^15.6.0",
         "react-is": "^16.6.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
+        }
       }
     },
     "@types/events": {
@@ -2476,8 +2558,7 @@
     "core-js": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
-      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
-      "dev": true
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -2907,6 +2988,23 @@
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.1.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
+        }
       }
     },
     "dom-serializer": {
@@ -5402,6 +5500,14 @@
         "jss": "10.0.0-alpha.23"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "jss": {
           "version": "10.0.0-alpha.23",
           "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
@@ -5412,6 +5518,11 @@
             "is-in-browser": "^1.1.3",
             "tiny-warning": "^1.0.2"
           }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -5424,6 +5535,14 @@
         "jss": "10.0.0-alpha.23"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "jss": {
           "version": "10.0.0-alpha.23",
           "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
@@ -5434,6 +5553,11 @@
             "is-in-browser": "^1.1.3",
             "tiny-warning": "^1.0.2"
           }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -5446,6 +5570,14 @@
         "jss": "10.0.0-alpha.23"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "jss": {
           "version": "10.0.0-alpha.23",
           "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
@@ -5456,6 +5588,11 @@
             "is-in-browser": "^1.1.3",
             "tiny-warning": "^1.0.2"
           }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -5469,6 +5606,14 @@
         "tiny-warning": "^1.0.2"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "jss": {
           "version": "10.0.0-alpha.23",
           "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
@@ -5479,6 +5624,11 @@
             "is-in-browser": "^1.1.3",
             "tiny-warning": "^1.0.2"
           }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -5491,6 +5641,14 @@
         "jss": "10.0.0-alpha.23"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "jss": {
           "version": "10.0.0-alpha.23",
           "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
@@ -5501,6 +5659,11 @@
             "is-in-browser": "^1.1.3",
             "tiny-warning": "^1.0.2"
           }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -5513,6 +5676,14 @@
         "jss": "10.0.0-alpha.23"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "jss": {
           "version": "10.0.0-alpha.23",
           "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
@@ -5523,6 +5694,11 @@
             "is-in-browser": "^1.1.3",
             "tiny-warning": "^1.0.2"
           }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -5536,6 +5712,14 @@
         "jss": "10.0.0-alpha.23"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "css-vendor": {
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.5.tgz",
@@ -5555,6 +5739,11 @@
             "is-in-browser": "^1.1.3",
             "tiny-warning": "^1.0.2"
           }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -6961,6 +7150,23 @@
         "@babel/runtime": "^7.2.0",
         "prop-types": "^15.6.0",
         "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
+        }
       }
     },
     "react-highlight": {
@@ -7064,11 +7270,26 @@
         "symbol-observable": "^1.0.4"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
         "hoist-non-react-statics": {
           "version": "2.5.5",
           "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
           "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
           "dev": true
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index d5aa3c6..e043984 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "webpack-dev-server": ">=3.1.11"
   },
   "dependencies": {
+    "@babel/runtime": "7.0.0-beta.55",
     "@material-ui/styles": "^4.3.0"
   }
 }
diff --git a/src/NotificationBody.jsx b/src/NotificationBody.jsx
index 8c662e4..a236a7c 100644
--- a/src/NotificationBody.jsx
+++ b/src/NotificationBody.jsx
@@ -1,8 +1,28 @@
 import React from 'react'
-export default function NotificationBody() {
+import { Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        padding: '0rem 0.8rem .8rem 0.8rem'
+    },
+    title: {
+        fontSize: '.8rem'
+    },
+    body: {
+        fontSize: '.8rem',
+        marginTop: '0.2rem'
+    }
+  }));
+export default function NotificationBody(props) {
+    const title = props.title
+    const body = props.body
+    const classes = useStyles();
+
     return (
-        <div>
-            
+        <div className={classes.root}>
+            <Typography className={classes.title} variant="body1">{title}</Typography>
+            <Typography className={classes.body} variant="caption">{body}</Typography>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/NotificationHeader.jsx b/src/NotificationHeader.jsx
index 92b491b..29803f0 100644
--- a/src/NotificationHeader.jsx
+++ b/src/NotificationHeader.jsx
@@ -7,11 +7,11 @@ const useStyles = makeStyles(theme => ({
   root: {
       display: 'flex',
       alignItems: 'center',
-      padding: '0.8rem 1rem'
+      padding: '.8rem 0.8rem .4rem 0.8rem'
   },
   icon: {
       '& svg': {
-          fontSize: '1.3rem'
+          fontSize: '1.2rem'
       }
   },
   name: {
@@ -27,7 +27,11 @@ const useStyles = makeStyles(theme => ({
     color: '#7e7e7e'   
   },
   chevron: {
-      fontSize: '1.1rem'
+      fontSize: '1.1rem',
+      transition: 'transform 300ms',
+      '&.expanded': {
+        transform: 'rotate(180deg)'
+      }
   }
 }));
 export default function NotificationHeader(props) {
@@ -36,6 +40,7 @@ export default function NotificationHeader(props) {
     const icon = props.icon
     const date = props.date
     const accent = props.accent
+    const expanded = props.expanded
     return (
         <div className={classes.root}>
             <div className={classes.icon} style={{color: accent}}>
@@ -44,7 +49,7 @@ export default function NotificationHeader(props) {
             <Typography className={classes.name} style={{color: accent}} variant="caption">{name}</Typography>
             <span className={classes.dot}> •</span>
             <Typography className={classes.date} variant="caption">{date}</Typography>
-            <Chevron className={classes.chevron} />
+            <Chevron className={`${classes.chevron} ${(expanded) ? 'expanded' : ''}`} />
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/NotificationWrapper.jsx b/src/NotificationWrapper.jsx
index f35e63e..5a7c671 100644
--- a/src/NotificationWrapper.jsx
+++ b/src/NotificationWrapper.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Paper } from '@material-ui/core';
 export default function NotificationWrapper(props) {
     return (
-        <Paper>
+        <Paper {...props}>
             {props.children}
         </Paper>
     )
diff --git a/src/index.jsx b/src/index.jsx
index d48eaad..d3c8e05 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,22 +3,42 @@ import NotificationWrapper from './NotificationWrapper'
 import NotificationHeader from './NotificationHeader'
 import NotificationBody from './NotificationBody'
 import NotificationActions from './NotificationActions'
-import Info from '@material-ui/icons/Info'
+import Whatshot from '@material-ui/icons/Whatshot'
+import ButtonBase from '@material-ui/core/ButtonBase';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        width: '100%',
+        textAlign: 'unset'
+    },
+  }));
 
 export default function AndroidNotification(props) {
+  const classes = useStyles()
+  const [expanded, setExpanded] = React.useState(false)
+
   const defaultProps = {
     name: 'Android Notification',
-    icon: <Info />,
+    icon: <Whatshot />,
     date: 'Nov 6',
-    accent: 'rgb(63, 81, 181)'
+    accent: 'rgb(63, 81, 181)',
+    title: 'Awesome Notification',
+    body: 'this is an awesome notification !'
   }
+
+  function toggleExpandMode() {
+    setExpanded(!expanded)
+  }
+
   return (
-      <NotificationWrapper {...defaultProps} {...props}>
-          <NotificationHeader {...defaultProps} {...props}/>
-          <NotificationBody {...defaultProps} {...props}/>
+      <ButtonBase className={classes.root} onClick={toggleExpandMode}>
+        <NotificationWrapper className={classes.root}>
+            <NotificationHeader expanded={expanded} {...defaultProps} {...props}/>
+            <NotificationBody {...defaultProps} {...props}/>
           <NotificationActions {...defaultProps} {...props}>
-            
           </NotificationActions>
-      </NotificationWrapper>
+        </NotificationWrapper>
+      </ButtonBase>
   )
 }
\ No newline at end of file