diff --git a/src/atoms/Badge.local.scss b/src/atoms/Badge.local.scss
index 25e6450d84e5b15a976291487cdaf632049873d1..440ad26b535077eac519ee4f91d66799ea51153b 100644
--- a/src/atoms/Badge.local.scss
+++ b/src/atoms/Badge.local.scss
@@ -1,18 +1,25 @@
 .root {
   display: inline-flex;
   align-items: center;
-  border: 1px solid #eee;
-  border-radius: 2px;
+  background: lightgrey;
+  background: linear-gradient(#fff 0, #fff 1.1em, grey 1.1em, grey 1.15em, #fff 1.15em, #fff 2em);
   font-size: 0.8rem;
+  margin-right: 1em;
+  padding-bottom: 1em;
+  color: inherit;
 }
 
 .count {
-  background: white;
-  padding: 5px;
+  border-radius: 50%;
+  text-align: center;
+  font-weight: 600;
+  color: grey;
+  font-size: 1em;
+  padding-right: 0.5em;
 }
 
 .label {
   display: inline-block;
-  background: #eee;
-  padding: 5px;
+  padding: 0;
+  text-shadow: 0.05em 0.05em 0 #fff, -0.05em -0.05em 0 #fff, -0.05em 0.05em 0 #fff, 0.05em -0.05em 0 #fff;
 }
diff --git a/src/atoms/Badge.md b/src/atoms/Badge.md
index 0cb31a8fb4cad7444c3fc28f213ff09a75e7c4b3..ed418eaab3bd6d585c9e3cf629251605c3d289c1 100644
--- a/src/atoms/Badge.md
+++ b/src/atoms/Badge.md
@@ -9,7 +9,8 @@ A plural form of the label can be provided.
 ```js
 <div>
     <Badge count={1} label="thing" plural="things"/> 
-    <Badge count={10} label="thing" plural="things"/> 
+    <Badge count={99} label="thing" plural="things"/> 
     <Badge count={0} label="thing" plural="things"/> 
+    <Badge count={299} label="thing" plural="things"/> 
 </div>
 ```
diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss
index c71bced0c1f1bc0893144e72d5989bfca9b30213..995635b7b91d8d05165f6a635955b9d843f4618d 100644
--- a/src/atoms/Button.local.scss
+++ b/src/atoms/Button.local.scss
@@ -31,16 +31,17 @@
       outline: 1px solid transparent;
     }
 
-    &::after {
-      content: "Saved!";
-      top: 20%;
-      left: 115%;
-      position: absolute;
-      background: var(--color-primary);
-      color: white;
-      padding: 0.1em 0.3em;
-      opacity: 0;
-    }
+    // this will be added to the button that need a feedback to the user. 
+    // &::after {
+    //   content: "Saved!";
+    //   top: 20%;
+    //   left: 115%;
+    //   position: absolute;
+    //   background: var(--color-primary);
+    //   color: white;
+    //   padding: 0.1em 0.3em;
+    //   opacity: 0;
+    // }
 
     &:active {
       transform: scale(0.8);
diff --git a/src/atoms/ValidatedField.local.scss b/src/atoms/ValidatedField.local.scss
index feb7b74b33d3858fbc674f4591af94d0282591a0..0d3dcdb616e3baf84904c6e5bcb3dd43ef2cfe9b 100644
--- a/src/atoms/ValidatedField.local.scss
+++ b/src/atoms/ValidatedField.local.scss
@@ -1,5 +1,5 @@
+
 .messages {
-  // color: white;
   margin-top: 10px;
   font-style: italic;
   display: inline-block;
@@ -12,7 +12,7 @@
 
 .error,
 .warning {
-  font-size: 0.9em; // padding: 0.3em 0.5em;
+  font-size: 0.9em;
   letter-spacing: 0.01em;
 }