diff --git a/frontend/public/images/Сharacter_01.png b/frontend/public/images/Сharacter_01.png
new file mode 100644
index 0000000..9384e5f
Binary files /dev/null and b/frontend/public/images/Сharacter_01.png differ
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 15a5ab6..2072e1d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Cover from './start-page/cover';
 import TopBar from './start-page/top-bar';
 
+export const AppData = {
+  contact: 'https://t.me/pavelgnedov',
+  bot: 'https://t.me/eltex_event_emitter_bot'
+};
+
 function App() {
   return (
     <>
-      <TopBar contact='https://t.me/pavelgnedov'>
-      </TopBar>
+      <TopBar contact={AppData.contact} />
+      <Cover telegramBotUrl={AppData.bot} /> 
     </>
   );
 }
diff --git a/frontend/src/start-page/cover.module.css b/frontend/src/start-page/cover.module.css
new file mode 100644
index 0000000..6f56673
--- /dev/null
+++ b/frontend/src/start-page/cover.module.css
@@ -0,0 +1,70 @@
+.cover {
+	box-sizing: border-box;
+
+	position: absolute;
+	width: 100%;
+	height: 900px;
+	left: 0px;
+	top: 0px;
+
+	background: #001826;
+	border: 0;
+}
+
+h1 {
+	left: 0%;
+	right: 0%;
+	top: 18.22%;
+	bottom: 24.7%;
+	font-family: 'Source Code Pro', monospace;
+	font-weight: 600;
+	font-size: 94px;
+	line-height: 94px;
+	text-transform: uppercase;
+}
+
+h3 {
+	color: #F5B14E;
+	font-family: 'Source Code Pro';
+	letter-spacing: 0.12em;
+	font-style: normal;
+	font-weight: 700;
+	font-size: 22px;
+	line-height: 34px;
+}
+
+h4 {
+	font-style: normal;
+	font-weight: 600;
+	font-size: 40px;
+	line-height: 60px;
+	letter-spacing: -0.01em;
+	text-transform: uppercase;
+	font-feature-settings: 'pnum' on, 'lnum' on;
+}
+
+h4:hover {
+	text-decoration: underline;
+	color: #F5B14E;
+}
+
+.character {
+	position: absolute;
+	width: 375px;
+	height: 672px;
+	left: 130px;
+	top: 181px;
+}
+
+.info {
+	font-family: 'Source Code Pro';
+	color: #fff;
+	font-weight: bold;
+	text-decoration: none;
+	text-transform: uppercase;
+	position: absolute;
+	max-width: 800px;
+	max-height: 494px;
+	left: 635px;
+	top: 251px;
+}
\ No newline at end of file
diff --git a/frontend/src/start-page/cover.tsx b/frontend/src/start-page/cover.tsx
new file mode 100644
index 0000000..ede82cb
--- /dev/null
+++ b/frontend/src/start-page/cover.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import CoverCss from './cover.module.css';
+
+export type CoverProps = {
+	telegramBotUrl: string;
+};
+
+export const Cover = (props: CoverProps) => {
+	return (
+		<div className={CoverCss.cover}>
+			<img src="/images/Сharacter_01.png" alt="Сharacter" className={CoverCss.character} />
+				<div className={CoverCss.info}>
+					<h3>Redmine Issue Event Emitter</h3>
+					<h1>ОБРАБОТКА И АНАЛИЗ ЗАДАЧ ИЗ "REDMINE"</h1>
+					<h4>
+						<a href={props.telegramBotUrl}> ссылка на телеграмм бота</a>
+					</h4>
+				</div>
+		</div>
+	);
+};
+
+export default Cover;
\ No newline at end of file
diff --git a/frontend/src/start-page/top-bar.tsx b/frontend/src/start-page/top-bar.tsx
index 8b8ff8d..9184ad8 100644
--- a/frontend/src/start-page/top-bar.tsx
+++ b/frontend/src/start-page/top-bar.tsx
@@ -4,7 +4,7 @@ import LogoImg from './event_emitter_eltex_loc-32px.png';
 
 export type TopBarProps = {
 	contact: string;
-	children: any;
+	children?: any;
 };
 
 const TopBar = (props: TopBarProps): ReactElement => {