diff --git a/eslint.config.js b/eslint.config.js
index 6c4dd8b1c..7f946c537 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -92,7 +92,7 @@ export default [
       'react/prop-types': 'off',
       'react/react-in-jsx-scope': 'off',
       'react-refresh/only-export-components': [
-        'warn',
+        'off',
         { allowConstantExport: true },
       ],
 
diff --git a/package-lock.json b/package-lock.json
index 08368695c..1c54f0f2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "rs-site",
       "version": "0.0.0",
       "dependencies": {
+        "class-variance-authority": "^0.7.0",
         "classnames": "^2.5.1",
         "dayjs": "^1.11.11",
         "nextjs-toploader": "^1.6.12",
@@ -3632,6 +3633,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -3749,6 +3761,14 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
diff --git a/package.json b/package.json
index ec3e361dc..e323e3148 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
     "nextjs-toploader": "^1.6.12",
diff --git a/src/app/layouts/base-layout/components/partnered/partnered.tsx b/src/app/layouts/base-layout/components/partnered/partnered.tsx
index 8d7cb0c7d..df306a941 100644
--- a/src/app/layouts/base-layout/components/partnered/partnered.tsx
+++ b/src/app/layouts/base-layout/components/partnered/partnered.tsx
@@ -1,11 +1,12 @@
 import { AwsLogo, EpamLogo, GithubLogo, JetBrainsLogo } from '@/shared/icons';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './partnered.scss';
 
 export const Partnered = () => (
   <div className="partnered container" data-testid="partnered">
     <div className="partnered content">
-      <div className="title">Partnered with</div>
+      <WidgetTitle size="small">Partnered with</WidgetTitle>
       <div className="partners">
         <EpamLogo />
         <JetBrainsLogo />
diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
index f10730213..7b688c0aa 100644
--- a/src/app/styles/index.scss
+++ b/src/app/styles/index.scss
@@ -33,6 +33,10 @@ li {
   padding: 0;
 }
 
+h2 {
+  margin: 0;
+}
+
 figure {
   margin: 0;
   padding: 0;
diff --git a/src/app/styles/normalize.scss b/src/app/styles/normalize.scss
index 25ef0e31c..677bed312 100644
--- a/src/app/styles/normalize.scss
+++ b/src/app/styles/normalize.scss
@@ -35,10 +35,11 @@ main {
 /**
    * Correct the font size and margin on `h1` elements within `section` and
    * `article` contexts in Chrome, Firefox, and Safari.
+   * delete h1 margin
    */
 
 h1 {
-  margin: 0.67em 0;
+  margin: 0;
   font-size: 2em;
 }
 
diff --git a/src/entities/courses/ui/general/general.tsx b/src/entities/courses/ui/general/general.tsx
index 3cc35ed42..9eff99c1a 100644
--- a/src/entities/courses/ui/general/general.tsx
+++ b/src/entities/courses/ui/general/general.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './general.scss';
 
@@ -7,7 +7,7 @@ export const General = () => {
   return (
     <section className="general container">
       <div className="general content">
-        <Title text="General" />
+        <WidgetTitle size="small">General</WidgetTitle>
         <div className="general-info">
           <div className="materials">
             <h2 className="title">Materials</h2>
diff --git a/src/entities/courses/ui/main/main.tsx b/src/entities/courses/ui/main/main.tsx
index 31d69ddeb..a9eca7f41 100644
--- a/src/entities/courses/ui/main/main.tsx
+++ b/src/entities/courses/ui/main/main.tsx
@@ -1,6 +1,6 @@
 import mentors from '@/shared/assets/mentor-with-his-students.webp';
 import Image from '@/shared/ui/image';
-import { Title, TitleType } from '@/shared/ui/title';
+import { MainTitle } from '@/shared/ui/main-title';
 
 import './main.scss';
 
@@ -10,7 +10,7 @@ export const Main = () => {
       <div className="courses-main content">
         <div className="left">
           <div className="title-container">
-            <Title text="Our Courses" type={TitleType.ExtraBig} />
+            <MainTitle>Our Courses</MainTitle>
           </div>
           <h2 className="description">Journey to full stack mastery</h2>
         </div>
diff --git a/src/shared/ui/main-title/index.ts b/src/shared/ui/main-title/index.ts
new file mode 100644
index 000000000..effb75a0e
--- /dev/null
+++ b/src/shared/ui/main-title/index.ts
@@ -0,0 +1 @@
+export { MainTitle } from './main-title';
diff --git a/src/shared/ui/main-title/main-title.module.scss b/src/shared/ui/main-title/main-title.module.scss
new file mode 100644
index 000000000..ea996ec80
--- /dev/null
+++ b/src/shared/ui/main-title/main-title.module.scss
@@ -0,0 +1,11 @@
+.title {
+  font-size: 96px;
+  font-weight: 700;
+  color: $color-black;
+  text-align: left;
+  letter-spacing: -0.04em;
+
+  @include media-tablet {
+    font-size: 60px;
+  }
+}
diff --git a/src/shared/ui/main-title/main-title.test.tsx b/src/shared/ui/main-title/main-title.test.tsx
new file mode 100644
index 000000000..5cd1cba82
--- /dev/null
+++ b/src/shared/ui/main-title/main-title.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { MainTitle, cx } from './main-title';
+
+describe('MainTitle component', () => {
+  it('renders without crashing', () => {
+    render(<MainTitle>TestTitle</MainTitle>);
+    const title = screen.getByText('TestTitle');
+
+    expect(title).toBeInTheDocument();
+  });
+
+  it('displays h1 tag', () => {
+    render(<MainTitle />);
+    const element = screen.getByRole('heading', { level: 1 });
+
+    expect(element).toBeInTheDocument();
+  });
+
+  it('displays styles correctly', () => {
+    render(<MainTitle />);
+    const element = screen.getByRole('heading', { level: 1 });
+
+    expect(element).toHaveClass(cx('title'));
+  });
+
+  it('renders children correctly', () => {
+    render(
+      <MainTitle>
+        <div>Child element</div>
+      </MainTitle>,
+    );
+
+    const child = screen.getByText('Child element');
+
+    expect(child).toBeInTheDocument();
+  });
+});
diff --git a/src/shared/ui/main-title/main-title.tsx b/src/shared/ui/main-title/main-title.tsx
new file mode 100644
index 000000000..7f1c7878c
--- /dev/null
+++ b/src/shared/ui/main-title/main-title.tsx
@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+import { VariantProps, cva } from 'class-variance-authority';
+import classNames from 'classnames/bind';
+
+import styles from './main-title.module.scss';
+
+type MainTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
+
+export const cx = classNames.bind(styles);
+
+const mainTitleVariants = cva(cx('title'));
+
+export const MainTitle = ({ children, className, ...props }: MainTitleProps) => {
+  return (
+    <h1
+      {...props}
+      className={mainTitleVariants({ className })}
+    >
+      {children}
+    </h1>
+  );
+};
diff --git a/src/shared/ui/title/index.ts b/src/shared/ui/title/index.ts
deleted file mode 100644
index db61d4bcd..000000000
--- a/src/shared/ui/title/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Title } from './title';
-export { TitleType } from './types';
diff --git a/src/shared/ui/title/title.scss b/src/shared/ui/title/title.scss
deleted file mode 100644
index fbd48d76c..000000000
--- a/src/shared/ui/title/title.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.title {
-  @include media-tablet {
-    font-size: 36px;
-    line-height: 44px;
-  }
-
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-
-  font-size: 44px;
-  font-weight: 500;
-  line-height: 52px;
-  color: $color-black;
-  text-align: left;
-  letter-spacing: -0.04em;
-
-  &.big {
-    @include media-tablet {
-      font-size: 36px;
-      line-height: 44px;
-    }
-
-    font-size: 52px;
-    line-height: 64px;
-  }
-
-  &.bigger {
-    @include media-laptop {
-      font-size: 96px;
-      line-height: 1.2em;
-    }
-
-    font-size: 75px;
-    font-weight: 600;
-    line-height: 77px;
-    letter-spacing: -0.04em;
-  }
-
-  &.extra-big {
-    @include media-laptop {
-      font-size: 77px;
-    }
-
-    @include media-tablet {
-      font-size: 61px;
-    }
-
-    font-size: 96px;
-    font-weight: 700;
-    line-height: 1.2em;
-  }
-
-  & .before {
-    margin-right: 8px;
-    color: $color-red;
-  }
-}
diff --git a/src/shared/ui/title/title.test.tsx b/src/shared/ui/title/title.test.tsx
deleted file mode 100644
index 841231266..000000000
--- a/src/shared/ui/title/title.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Title } from './title';
-import { TitleType } from './types';
-
-describe('Title component', () => {
-  it('renders without crashing', () => {
-    render(<Title text="TestTitle" />);
-    const title = screen.getByText('TestTitle');
-
-    expect(title).toBeInTheDocument();
-  });
-
-  it('applies correct CSS based on Title Type Extra Big', () => {
-    render(<Title text="TestTitle" type={TitleType.ExtraBig} />);
-    const title = screen.getByText('TestTitle');
-
-    expect(title.parentElement).toHaveClass('extra-big');
-  });
-
-  it('displays an asterisk when hasAsterisk prop is set', () => {
-    render(<Title text="TestTitle" hasAsterisk />);
-    const asterisk = screen.getByText('*');
-
-    expect(asterisk).toBeInTheDocument();
-  });
-
-  it('displays lines when hasLines prop is set', () => {
-    render(<Title text="TestTitle" hasLines />);
-    const lines = screen.getByText('‖');
-
-    expect(lines).toBeInTheDocument();
-  });
-
-  it('renders children correctly', () => {
-    render(
-      <Title>
-        <div>Child element</div>
-      </Title>,
-    );
-
-    const child = screen.getByText('Child element');
-
-    expect(child).toBeInTheDocument();
-  });
-});
diff --git a/src/shared/ui/title/title.tsx b/src/shared/ui/title/title.tsx
deleted file mode 100644
index 4c8a5d694..000000000
--- a/src/shared/ui/title/title.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { TitleType } from './types';
-
-import './title.scss';
-
-type TitleProps = PropsWithChildren<{
-  text?: string;
-  type?: TitleType;
-  hasAsterisk?: boolean;
-  hasLines?: boolean;
-}>;
-
-export const Title = ({ text, type, hasAsterisk, hasLines, children }: TitleProps) => {
-  const titleType = type ?? TitleType.Regular;
-
-  return (
-    <div className={`title ${titleType}`}>
-      {hasLines && <span className="before">‖</span>}
-      {hasAsterisk && <span className="before">*</span>}
-      <div>
-        {text}
-        {children}
-      </div>
-    </div>
-  );
-};
diff --git a/src/shared/ui/title/types.ts b/src/shared/ui/title/types.ts
deleted file mode 100644
index 87874ac05..000000000
--- a/src/shared/ui/title/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum TitleType {
-  Regular = 'regular',
-  Big = 'big',
-  Bigger = 'bigger',
-  ExtraBig = 'extra-big',
-}
diff --git a/src/shared/ui/widget-title/index.ts b/src/shared/ui/widget-title/index.ts
new file mode 100644
index 000000000..11764e165
--- /dev/null
+++ b/src/shared/ui/widget-title/index.ts
@@ -0,0 +1 @@
+export { WidgetTitle } from './widget-title';
diff --git a/src/shared/ui/widget-title/widget-title.module.scss b/src/shared/ui/widget-title/widget-title.module.scss
new file mode 100644
index 000000000..b640adcd4
--- /dev/null
+++ b/src/shared/ui/widget-title/widget-title.module.scss
@@ -0,0 +1,43 @@
+.title {
+  font-weight: $font-weight-medium;
+  letter-spacing: -0.04em;
+
+  &::before {
+    margin-right: 8px;
+    color: $color-red;
+  }
+}
+
+.small {
+  font-size: 36px;
+  line-height: 44px;
+  letter-spacing: 0;
+}
+
+.medium {
+  font-size: 44px;
+  line-height: 52px;
+
+  @include media-tablet {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+
+.large {
+  font-size: 52px;
+  line-height: 64px;
+
+  @include media-tablet {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+
+.lines::before {
+  content: '‖';
+}
+
+.asterisk::before {
+  content: '*';
+}
diff --git a/src/shared/ui/widget-title/widget-title.test.tsx b/src/shared/ui/widget-title/widget-title.test.tsx
new file mode 100644
index 000000000..43f4a2289
--- /dev/null
+++ b/src/shared/ui/widget-title/widget-title.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { WidgetTitle, cx } from './widget-title';
+
+describe('WidgetTitle component', () => {
+  it('renders without crashing', () => {
+    render(<WidgetTitle>TestTitle</WidgetTitle>);
+    const title = screen.getByText('TestTitle');
+
+    expect(title).toBeInTheDocument();
+  });
+
+  it('displays h2 tag', () => {
+    render(<WidgetTitle />);
+    const element = screen.getByRole('heading', { level: 2 });
+
+    expect(element).toBeInTheDocument();
+  });
+
+  it('displays size correctly when size=small', () => {
+    render(<WidgetTitle size="small">TestTitle</WidgetTitle>);
+    const element = screen.getByRole('heading', { level: 2 });
+
+    expect(element).toHaveClass(cx('small'));
+  });
+
+  it('displays size correctly when size=medium', () => {
+    render(<WidgetTitle size="medium">TestTitle</WidgetTitle>);
+    const element = screen.getByRole('heading', { level: 2 });
+
+    expect(element).toHaveClass(cx('medium'));
+  });
+
+  it('displays size correctly when size=large', () => {
+    render(<WidgetTitle size="large">TestTitle</WidgetTitle>);
+    const element = screen.getByRole('heading', { level: 2 });
+
+    expect(element).toHaveClass(cx('large'));
+  });
+
+  it('displays an asterisk when mods=asterisk', () => {
+    render(<WidgetTitle mods="asterisk">TestTitle</WidgetTitle>);
+    const asterisk = screen.getByRole('heading', { level: 2 });
+
+    expect(asterisk).toHaveClass(cx('asterisk'));
+  });
+
+  it('displays lines when mods=lines', () => {
+    render(<WidgetTitle mods="lines">TestTitle</WidgetTitle>);
+    const lines = screen.getByRole('heading', { level: 2 });
+
+    expect(lines).toHaveClass(cx('lines'));
+  });
+
+  it('renders children correctly', () => {
+    render(
+      <WidgetTitle>
+        <div>Child element</div>
+      </WidgetTitle>,
+    );
+
+    const child = screen.getByText('Child element');
+
+    expect(child).toBeInTheDocument();
+  });
+});
diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
new file mode 100644
index 000000000..fdb777f40
--- /dev/null
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import classNames from 'classnames/bind';
+
+import styles from './widget-title.module.scss';
+
+type WidgetTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+
+export const cx = classNames.bind(styles);
+
+const widgetTitleVariants = cva(cx('title'), {
+  variants: {
+    mods: {
+      lines: cx('lines'),
+      asterisk: cx('asterisk'),
+    },
+    size: {
+      small: cx('small'),
+      medium: cx('medium'),
+      large: cx('large'),
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+    mods: null,
+  },
+});
+
+export const WidgetTitle = ({ children, size, mods, className, ...props }: WidgetTitleProps) => {
+  return (
+    <h2
+      {...props}
+      className={widgetTitleVariants({
+        size,
+        mods,
+        className,
+      })}
+    >
+      {children}
+    </h2>
+  );
+};
diff --git a/src/widgets/about-home/ui/about.tsx b/src/widgets/about-home/ui/about.tsx
index 37bca8a25..b72029308 100644
--- a/src/widgets/about-home/ui/about.tsx
+++ b/src/widgets/about-home/ui/about.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/about.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './about.scss';
 
@@ -11,7 +11,7 @@ export const About = () => {
     <div className="about container" id="about">
       <div className="about content column-2">
         <div className="left">
-          <Title text="Who we are" hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">Who we are</WidgetTitle>
           <Subtitle
             text="Our mission is to provide free education in intriguing subjects, connect people, and grow
           together."
diff --git a/src/widgets/about-school/ui/about.tsx b/src/widgets/about-school/ui/about.tsx
index bab123508..1d24c5568 100644
--- a/src/widgets/about-school/ui/about.tsx
+++ b/src/widgets/about-school/ui/about.tsx
@@ -1,6 +1,6 @@
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './about.scss';
 
@@ -10,7 +10,7 @@ export const About = () => {
       <div className="rs-about content">
         <div className="column-2">
           <div className="info">
-            <Title text="About RS School" hasAsterisk />
+            <WidgetTitle size="medium" mods="asterisk">About RS School</WidgetTitle>
             <Subtitle text="No matter your age, professional employment, or place of residence." />
             <Paragraph>
               RS School offers a unique learning experience as a free, community-based online
diff --git a/src/widgets/about-video/ui/about-video.tsx b/src/widgets/about-video/ui/about-video.tsx
index e11ff2199..30f18c7f6 100644
--- a/src/widgets/about-video/ui/about-video.tsx
+++ b/src/widgets/about-video/ui/about-video.tsx
@@ -1,4 +1,4 @@
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './about-video.scss';
 
@@ -13,7 +13,7 @@ export const AboutVideo = ({ lang = 'en' }: AboutVideoProps) => {
   return (
     <div className="about-video container">
       <div className="about-video content">
-        <Title hasLines text={localizedContent[lang].title} />
+        <WidgetTitle size="medium" mods="lines">{localizedContent[lang].title}</WidgetTitle>
         <div className="video-wrapper">
           <div className="video-container">
             <iframe
diff --git a/src/widgets/about/ui/about.tsx b/src/widgets/about/ui/about.tsx
index 6c8cde3e0..437c4e521 100644
--- a/src/widgets/about/ui/about.tsx
+++ b/src/widgets/about/ui/about.tsx
@@ -1,13 +1,12 @@
 /* eslint-disable @stylistic/jsx-one-expression-per-line */
 import { InfoGrid } from './info-grid/info-grid';
 import { contentMap } from '../about.data';
-
 import { type Course } from '@/app/types';
 import { useCourseByTitle } from '@/shared/hooks/use-course-by-title';
 import { ArrowIcon } from '@/shared/icons';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './about.scss';
 
@@ -64,7 +63,7 @@ export const About = ({ courseName, type = 'en' }: AboutProps) => {
   return (
     <section className="course-about container">
       <div className="course-about content">
-        <Title text={localizedContent[type].title} />
+        <WidgetTitle size="medium">{localizedContent[type].title}</WidgetTitle>
         {localizedContent[type].paragraph && (
           <Paragraph>{localizedContent[type].paragraph}</Paragraph>
         )}
diff --git a/src/widgets/about/ui/info-grid/info-grid.scss b/src/widgets/about/ui/info-grid/info-grid.scss
index c55f0bb3d..d2cf97a10 100644
--- a/src/widgets/about/ui/info-grid/info-grid.scss
+++ b/src/widgets/about/ui/info-grid/info-grid.scss
@@ -48,7 +48,7 @@
         max-height: 40px;
       }
 
-      h2 {
+      > h2 {
         margin: 0;
         font-size: 20px;
         font-weight: $font-weight-medium;
diff --git a/src/widgets/alumni/ui/alumni.tsx b/src/widgets/alumni/ui/alumni.tsx
index 6e6a8e044..a97ef2d09 100644
--- a/src/widgets/alumni/ui/alumni.tsx
+++ b/src/widgets/alumni/ui/alumni.tsx
@@ -1,9 +1,8 @@
 import { alumni } from '../constants';
-
 import { useWindowSize } from '@/shared/hooks/use-window-size';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './alumni.scss';
 
@@ -28,7 +27,7 @@ export const Alumni = () => {
   return (
     <article className="alumni container">
       <section className="alumni content">
-        <Title text="Our alumni" hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">Our alumni</WidgetTitle>
         <Paragraph>
           We are immensely proud of RS School alumni who build their successful careers in ambitious
           IT companies
diff --git a/src/widgets/angular-topics/ui/angular-topics.tsx b/src/widgets/angular-topics/ui/angular-topics.tsx
index a8fbdf2a1..6766a9f72 100644
--- a/src/widgets/angular-topics/ui/angular-topics.tsx
+++ b/src/widgets/angular-topics/ui/angular-topics.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames/bind';
-
 import { Actions } from '@/shared/ui/actions/actions';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './angular-topics.module.scss';
 
@@ -24,7 +23,7 @@ export const AngularTopics = () => {
   return (
     <section className={cx('angular-topics', 'container')}>
       <article className={cx('content', 'angular-topics-content')}>
-        <Title text="Topics Covered:" hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">Topics Covered:</WidgetTitle>
         <Actions actions={topicsList} marked />
       </article>
     </section>
diff --git a/src/widgets/certification/ui/certification.tsx b/src/widgets/certification/ui/certification.tsx
index c077538bc..7af351221 100644
--- a/src/widgets/certification/ui/certification.tsx
+++ b/src/widgets/certification/ui/certification.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames/bind';
 import { CourseNames } from '@/shared/data/communication.data';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './certification.module.scss';
 
@@ -44,7 +44,7 @@ export const Certification = ({ courseName }: RequiredProps) => {
   return (
     <section className={cx('certification', 'container')}>
       <article className={cx('certification', 'content', 'info-wrapper')}>
-        <Title text={title} hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">{title}</WidgetTitle>
         <div className={cx('paragraphs-wrapper')}>
           <Paragraph>{firstParagraph}</Paragraph>
           {secondParagraph && <Paragraph>{secondParagraph}</Paragraph>}
diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx
index 09461a969..0b137bbcf 100644
--- a/src/widgets/communication/ui/communication.tsx
+++ b/src/widgets/communication/ui/communication.tsx
@@ -10,7 +10,7 @@ import { DiscordLogo } from '@/shared/icons/discord-logo';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './communication.scss';
 
@@ -55,7 +55,7 @@ export const Communication = ({ courseName, lang = 'en' }: RequiredProps) => {
   return (
     <section className="communication container">
       <article className="communication content info-wrapper">
-        <Title text={localizedContent[lang].title} hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">{localizedContent[lang].title}</WidgetTitle>
         <div className="column-2">
           <figure className="disclogo-wrapper">
             <DiscordLogo />
diff --git a/src/widgets/community/ui/community.tsx b/src/widgets/community/ui/community.tsx
index 05e0f3212..b0e9532e2 100644
--- a/src/widgets/community/ui/community.tsx
+++ b/src/widgets/community/ui/community.tsx
@@ -3,7 +3,7 @@ import { FacebookIcon, InstagramIcon, LinkedInIcon, TelegramIcon, YouTubeIcon }
 import Image from '@/shared/ui/image';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './community.scss';
 
@@ -59,7 +59,7 @@ export const Community = () => (
   <div id="community" className="community container">
     <div className="community content column-2">
       <div className="info">
-        <Title text="Join RS Community" type={TitleType.Big} hasAsterisk={false} hasLines={true} />
+        <WidgetTitle size="large" mods="lines">Join RS Community</WidgetTitle>
         <Subtitle text="If you want to learn coding or be a RS School mentor, speaking at developers meetups and conferences or taking part in RS clubs welcome to the Rolling Scopes community! Join us in social networks to be in touch!" />
         <div className="social-media-container">
           {communityGroups.map(({ title, href, icon }) => (
diff --git a/src/widgets/contribute/ui/contribute.tsx b/src/widgets/contribute/ui/contribute.tsx
index 4ae343064..52dd4414f 100644
--- a/src/widgets/contribute/ui/contribute.tsx
+++ b/src/widgets/contribute/ui/contribute.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/contribute.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 import { OptionItem, OptionItemProps } from '@/widgets/option-item';
 
 import './contribute.scss';
@@ -29,7 +29,7 @@ export const Contribute = () => (
     <div className="contribute content">
       <div className="general">
         <div className="info">
-          <Title text="How to Contribute" hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">How to Contribute</WidgetTitle>
           <Subtitle text="Contributing to The Rolling Scopes is not only a great way to give back to the community, but it's also an excellent way to enhance your own knowledge." />
           <Paragraph>
             Remember, teaching others is one of the best ways to learn - this is known as The
diff --git a/src/widgets/course-main/course-main.tsx b/src/widgets/course-main/course-main.tsx
index a5ec2f32f..e65fb884a 100644
--- a/src/widgets/course-main/course-main.tsx
+++ b/src/widgets/course-main/course-main.tsx
@@ -9,7 +9,7 @@ import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './course-main.module.scss';
 
@@ -44,7 +44,7 @@ export const CourseMain = ({ courseName, lang = 'en', type }: CourseMainProps) =
         <Image className={styles.icon} src={secondaryIcon} alt={title} lazy="false" />
         <div className={styles.info}>
           <SectionLabel label={status} />
-          <Title text={`${altTitle || title} Course`} />
+          <WidgetTitle size="medium">{`${altTitle || title} Course`}</WidgetTitle>
           {type && <Subtitle text={type} type="course-main" />}
           <DateLang startDate={startDate} language={language} mode={mode} type="main" />
           <LinkCustom
diff --git a/src/widgets/courses-school/ui/courses.module.scss b/src/widgets/courses-school/ui/courses.module.scss
index f219bb270..28464ba5d 100644
--- a/src/widgets/courses-school/ui/courses.module.scss
+++ b/src/widgets/courses-school/ui/courses.module.scss
@@ -1,11 +1,5 @@
 .course-title {
   margin-top: 24px;
-  margin-bottom: 0;
-
-  font-size: 36px;
-  font-weight: $font-weight-medium;
-  line-height: 44px;
-  letter-spacing: 0;
 }
 
 .image {
diff --git a/src/widgets/courses-school/ui/courses.tsx b/src/widgets/courses-school/ui/courses.tsx
index 894ef6b32..b89c5d288 100644
--- a/src/widgets/courses-school/ui/courses.tsx
+++ b/src/widgets/courses-school/ui/courses.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames/bind';
 import { CourseCard } from './CourseCard';
 import { selectCourses } from '../lib/selectCourses';
 import { ROUTES } from '@/app/const';
-
 import { courses } from '@/app/services/data';
 import { useWindowSize } from '@/shared/hooks/use-window-size';
 import { ArrowIcon, RsBanner } from '@/shared/icons';
 import { LinkCustom } from '@/shared/ui/link-custom';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './courses.module.scss';
 
@@ -43,7 +43,7 @@ export const Courses = () => {
   return (
     <article id="upcoming-courses" className={cx('container')}>
       <section className={cx('content')}>
-        <h4 className={cx('course-title')}>Upcoming courses</h4>
+        <WidgetTitle size="small" className={cx('course-title')}>Upcoming courses</WidgetTitle>
         <div className={cx('column-2')}>
           <div className={cx('course-list')} data-testid="courses-list">
             {coursesContent}
diff --git a/src/widgets/courses/ui/courses.tsx b/src/widgets/courses/ui/courses.tsx
index b899c9fcc..fc2a4ebeb 100644
--- a/src/widgets/courses/ui/courses.tsx
+++ b/src/widgets/courses/ui/courses.tsx
@@ -2,7 +2,7 @@ import { CourseCard, finedNearestCourse } from '@/entities/courses';
 import { compareNumbers } from '@/entities/courses/helpers/compare-courses';
 import { isCourse } from '@/entities/courses/helpers/is-course';
 import { useDataByName } from '@/shared/hooks/use-data-by-name';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './courses.scss';
 
@@ -30,7 +30,7 @@ export const Courses = () => {
   return (
     <section className="rs-courses container" id="upcoming-courses">
       <div className="rs-courses content">
-        <Title text="All courses" type={TitleType.Regular} />
+        <WidgetTitle size="medium">All courses</WidgetTitle>
         <div className="rs-courses-wrapper" data-testid="courses-fancy">
           {sortedCourses.map((course) => {
             return <CourseCard key={course.id} {...course} />;
diff --git a/src/widgets/events/ui/events.tsx b/src/widgets/events/ui/events.tsx
index 39b167142..935b4a914 100644
--- a/src/widgets/events/ui/events.tsx
+++ b/src/widgets/events/ui/events.tsx
@@ -9,7 +9,7 @@ import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './events.module.scss';
 
@@ -34,7 +34,7 @@ export const Events = () => {
       <div className={cn(cx('events', 'content'), 'content')}>
         <section className={cx('info')}>
           <SectionLabel label="events & meetups" />
-          <Title text="Meet us at events" hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">Meet us at events</WidgetTitle>
           <Subtitle text="For years we have been organizing meetups and conferences, where you can always learn something new, share your knowledge, discover new technologies, meet old and find new friends." />
           <Paragraph>
             During
diff --git a/src/widgets/faq/ui/faq.tsx b/src/widgets/faq/ui/faq.tsx
index 8139b268d..b0d066efc 100644
--- a/src/widgets/faq/ui/faq.tsx
+++ b/src/widgets/faq/ui/faq.tsx
@@ -2,7 +2,7 @@
 import classNames from 'classnames/bind';
 import { faqData } from '../faq.data';
 import { TextWithLink } from '@/shared/ui/text-with-link';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './faq.module.scss';
 
@@ -12,7 +12,7 @@ export const Faq = () => {
   return (
     <section className={cx('faq', 'container')}>
       <div className={cx('content', 'info-wrapper')}>
-        <Title text="FAQ" hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">FAQ</WidgetTitle>
         <ol className={cx('list')}>
           {faqData.map(({ question, answer }, index) => (
             <li className={cx('list-item')} key={question}>
diff --git a/src/widgets/main/ui/main.scss b/src/widgets/main/ui/main.scss
index 70edeee9c..dfe5b9772 100644
--- a/src/widgets/main/ui/main.scss
+++ b/src/widgets/main/ui/main.scss
@@ -9,7 +9,7 @@
 
   &.content {
     @include media-laptop {
-      padding: 120px 40px 120px;
+      padding: 120px 40px;
     }
 
     @include media-tablet {
@@ -26,13 +26,7 @@
     max-width: 640px;
 
     .title-container {
-      & > .title {
-        @media (min-width: $tablet-width) {
-          font-size: 96px;
-        }
-      }
-
-      & > .subtitle {
+      > .subtitle {
         padding-left: 4px;
 
         font-size: 18px;
diff --git a/src/widgets/main/ui/main.tsx b/src/widgets/main/ui/main.tsx
index cf6e493bc..9e5bdf904 100644
--- a/src/widgets/main/ui/main.tsx
+++ b/src/widgets/main/ui/main.tsx
@@ -1,5 +1,5 @@
+import { MainTitle } from '@/shared/ui/main-title';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
 
 import './main.scss';
 
@@ -9,7 +9,7 @@ export const Main = () => {
       <div className="school-main content">
         <div className="left">
           <div className="title-container">
-            <Title text="RS School" type={TitleType.ExtraBig} />
+            <MainTitle>RS School</MainTitle>
             <Subtitle text="Free courses. High motivation" />
           </div>
           <h2 className="description">Connecting people, growing together, having fun</h2>
diff --git a/src/widgets/mentoring/ui/mentoring.tsx b/src/widgets/mentoring/ui/mentoring.tsx
index 5d7aa71d8..33ca8f9f8 100644
--- a/src/widgets/mentoring/ui/mentoring.tsx
+++ b/src/widgets/mentoring/ui/mentoring.tsx
@@ -1,3 +1,5 @@
+import { WidgetTitle } from '@/shared/ui/widget-title';
+
 import './mentoring.scss';
 
 const mentorshipBenefits = [
@@ -27,7 +29,7 @@ export const Mentoring = () => {
   return (
     <section className="mentoring container">
       <div className="mentoring content">
-        <div className="title">Mentoring is for you if you</div>
+        <WidgetTitle size="small">Mentoring is for you if you</WidgetTitle>
         <div className="benefits">
           {mentorshipBenefits.map(({ id, info }) => (
             <div key={id} className="benefit">
diff --git a/src/widgets/mentors-wanted/ui/mentors-wanted.tsx b/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
index 35faf39b1..fb43064b5 100644
--- a/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
+++ b/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './mentors-wanted.module.scss';
 
@@ -16,7 +16,7 @@ export const MentorsWanted = () => {
     <section className={cx('mentors-wanted', 'container')}>
       <article className={classNames('content', cx('content'))}>
         <div className={cx('content-left')}>
-          <Title text="Mentors Wanted!" hasLines />
+          <WidgetTitle size="medium" mods="lines">Mentors Wanted!</WidgetTitle>
           <Paragraph>
             If&nbsp;you are interested in mentoring our students, please go through the
             {' '}
diff --git a/src/widgets/mentors/ui/mentors.tsx b/src/widgets/mentors/ui/mentors.tsx
index ca7ae33ef..447c7bc8d 100644
--- a/src/widgets/mentors/ui/mentors.tsx
+++ b/src/widgets/mentors/ui/mentors.tsx
@@ -4,7 +4,7 @@ import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './mentors.scss';
 
@@ -13,7 +13,7 @@ export const Mentors = () => {
     <section className="mentors container" id="mentors-wanted">
       <div className="mentors content column-2">
         <div className="mentors-info">
-          <Title text="Mentors wanted!" hasLines type={TitleType.Big} />
+          <WidgetTitle size="large" mods="lines">Mentors wanted!</WidgetTitle>
           <Subtitle
             text="The Rolling Scopes School is constantly looking for mentors from all over the world to
             teach everyone who wants to learn the JavaScript language and the world of Front-end.
diff --git a/src/widgets/merch/ui/merch.tsx b/src/widgets/merch/ui/merch.tsx
index bcd123ffe..1fb2786a1 100644
--- a/src/widgets/merch/ui/merch.tsx
+++ b/src/widgets/merch/ui/merch.tsx
@@ -7,7 +7,7 @@ import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './merch.module.scss';
 
@@ -18,7 +18,7 @@ export const Merch = () => (
     <div className={cx('content', 'merch', 'column-2')}>
       <div className={cx('info')}>
         <SectionLabel label="merch" />
-        <Title text="RS merch" hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">RS merch</WidgetTitle>
         <Subtitle text="Are you an RS sloth fan and looking for RS merch?" />
         <Paragraph>
           The wait is almost over as we&apos;re gearing up for the catalog of free web and print
diff --git a/src/widgets/numbers/ui/numbers.tsx b/src/widgets/numbers/ui/numbers.tsx
index 80210efcd..c95557e89 100644
--- a/src/widgets/numbers/ui/numbers.tsx
+++ b/src/widgets/numbers/ui/numbers.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/map.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './numbers.scss';
 
@@ -26,7 +26,7 @@ export const Numbers = () => {
       <div className="numbers content">
         <div className="text-container">
           <div>
-            <Title text="The Rolling Scopes in numbers" hasAsterisk />
+            <WidgetTitle size="medium" mods="asterisk">The Rolling Scopes in numbers</WidgetTitle>
             <Subtitle
               text="Everyone can discover our community, regardless of age, professional employment, or
             place of residence."
diff --git a/src/widgets/pictures/ui/pictures.tsx b/src/widgets/pictures/ui/pictures.tsx
index 974ba82af..aa4ebf5ce 100644
--- a/src/widgets/pictures/ui/pictures.tsx
+++ b/src/widgets/pictures/ui/pictures.tsx
@@ -13,7 +13,7 @@ import { FacebookIcon, InstagramIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import './pictures.scss';
@@ -46,7 +46,7 @@ const photos = [photo1, photo2, photo3, photo4, photo5, photo6, photo7, photo8,
 export const Pictures = () => (
   <div className="pictures container">
     <div className="pictures content">
-      <Title text="The Rolling Scopes in pictures" hasAsterisk />
+      <WidgetTitle size="medium" mods="asterisk">The Rolling Scopes in pictures</WidgetTitle>
       <Carousel
         className="carousel"
         showArrows={true}
diff --git a/src/widgets/principles/ui/principle-card/principles.tsx b/src/widgets/principles/ui/principle-card/principles.tsx
index 4b6cc7cfb..df32dd4ce 100644
--- a/src/widgets/principles/ui/principle-card/principles.tsx
+++ b/src/widgets/principles/ui/principle-card/principles.tsx
@@ -1,18 +1,13 @@
 import { PrincipleCard } from './principle-card';
 import { cards } from '../../constants';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './principles.scss';
 
 export const Principles = () => (
   <div className="principles container">
     <div className="principles content">
-      <Title
-        text="RS School Principles are an ability to complete our mission"
-        type={TitleType.Big}
-        hasAsterisk={false}
-        hasLines={true}
-      />
+      <WidgetTitle size="large" mods="lines">RS School Principles are an ability to complete our mission</WidgetTitle>
       <div className="cards column-3 ">
         {cards.map(({ title, description, icon }) => (
           <PrincipleCard key={title} description={description} icon={icon} title={title} />
diff --git a/src/widgets/required/ui/required.tsx b/src/widgets/required/ui/required.tsx
index 67751fccf..1613739d8 100644
--- a/src/widgets/required/ui/required.tsx
+++ b/src/widgets/required/ui/required.tsx
@@ -1,9 +1,8 @@
 import { courseDataMap } from '../required.data';
 import type { CourseName } from '../required.types';
-
 import { Actions } from '@/shared/ui/actions/actions';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './required.scss';
 
@@ -30,7 +29,7 @@ export const Required = ({ courseName, marked1, marked2 }: RequiredProps) => {
   return (
     <section className="required container">
       <div className="required content info-wrapper">
-        <Title text={title} hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">{title}</WidgetTitle>
 
         <div className="column-2">
           {isKnowBeforeExist && (
diff --git a/src/widgets/speakers/ui/speakers.tsx b/src/widgets/speakers/ui/speakers.tsx
index 4392a976b..141a4dc9b 100644
--- a/src/widgets/speakers/ui/speakers.tsx
+++ b/src/widgets/speakers/ui/speakers.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/speakers-wanted.webp';
 import { EmailIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './speakers.scss';
 
@@ -10,7 +10,7 @@ export const Speakers = () => (
   <div className="speakers container">
     <div className="speakers content">
       <div className="info">
-        <Title text="Speakers wanted" type={TitleType.Big} hasAsterisk={false} hasLines={true} />
+        <WidgetTitle size="large" mods="lines">Speakers wanted</WidgetTitle>
         <Subtitle text="If you want to give a talk or conduct a workshop, present your open source project or share a success story, the Rolling Scopes welcomes all kinds of talk proposals." />
         <Subtitle text="So don't hesitate to drop a short synopsis to RS Head " />
 
diff --git a/src/widgets/study-path/ui/study-path.tsx b/src/widgets/study-path/ui/study-path.tsx
index 0673e39cc..0d162137e 100644
--- a/src/widgets/study-path/ui/study-path.tsx
+++ b/src/widgets/study-path/ui/study-path.tsx
@@ -3,7 +3,7 @@ import { Stages } from './stages';
 import { type DataMap } from '@/app/services/data/courses-data.types';
 import { useDataByName } from '@/shared/hooks/use-data-by-name';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './study-path.scss';
 
@@ -45,7 +45,7 @@ export const StudyPath = ({ path, marked, lang = 'en' }: StudyPathProps) => {
     <LangContext.Provider value={lang}>
       <section className="study-path container" id="learning-path">
         <div className="study-path content upd">
-          <Title text={title} hasAsterisk />
+          <WidgetTitle size="small" mods="asterisk">{title}</WidgetTitle>
           <Paragraph>{paragraph}</Paragraph>
           <Stages stages={coursesPath} marked={marked} />
         </div>
diff --git a/src/widgets/study-with-us/ui/study-with-us.tsx b/src/widgets/study-with-us/ui/study-with-us.tsx
index 40ae661cf..d65c8546b 100644
--- a/src/widgets/study-with-us/ui/study-with-us.tsx
+++ b/src/widgets/study-with-us/ui/study-with-us.tsx
@@ -4,7 +4,7 @@ import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 import { OptionItem } from '@/widgets/option-item';
 
 import './study-with-us.scss';
@@ -15,7 +15,7 @@ export const StudyWithUs = () => (
       <div className="study">
         <div className="left">
           <SectionLabel label="education" />
-          <Title text="Study with RS School" hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">Study with RS School</WidgetTitle>
           <Subtitle text="RS School is a free and community-based online education program conducted by The Rolling Scopes Community since 2013. " />
           <Paragraph>
             Currently 500+ developers from different countries and companies involve in the
diff --git a/src/widgets/support/ui/support.tsx b/src/widgets/support/ui/support.tsx
index d2f55b3ab..5b359da12 100644
--- a/src/widgets/support/ui/support.tsx
+++ b/src/widgets/support/ui/support.tsx
@@ -4,7 +4,7 @@ import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './support.scss';
 
@@ -12,7 +12,7 @@ export const Support = () => (
   <div className="support container">
     <div className="support content">
       <div className="info">
-        <Title text="Support Us" type={TitleType.Big} hasAsterisk={false} hasLines={true} />
+        <WidgetTitle size="large" mods="lines">Support Us</WidgetTitle>
         <Subtitle text="Your donations help us cover hosting, domains, licenses, and advertising for courses and events. Every donation, big or small, helps!" />
         <Subtitle text="Thank you for your support!" />
         <LinkCustom
diff --git a/src/widgets/trainers/ui/trainers.tsx b/src/widgets/trainers/ui/trainers.tsx
index 8d2eba5dc..3213efdd5 100644
--- a/src/widgets/trainers/ui/trainers.tsx
+++ b/src/widgets/trainers/ui/trainers.tsx
@@ -1,5 +1,5 @@
 import { TrainerCard } from './trainers-card/trainer-card';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 import { Trainer } from '@/widgets/trainers/trainers.types';
 
 import './trainers.scss';
@@ -30,7 +30,7 @@ export const Trainers = ({ trainers, lang = 'en' }: TrainersProps) => {
   return (
     <section className="nodejs-trainer container">
       <div className="nodejs-trainer content gap">
-        <Title text={title} hasLines />
+        <WidgetTitle size="medium" mods="lines">{title}</WidgetTitle>
         <div className="trainers-list">
           {trainers.map(({ name, bio, photo, role }) => (
             <TrainerCard
diff --git a/src/widgets/training-program/ui/training-program.tsx b/src/widgets/training-program/ui/training-program.tsx
index 1b3cc7056..6fcdd7ad0 100644
--- a/src/widgets/training-program/ui/training-program.tsx
+++ b/src/widgets/training-program/ui/training-program.tsx
@@ -1,12 +1,11 @@
 import { cloneElement } from 'react';
 import { type CourseNames, contentMap } from '../training-program.data';
-
 import type { Course } from '@/app/types';
 import { useCourseByTitle } from '@/shared/hooks/use-course-by-title';
 import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './training-program.scss';
 
@@ -34,7 +33,7 @@ export const TrainingProgram = ({ courseName, lang = 'en' }: TrainingProgramProp
     <section className="training-program container">
       <div className="training-program content column-2">
         <div className="left">
-          <Title text={title} hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">{title}</WidgetTitle>
 
           {content.map((component, index) => cloneElement(component, { key: index }))}