--- a/client/src/components/Navbar.scss	Tue Aug 28 18:52:12 2018 +0200
+++ b/client/src/components/Navbar.scss	Wed Aug 29 11:02:36 2018 +0200
@@ -47,3 +47,82 @@
     padding: 16px;
     font-weight: bold;
 }
+
+#logout-modal{
+    padding-top: 2%;
+    margin-top: 20%;
+
+    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: fadein 0.5s; /* Firefox < 16 */
+        -ms-animation: fadein 0.5s; /* Internet Explorer */
+         -o-animation: fadein 0.5s; /* Opera < 12.1 */
+            animation: fadein 0.5s;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+#logout-close-modal-button{
+    margin-top: -2.5%;
+    margin-right: -1%;
+    background-color: transparent;
+    border: transparent;
+}
+
+#logout-close-modal-button:hover{
+    background-color: transparent;
+    border: transparent;
+    color: #769FED;
+}
+
+.modal-text{
+    margin-top: 10%;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.modal-warning{
+    color:#F95B5B;
+    font-size:60px;
+    padding:0;
+    margin-top: 5%;
+    margin-right: -5%;
+}
+
+#logout-modal-button {
+    padding: 1.5%;
+    margin-top: 5%;
+    margin-right: 40%;
+    width: 20%;
+    font-size: 14px;
+}
+
+.modal-footer{
+    border: white;
+}