diff --git a/src/styles/components/notification.css b/src/styles/components/notification.css
index 1eb5044..0d5c7ee 100644
--- a/src/styles/components/notification.css
+++ b/src/styles/components/notification.css
@@ -1,155 +1,227 @@
-@import '../variables.css';
-
-.notificationPopup{
-  & .notificationHeader{
-    border-bottom:1px solid var(--gray);
-    padding: 12px 15px;
-    & .notificationTitle{
-      font-size:1.2em;
-      font-weight: bold;
-    }
-    & .notificationCount{
-      font-size:0.8em;
-    }
-  }
-  & .notificationBody{
-    max-height: 500px;
-    overflow-y: auto;
-    & .singleNotification{
-      cursor: pointer;
-      padding: 15px 8px 5px;
-      border-bottom: 1px solid var(--gray);
-      &:hover{
-        background: var(--whisperGray);
-      }
-      & .notificationIcon{
-        width: 35px;
-      };
-      & .notificationContent{
-        width:250px;
-        & .notificationTitle{
-          margin-bottom: 7px;
-          height: 17px;
-          overflow: hidden;
-        };
-        & .notificationDesc{
-          margin-bottom: 7px;
-          display: block;
-          display: -webkit-box;
-          max-width: 400px;
-          height: 40px;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          color:var(--nobelGray);
-        };
-        & .notificationActions{
-          & .notificationClear{
-            color:var(--blue)
-          };
-        };  
-      };
-      & .notificationTime{
-       width: 100px;
-        text-align: right;
-      };
-    }
-  }
-  & .notificationFooter{
-    & >*{
-      padding:12px 15px;
-      text-align: center;
-      color:var(--blue)
-    }
-    & >*:hover{
-      background: var(--whisperGray);
-    }
-  }
-  &.ui.bottom{
-   padding:0px;
-   box-shadow: 0px 5px 10px 4px #ccc;
-  }
-}
-
-.notificationIcon{
-    position: relative;
-  &.error {
-      color: var(--orange)
-  };
-  &.success {
-      color: var(--successGreen)
-  };
-  &.warning {
-      color: var(--warningred)
-  };
-  &.info {
-      color: var(--blue)
-  };
-}
-
-.notificationCount{
-  border-radius: 9px;
-  background: var(--warningred);
-  color:var(--white);
-  padding: 5px;
-  &.small{
-    padding: 0px 4px;
-    position: absolute;
-    top: -13px;
-    left: 7px;
-    font-size: var(--xsmall);
-  }
-  &.large{
-    padding: 1px 5px;
-    position: absolute;
-    top: -15px;
-    left: 15px;
-  }
-  &.big{
-    padding: 2px 6px;
-    position: absolute;
-    top: -20px;
-    left: 20px;
-  }
-}
-
-.empty__circle {
-  width: 280px;
-  height: 280px;
-  color: #8faec1;
-  border: 13px solid #eeeff0;
-  margin-left: auto;
-  margin-right: auto;
-  border-radius: 100%;
-  text-align: center;
-  padding-top: 35px;
-  & .bell_icon{
-    font-size: 35px;
-    margin-bottom: 20px;
-  }
-  & .info_text{
-    font-size: 20px;
-  }
-}
-
-.empty__notification_panel {
-  height: 500px;
-  max-width: 400px;
-  padding: 4em;
-  background-color: #f1f1f2;
-  & .title {
-    font-size: 14px;
-    color: #b5c0c7;
-    margin-top: 32px;
-    text-align: center
-  }
-}
-.notificationPopup .clearfix:after {
-  visibility: hidden;
-  display: block;
-  font-size: 0;
-  content: " ";
-  clear: both;
-  height: 0;
-}
\ No newline at end of file
+@import '../variables.css';
+
+.notificationIcon{
+  position:relative;
+  & i.icon{
+    font-size: 32px;
+    &.tiny{
+      font-size: 16px;
+    };
+    &.small{
+      font-size: 24px;
+    };
+    &.large{
+      font-size: 48px;
+    };
+    &.big{
+      font-size: 64px;
+    };
+  };
+  & .notificationCount {
+    border-radius: 9px;
+    background: var(--warningred);
+    color:var(--white);
+    padding: 5px;
+    &.tiny{
+      padding: 0px 4px;
+      position: absolute;
+      top: -13px;
+      left: 10px;
+      font-size: var(--xsmall);
+    };
+    &.small{
+      padding: 0px 4px;
+      position: absolute;
+      top: -13px;
+      left: 16px;
+      font-size: var(--xsmall);
+    };
+    &.large{
+      padding: 1px 5px;
+      position: absolute;
+      top: -20px;
+      left: 35px;
+    }
+    &.big{
+      padding: 2px 6px;
+      position: absolute;
+      top: -25px;
+      left: 45px;
+    }
+  }
+};
+.ui.popup{
+  &.notificationPopup {
+     padding:0px;
+     margin:0px;
+    & .clearfix:after {
+      visibility: hidden;
+      display: block;
+      font-size: 0;
+      content: " ";
+      clear: both;
+      height: 0;
+    }
+    & .notificationHeader{
+      border-bottom:1px solid var(--gray);
+      padding: 12px 15px;
+      & .notificationTitle{
+        font-size:1.2em;
+        font-weight: bold;
+      }
+      & .notificationCount{
+        background: var(--warningred);
+        color:var(--white);
+        border-radius: 25px;
+        padding: 5px;
+        min-width: 25px;
+        display: inline-block;
+        height: 25px;
+        text-align: center;
+        margin-left: 10px;
+      }
+      &.detailView{
+       cursor:pointer;
+        & .backbtn {
+          color: var(--black);
+          position: relative;
+          top: -5px;
+          left: -10px;
+        }
+        & i.icon.backarrow {
+          color: var(--black);
+          position: relative;
+          top: 0;
+          left: -5px;
+          font-size: 2em;
+        }
+      }
+    }
+    & .notificationBody{
+      height: 500px;
+      overflow-y: auto;
+      & .singleNotification{
+        cursor: pointer;
+        padding: 15px 8px 5px;
+        border-bottom: 1px solid var(--gray);
+        &.active,&.unread{
+          background: var(--whisperGray);
+        }&:hover{
+          background: var(--activeBlue);
+        }
+        & .notificationContent{
+          width:250px;
+          & .notificationTitle{
+            margin-bottom: 7px;
+            height: 17px;
+            overflow: hidden;
+          };
+          & .notificationDesc{
+            margin-bottom: 7px;
+            display: block;
+            display: -webkit-box;
+            max-width: 400px;
+            height: 40px;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color:var(--nobelGray);
+          };
+          & .notificationActions{
+            & .notificationClear{
+              color:var(--blue)
+            };
+          };
+        };
+        & .notificationTime{
+         width: 100px;
+          text-align: right;
+        };
+      }
+      & .detailView{
+        padding:15px;
+        & .notificationContent{
+          padding-left:10px;
+          & .notificationTitle{
+            font-weight: bold;
+            margin-bottom: 10px;
+            font-size: 16px;
+          }
+          & .notificationTime, & .notificationDesc {
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+    & .notificationFooter{
+      & >*{
+        padding:12px 15px;
+        text-align: center;
+        color:var(--blue)
+      }
+      & >*:hover{
+        background: var(--whisperGray);
+      }
+    }
+    &.ui.bottom{
+     padding:0px;
+     box-shadow: 0px 5px 10px 4px #ccc;
+    }
+    & .notificationIcon{
+      width: 35px;
+      position: relative;
+      font-size:1.5em;
+      &.error {
+        color: var(--orange)
+      };
+      &.success {
+        color: var(--successGreen)
+      };
+      &.warning {
+        color: var(--warningred)
+      };
+      &.info {
+        color: var(--blue)
+      };
+    };
+  }
+}
+
+.notification_detail{
+  min-width: 400px;
+}
+
+
+
+.empty__circle {
+  width: 280px;
+  height: 280px;
+  color: #8faec1;
+  border: 13px solid #eeeff0;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 100%;
+  text-align: center;
+  padding-top: 35px;
+  & .bell_icon{
+    font-size: 35px;
+    margin-bottom: 20px;
+  }
+  & .info_text{
+    font-size: 20px;
+  }
+}
+
+.empty__notification_panel {
+  height: 500px;
+  max-width: 400px;
+  padding: 4em;
+  background-color: #f1f1f2;
+  & .title {
+    font-size: 14px;
+    color: #b5c0c7;
+    margin-top: 32px;
+    text-align: center
+  }
+}
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 0293ac2..4f80b6c 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,74 +1,76 @@
-:root {
-/* Start Yung's palette */ 
-
-  /* COLORS */
-  /* primary */
-  --buntingBlue: #28324e;
-  --cobaltBlue: #075ea6;
-  --denimBlue: #1c75bd;
-  --peterriverBlue: #3498db;
-
-  /*--black: #000000;*/
-  --nightriderGray: #2d2d2d;
-  --charcoalGray: #454545;
-  --dimGray: #666666;
-  --nobelGray: #999999;
-  --silverGray: #bdc3c7;
-  --gainsboroGray: #d8d8d8;
-  --whisperGray: #ebebeb;
-  --whitesmoke: #f5f5f5;
-  --white: #ffffff;
-
-  /* secondary */
-  --supernovaYellow: #ffb72a;
-  --neoncarrotYellow: #ff9e2c;
-  --tangerineOrange: #ff7b00;
-/* End Yung's palette */
-
-  /* Components Colors */
-  --headerColor: var(--buntingBlue);
-  --primaryTextColor: var(--buntingBlue);
-  --hyperlinkColor: var(--denimBlue);
-  --defaultButtonColor: var(--peterriverBlue);
-
-  --formBackgroundColor: var(--whitesmoke);
-
-  --disabledColor: var(--gainsboroGray);
-
-  --warningred: #c0382b;
-  --warningyellow: var(--neoncarrotYellow);
-  --lightBlue: #bde9ff;
-
-  /* Basic Colors used in components*/
-
-  --blue: var(--peterriverBlue);
-  --primaryBlue: var(--blue);
-  --textGray: var(--dimGray);
-  --yellow: var(--supernovaYellow);
-
-  --textPurple: var(--purple);
-  --black: #272F34;
-  --darkgray: #777776;
-  --gray: #A6A8AB;
-  --lightgray: #E5E6E7;
-  --white: #fff;
-  --red: #E96C64;
-  
-  --cloudburst: #363d43; /* was used for sidebar - Yung's theme uses slightly lighter charcoal #454545*/
-  --purple: #A976B2;
-  --green: #00A69C;
-  --darkgreen: #169D8F;
-  --orange: #FFA500;
- 
-  --buttonBorder: #BBBDBF;
-  --buttonActiveColor: white;
-  --taggray: #ededed;
-  
-  /* other */
-  --xsmall: 0.7rem;
-  --small: 0.85rem;
-  --semibold: 600;
-  --subtitlesize: 14px;
-
-  --base-border-radius: 0;
-}
+:root {
+/* Start Yung's palette */ 
+
+  /* COLORS */
+  /* primary */
+  --buntingBlue: #28324e;
+  --cobaltBlue: #075ea6;
+  --denimBlue: #1c75bd;
+  --peterriverBlue: #3498db;
+  --activeBlue : #c2e0f4;
+
+  /*--black: #000000;*/
+  --nightriderGray: #2d2d2d;
+  --charcoalGray: #454545;
+  --dimGray: #666666;
+  --nobelGray: #999999;
+  --silverGray: #bdc3c7;
+  --gainsboroGray: #d8d8d8;
+  --whisperGray: #ebebeb;
+  --whitesmoke: #f5f5f5;
+  --white: #ffffff;
+
+  /* secondary */
+  --supernovaYellow: #ffb72a;
+  --neoncarrotYellow: #ff9e2c;
+  --tangerineOrange: #ff7b00;
+/* End Yung's palette */
+
+  /* Components Colors */
+  --headerColor: var(--buntingBlue);
+  --primaryTextColor: var(--buntingBlue);
+  --hyperlinkColor: var(--denimBlue);
+  --defaultButtonColor: var(--peterriverBlue);
+
+  --formBackgroundColor: var(--whitesmoke);
+
+  --disabledColor: var(--gainsboroGray);
+
+  --warningred: #c0382b;
+  --warningyellow: var(--neoncarrotYellow);
+  --lightBlue: #bde9ff;
+
+  /* Basic Colors used in components*/
+
+  --blue: var(--peterriverBlue);
+  --primaryBlue: var(--blue);
+  --textGray: var(--dimGray);
+  --yellow: var(--supernovaYellow);
+
+  --textPurple: var(--purple);
+  --black: #272F34;
+  --darkgray: #777776;
+  --gray: #A6A8AB;
+  --lightgray: #E5E6E7;
+  --white: #fff;
+  --red: #E96C64;
+  
+  --cloudburst: #363d43; /* was used for sidebar - Yung's theme uses slightly lighter charcoal #454545*/
+  --purple: #A976B2;
+  --green: #00A69C;
+  --darkgreen: #169D8F;
+  --successGreen: #3f9c35;
+  --orange: #FFA500;
+ 
+  --buttonBorder: #BBBDBF;
+  --buttonActiveColor: white;
+  --taggray: #ededed;
+  
+  /* other */
+  --xsmall: 0.7rem;
+  --small: 0.85rem;
+  --semibold: 600;
+  --subtitlesize: 14px;
+
+  --base-border-radius: 0;
+}