diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 8dbb071..6025db0 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -1,6 +1,6 @@
 $main-color: white;
-$second-color: orange;
-$third-color: black;
+$text-color: black;
+$accents-color: orange;
 $default-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
   rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 $default-radius: 5px;
diff --git a/app/assets/stylesheets/adminPanel.css.scss b/app/assets/stylesheets/adminPanel.css.scss
index 472842d..6ededde 100644
--- a/app/assets/stylesheets/adminPanel.css.scss
+++ b/app/assets/stylesheets/adminPanel.css.scss
@@ -19,7 +19,7 @@
   background-color: $main-color;
   border-radius: $default-radius;
   opacity: 0.9;
-  color: black;
+  color: $text-color;
   margin: 25px auto;
 }
 
@@ -35,7 +35,7 @@
 }
 .box-title-h2 {
   widows: 100%;
-  color: black;
+  color: $text-color;
   text-align: center;
   box-shadow: $default-shadow;
   opacity: 0.9;
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index daf4903..2f6dc40 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -18,7 +18,7 @@
 @import "./variables";
 
 .button-inside-box {
-  color: black;
+  color: $text-color;
   padding: 10px;
 }
 
@@ -29,13 +29,13 @@
   display: flex;
   @include flexCenter(row);
   opacity: 0.9;
-  color: $second-color;
+  color: $accents-color;
   margin: 25px auto;
 }
 
 .admin-panel-button-header:hover {
   text-decoration: none;
-  color: $second-color;
+  color: $accents-color;
 }
 .admin-panel-button-header:focus {
   outline: none;
diff --git a/app/assets/stylesheets/css/App.css.scss b/app/assets/stylesheets/css/App.css.scss
index f73f7ad..9144302 100644
--- a/app/assets/stylesheets/css/App.css.scss
+++ b/app/assets/stylesheets/css/App.css.scss
@@ -140,25 +140,24 @@
   .pill:hover {
     text-decoration: none;
     .pill-icon {
-      font-size: 55px;
-      color: rgb(245, 191, 90);
+      color: orange;
     }
     .pill-name {
       color: orange;
     }
     .pill-description {
-      color: rgb(245, 191, 90);
+      color: orange;
     }
   }
 
   .pill-icon {
-    font-size: 55px;
-
+    font-size: 85px;
     color: white;
+    transition: font-size, color 0.3s;
   }
   .pill-name {
     color: white;
-    font-size: 18px;
+    font-size: 25px;
     padding-top: 15px;
   }
 
@@ -171,7 +170,7 @@
     width: 100%;
     min-height: 50px;
     color: white;
-    font-size: 12px;
+    font-size: 18px;
     padding-top: 5px;
     font-weight: 600;
   }
