diff --git a/README.md b/README.md
index 88bfdf4..e41059a 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,21 @@ This Ruby on Rails gem allows you to easily add Growl-like notifications to your
 
 Are you using Rails 3.0 or lower? Check out [the 'old' branch on Github](https://github.com/RobinBrouwer/gritter/tree/old). Want support for IE6? 
 Also check out that branch, because the newer version of gritter inside this gem dropped support for it.
+If you are Using Rails 6 you should add manually the JS and SCSS to your path
 
+## Installation For Rails 6
+**Add gritter.js and gritter.scss to your packs .
+  Do not forget to add images folder to your packs too. **
+  Add this line to your application.js :
+    
+    import 'gritter';
+    
+Add this to your application.scss :
+    
+    @import 'gritter';
 
-## Installation
+
+## Installation For Rails 4
 
 You can use this gem by putting the following inside your Gemfile:
 
@@ -37,7 +49,8 @@ Version 1.2.0 changes (02/08/2015):
     
     - Added Rails 4 support.
     - Added on_click support.
-
+    - Added Rails 6 support .
+    - Fix style problems .
 Version 1.1.0 changes (31/01/2013):
     
     - All gflash messages can also be stored in the Rails flash messages (optional).
diff --git a/app/assets/stylesheets/gritter.css.scss b/app/assets/stylesheets/gritter.css.scss
deleted file mode 100755
index 87c3108..0000000
--- a/app/assets/stylesheets/gritter.css.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-#gritter-notice-wrapper {
-  position:fixed;
-  top:20px;
-  right:20px;
-  width:301px;
-  z-index:9999;
-  
-  &.top-left {
-    left: 20px;
-    right: auto;
-  }
-  
-  &.bottom-right {
-    top: auto;
-    left: auto;
-    bottom: 20px;
-    right: 20px;
-  }
-  
-  &.bottom-left {
-    top: auto;
-    right: auto;
-    bottom: 20px;
-    left: 20px;
-  }
-}
-
-.gritter-item-wrapper {
-  position:relative;
-  margin:0 0 10px 0;
-  background:url(asset-url('ie-spacer.gif')); // ie7/8 fix
-}
-
-.gritter-top {
-  background:url(asset-url('gritter.png')) no-repeat left -30px;
-  height:10px;
-}
-.hover .gritter-top {
-  background-position:right -30px;
-}
-.gritter-bottom {
-  background:url(asset-url('gritter.png')) no-repeat left bottom;
-  height:8px;
-  margin:0;
-}
-.hover .gritter-bottom {
-  background-position: bottom right;
-}
-
-.gritter-item {
-  display:block;
-  color:#eee;
-  padding:2px 11px 8px 11px;
-  font-size: 11px;
-  font-family:verdana;
-  filter:inherit; // ie8 fix
-  
-  &.gritter-css2 {
-    background:url(asset-url('gritter.png')) no-repeat left -40px;
-  }
-  &.gritter-css3 {
-    background:rgba(0, 0, 0, 0.8);
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-    padding-top: 12px;
-    padding-bottom: 16px;
-  }
-  
-  p {
-    padding:0;
-    margin:0;
-  }
-}
-.hover .gritter-item.gritter-css2 {
-  background-position:right -40px;
-}
-.hover .gritter-item.gritter-css3 {
-  padding:10px 9px 14px 9px;
-  border: solid 2px #fff;
-}
-
-.gritter-close {
-  display:none;
-  position:absolute;
-  top:5px;
-  left:3px;
-  cursor:pointer;
-  width:30px;
-  height:30px;
-  filter:inherit; // ie8 fix
-}
-.gritter-css2 .gritter-close {
-  background:url(asset-url('gritter.png')) no-repeat left top;
-}
-.gritter-css3 .gritter-close {
-  background:url(asset-url('gritter-close.png')) no-repeat;
-}
-
-.gritter-title {
-  font-size:14px;
-  font-weight:bold;
-  padding:0 0 7px 0;
-  display:block;
-  text-shadow:1px 1px #000; /* Not supported by IE :( */
-}
-.gritter-image {
-  width:48px;
-  height:48px;
-  float:left;
-}
-.gritter-with-image,
-.gritter-without-image {
-  padding:0 0 5px 0;
-}
-.gritter-with-image {
-  width:220px;
-  float:right;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/gritter.scss b/app/assets/stylesheets/gritter.scss
new file mode 100755
index 0000000..61e57b2
--- /dev/null
+++ b/app/assets/stylesheets/gritter.scss
@@ -0,0 +1,119 @@
+#gritter-notice-wrapper {
+    position:fixed;
+    top:20px;
+    right:20px;
+    width:301px;
+    z-index:9999;
+    
+    &.top-left {
+      left: 20px;
+      right: auto;
+    }
+    
+    &.bottom-right {
+      top: auto;
+      left: auto;
+      bottom: 20px;
+      right: 20px;
+    }
+    
+    &.bottom-left {
+      top: auto;
+      right: auto;
+      bottom: 20px;
+      left: 20px;
+    }
+  }
+  
+  .gritter-item-wrapper {
+    position:relative;
+    margin:0 0 10px 0;
+    background:url('../images/ie-spacer.gif'); // ie7/8 fix
+  }
+  
+  .gritter-top {
+    background:url('../images/gritter.png') no-repeat left -30px;
+    height:10px;
+  }
+  .hover .gritter-top {
+    background-position:right -30px;
+  }
+  .gritter-bottom {
+    background:url('../images/gritter.png') no-repeat left bottom;
+    height:8px;
+    margin:0;
+  }
+  .hover .gritter-bottom {
+    background-position: bottom right;
+  }
+  
+  .gritter-item {
+    display:block;
+    color:#eee;
+    padding:2px 11px 8px 11px;
+    font-size: 11px;
+    font-family:verdana;
+    filter:inherit; // ie8 fix
+    
+    &.gritter-css2 {
+      background:url('../images/gritter.png') no-repeat left -40px;
+    }
+    &.gritter-css3 {
+      background:rgba(0, 0, 0, 0.8);
+      -webkit-border-radius: 10px;
+      -moz-border-radius: 10px;
+      border-radius: 10px;
+      padding-top: 12px;
+      padding-bottom: 16px;
+    }
+    
+    p {
+      padding:0;
+      margin:0;
+    }
+  }
+  .hover .gritter-item.gritter-css2 {
+    background-position:right -40px;
+  }
+  .hover .gritter-item.gritter-css3 {
+    padding:10px 9px 14px 9px;
+    border: solid 2px #fff;
+  }
+  
+  .gritter-close {
+    display:none;
+    position:absolute;
+    top:5px;
+    left:3px;
+    cursor:pointer;
+    width:30px;
+    height:30px;
+    filter:inherit; // ie8 fix
+  }
+  .gritter-css2 .gritter-close {
+    background:url('../images/gritter.png') no-repeat left top;
+  }
+  .gritter-css3 .gritter-close {
+    background:url('../images/gritter-close.png') no-repeat;
+  }
+  
+  .gritter-title {
+    font-size:14px;
+    font-weight:bold;
+    padding:0 0 7px 0;
+    display:block;
+    text-shadow:1px 1px #000; /* Not supported by IE :( */
+  }
+  .gritter-image {
+    width:48px;
+    height:48px;
+    float:left;
+  }
+  .gritter-with-image,
+  .gritter-without-image {
+    padding:0 0 5px 0;
+  }
+  .gritter-with-image {
+    width:220px;
+    float:right;
+  }