diff --git a/apps/api/src/modules/vacancies/graphql/vacancy.resolver.ts b/apps/api/src/modules/vacancies/graphql/vacancy.resolver.ts
index 961e32e..b304ade 100644
--- a/apps/api/src/modules/vacancies/graphql/vacancy.resolver.ts
+++ b/apps/api/src/modules/vacancies/graphql/vacancy.resolver.ts
@@ -13,6 +13,7 @@ import {
   Args,
   Mutation,
   Parent,
+  Query,
   ResolveField,
   Resolver,
 } from "@nestjs/graphql";
@@ -48,6 +49,16 @@ export class VacancyResolver {
     private readonly locationDataLoader: LocationDataLoaderService,
   ) {}
 
+  @Query(() => Vacancy)
+  async vacancy(
+    @CurrentUser() user: DomainUser,
+    @Args("id") id: string,
+  ): Promise<Vacancy> {
+    const vacancy = await this.vacancyService.findByIdOrFail(id);
+    await this.authorizationService.canView(user, vacancy, VacancyEntity);
+    return Vacancy.fromDomain(vacancy);
+  }
+
   @Mutation(() => Vacancy)
   async createVacancy(
     @CurrentUser() user: DomainUser,
diff --git a/apps/client/src/features/vacancies/components/VacancyList.tsx b/apps/client/src/features/vacancies/components/VacancyList.tsx
index b5f915f..1b6ff6b 100644
--- a/apps/client/src/features/vacancies/components/VacancyList.tsx
+++ b/apps/client/src/features/vacancies/components/VacancyList.tsx
@@ -1,3 +1,4 @@
+import { ViewTransitionLink } from "@cv/routing";
 import {
   DeleteIcon,
   EditIcon,
@@ -103,12 +104,15 @@ export const VacancyList = ({ vacancies, onDelete }: VacancyListProps) => {
         {vacancies.map((vacancy) => (
           <TableRow key={vacancy.id}>
             <TableCell>
-              <div className="p-2">
+              <ViewTransitionLink
+                to={`/vacancies/${vacancy.id}`}
+                className="block p-2 hover:bg-ctp-surface0 rounded-md"
+              >
                 <div className="font-medium text-ctp-text">{vacancy.title}</div>
                 <div className="text-sm text-ctp-subtext0">
                   {vacancy.company?.name ?? "—"}
                 </div>
-              </div>
+              </ViewTransitionLink>
             </TableCell>
             <TableCell>
               <div className="p-2">{vacancy.location?.name ?? "—"}</div>
diff --git a/apps/client/src/features/vacancies/queries/vacancy.graphql b/apps/client/src/features/vacancies/queries/vacancy.graphql
new file mode 100644
index 0000000..84ff039
--- /dev/null
+++ b/apps/client/src/features/vacancies/queries/vacancy.graphql
@@ -0,0 +1,46 @@
+query Vacancy($id: String!) {
+  vacancy(id: $id) {
+    id
+    title
+    ownerId
+    description
+    requirements
+    minSalary
+    maxSalary
+    applicationUrl
+    deadline
+    isActive
+    isPublic
+    createdAt
+    updatedAt
+    company {
+      id
+      name
+    }
+    role {
+      id
+      name
+    }
+    level {
+      id
+      name
+    }
+    location {
+      id
+      name
+      type
+    }
+    contractType {
+      id
+      name
+    }
+    rateType {
+      id
+      name
+    }
+    skills {
+      id
+      name
+    }
+  }
+}
diff --git a/apps/client/src/pages/vacancies/VacancyDetailPage.tsx b/apps/client/src/pages/vacancies/VacancyDetailPage.tsx
new file mode 100644
index 0000000..05f130f
--- /dev/null
+++ b/apps/client/src/pages/vacancies/VacancyDetailPage.tsx
@@ -0,0 +1,131 @@
+import { ViewTransitionLink } from "@cv/routing";
+import { Badge, Button, Card, Page, Placeholder, StatusBadge } from "@cv/ui";
+import { useParams } from "react-router-dom";
+import { useVacancyQuery } from "@/generated/graphql";
+import { formatDeadline } from "@/utils/dateUtils";
+import { formatSalary } from "@/utils/salaryFormatter";
+
+const Section = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <div className="mb-6">
+    <h3 className="text-sm font-semibold uppercase tracking-wide text-ctp-subtext0 mb-2">
+      {title}
+    </h3>
+    <div className="text-ctp-text">{children}</div>
+  </div>
+);
+
+const VacancyDetailPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const { data, isLoading, error } = useVacancyQuery(
+    { id: id ?? "" },
+    { enabled: !!id },
+  );
+
+  const title = "Vacancy";
+
+  if (isLoading) {
+    return (
+      <Page title={title}>
+        <Placeholder variant="loading" message="Loading vacancy..." />
+      </Page>
+    );
+  }
+
+  if (error || !data?.vacancy) {
+    return (
+      <Page title={title}>
+        <Placeholder
+          variant="error"
+          message={error instanceof Error ? error.message : "Vacancy not found"}
+        >
+          <ViewTransitionLink to="/vacancies">
+            <Button className="mt-4">Back to vacancies</Button>
+          </ViewTransitionLink>
+        </Placeholder>
+      </Page>
+    );
+  }
+
+  const vacancy = data.vacancy;
+  const salary = formatSalary(vacancy.minSalary, vacancy.maxSalary);
+
+  return (
+    <Page
+      title={vacancy.title}
+      description={vacancy.company?.name ?? undefined}
+      action={
+        <ViewTransitionLink to="/vacancies">
+          <Button variant="outline">Back to list</Button>
+        </ViewTransitionLink>
+      }
+    >
+      <Card>
+        <div className="flex flex-wrap items-center gap-3 mb-6">
+          <StatusBadge status={vacancy.isActive ? "active" : "inactive"} />
+          {vacancy.role && <Badge color="ctp-blue">{vacancy.role.name}</Badge>}
+          {vacancy.level && (
+            <Badge color="ctp-mauve">{vacancy.level.name}</Badge>
+          )}
+          {vacancy.contractType && (
+            <Badge color="ctp-teal">{vacancy.contractType.name}</Badge>
+          )}
+          {vacancy.rateType && (
+            <Badge color="ctp-peach">{vacancy.rateType.name}</Badge>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <Section title="Company">{vacancy.company?.name ?? "-"}</Section>
+          <Section title="Location">{vacancy.location?.name ?? "-"}</Section>
+          <Section title="Salary">{salary ?? "-"}</Section>
+          <Section title="Deadline">{formatDeadline(vacancy.deadline)}</Section>
+        </div>
+
+        {vacancy.skills && vacancy.skills.length > 0 && (
+          <Section title="Skills">
+            <div className="flex flex-wrap gap-1">
+              {vacancy.skills.map((skill) => (
+                <Badge key={skill.id} color="ctp-sapphire">
+                  {skill.name}
+                </Badge>
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {vacancy.description && (
+          <Section title="Description">
+            <p className="whitespace-pre-wrap">{vacancy.description}</p>
+          </Section>
+        )}
+
+        {vacancy.requirements && (
+          <Section title="Requirements">
+            <p className="whitespace-pre-wrap">{vacancy.requirements}</p>
+          </Section>
+        )}
+
+        {vacancy.applicationUrl && (
+          <Section title="Application URL">
+            <a
+              href={vacancy.applicationUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-ctp-blue underline"
+            >
+              {vacancy.applicationUrl}
+            </a>
+          </Section>
+        )}
+      </Card>
+    </Page>
+  );
+};
+
+export default VacancyDetailPage;
diff --git a/apps/client/src/router/AppRouter.tsx b/apps/client/src/router/AppRouter.tsx
index 2b0119d..ae7a8aa 100644
--- a/apps/client/src/router/AppRouter.tsx
+++ b/apps/client/src/router/AppRouter.tsx
@@ -52,6 +52,9 @@ const AdminPage = lazy(() => import("@/pages/admin/AdminPage"));
 const AsyncJobsPage = lazy(() => import("@/pages/admin/AsyncJobsPage"));
 const SystemStatusPage = lazy(() => import("@/pages/admin/SystemStatusPage"));
 const VacanciesPage = lazy(() => import("@/pages/vacancies/VacanciesPage"));
+const VacancyDetailPage = lazy(
+  () => import("@/pages/vacancies/VacancyDetailPage"),
+);
 
 const AppRouter = () => {
   const { isAuthenticated, isLoading } = useToken();
@@ -241,6 +244,14 @@ const AppRouter = () => {
               </Suspense>
             }
           />
+          <Route
+            path="vacancies/:id"
+            element={
+              <Suspense fallback={<PageLoader />}>
+                <VacancyDetailPage />
+              </Suspense>
+            }
+          />
           <Route
             path="cvs"
             element={