diff --git a/src/components/HudozkaTitle.js b/src/components/HudozkaTitle.js
new file mode 100644
index 00000000..e93179b9
--- /dev/null
+++ b/src/components/HudozkaTitle.js
@@ -0,0 +1,10 @@
+const React = require('react')
+
+const HudozkaTitle = () => (
+	<div className="HudozkaTitle">
+		<p>МБУДО</p>
+		<h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
+	</div>
+)
+
+module.exports = HudozkaTitle
diff --git a/src/render/home.js b/src/render/home.js
index c6086d74..5707506d 100644
--- a/src/render/home.js
+++ b/src/render/home.js
@@ -1,4 +1,5 @@
 const React = require('react')
+const HudozkaTitle = require('../components/HudozkaTitle')
 const {createArticleCardList} = require('../render/articles')
 const {render} = require('../lib/render')
 
@@ -13,10 +14,7 @@ async function renderHome(path, pageSize) {
 
 	const Component = (
 		<div className="content content_wide">
-			<div className="hudozka-title">
-				<p>МБУДО</p>
-				<h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
-			</div>
+			<HudozkaTitle/>
 
 			{articles}
 		</div>
diff --git a/src/style/components/HudozkaTitle.scss b/src/style/components/HudozkaTitle.scss
new file mode 100644
index 00000000..331c99b3
--- /dev/null
+++ b/src/style/components/HudozkaTitle.scss
@@ -0,0 +1,24 @@
+@import "../variables";
+
+.HudozkaTitle {
+  --padding: var(--double-margin) 0;
+
+  padding: var(--padding);
+  text-align: center;
+
+  p {
+    color: var(--text-color-second);
+    margin-bottom: var(--single-margin);
+    font-size: var(--font-size-second);
+  }
+
+  h1 {
+    margin-top: var(--single-margin);
+  }
+}
+
+@media (max-width: $mobile-width) {
+  .HudozkaTitle {
+    --padding: 0 0 var(--double-margin);
+  }
+}
diff --git a/src/style/hudozka-title.scss b/src/style/hudozka-title.scss
deleted file mode 100644
index 4cf365bb..00000000
--- a/src/style/hudozka-title.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "variables";
-
-.hudozka-title {
-  padding: $double-margin 0;
-
-  text-align: center;
-
-  p {
-    color: $light-color;
-    margin-bottom: $single-margin;
-    font-size: $smaller-font-size;
-  }
-
-  h1 {
-    margin-top: $single-margin;
-    font-size: $biggest-font-size;
-  }
-}
-
-@media (max-width: $mobile-width) {
-  .hudozka-title {
-    h1 {
-      font-size: $big-font-size;
-    }
-  }
-}
diff --git a/src/style/style.scss b/src/style/style.scss
index a3f84c9a..72ffe66e 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -31,7 +31,7 @@
 @import "content";
 @import "page-animation";
 @import "main-image";
-@import "hudozka-title";
+@import "components/HudozkaTitle";
 //@import "vertical-image";
 
 @import "schedule-selector";
diff --git a/src/style/variables.scss b/src/style/variables.scss
index 45c1793f..9922f162 100644
--- a/src/style/variables.scss
+++ b/src/style/variables.scss
@@ -74,10 +74,12 @@ $short-duration: 0.3s;
 
 :root {
   --text-color: #303030;
+  --text-color-second: #ccc;
 
   --font-size-h1: 2.0rem;
   --font-size-h2: 1.3rem;
   --font-size-h3: 1.1rem;
+  --font-size-second: 0.9rem;
 
   //COLOR
   --dark-color: $dark-color;