diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx
index d7bd1eb..9c7f555 100644
--- a/services/frontend/src/App.tsx
+++ b/services/frontend/src/App.tsx
@@ -1,8 +1,8 @@
 import { Routes, Route } from "react-router";
 import "./styles/globals.css";
-import CompetitionsPage from "./pages/CompetitionsPage";
-import CompetitionPreviewPage from "./pages/CompetitionPreviewPage";
-import CompetitionRunnerPage from "./pages/CompetitionRunnerPage";
+import CompetitionsPage from "./pages/Competitions";
+import CompetitionPage from "./pages/Competition";
+import CompetitionRunnerPage from "./pages/CompetitionSession";
 import { NavbarLayout } from "./widgets/navbar-layout";
 
 const App = () => {
@@ -10,12 +10,12 @@ const App = () => {
     <Routes>
       <Route element={<NavbarLayout />}>
         <Route path="/" element={<CompetitionsPage />} />
+        <Route path="/competitions/:id" element={<CompetitionPage />} />
+        <Route
+          path="/competitions/:id/tasks/:taskId"
+          element={<CompetitionRunnerPage />}
+        />
       </Route>
-      <Route path="/competition/:id" element={<CompetitionPreviewPage />} />
-      <Route
-        path="/competition/:id/tasks/:taskId"
-        element={<CompetitionRunnerPage />}
-      />
     </Routes>
   );
 };
diff --git a/services/frontend/src/components/ui/button.tsx b/services/frontend/src/components/ui/button.tsx
index 49dcad9..7558e04 100644
--- a/services/frontend/src/components/ui/button.tsx
+++ b/services/frontend/src/components/ui/button.tsx
@@ -9,8 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        default: "bg-primary text-foreground  hover:bg-primary/80",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
         outline:
@@ -21,7 +20,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: "h-12 px-5 py-3 has-[>svg]:px-3 text-lg font-semibold",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
diff --git a/services/frontend/src/pages/.gitkeep b/services/frontend/src/pages/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/services/frontend/src/pages/Competition/index.tsx b/services/frontend/src/pages/Competition/index.tsx
new file mode 100644
index 0000000..bdddd5a
--- /dev/null
+++ b/services/frontend/src/pages/Competition/index.tsx
@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { Competition } from "@/shared/types";
+import { mockCompetitions } from "@/shared/mocks/mocks";
+
+const CompetitionPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const [competition] = useState<Competition>(
+    mockCompetitions.find((comp) => comp.id === id)!,
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Link
+        className="font-hse-sans text-muted-foreground flex items-center"
+        to="/"
+      >
+        <ArrowLeft size={16} className="mr-2" />
+        Назад к соревнованиям
+      </Link>
+
+      <div className="flex flex-col gap-6">
+        <div className="aspect-2 h-auto w-full overflow-hidden rounded-xl">
+          <img
+            src={competition.imageUrl}
+            alt={competition.name}
+            className="h-full w-full object-cover object-center"
+          />
+        </div>
+
+        <div className="flex gap-8">
+          <div className="flex flex-1 flex-col gap-5">
+            <h1 className="text-[34px] leading-11 font-semibold text-balance">
+              {competition.name}
+            </h1>
+            <div className="text-xl leading-10 font-normal">
+              {competition.description
+                ?.split("\n")
+                .map((line, i) => <p key={i}>{line}</p>)}
+            </div>
+          </div>
+          <div className="w-96 *:w-full">
+            <Button>Продолжить</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CompetitionPage;
diff --git a/services/frontend/src/pages/CompetitionPreviewPage/index.tsx b/services/frontend/src/pages/CompetitionPreviewPage/index.tsx
deleted file mode 100644
index e6261f7..0000000
--- a/services/frontend/src/pages/CompetitionPreviewPage/index.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import Navbar from "@/widgets/Navbar";
-import { Button } from "@/components/ui/button";
-import { ArrowLeft } from "lucide-react";
-import { Competition } from "@/shared/types";
-import { mockCompetitions, mockTasks } from "@/shared/mocks/mocks";
-
-const CompetitionPreview = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const [competition, setCompetition] = useState<Competition | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchCompetition = async () => {
-      try {
-        setTimeout(() => {
-          const found = mockCompetitions.find((comp) => comp.id === id);
-          setCompetition(found || null);
-          setIsLoading(false);
-        }, 500);
-      } catch (error) {
-        console.error("Error fetching competition:", error);
-        setIsLoading(false);
-      }
-    };
-
-    fetchCompetition();
-  }, [id]);
-
-  const handleBack = () => {
-    navigate(-1);
-  };
-
-  const handleContinue = () => {
-    if (competition?.id) {
-      const competitionTasks = mockTasks[competition.id];
-
-      if (competitionTasks && competitionTasks.length > 0) {
-        const firstTaskId = competitionTasks[0].id;
-        navigate(`/competition/${competition.id}/tasks/${firstTaskId}`);
-      } else {
-        navigate(`/competition/${competition.id}/tasks`);
-      }
-    }
-  };
-
-  return (
-    <>
-      <Navbar />
-      <div className="container mx-auto mt-16 px-4 py-8">
-        <button
-          onClick={handleBack}
-          className="font-hse-sans mb-8 flex items-center text-gray-600"
-        >
-          <ArrowLeft size={16} className="mr-2" />
-          Назад к соревнованиям
-        </button>
-
-        {isLoading ? (
-          <div className="flex h-64 items-center justify-center">
-            <p className="font-hse-sans text-gray-500">Загрузка...</p>
-          </div>
-        ) : competition ? (
-          <div className="mx-auto max-w-5xl overflow-hidden rounded-lg bg-white shadow-lg">
-            <div className="h-80 w-full overflow-hidden">
-              <img
-                src={competition.imageUrl}
-                alt={competition.name}
-                className="h-full w-full object-cover"
-              />
-            </div>
-
-            <div className="p-8">
-              <div className="mb-8 flex items-center justify-between">
-                <h1 className="font-hse-sans mr-6 flex-1 text-3xl font-semibold">
-                  {competition.name}
-                </h1>
-                <Button
-                  className="font-hse-sans min-w-[180px] bg-yellow-400 px-12 text-base text-black hover:bg-yellow-500"
-                  onClick={handleContinue}
-                >
-                  Продолжить
-                </Button>
-              </div>
-
-              <div className="font-hse-sans text-lg leading-relaxed text-gray-700">
-                <p>{competition.description}</p>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="py-12 text-center">
-            <h2 className="font-hse-sans mb-2 text-2xl font-bold">
-              Соревнование не найдено
-            </h2>
-            <p className="font-hse-sans text-gray-600">
-              Запрошенное соревнование не существует или было удалено.
-            </p>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default CompetitionPreview;
diff --git a/services/frontend/src/pages/CompetitionRunnerPage/index.tsx b/services/frontend/src/pages/CompetitionRunnerPage/index.tsx
index 73b8797..dc12b58 100644
--- a/services/frontend/src/pages/CompetitionRunnerPage/index.tsx
+++ b/services/frontend/src/pages/CompetitionRunnerPage/index.tsx
@@ -1,78 +1,61 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
-import Navbar from "@/widgets/Navbar";
-import { Task, TaskStatus } from "@/shared/types";
-
-const sampleTasks: Task[] = [
-  { id: "1", number: "1.1", status: "uncleared" },
-  { id: "2", number: "1.2", status: "checking" },
-  { id: "3", number: "1.3", status: "correct" },
-  { id: "4", number: "2.1", status: "partial" },
-  { id: "5", number: "2.2", status: "wrong" },
-  { id: "6", number: "2.3", status: "uncleared" },
-  { id: "7", number: "3.1", status: "checking" },
-  { id: "8", number: "3.2", status: "correct" },
-];
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Task } from "@/shared/types";
+import { getTaskBgColor, getTaskTextColor } from "./utils/utils";
+import { mockTasks } from "@/shared/mocks/mocks";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "lucide-react";
 
 const CompetitionRunnerPage = () => {
-  const { id } = useParams<{ id: string }>();
-  const [competitionTitle, setCompetitionTitle] = useState(
-    "Олимпиада DANO 2025. Индивидуальный этап",
-  );
-  const [tasks, setTasks] = useState<Task[]>(sampleTasks);
-  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const { id, taskId } = useParams<{ id: string; taskId?: string }>();
+  const navigate = useNavigate();
+  const [competitionTitle, setCompetitionTitle] = useState("Олимпиада DANO 2025. Индивидуальный этап");
+  const [tasks] = useState<Task[]>(mockTasks);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(taskId || null);
+  const [answer, setAnswer] = useState("");
 
-  const getTaskBgColor = (status: TaskStatus): string => {
-    switch (status) {
-      case "uncleared":
-        return "bg-[var(--color-task-uncleared)]";
-      case "checking":
-        return "bg-[var(--color-task-checking)]";
-      case "correct":
-        return "bg-[var(--color-task-correct)]";
-      case "partial":
-        return "bg-[var(--color-task-partial)]";
-      case "wrong":
-        return "bg-[var(--color-task-wrong)]";
+  useEffect(() => {
+    if (taskId) {
+      setSelectedTaskId(taskId);
+    } else if (tasks.length > 0) {
+      navigate(`/competition/${id}/tasks/${tasks[0].id}`, { replace: true });
     }
-  };
-
-  const getTaskTextColor = (status: TaskStatus): string => {
-    switch (status) {
-      case "uncleared":
-        return "text-gray-600";
-      case "checking":
-        return "text-gray-800";
-      case "correct":
-        return "text-green-800";
-      case "partial":
-        return "text-green-700";
-      case "wrong":
-        return "text-red-800";
-    }
-  };
+  }, [taskId, tasks, id, navigate]);
 
   const handleTaskClick = (taskId: string) => {
-    setSelectedTaskId(taskId);
+    if (selectedTaskId !== taskId) {
+      setSelectedTaskId(taskId);
+      navigate(`/competition/${id}/tasks/${taskId}`);
+    }
+  };
+
+  const currentTask = tasks.find(t => t.id === selectedTaskId);
+  
+  const handleSubmit = () => {
+    console.log("Submitting answer:", answer);
+    // Submit logic here
+  };
+  
+  const handleHistoryClick = () => {
+    console.log("View history");
   };
 
   return (
-    <>
-      <Navbar />
-
-      <div className="sticky top-16 z-10 border-b border-gray-200 bg-white shadow-sm">
-        <div className="container mx-auto px-4">
-          <div className="py-4">
-            <h1 className="font-hse-sans text-xl font-semibold">
-              {competitionTitle}
-            </h1>
+    <>      
+      <div className="sticky top-0 z-10 bg-white">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="py-3 text-center">
+            <h1 className="text-lg font-semibold font-hse-sans">{competitionTitle}</h1>
           </div>
-
-          <div className="scrollbar-thin scrollbar-thumb-gray-300 flex items-center gap-3 overflow-x-auto pb-4">
+          
+          <div className="flex items-center justify-center gap-2 pb-3 overflow-x-auto no-scrollbar">
             {tasks.map((task) => (
-              <div
+              <div 
                 key={task.id}
-                className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} font-hse-sans flex-shrink-0 cursor-pointer rounded-lg px-4 py-2 text-sm font-medium transition-transform hover:scale-105 ${selectedTaskId === task.id ? "ring-2 ring-black" : ""}`}
+                className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} 
+                  rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer 
+                  transition-all hover:brightness-95 flex-shrink-0
+                  ${selectedTaskId === task.id ? 'shadow-md transform scale-105' : ''}`}
                 onClick={() => handleTaskClick(task.id)}
               >
                 {task.number}
@@ -81,22 +64,82 @@ const CompetitionRunnerPage = () => {
           </div>
         </div>
       </div>
-
-      <div className="container mx-auto px-4 py-8">
-        <div className="rounded-lg bg-white p-6 shadow-sm">
-          {selectedTaskId ? (
-            <div className="font-hse-sans">
-              <h2 className="mb-4 text-lg font-medium">
-                Задание {tasks.find((t) => t.id === selectedTaskId)?.number}
-              </h2>
-              <p className="text-gray-700">
-                Содержание задания будет отображаться здесь.
-              </p>
+      
+      <div className="bg-[#F8F8F8] min-h-screen pb-8">
+        <div className="max-w-6xl mx-auto px-4 py-6">
+          {currentTask ? (
+            <div className="flex flex-col md:flex-row gap-6 font-hse-sans">
+              {/* Left Container - Task Description */}
+              <div className="flex-1 bg-white rounded-lg p-6">
+                <h2 className="text-xl font-medium mb-4">
+                  Задача {currentTask.number}
+                </h2>
+                
+                <div className="prose max-w-none text-gray-700">
+                  <p>
+                    Рассмотрим последовательность чисел 2, 3, 5, 9, 17, 33, 65, 129, ... 
+                    Каждый член этой последовательности, начиная с третьего, равен сумме двух предыдущих членов.
+                  </p>
+                  <p className="mt-4">
+                    Найдите сумму первых 15 членов этой последовательности.
+                  </p>
+                  <p className="mt-4">
+                    В ответе укажите целое число.
+                  </p>
+                </div>
+              </div>
+              
+              {/* Right Container - Solution Area */}
+              <div className="md:w-[350px] flex flex-col gap-4">
+                {/* Solution Status Card */}
+                <div className={`${getTaskBgColor(currentTask.status)} rounded-lg p-4 relative`}>
+                  <div className="flex flex-col">
+                    <span className={`${getTaskTextColor(currentTask.status)} font-medium`}>
+                      Решение 12345
+                    </span>
+                    <span className={`${getTaskTextColor(currentTask.status)} mt-1`}>
+                      Зачтено 5/10 баллов
+                    </span>
+                  </div>
+                  <div className="absolute bottom-2 right-3 text-xs text-gray-600">
+                    1 марта, 08:41
+                  </div>
+                </div>
+                
+                {/* Answer Input */}
+                <div className="bg-white rounded-lg p-4">
+                  <textarea 
+                    className="w-full h-32 border border-gray-300 rounded-md p-3 font-hse-sans text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Введите ответ"
+                    value={answer}
+                    onChange={(e) => setAnswer(e.target.value)}
+                  />
+                </div>
+                
+                {/* Action Buttons */}
+                <div className="flex gap-3 justify-between">
+                  <Button 
+                    variant="outline" 
+                    className="font-hse-sans"
+                    onClick={handleHistoryClick}
+                  >
+                    История
+                  </Button>
+                  <Button 
+                    className="bg-yellow-400 hover:bg-yellow-500 text-black font-hse-sans"
+                    onClick={handleSubmit}
+                  >
+                    Отправить решение
+                  </Button>
+                </div>
+              </div>
             </div>
           ) : (
-            <p className="font-hse-sans text-gray-500">
-              Выберите задание для просмотра
-            </p>
+            <div className="flex justify-center items-center h-40 bg-white rounded-lg">
+              <p className="font-hse-sans text-gray-500">
+                Загрузка задания...
+              </p>
+            </div>
           )}
         </div>
       </div>
diff --git a/services/frontend/src/pages/CompetitionSession/index.tsx b/services/frontend/src/pages/CompetitionSession/index.tsx
new file mode 100644
index 0000000..6a50cd2
--- /dev/null
+++ b/services/frontend/src/pages/CompetitionSession/index.tsx
@@ -0,0 +1,156 @@
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Task } from "@/shared/types";
+import { getTaskBgColor, getTaskTextColor } from "./utils/utils";
+import { mockTasks } from "@/shared/mocks/mocks";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "lucide-react";
+
+const CompetitionRunnerPage = () => {
+  const { id, taskId } = useParams<{ id: string; taskId?: string }>();
+  const navigate = useNavigate();
+  const [competitionTitle, setCompetitionTitle] = useState(
+    "Олимпиада DANO 2025. Индивидуальный этап",
+  );
+  const [tasks] = useState<Task[]>(mockTasks);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(
+    taskId || null,
+  );
+  const [answer, setAnswer] = useState("");
+
+  useEffect(() => {
+    if (taskId) {
+      setSelectedTaskId(taskId);
+    } else if (tasks.length > 0) {
+      navigate(`/competition/${id}/tasks/${tasks[0].id}`, { replace: true });
+    }
+  }, [taskId, tasks, id, navigate]);
+
+  const handleTaskClick = (taskId: string) => {
+    if (selectedTaskId !== taskId) {
+      setSelectedTaskId(taskId);
+      navigate(`/competition/${id}/tasks/${taskId}`);
+    }
+  };
+
+  const currentTask = tasks.find((t) => t.id === selectedTaskId);
+
+  const handleSubmit = () => {
+    console.log("Submitting answer:", answer);
+    // Submit logic here
+  };
+
+  const handleHistoryClick = () => {
+    console.log("View history");
+  };
+
+  return (
+    <>
+      <div className="sticky top-0 z-10 bg-white">
+        <div className="mx-auto max-w-6xl px-4">
+          <div className="py-3 text-center">
+            <h1 className="font-hse-sans text-lg font-semibold">
+              {competitionTitle}
+            </h1>
+          </div>
+
+          <div className="no-scrollbar flex items-center justify-center gap-2 overflow-x-auto pb-3">
+            {tasks.map((task) => (
+              <div
+                key={task.id}
+                className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} font-hse-sans flex-shrink-0 cursor-pointer rounded-lg px-3 py-1.5 text-sm font-medium transition-all hover:brightness-95 ${selectedTaskId === task.id ? "scale-105 transform shadow-md" : ""}`}
+                onClick={() => handleTaskClick(task.id)}
+              >
+                {task.number}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="min-h-screen bg-[#F8F8F8] pb-8">
+        <div className="mx-auto max-w-6xl px-4 py-6">
+          {currentTask ? (
+            <div className="font-hse-sans flex flex-col gap-6 md:flex-row">
+              {/* Left Container - Task Description */}
+              <div className="flex-1 rounded-lg bg-white p-6">
+                <h2 className="mb-4 text-xl font-medium">
+                  Задача {currentTask.number}
+                </h2>
+
+                <div className="prose max-w-none text-gray-700">
+                  <p>
+                    Рассмотрим последовательность чисел 2, 3, 5, 9, 17, 33, 65,
+                    129, ... Каждый член этой последовательности, начиная с
+                    третьего, равен сумме двух предыдущих членов.
+                  </p>
+                  <p className="mt-4">
+                    Найдите сумму первых 15 членов этой последовательности.
+                  </p>
+                  <p className="mt-4">В ответе укажите целое число.</p>
+                </div>
+              </div>
+
+              {/* Right Container - Solution Area */}
+              <div className="flex flex-col gap-4 md:w-[350px]">
+                {/* Solution Status Card */}
+                <div
+                  className={`${getTaskBgColor(currentTask.status)} relative rounded-lg p-4`}
+                >
+                  <div className="flex flex-col">
+                    <span
+                      className={`${getTaskTextColor(currentTask.status)} font-medium`}
+                    >
+                      Решение 12345
+                    </span>
+                    <span
+                      className={`${getTaskTextColor(currentTask.status)} mt-1`}
+                    >
+                      Зачтено 5/10 баллов
+                    </span>
+                  </div>
+                  <div className="absolute right-3 bottom-2 text-xs text-gray-600">
+                    1 марта, 08:41
+                  </div>
+                </div>
+
+                {/* Answer Input */}
+                <div className="rounded-lg bg-white p-4">
+                  <textarea
+                    className="font-hse-sans h-32 w-full rounded-md border border-gray-300 p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    placeholder="Введите ответ"
+                    value={answer}
+                    onChange={(e) => setAnswer(e.target.value)}
+                  />
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex justify-between gap-3">
+                  <Button
+                    variant="outline"
+                    className="font-hse-sans"
+                    onClick={handleHistoryClick}
+                  >
+                    История
+                  </Button>
+                  <Button
+                    className="font-hse-sans bg-yellow-400 text-black hover:bg-yellow-500"
+                    onClick={handleSubmit}
+                  >
+                    Отправить решение
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="flex h-40 items-center justify-center rounded-lg bg-white">
+              <p className="font-hse-sans text-gray-500">Загрузка задания...</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CompetitionRunnerPage;
diff --git a/services/frontend/src/pages/CompetitionSession/utils/utils.ts b/services/frontend/src/pages/CompetitionSession/utils/utils.ts
new file mode 100644
index 0000000..736450a
--- /dev/null
+++ b/services/frontend/src/pages/CompetitionSession/utils/utils.ts
@@ -0,0 +1,23 @@
+import { TaskStatus } from "@/shared/types/types";
+
+const getTaskBgColor = (status: TaskStatus): string => {
+  switch (status) {
+    case "uncleared": return "bg-[var(--color-task-uncleared)]";
+    case "checking": return "bg-[var(--color-task-checking)]";
+    case "correct": return "bg-[var(--color-task-correct)]";
+    case "partial": return "bg-[var(--color-task-partial)]";
+    case "wrong": return "bg-[var(--color-task-wrong)]";
+  }
+};
+
+const getTaskTextColor = (status: TaskStatus): string => {
+  switch (status) {
+    case "uncleared": return "text-[var(--color-task-text-uncleared)]";
+    case "checking": return "text-[var(--color-task-text-checking)]";
+    case "correct": return "text-[var(--color-task-text-correct)]";
+    case "partial": return "text-[var(--color-task-text-partial)]";
+    case "wrong": return "text-[var(--color-task-text-wrong)]";
+  }
+};
+
+export {getTaskBgColor, getTaskTextColor}
\ No newline at end of file
diff --git a/services/frontend/src/pages/CompetitionsPage/components/CompetitionCard/index.tsx b/services/frontend/src/pages/Competitions/components/CompetitionCard/index.tsx
similarity index 87%
rename from services/frontend/src/pages/CompetitionsPage/components/CompetitionCard/index.tsx
rename to services/frontend/src/pages/Competitions/components/CompetitionCard/index.tsx
index 2e65038..9b7c7da 100644
--- a/services/frontend/src/pages/CompetitionsPage/components/CompetitionCard/index.tsx
+++ b/services/frontend/src/pages/Competitions/components/CompetitionCard/index.tsx
@@ -1,6 +1,7 @@
 import { Competition, CompetitionStatus } from "@/shared/types";
 import { cn } from "@/shared/lib/utils";
 import { Card, CardContent } from "@/components/ui/card";
+import { useNavigate } from "react-router";
 
 interface CompetitionCardProps {
   competition: Competition;
@@ -11,12 +12,19 @@ export function CompetitionCard({
   competition,
   className,
 }: CompetitionCardProps) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/competition/${competition.id}`);
+  };
+
   return (
     <Card
       className={cn(
         "aspect-square h-full max-h-80 w-auto overflow-hidden",
         className,
       )}
+      onClick={handleClick}
     >
       <div className="relative h-full overflow-hidden">
         <img
diff --git a/services/frontend/src/pages/CompetitionsPage/components/CompetitionSkeleton/index.tsx b/services/frontend/src/pages/Competitions/components/CompetitionSkeleton/index.tsx
similarity index 100%
rename from services/frontend/src/pages/CompetitionsPage/components/CompetitionSkeleton/index.tsx
rename to services/frontend/src/pages/Competitions/components/CompetitionSkeleton/index.tsx
diff --git a/services/frontend/src/pages/CompetitionsPage/components/CompetitionTag/index.tsx b/services/frontend/src/pages/Competitions/components/CompetitionTag/index.tsx
similarity index 100%
rename from services/frontend/src/pages/CompetitionsPage/components/CompetitionTag/index.tsx
rename to services/frontend/src/pages/Competitions/components/CompetitionTag/index.tsx
diff --git a/services/frontend/src/pages/CompetitionsPage/index.tsx b/services/frontend/src/pages/Competitions/index.tsx
similarity index 56%
rename from services/frontend/src/pages/CompetitionsPage/index.tsx
rename to services/frontend/src/pages/Competitions/index.tsx
index f7c208b..08c213d 100644
--- a/services/frontend/src/pages/CompetitionsPage/index.tsx
+++ b/services/frontend/src/pages/Competitions/index.tsx
@@ -2,65 +2,7 @@ import { useState, useEffect } from "react";
 import { Competition, CompetitionStatus } from "@/shared/types";
 import { CompetitionGrid } from "./modules/CompetitionGrid";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
-const mockCompetitions: Competition[] = [
-  {
-    id: "1",
-    name: "Олимпиада DANO 2025. Индивидуальный этап",
-    imageUrl: "/DANO.png",
-    isOlympics: true,
-    status: CompetitionStatus.InProgress,
-  },
-  {
-    id: "2",
-    name: "Олимпиада DANO 2025. Индивидуальный этап",
-    imageUrl: "/DANO.png",
-    isOlympics: false,
-    status: CompetitionStatus.NotParticipating,
-  },
-  {
-    id: "3",
-    name: "Олимпиада DANO 2025. Индивидуальный этап",
-    imageUrl: "/DANO.png",
-    isOlympics: false,
-    status: CompetitionStatus.InProgress,
-  },
-  {
-    id: "4",
-    name: "Олимпиада DANO 2025. Индивидуальный этап",
-    imageUrl: "/DANO.png",
-    isOlympics: true,
-    status: CompetitionStatus.Completed,
-  },
-  {
-    id: "5",
-    name: "Олимпиада DANO 2025. Индивидуальный этап",
-    imageUrl: "/DANO.png",
-    isOlympics: false,
-    status: CompetitionStatus.Completed,
-  },
-  {
-    id: "6",
-    name: "Олимпиада DANO 2025. Индивидуальный этап",
-    imageUrl: "/DANO.png",
-    isOlympics: true,
-    status: CompetitionStatus.NotParticipating,
-  },
-  {
-    id: "6",
-    name: "Олимпиада DANO 2025. Индивидуальный этап",
-    imageUrl: "/DANO.png",
-    isOlympics: true,
-    status: CompetitionStatus.NotParticipating,
-  },
-  {
-    id: "6",
-    name: "Олимпиада DANO 2025. Индивидуальный этап",
-    imageUrl: "/DANO.png",
-    isOlympics: true,
-    status: CompetitionStatus.NotParticipating,
-  },
-];
+import { mockCompetitions } from "@/shared/mocks/mocks";
 
 const CompetitionsPage = () => {
   const [competitions] = useState<Competition[]>(mockCompetitions);
diff --git a/services/frontend/src/pages/CompetitionsPage/modules/CompetitionGrid/index.tsx b/services/frontend/src/pages/Competitions/modules/CompetitionGrid/index.tsx
similarity index 67%
rename from services/frontend/src/pages/CompetitionsPage/modules/CompetitionGrid/index.tsx
rename to services/frontend/src/pages/Competitions/modules/CompetitionGrid/index.tsx
index 19b376c..1281f06 100644
--- a/services/frontend/src/pages/CompetitionsPage/modules/CompetitionGrid/index.tsx
+++ b/services/frontend/src/pages/Competitions/modules/CompetitionGrid/index.tsx
@@ -1,5 +1,6 @@
 import { Competition } from "@/shared/types";
 import { CompetitionCard } from "../../components/CompetitionCard";
+import { Link } from "react-router";
 
 interface CompetitionGridProps {
   competitions: Competition[];
@@ -9,7 +10,9 @@ export function CompetitionGrid({ competitions }: CompetitionGridProps) {
   return (
     <div className="grid grid-cols-3 gap-9">
       {competitions.map((competition) => (
-        <CompetitionCard key={competition.id} competition={competition} />
+        <Link key={competition.id} to={`/competitions/${competition.id}`}>
+          <CompetitionCard competition={competition} />
+        </Link>
       ))}
     </div>
   );
diff --git a/services/frontend/src/pages/CompetitionsPage/types.ts b/services/frontend/src/pages/CompetitionsPage/types.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/services/frontend/src/shared/mocks/mocks.ts b/services/frontend/src/shared/mocks/mocks.ts
index b05ad67..2373910 100644
--- a/services/frontend/src/shared/mocks/mocks.ts
+++ b/services/frontend/src/shared/mocks/mocks.ts
@@ -1,4 +1,4 @@
-import { Competition, CompetitionStatus } from "../types";
+import { Competition, CompetitionStatus, Task } from "../types";
 
 const mockCompetitions: Competition[] = [
   {
@@ -7,8 +7,11 @@ const mockCompetitions: Competition[] = [
     imageUrl: "/DANO.png",
     isOlympics: true,
     status: CompetitionStatus.InProgress,
-    description:
-      "Проверка глубоких знаний и навыков в анализе данных. Будет несколько творческих заданий со свободным ответом. Задания выполняются индивидуально, вес тура в итоговом результате – 0,5. Этап пройдет онлайн в заданное время, с применением системы прокторинга. На работу дается 240 минут.",
+    description: `Проверка глубоких знаний и навыков в анализе данных.
+Будет несколько творческих заданий со свободным ответом.
+Задания выполняются индивидуально, вес тура в итоговом результате – 0,5.
+Этап пройдет онлайн в заданное время, с применением системы прокторинга.
+На работу дается 240 минут.`,
   },
   {
     id: "2",
@@ -49,16 +52,15 @@ const mockCompetitions: Competition[] = [
   },
 ];
 
-const mockTasks = {
-  "1": [
-    { id: "1.1", number: "1.1", status: "uncleared" },
-    { id: "1.2", number: "1.2", status: "checking" },
-    { id: "1.3", number: "1.3", status: "correct" },
-  ],
-  "2": [
-    { id: "2.1", number: "1.1", status: "uncleared" },
-    { id: "2.2", number: "1.2", status: "uncleared" },
-  ],
-};
+const mockTasks: Task[] = [
+  { id: "1", number: "1.1", status: "uncleared" },
+  { id: "2", number: "1.2", status: "checking" },
+  { id: "3", number: "1.3", status: "correct" },
+  { id: "4", number: "2.1", status: "partial" },
+  { id: "5", number: "2.2", status: "wrong" },
+  { id: "6", number: "2.3", status: "uncleared" },
+  { id: "7", number: "3.1", status: "checking" },
+  { id: "8", number: "3.2", status: "correct" },
+];
 
 export { mockCompetitions, mockTasks };
diff --git a/services/frontend/src/styles/globals.css b/services/frontend/src/styles/globals.css
index f7807bf..644cc81 100644
--- a/services/frontend/src/styles/globals.css
+++ b/services/frontend/src/styles/globals.css
@@ -38,6 +38,18 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.87 0 0);
+
+  --yellow-standard: oklch(0.9 0.1763 97.07);
+  --task-uncleared: oklch(0.955 0 0);
+  --task-text-uncleared: oklch(0.321 0 0);
+  --task-checking: oklch(0.941 0.0983 95.95);
+  --task-text-checking: oklch(0.588 0.120264 87.3807);
+  --task-correct: oklch(0.962 0.0561 158.62);
+  --task-text-correct: oklch(0.598 0.19517 143.8056);
+  --task-partial: oklch(0.971 0.0616 131.35);
+  --task-text-partial: oklch(0.639 0.1595 124.48);
+  --task-wrong: oklch(0.906 0.0484 18.08);
+  --task-text-wrong: oklch(0.433 0.17767 29.2339);
 }
 
 @theme inline {
@@ -77,11 +89,6 @@
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
 
-  --task-uncleared: oklch(0.955 0 0);
-  --task-checking: oklch(0.899 0.1763 97.07);
-  --task-correct: oklch(0.962 0.0561 158.62);
-  --task-partial: oklch(0.971 0.0616 131.35);
-  --task-wrong: oklch(0.906 0.0484 18.08);
 }
 
 @theme inline {
@@ -122,11 +129,17 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  --color-yellow-standard: var(--yellow-standard);
   --color-task-uncleared: var(--task-uncleared);
+  --color-task-text-uncleared: var(--task-text-uncleared);
   --color-task-checking: var(--task-checking);
+  --color-task-text-checking: var(--task-text-checking);
   --color-task-correct: var(--task-correct);
+  --color-task-text-correct: var(--task-text-correct);
   --color-task-partial: var(--task-partial);
+  --color-task-text-partial: var(--task-text-partial);
   --color-task-wrong: var(--task-wrong);
+  --color-task-text-wrong: var(--task-text-wrong);
 }
 
 @layer base {
diff --git a/services/frontend/src/widgets/Navbar/index.tsx b/services/frontend/src/widgets/Navbar/index.tsx
new file mode 100644
index 0000000..a1b681a
--- /dev/null
+++ b/services/frontend/src/widgets/Navbar/index.tsx
@@ -0,0 +1,24 @@
+import { ChevronDown } from "lucide-react";
+
+const Navbar = () => {
+  return (
+    <nav className="bg-white border-b border-gray-200 py-3 px-4 fixed top-0 left-0 right-0 z-10">
+      <div className="container mx-auto flex justify-between items-center">
+        <div className="flex items-center">
+          <div className="bg-black px-3 py-2 rounded font-hse-sans">
+            <span className="font-bold text-yellow-400">DATA</span>
+            <span className="font-bold text-white">RUSH</span>
+          </div>
+        </div>
+        
+        <div className="flex items-center cursor-pointer">
+          <span className="mr-2 font-semibold font-hse-sans">itqdev</span>
+          <ChevronDown size={16} />
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+
+export default Navbar