diff --git a/readme.md b/readme.md
index d2eb319ba..06dec883d 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 # Frontend practice with catalog page and hovers
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_catalog_hovers/)
+- [DEMO LINK](https://ruslanaStell.github.io/layout_catalog_hovers/)
 
 > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
 
diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss
index ffb6b2ccc..303d1c1be 100644
--- a/src/styles/blocks/catalog.scss
+++ b/src/styles/blocks/catalog.scss
@@ -18,6 +18,9 @@
     border-radius: 5px;
     margin-bottom: 48px;
 
+    @include hover (transform, scale(1.2));
+    @include hover (color, #34568b);
+
     &:not(:nth-child(4n)) {
       margin-right: 48px;
     }
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 638a10fef..9e72e2405 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -38,5 +38,7 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 500;
+
+    @include hover (color, #00acdc);
   }
 }
diff --git a/src/styles/blocks/mixin.scss b/src/styles/blocks/mixin.scss
new file mode 100644
index 000000000..5ca71aa30
--- /dev/null
+++ b/src/styles/blocks/mixin.scss
@@ -0,0 +1,6 @@
+@mixin hover ($property, $value) {
+  transition: #{$property} 300ms;
+  &:hover {
+    #{$property}: #{$value};
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 465a8cb4a..b1d7ddff0 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,4 @@
+@import "blocks/mixin.scss";
 @import "blocks/page";
 @import "blocks/header";
 @import "blocks/catalog";