diff --git a/src/constructors/Component.tsx b/src/constructors/Component.tsx
new file mode 100644
index 0000000..4a02469
--- /dev/null
+++ b/src/constructors/Component.tsx
@@ -0,0 +1,12 @@
+import { FunctionComponent } from "preact";
+import { useEffect } from "preact/hooks";
+
+export const withTitle = <P,>(title: string, WrappedComponent: FunctionComponent<P>): FunctionComponent<P> => {
+  const ComponentWithTitle: FunctionComponent<P> = (props) => {
+    useEffect(() => {
+      document.title = title;
+    }, []);
+    return <WrappedComponent {...props} />;
+  };
+  return ComponentWithTitle;
+};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 1bfe437..666a7e5 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,15 +1,12 @@
 import Button from "@/components/ui/Button";
+import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
 import classes from "./404.module.scss";
 
 const Page404: FunctionComponent = () => {
   const { route } = useLocation();
-  useEffect(() => {
-    document.title = UrlsTitle.PAGE404;
-  }, []);
   return (
     <div id={classes.container}>
       <div id={classes.main_container}>
@@ -27,4 +24,4 @@ const Page404: FunctionComponent = () => {
   );
 };
 
-export default Page404;
+export default withTitle(UrlsTitle.PAGE404, Page404);
diff --git a/src/pages/calendar.tsx b/src/pages/calendar.tsx
index dcbe198..187d971 100644
--- a/src/pages/calendar.tsx
+++ b/src/pages/calendar.tsx
@@ -1,7 +1,8 @@
+import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { cn } from "@/utils/class-merge";
 import { FunctionComponent, h } from "preact";
-import { useEffect, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 
 type MarkedDateType = "event" | "holiday" | "important" | string;
 type MarkedDates = Record<string, MarkedDateType>;
@@ -17,9 +18,6 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
   markedDates = {},
   className = "",
 }: BigCalendarProps) => {
-  useEffect(() => {
-    document.title = UrlsTitle.CALENDAR;
-  }, []);
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
@@ -251,4 +249,4 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
   );
 };
 
-export default BigCalendar;
+export default withTitle(UrlsTitle.CALENDAR, BigCalendar);
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 697a1b3..dbd51c0 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,17 +1,14 @@
 import Button from "@/components/ui/Button";
 import Input from "@/components/ui/Input";
+import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
 import classes from "./login.module.scss";
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  useEffect(() => {
-    document.title = UrlsTitle.LOGIN;
-  }, []);
   return (
     <div class={classes.login_container}>
       <div class={classes.login_card}>
@@ -33,4 +30,4 @@ const LoginPage: FunctionComponent = () => {
   );
 };
 
-export default LoginPage;
+export default withTitle(UrlsTitle.LOGIN, LoginPage);
diff --git a/src/pages/profile_settings.tsx b/src/pages/profile_settings.tsx
index ba15871..32294fb 100644
--- a/src/pages/profile_settings.tsx
+++ b/src/pages/profile_settings.tsx
@@ -1,17 +1,14 @@
 import Button from "@/components/ui/Button";
+import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
 import classes from "./profile_settings.module.scss";
 
 const ProfileSettings: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  useEffect(() => {
-    document.title = UrlsTitle.PROFILE;
-  }, []);
   return (
     <div class={classes.container}>
       <div id={classes.avatar}>Аватар</div>
@@ -42,4 +39,4 @@ const ProfileSettings: FunctionComponent = () => {
   );
 };
 
-export default ProfileSettings;
+export default withTitle(UrlsTitle.PROFILE, ProfileSettings);
diff --git a/src/pages/profile_tasks.tsx b/src/pages/profile_tasks.tsx
index c62a22e..3f7683a 100644
--- a/src/pages/profile_tasks.tsx
+++ b/src/pages/profile_tasks.tsx
@@ -1,7 +1,8 @@
 import Task from "@/components/task";
+import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { FunctionComponent } from "preact";
-import { useEffect, useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
 import classes from "./profile_tasks.module.scss";
 
 const example_tasks = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8"];
@@ -12,9 +13,6 @@ const ProfileTasks: FunctionComponent = () => {
     const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
     return formatter.format(date);
   }, []);
-  useEffect(() => {
-    document.title = UrlsTitle.TASKS;
-  }, []);
   return (
     <div class={classes.container}>
       <div class={classes.header}>Сегодня: {getDate}</div>
@@ -27,4 +25,4 @@ const ProfileTasks: FunctionComponent = () => {
   );
 };
 
-export default ProfileTasks;
+export default withTitle(UrlsTitle.TASKS, ProfileTasks);