--- a/frontend/css/styles.less
+++ b/frontend/css/styles.less
@@ -1,5 +1,45 @@
-#helloworld {
-  h1 {
-    font-color: blue;
+// Extra small screen / phone
+ //** Deprecated `@screen-xs` as of v3.0.1
+ @screen-xs:                  480px;
+ //** Deprecated `@screen-xs-min` as of v3.2.0
+ @screen-xs-min:              @screen-xs;
+ //** Deprecated `@screen-phone` as of v3.0.1
+ @screen-phone:               @screen-xs-min;
+
+
+@header-width : 65px;
+@subheader-width : 47px;
+
+/*
+* Notification Styles
+*/
+
+@import './notification';
+
+
+#c2net.card {    
+  margin: calc(30px + @header-width + @subheader-width) 10px 30px 10px;
+  width: 100%;
+  
+  .arrow {
+    float: left;
+    padding: 15px;
+  }  
+
+  ul {
+    list-style-type: none;
+  }
+   
+  @media only screen and (max-width: @screen-phone) {
+    margin-right: 5%;
+    margin-left: 5%;
+    word-break: none;
+
+    .readNotificationBox, .unreadNotificationBox {
+      -webkit-transition: none; 
+      transition:none;
+    }
+
   }
 }
+