diff --git a/app/assets/stylesheets/css/Duchowienstwo.css.scss b/app/assets/stylesheets/css/Duchowienstwo.css.scss
index c77f129..e2ce830 100644
--- a/app/assets/stylesheets/css/Duchowienstwo.css.scss
+++ b/app/assets/stylesheets/css/Duchowienstwo.css.scss
@@ -28,7 +28,7 @@
   border-radius: $default-radius;
 }
 .proboszczowie-img-title {
-  color: black;
+  color: $text-color;
 }
 .ob-proboszczowie-overlay {
   display: flex;
@@ -46,7 +46,7 @@
 .ob-proboszczowie-text {
   text-align: left;
   width: 80%;
-  color: black;
+  color: $text-color;
 }
 @media screen and (max-width: 605px) {
   .ob-proboszczowie-overlay {
diff --git a/app/assets/stylesheets/css/Kontakt.css.scss b/app/assets/stylesheets/css/Kontakt.css.scss
index 7fce8fa..b3409e4 100644
--- a/app/assets/stylesheets/css/Kontakt.css.scss
+++ b/app/assets/stylesheets/css/Kontakt.css.scss
@@ -19,7 +19,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: $second-color;
+  background-color: $accents-color;
   color: $main-color;
   padding: 5px;
   margin: 10px 0;
diff --git a/app/assets/stylesheets/css/Navbar.css.scss b/app/assets/stylesheets/css/Navbar.css.scss
index c7e99b8..31bb279 100644
--- a/app/assets/stylesheets/css/Navbar.css.scss
+++ b/app/assets/stylesheets/css/Navbar.css.scss
@@ -66,6 +66,8 @@
     z-index: 100;
     position: relative;
     outline: none;
+    background-color: transparent;
+    border: none;
   }
   .navbar-menu-button:focus {
     outline: none;
@@ -87,7 +89,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    background-color: orange;
+    background-color: $accents-color;
     transition: 0.3s transform ease-in-out;
     transform: translateX(-150%);
     z-index: 1;
diff --git a/app/assets/stylesheets/css/NewsView.css.scss b/app/assets/stylesheets/css/NewsView.css.scss
index feb6b9a..40af6bf 100644
--- a/app/assets/stylesheets/css/NewsView.css.scss
+++ b/app/assets/stylesheets/css/NewsView.css.scss
@@ -2,7 +2,7 @@
 
 .newsView-box-text-show {
   @include flexCenter(column);
-  color: black;
+  color: $text-color;
 }
 
 .newsView-box {
diff --git a/app/assets/stylesheets/css/buttons.css.scss b/app/assets/stylesheets/css/buttons.css.scss
index ecdbc5a..df3136e 100644
--- a/app/assets/stylesheets/css/buttons.css.scss
+++ b/app/assets/stylesheets/css/buttons.css.scss
@@ -21,7 +21,7 @@
 // active button in every subcatecory
 .button_clicked {
   background-color: $main-color;
-  color: black;
+  color: $text-color;
   box-sizing: border-box;
   box-shadow: $default-shadow;
   margin: $button-space;
@@ -42,7 +42,7 @@
   width: 45px;
   height: 35px;
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiNmZmZmZmY7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPgo=)
-    center / contain no-repeat $second-color;
+    center / contain no-repeat $accents-color;
   opacity: 0.75;
   border-radius: $default-radius;
 }
diff --git a/app/assets/stylesheets/css/index.css.scss b/app/assets/stylesheets/css/index.css.scss
index 38ff3d4..4a40017 100644
--- a/app/assets/stylesheets/css/index.css.scss
+++ b/app/assets/stylesheets/css/index.css.scss
@@ -34,19 +34,19 @@ body {
 .h3-header {
   padding: 0;
   margin: 0;
-  color: $second-color;
+  color: $accents-color;
 }
 
 .h3-header {
   padding: 0;
   margin: 0;
-  color: $second-color;
+  color: $accents-color;
 
   a {
-    color: $second-color;
+    color: $accents-color;
   }
   a:hover {
-    color: $second-color;
+    color: $accents-color;
   }
 }
 
@@ -59,7 +59,7 @@ input {
 
 .buttons-box-text {
   padding-bottom: 5px;
-  color: black;
+  color: $text-color;
   margin: 15p 15px 15px 15px;
 }
 
diff --git a/app/assets/stylesheets/css/subcategory_view.css.scss b/app/assets/stylesheets/css/subcategory_view.css.scss
index 6595922..4703780 100644
--- a/app/assets/stylesheets/css/subcategory_view.css.scss
+++ b/app/assets/stylesheets/css/subcategory_view.css.scss
@@ -7,6 +7,7 @@
     margin: 0;
     display: flex;
     justify-content: center;
+    padding-bottom: 10px;
   }
 
   .subcategory__view__h2 {
@@ -16,19 +17,19 @@
 
   .subcategory__view {
     height: 100%;
-    max-width: 75%;
-    min-width: 75%;
+    box-sizing: border-box;
+    min-width: 95%;
+    max-width: 95%;
     background-color: $main-color;
     opacity: 0.9;
     text-align: justify;
-    border: 3px solid black;
     margin-top: 15px;
     border-radius: $default-radius;
   }
 
   .subcategory__view > h2 {
     height: 100%;
-    color: black;
+    color: $text-color;
     text-align: center;
     padding-top: 5px 0 5px 0;
     box-shadow: $default-shadow;
@@ -41,7 +42,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    color: black;
+    color: $text-color;
   }
   .subcategory__view__row__content {
     box-sizing: border-box;
@@ -68,7 +69,7 @@
   }
 
   .subcategory__view > h2 {
-    color: black;
+    color: $text-color;
     text-align: center;
     padding-top: 5px 0 5px 0;
     box-shadow: $default-shadow;
@@ -85,7 +86,7 @@
     display: flex;
     justify-content: space-around;
     align-items: center;
-    color: black;
+    color: $text-color;
   }
   .subcategory__view__row__content {
     box-sizing: border-box;
diff --git a/app/javascript/components/App.js b/app/javascript/components/App.js
index ab08871..fa9a675 100644
--- a/app/javascript/components/App.js
+++ b/app/javascript/components/App.js
@@ -44,7 +44,7 @@ class App extends React.Component {
             </Link>
             <Link className="pill" to="/inne">
               <i class="fas fa-people-carry pill-icon" />
-              <span className="pill-name">Wspolnota</span>
+              <span className="pill-name">Wspolnoty</span>
               <span className="pill-description">Informacje o wspolnotach</span>
             </Link>
           </div>