diff --git a/package-lock.json b/package-lock.json
index 0adcc869f..4be19a0f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,12 +18,12 @@
       },
       "devDependencies": {
         "@cypress/react18": "^2.0.1",
-        "@mate-academy/scripts": "^1.8.5",
+        "@mate-academy/scripts": "^1.9.12",
         "@mate-academy/students-ts-config": "*",
         "@mate-academy/stylelint-config": "*",
         "@types/node": "^20.14.10",
         "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
+        "@types/react-dom": "^18.3.5",
         "@typescript-eslint/parser": "^7.16.0",
         "@vitejs/plugin-react": "^4.3.1",
         "cypress": "^13.13.0",
@@ -1170,9 +1170,9 @@
       }
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz",
-      "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==",
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz",
+      "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==",
       "dev": true,
       "dependencies": {
         "@octokit/rest": "^17.11.2",
@@ -2207,12 +2207,12 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
-      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
+      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
       "dev": true,
-      "dependencies": {
-        "@types/react": "*"
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
       }
     },
     "node_modules/@types/sinonjs__fake-timers": {
diff --git a/package.json b/package.json
index e6134ce84..160168e38 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,12 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.5",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.3.1",
     "cypress": "^13.13.0",
diff --git a/src/index.tsx b/src/index.tsx
index a9689cb38..5de307abe 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,8 +1,8 @@
 import { createRoot } from 'react-dom/client';
 
-import './styles/index.css';
-import './styles/todo-list.css';
-import './styles/filters.css';
+import './styles/index.scss';
+import './styles/todo-list.scss';
+import './styles/filters.scss';
 
 import { App } from './App';
 
diff --git a/src/styles/filters.css b/src/styles/filters.scss
similarity index 100%
rename from src/styles/filters.css
rename to src/styles/filters.scss
diff --git a/src/styles/index.css b/src/styles/index.scss
similarity index 87%
rename from src/styles/index.css
rename to src/styles/index.scss
index a34eec7c6..d8d324941 100644
--- a/src/styles/index.css
+++ b/src/styles/index.scss
@@ -21,5 +21,5 @@ body {
 }
 
 @import './todoapp';
-@import './todo';
-@import './filter';
+@import './todo-list';
+@import './filters';
diff --git a/src/styles/todo-list.css b/src/styles/todo-list.scss
similarity index 98%
rename from src/styles/todo-list.css
rename to src/styles/todo-list.scss
index 4576af434..fd5f6aa10 100644
--- a/src/styles/todo-list.css
+++ b/src/styles/todo-list.scss
@@ -73,6 +73,7 @@
   &__title-field {
     width: 100%;
     padding: 11px 14px;
+    box-sizing: border-box;
 
     font-size: inherit;
     line-height: inherit;
diff --git a/src/styles/todoapp.scss b/src/styles/todoapp.scss
index e289a9458..f54393d0d 100644
--- a/src/styles/todoapp.scss
+++ b/src/styles/todoapp.scss
@@ -59,6 +59,8 @@
     width: 100%;
     padding: 16px 16px 16px 60px;
 
+    box-sizing: border-box;
+
     font-size: 24px;
     line-height: 1.4em;
     font-family: inherit;
diff --git a/tsconfig.json b/tsconfig.json
index cfb168bb2..d19f50b9a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
   ],
   "compilerOptions": {
     "sourceMap": false,
+    "esModuleInterop": true,
     "types": ["node", "cypress"]
   }
 }