diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
new file mode 100644
index 0000000000..8b5743ecb4
--- /dev/null
+++ b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/README.md b/README.md
index 6a30283def..508a0dc094 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ Display a calendar in the middle of the screen (both horizontally and vertically
   - Set 31 days by default in your HTML
 
 On hovering over a cell:
+
 - cursor should become pointer
 - The hovered cell has to become pink (use `#FFBFCB`)
 - Move the hovered cell up by `20px` (use `transform`)
@@ -27,7 +28,7 @@ On hovering over a cell:
 
 > Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline)
 
-*Important note*: In this task, you are allowed to link `*.scss` files directly in HTML `<link>` tags using `href` attribute.
+_Important note_: In this task, you are allowed to link `*.scss` files directly in HTML `<link>` tags using `href` attribute.
 This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle your solution's source code.
 
 ![reference image](reference.png).
@@ -36,13 +37,13 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs
 
 ❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
 
-- [DEMO LINK](https://<your_account>.github.io/layout_calendar/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_calendar/report/html_report/)
+- [DEMO LINK](https://tkrylataja.github.io/layout_calendar/)
+- [TEST REPORT LINK](https://tkrylataja.github.io/layout_calendar/report/html_report/)
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 
 - [ ] Changing 'month-lengh' and 'start-day' modifier in the code element
-reflects in changing calendar layout
-- [ ] Each day has no modifiers, only class (eg. calendar__day)
+      reflects in changing calendar layout
+- [ ] Each day has no modifiers, only class (eg. calendar\_\_day)
 - [ ] All `Typical Mistakes` from `BEM` lesson theory are checked.
 - [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
diff --git a/package-lock.json b/package-lock.json
index 08a8b9f22b..4c0bd76c90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@mate-academy/backstop-config": "latest",
         "@mate-academy/bemlint": "latest",
         "@mate-academy/linthtml-config": "latest",
-        "@mate-academy/scripts": "^1.8.6",
+        "@mate-academy/scripts": "^2.1.3",
         "@mate-academy/stylelint-config": "latest",
         "@parcel/transformer-sass": "^2.12.0",
         "backstopjs": "6.3.23",
@@ -1212,10 +1212,11 @@
       "dev": true
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz",
-      "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz",
+      "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@octokit/rest": "^17.11.2",
         "@types/get-port": "^4.2.0",
diff --git a/package.json b/package.json
index 8ba3c05629..93bb0b7c11 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@mate-academy/backstop-config": "latest",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.8.6",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "backstopjs": "6.3.23",
diff --git a/src/index.html b/src/index.html
index c10199d38b..2c793f8ddd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,6 +13,38 @@
     />
   </head>
   <body>
-    <h1>Calendar</h1>
+    <div class="calendar calendar--start-day-sun calendar--month-length-31">
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+      <div class="calendar__day"></div>
+    </div>
   </body>
 </html>
diff --git a/src/styles/calendar.scss b/src/styles/calendar.scss
new file mode 100644
index 0000000000..af744895de
--- /dev/null
+++ b/src/styles/calendar.scss
@@ -0,0 +1,54 @@
+@import 'utils/variables';
+
+.calendar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $day-gap;
+  width: $day-size * 7 + $day-gap * 6 + 20px;
+  padding: 10px;
+
+  &__day {
+    width: $day-size;
+    height: $day-size;
+    background-color: #eee;
+    border: 1px solid #000;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    transition-duration: 0.5s;
+
+    &:hover {
+      background-color: #ffbfcb;
+
+      // transition-duration: 1s;
+      transform: translateY(-20px);
+    }
+
+    &::before {
+      font-family: Arial, sans-serif;
+      font-size: 30px;
+    }
+  }
+}
+
+@each $day, $offset in $days {
+  .calendar--start-day-#{$day} .calendar__day:first-child {
+    margin-left: $offset * ($day-size + $day-gap);
+  }
+}
+
+@for $i from 1 through 31 {
+  .calendar__day:nth-child(#{$i})::before {
+    content: '#{$i}';
+  }
+}
+
+@for $length from 28 through 31 {
+  .calendar--month-length-#{$length}
+    .calendar__day:nth-child(n + #{$length + 1}) {
+    display: none;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 293d3b1f13..6b2cca8265 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,14 @@
-body {
+* {
   margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+
+@import 'calendar';
diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss
new file mode 100644
index 0000000000..3e49e296e5
--- /dev/null
+++ b/src/styles/utils/variables.scss
@@ -0,0 +1,11 @@
+$day-size: 100px;
+$day-gap: 1px;
+$days: (
+  'mon': 0,
+  'tue': 1,
+  'wed': 2,
+  'thu': 3,
+  'fri': 4,
+  'sat': 5,
+  'sun': 6,
+);