diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..bdb388c
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,9 @@
+.nuxt/**
+.vscode/**
+.output/**
+node_modules/**
+db/**
+nginx/**
+supabase/**
+.git/**
+README.md
\ No newline at end of file
diff --git a/.env.example b/.env.example
deleted file mode 100644
index 0ef68e4..0000000
--- a/.env.example
+++ /dev/null
@@ -1,18 +0,0 @@
-# unstorage driver used as primary database
-KV_DRIVER="vercelKV"
-
-KV_URL="redis://******:******@******.******.***:****" # https://unstorage.unjs.io/drivers/vercel
-KV_REST_API_URL="https://*****.******.***"
-KV_REST_API_TOKEN="*****"
-KV_REST_API_READ_ONLY_TOKEN="*****"
-
-# Telegram bot username and token (used for login)
-TG_BOT="******"
-TG_BOT_TOKEN="******"
-
-# Algolia for search
-ALGOLIA_API_KEY="******"
-ALGOLIA_APPLICATION_ID="******"
-
-FILE_SERVER_URL="https://*****.******.***"
-FILE_SERVER_SIGNATURE="******"
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index e87bc73..532aedf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,7 @@ dist
 node_modules
 
 # Logs
-logs
+./logs
 *.log
 
 # Misc
@@ -21,4 +21,7 @@ logs
 # Local env files
 .env
 .env.*
-!.env.example
\ No newline at end of file
+!.env.example
+bundled/README.md
+
+.kv
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..48ea507
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+	"plugins": ["prettier-plugin-tailwindcss"],
+	"tabWidth": 4,
+	"useTabs": true
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 61c5de3..74b1067 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -1,16 +1,16 @@
 {
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "type": "npm",
-            "script": "dev",
-            "problemMatcher": [],
-            "label": "bun: dev",
-            "detail": "nuxt dev",
-            "group": {
-                "kind": "test",
-                "isDefault": true
-            }
-        }
-    ]
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "dev",
+			"problemMatcher": [],
+			"label": "bun: dev",
+			"detail": "nuxt dev",
+			"group": {
+				"kind": "test",
+				"isDefault": true
+			}
+		}
+	]
 }
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..eee1b65
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:20 AS build
+WORKDIR /usr/src/frontend
+
+RUN npm install -g bun
+RUN npm install -g nuxi
+
+COPY package.json .
+RUN bun install
+
+
+COPY . .
+
+RUN nuxi build
+
+FROM node:20 AS release
+WORKDIR /usr/src/frontend
+
+COPY --from=build /usr/src/frontend/.output .output
+
+# run the app
+ENTRYPOINT [ "node", ".output/server/index.mjs" ]
\ No newline at end of file
diff --git a/README.md b/README.md
index b7de16b..faf5d18 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,4 @@ The official website for School 550 in Saint-Petersburg, Russia.
 
 ## Powered by:
 
-### [<img src="https://nuxt.com/assets/design-kit/logo-green-white.svg" width="100" title="Nuxt 4">](https://nuxt.com)
-
-### [<svg aria-label="Vercel logotype" role="img" viewBox="0 0 283 64" width="100"><path d="M141.68 16.25c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm117.14-14.5c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm-39.03 3.5c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9v-46h9zM37.59.25l36.95 64H.64l36.95-64zm92.38 5l-27.71 48-27.71-48h10.39l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10v14.8h-9v-34h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="white"></path></svg>](https://vercel.com/home)
+### [<img src="https://nuxt.com/assets/design-kit/logo-green-white.svg" width="100" title="Nuxt 4">](https://nuxt.com)
\ No newline at end of file
diff --git a/app/app.config.ts b/app/app.config.ts
index 69cabe0..5ccb592 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -1,14 +1,14 @@
 export default defineAppConfig({
-    ui: {
-        primary: "blue",
-        gray: "neutral",
-        icons: {
-            dynamic: true,
-        },
-        commandPalette: {
-            default: {
-                loadingIcon: "fluent:spinner-ios-16-filled",
-            },
-        },
-    },
+	ui: {
+		primary: "blue",
+		gray: "neutral",
+		icons: {
+			dynamic: true,
+		},
+		commandPalette: {
+			default: {
+				loadingIcon: "fluent:spinner-ios-16-filled",
+			},
+		},
+	},
 });
diff --git a/app/app.vue b/app/app.vue
index c6bef14..b73a9b1 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,44 +1,64 @@
 <script lang="ts" setup>
-import { SpeedInsights } from "@vercel/speed-insights/nuxt";
-
-const route = useRoute();
-onMounted(async () => {
-    if (
-        !route.path.startsWith("/manage") ||
-        route.path.startsWith("/manage/auth")
-    )
-        return;
-    const valid = await $fetch("/api/auth/validate");
-
-    if (!valid) {
-        navigateTo("/manage/auth");
-    }
-});
-
 useSeoMeta({
-    ogImage: "/images/exterior.png",
+	ogImage: "/images/exterior.png",
 });
 
 useHead({
-    htmlAttrs: {
-        lang: "ru",
-    },
-    link: [
-        {
-            rel: "icon",
-            type: "image/png",
-            href: "/favicon.png",
-        },
-    ],
+	htmlAttrs: {
+		lang: "ru",
+	},
+	link: [
+		{
+			rel: "icon",
+			type: "image/png",
+			href: "/favicon.png",
+		},
+	],
+});
+
+const visuallyImpaired = useCookie("visImpairmentMode");
+if (visuallyImpaired.value === undefined) visuallyImpaired.value = false;
+
+onMounted(() => {
+	document.documentElement.style.filter = visuallyImpaired.value
+		? "saturate(0)"
+		: "none";
+});
+
+watch(visuallyImpaired, (newValue) => {
+	document.documentElement.style.filter = newValue ? "saturate(0)" : "none";
 });
 </script>
 
 <template>
-    <NuxtLoadingIndicator color="rgb(var(--color-primary-500))" />
-    <NuxtLayout>
-        <NuxtPage />
-    </NuxtLayout>
-    <SearchPalette />
-    <UNotifications />
-    <SpeedInsights />
+	<div :class="{ 'visually-impaired': visuallyImpaired }">
+		<NuxtRouteAnnouncer />
+		<NuxtLoadingIndicator color="rgb(var(--color-primary-500))" />
+		<NuxtLayout>
+			<NuxtPage />
+		</NuxtLayout>
+		<!-- <SearchPalette /> -->
+		<UNotifications />
+	</div>
 </template>
+
+<style lang="scss">
+/* Visually impaired mode */
+.visually-impaired {
+	img,
+	.hero-bg,
+	.dashed-circles {
+		display: none !important;
+	}
+
+	.invert-if-impaired {
+		@apply text-black dark:text-white;
+	}
+
+	.aos-init {
+		transform: translate(0) scale(1) !important;
+		transition-property: none !important;
+		opacity: 1 !important;
+	}
+}
+</style>
diff --git a/app/assets/style.scss b/app/assets/style.scss
index a0bd773..b6182d7 100644
--- a/app/assets/style.scss
+++ b/app/assets/style.scss
@@ -1,25 +1,28 @@
 :root {
-    font-family: Raleway, sans-serif;
-    scroll-behavior: smooth;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	scroll-behavior: smooth;
 }
 
 .page-enter-from,
 .page-leave-to {
-    opacity: 0;
+	opacity: 0;
 }
 
 .page-enter-active,
 .page-leave-active {
-    transition: opacity 0.5s;
+	transition: opacity 0.5s ease-in-out;
 }
 
 .layout-enter-from,
 .layout-leave-to {
-    opacity: 0;
-    transform: translateY(-50px);
+	opacity: 0;
+	transform: translateY(-50px);
 }
 
 .layout-enter-active,
 .layout-leave-active {
-    transition: opacity 0.5s, transform 0.5s;
+	transition:
+		opacity 0.5s,
+		transform 0.5s;
 }
diff --git a/app/components/AppLogo.vue b/app/components/AppLogo.vue
index c6576c9..634cc40 100644
--- a/app/components/AppLogo.vue
+++ b/app/components/AppLogo.vue
@@ -1,11 +1,22 @@
 <script lang="ts" setup>
-const route = useRoute();
+const colorMode = useColorMode();
 </script>
 
 <template>
-    <NuxtLink :to="route.path === '/' ? '/logo' : '/'">
-        <UIcon name="fluent:draw-image-24-regular" class="text-2xl" />
-    </NuxtLink>
+	<NuxtLink to="/" aria-label="Перейти на главную" class="home-btn">
+		<NuxtImg
+			:style="`filter: invert(${colorMode.value === 'dark' ? 0 : 1})`"
+			src="/logo.png"
+			width="60px"
+		/>
+	</NuxtLink>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home-btn {
+	@apply transition-all duration-1000;
+	&:active {
+		@apply scale-95 transition-all duration-200;
+	}
+}
+</style>
diff --git a/app/components/ArticleCard.vue b/app/components/ArticleCard.vue
index b0a5ef2..509d310 100644
--- a/app/components/ArticleCard.vue
+++ b/app/components/ArticleCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Article } from "~/types/article";
+import type { Article } from "../types/article";
 
 const props = defineProps<Article>();
 
@@ -7,58 +7,53 @@ const route = useRoute();
 </script>
 
 <template>
-    <NuxtLink :to="to" class="w-full" data-aos="fade-up">
-        <article
-            class="flex flex-col gap-2 relative rounded-[2rem] overflow-hidden"
-            :style="{
-                height:
-                    props['customHeight'] && route.path !== '/'
-                        ? props['customHeight']
-                        : '24rem',
-            }"
-        >
-            <USkeleton class="absolute inset-0 w-full h-full" />
-            <NuxtImg
-                :src="image"
-                :alt="title"
-                width="100%"
-                height="100%"
-                fit="cover"
-                class="absolute inset-0 w-full h-full object-cover z-0"
-            />
-            <div class="flex flex-col justify-between absolute inset-3 z-10">
-                <div class="flex justify-between gap-8">
-                    <p
-                        class="surface px-6 py-3 rounded-full bg-white bg-opacity-25 backdrop-blur-md text-white border-white border border-opacity-30"
-                    >
-                        {{ date }}
-                    </p>
-                    <div
-                        class="surface rounded-full bg-white w-auto h-full aspect-1 flex items-center justify-center"
-                    >
-                        <UIcon
-                            class="text-black text-3xl shadow shadow-black"
-                            name="material-symbols-light:arrow-outward-rounded"
-                        />
-                    </div>
-                </div>
-                <h3
-                    class="surface px-6 py-3 rounded-[2rem] bg-white bg-opacity-25 backdrop-blur-md text-white border-white border border-opacity-30"
-                >
-                    {{ title }}
-                </h3>
-            </div>
-        </article>
-    </NuxtLink>
+	<NuxtLink :to="to" class="w-full" data-aos="fade-up">
+		<article
+			class="relative flex flex-col gap-2 overflow-hidden rounded-[2rem]"
+			:style="{
+				height:
+					props['customHeight'] && route.path !== '/'
+						? props['customHeight']
+						: '24rem',
+			}"
+		>
+			<USkeleton class="absolute inset-0 h-full w-full" />
+			<NuxtImg
+				:src="image"
+				:alt="title"
+				width="100%"
+				loading="lazy"
+				height="100%"
+				fit="cover"
+				class="absolute inset-0 z-0 h-full w-full object-cover"
+			/>
+			<div class="absolute inset-3 z-10 flex flex-col justify-between">
+				<div class="flex justify-between gap-8">
+					<p
+						class="surface invert-if-impaired rounded-full border border-white border-opacity-30 bg-white bg-opacity-25 px-6 py-3 text-white backdrop-blur-md"
+					>
+						{{ date }}
+					</p>
+					<div
+						class="surface aspect-1 shadow-gray flex h-full w-auto items-center justify-center rounded-full bg-white bg-opacity-70"
+					>
+						<UIcon
+							class="text-3xl text-black"
+							name="material-symbols-light:arrow-outward-rounded"
+						/>
+					</div>
+				</div>
+				<div
+					class="surface invert-if-impaired rounded-[2rem] border border-white border-opacity-30 bg-white bg-opacity-25 px-6 py-3 text-white backdrop-blur-md"
+				>
+					<h3>
+						{{ title }}
+					</h3>
+					<p class="test-sm">{{ description }}</p>
+				</div>
+			</div>
+		</article>
+	</NuxtLink>
 </template>
 
-<style lang="scss" scoped>
-article {
-    .surface {
-        background-image: url(/images/noise.png);
-        background-repeat: no-repeat;
-        background-size: 300% 300%;
-        background-position: center;
-    }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/app/components/ArticlePlaceholder.vue b/app/components/ArticlePlaceholder.vue
index adda5ea..a907f0a 100644
--- a/app/components/ArticlePlaceholder.vue
+++ b/app/components/ArticlePlaceholder.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Article } from "~/types/article";
+import type { Article } from "../types/article";
 
 defineProps<Article>();
 
@@ -7,12 +7,12 @@ const route = useRoute();
 </script>
 
 <template>
-    <USkeleton
-        class="w-full rounded-[2rem]"
-        :style="{
-            height: customHeight && route.path !== '/' ? customHeight : '24rem',
-        }"
-    />
+	<USkeleton
+		class="w-full rounded-[2rem]"
+		:style="{
+			height: customHeight && route.path !== '/' ? customHeight : '24rem',
+		}"
+	/>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/components/ClientFooter.vue b/app/components/ClientFooter.vue
index d4c2a0c..e6330de 100644
--- a/app/components/ClientFooter.vue
+++ b/app/components/ClientFooter.vue
@@ -1,142 +1,214 @@
-<script lang="ts" setup>
-const isServer = ref(true);
-
-onMounted(() => {
-    isServer.value = false;
-});
-
-const sections: {
-    [key: string]: {
-        name: string;
-        route: string;
-    }[];
-} = {
-    Solutions: [
-        {
-            name: "Explainable AI",
-            route: "/solutions/ExplainableAI",
-        },
-        {
-            name: "ML Monitoring",
-            route: "/solutions/MLMonitoring",
-        },
-    ],
-    "Use cases": [
-        {
-            name: "Fraud",
-            route: "/Use_Cases/Fraud",
-        },
-        {
-            name: "Churn detection",
-            route: "/Use_Cases/Churn_detection",
-        },
-        {
-            name: "Underwriting",
-            route: "/Use_Cases/Underwriting",
-        },
-    ],
-    Resources: [
-        {
-            name: "Resource Hub",
-            route: "/Resources/Resource_Hub",
-        },
-        {
-            name: "Blog",
-            route: "/Resources/Blog",
-        },
-        {
-            name: "Learn More",
-            route: "/Resources/Learn_More",
-        },
-    ],
-    Company: [
-        {
-            name: "About Us",
-            route: "/company/About_Us",
-        },
-        {
-            name: "Carrers",
-            route: "/company/Carrers",
-        },
-        {
-            name: "Events",
-            route: "/company/Events",
-        },
-        {
-            name: "Contact Us",
-            route: "/company/Contact_Us",
-        },
-        {
-            name: "Privacy Policy",
-            route: "/company/Privacy_Policy",
-        },
-    ],
-};
-</script>
-
-<template>
-    <footer class="w-full mt-4">
-        <UDivider class="w-full" />
-
-        <section
-            class="flex w-full mx-auto justify-center gap-[5%] pr-[10%] max-[790px]:flex-col max-[790px]:ml-4 p-8"
-        >
-            <template
-                v-for="(links, section, index) in sections"
-                :key="section"
-            >
-                <div>
-                    <p class="mb-6 font-bold text-gray-400">{{ section }}</p>
-                    <div class="flex flex-col space-y-2">
-                        <UButton
-                            v-for="link in links"
-                            :key="link.name"
-                            class="px-0"
-                            variant="link"
-                            color="white"
-                            :to="link.route"
-                        >
-                            <p>{{ link.name }}</p>
-                        </UButton>
-                    </div>
-                </div>
-                <template v-if="index !== Object.keys(sections).length - 1">
-                    <UDivider orientation="vertical" />
-                    <UDivider
-                        orientation="horizontal"
-                        class="hidden max-[790px]:block my-4"
-                    />
-                </template>
-            </template>
-        </section>
-        <UDivider class="w-full">
-            <div class="flex items-center gap-4 justify-center">
-                <UBadge size="lg" color="gray" class="flex items-center gap-2">
-                    <p>Мы в соцсетях</p>
-                    <p class="opacity-30">|</p>
-                    <UTooltip text="VK">
-                        <NuxtLink to="https://vk.com/school_550_spb">
-                            <UIcon name="mdi:vk" class="h-5" /> </NuxtLink
-                    ></UTooltip>
-                    <UTooltip text="Telegram">
-                        <NuxtLink to="https://t.me/school550_spb">
-                            <UIcon name="mdi:telegram" class="h-5" /> </NuxtLink
-                    ></UTooltip>
-                </UBadge>
-            </div>
-        </UDivider>
-        <section
-            class="h-24 md:h-16 flex items-center px-4 text-gray-400 dark:text-gray-600 pb-3"
-        >
-            <p>
-                &copy; {{ new Date().getFullYear() }} Школа №550. Все права
-                защищены. Совпадения не случайны.
-            </p>
-        </section>
-    </footer>
-</template>
-
-<style lang="scss" scoped>
-footer {
-}
-</style>
+<script lang="ts" setup>
+const sections: {
+	[key: string]: (
+		| {
+				name: string;
+				route: string;
+		  }
+		| {
+				name: string;
+				popover: string;
+		  }
+	)[];
+} = {
+	"Помочь разработке": [
+		{
+			name: "Исходный код проекта",
+			route: "https://github.com/paranoidPhantom/school.550",
+		},
+		{
+			name: "Упомянуть ошибку на GitHub",
+			route: "https://github.com/paranoidPhantom/school.550/issues/new",
+		},
+	],
+	"Над проектом работали": [
+		{
+			name: "Худалла Андрей",
+			popover: "dev_andrei",
+		},
+		{
+			name: "Филиппов Кирилл",
+			popover: "dev_kirill",
+		},
+		{
+			name: "Каменик Леонид",
+			popover: "dev_leonid",
+		},
+	],
+};
+</script>
+
+<template>
+	<footer class="mt-4 w-full">
+		<UDivider class="w-full" />
+
+		<section
+			class="mx-auto flex w-full justify-center gap-[5%] p-8 max-[790px]:flex-col"
+		>
+			<template
+				v-for="(links, section, index) in sections"
+				:key="section"
+			>
+				<div>
+					<p class="mb-6 font-bold text-gray-400">{{ section }}</p>
+					<div class="flex flex-col space-y-2">
+						<template v-for="link in links" :key="link.name">
+							<UPopover
+								v-if="link.popover"
+								class="w-fit"
+								:popper="{ placement: 'right' }"
+							>
+								<UButton
+									class="pl-0 pr-2"
+									variant="link"
+									color="white"
+									:to="link.route"
+								>
+									<p>{{ link.name }}</p>
+								</UButton>
+								<template #panel>
+									<UCard
+										:ui="{
+											body: {
+												padding: 'p-2 sm:p-3 md:p-4',
+											},
+										}"
+									>
+										<template
+											v-if="link.popover === 'dev_andrei'"
+										>
+											<div class="flex flex-col gap-2">
+												<h3
+													class="text-md font-semibold"
+												>
+													{{ link.name }}
+												</h3>
+												<p class="text-xs opacity-50">
+													Тим лид
+												</p>
+												<p class="max-w-64 text-xs">
+													Нёс ответственность за
+													полный цикл разработки, от
+													базы данных до файлового
+													сервера.
+												</p>
+											</div>
+										</template>
+										<template
+											v-else-if="
+												link.popover === 'dev_kirill'
+											"
+										>
+											<div class="flex flex-col gap-2">
+												<h3
+													class="text-md font-semibold"
+												>
+													{{ link.name }}
+												</h3>
+												<p class="text-xs opacity-50">
+													Разработчик
+												</p>
+												<p class="max-w-64 text-xs">
+													Сделал подвал сайта, создал
+													страницы сайта, которые
+													требуются к структуре сайта
+													в
+													информационно-телекоммуникационной
+													сети «Интернет» и формату
+													представления информации
+												</p>
+											</div>
+										</template>
+										<template
+											v-else-if="
+												link.popover === 'dev_leonid'
+											"
+										>
+											<div class="flex flex-col gap-2">
+												<h3
+													class="text-md font-semibold"
+												>
+													{{ link.name }}
+												</h3>
+												<p class="text-xs opacity-50">
+													UX/UI дизайнер
+												</p>
+												<p class="max-w-64 text-xs">
+													Отвечал за исследование
+													продукта и его конкурентов.
+													Спроектировал концепт сайта
+													и нарисовал все элементы
+													дизайна: от кнопок до
+													анимаций
+												</p>
+											</div>
+										</template>
+									</UCard>
+								</template>
+							</UPopover>
+							<UButton
+								v-else
+								class="px-0"
+								variant="link"
+								color="white"
+								:to="link.route"
+							>
+								<p>{{ link.name }}</p>
+							</UButton>
+						</template>
+					</div>
+				</div>
+				<template v-if="index !== Object.keys(sections).length - 1">
+					<UDivider orientation="vertical" />
+					<UDivider
+						orientation="horizontal"
+						class="my-4 hidden max-[790px]:block"
+					/>
+				</template>
+			</template>
+		</section>
+		<UDivider class="w-full">
+			<div class="flex items-center justify-center gap-4">
+				<UBadge size="lg" color="white" class="flex items-center gap-2">
+					<p>Мы в соцсетях</p>
+					<p class="opacity-30">|</p>
+					<UTooltip text="VK">
+						<NuxtLink
+							aria-label="Группа в ВКонтакте"
+							to="https://vk.com/school_550_spb"
+							class="flex items-center"
+						>
+							<UIcon
+								name="mdi:vk"
+								class="py-4 text-xl"
+							/> </NuxtLink
+					></UTooltip>
+					<UTooltip text="Telegram">
+						<NuxtLink
+							aria-label="Канал в Telegram"
+							to="https://t.me/school550_spb"
+							class="flex items-center"
+						>
+							<UIcon
+								name="mdi:telegram"
+								class="py-4 text-xl"
+							/> </NuxtLink
+					></UTooltip>
+				</UBadge>
+			</div>
+		</UDivider>
+		<section
+			class="flex h-24 items-center px-4 pb-3 text-gray-400 md:h-16 dark:text-gray-600"
+		>
+			<p>
+				&copy; {{ new Date().getFullYear() }} Школа №550. Все права
+				защищены.
+			</p>
+		</section>
+	</footer>
+</template>
+
+<style lang="scss" scoped>
+footer {
+}
+</style>
diff --git a/app/components/ClientHeader.vue b/app/components/ClientHeader.vue
index 6713f8f..e8fd696 100644
--- a/app/components/ClientHeader.vue
+++ b/app/components/ClientHeader.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup>
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+import {
+	breakpointsTailwind,
+	useBreakpoints,
+	useWindowScroll,
+} from "@vueuse/core";
 
 const isServer = import.meta.server;
 
@@ -10,445 +14,477 @@ const mobile = breakpoints.smaller("lg");
 const searchEnabled = useState("search_palette", () => false);
 
 const state = reactive<{
-    active: boolean;
-    currentGroup: keyof typeof links | undefined;
-    animation: "left" | "right";
-    lastEnteredIndex: number;
-    mobileDepth: number;
+	active: boolean;
+	currentGroup: keyof typeof links | undefined;
+	animation: "left" | "right";
+	lastEnteredIndex: number;
+	mobileDepth: number;
 }>({
-    active: false,
-    currentGroup: "Сведения об ОУ",
-    animation: "left",
-    lastEnteredIndex: 1,
-    mobileDepth: 0,
+	active: false,
+	currentGroup: "Сведения об ОУ",
+	animation: "left",
+	lastEnteredIndex: 1,
+	mobileDepth: 0,
 });
 
 type NormalLink = {
-    label: string;
-    to: string;
-    customIndex?: number;
+	label: string;
+	to: string;
+	customIndex?: number;
 };
 
 const links: {
-    [key: string]: {
-        [key: string]: NormalLink[];
-    };
+	[key: string]: {
+		[key: string]: NormalLink[];
+	};
 } = {
-    Новости: {
-        "": [
-            {
-                to: "special",
-                label: "news",
-            },
-        ],
-    },
-    "Сведения об ОУ": {
-        "Сведения об оброзовательном учреждении": [
-            {
-                label: "Основные сведения",
-                to: "/info/primary",
-            },
-            {
-                label: "Структура и органы управления",
-                to: "/info/structure",
-            },
-            {
-                label: "Документы",
-                to: "/info/documents",
-            },
-            {
-                label: "Образование",
-                to: "/info/education",
-            },
-            {
-                label: "Образовательные стандарты",
-                to: "/info/standards",
-            },
-            {
-                label: "Руководство. Педагогический (научно-педагогический) состав",
-                to: "/info/teachers",
-            },
-            {
-                label: "Материально-техническое обеспечение и оснащенность образовательного процесса",
-                to: "/info/equipment",
-            },
-        ],
-        "": [
-            {
-                label: "Стипендии и иные виды материальной поддержки",
-                to: "/info/scholarship",
-                customIndex: 8,
-            },
-            {
-                label: "Платные образовательные услуги",
-                to: "/info/paid",
-                customIndex: 9,
-            },
-            {
-                label: "Финансово-хозяйственная деятельность",
-                to: "/info/finance",
-                customIndex: 10,
-            },
-            {
-                label: "Вакантные места для приема (перевода) обучающихся",
-                to: "/info/vacancies",
-                customIndex: 11,
-            },
-            {
-                label: "Доступная среда",
-                to: "/info/accessible-environment",
-                customIndex: 12,
-            },
-            {
-                label: "Международное сотрудничество",
-                to: "/info/collaboration",
-                customIndex: 13,
-            },
-            {
-                label: "Организация питания",
-                to: "/info/food",
-                customIndex: 14,
-            },
-            {
-                label: "Методические и иные документы",
-                to: "/info/materials",
-                customIndex: 15,
-            },
-        ],
-    },
-    Родителям: {
-        "Информация для родителей": [
-            {
-                label: "Обучение с использованием ДОТ",
-                to: "/for-parents/distantedu",
-            },
-            {
-                label: "Информация о ГИА",
-                to: "/for-parents/gia",
-            },
-            {
-                label: "О приеме в школу",
-                to: "/for-parents/admission",
-            },
-            {
-                label: "О толерантности",
-                to: "/for-parents/tolerance",
-            },
-            {
-                label: "ОРКСЭ",
-                to: "/for-parents/orkse",
-            },
-        ],
-    },
-    Еще: {
-        "Прочие разделы": [
-            {
-                label: "Партнеры",
-                to: "/partners",
-            },
-            {
-                label: "Противодействие коррупции",
-                to: "/curruption-prevention",
-            },
-            {
-                label: "Безопасная среда",
-                to: "/partners",
-            },
-            {
-                label: "Партнеры",
-                to: "/partners",
-            },
-            {
-                label: "Функциональная грамотность",
-                to: "/funclit",
-            },
-        ],
-    },
+	Новости: {
+		"": [
+			{
+				to: "special",
+				label: "news",
+			},
+		],
+	},
+	"Сведения об ОУ": {
+		"Сведения об оброзовательном учреждении": [
+			{
+				label: "Основные сведения",
+				to: "/info/primary",
+			},
+			{
+				label: "Структура и органы управления",
+				to: "/info/structure",
+			},
+			{
+				label: "Документы",
+				to: "/info/documents",
+			},
+			{
+				label: "Образование",
+				to: "/info/education",
+			},
+			{
+				label: "Образовательные стандарты",
+				to: "/info/standards",
+			},
+			{
+				label: "Руководство. Педагогический (научно-педагогический) состав",
+				to: "/info/teachers",
+			},
+			{
+				label: "Материально-техническое обеспечение и оснащенность образовательного процесса",
+				to: "/info/equipment",
+			},
+		],
+		"": [
+			{
+				label: "Стипендии и иные виды материальной поддержки",
+				to: "/info/scholarship",
+				customIndex: 8,
+			},
+			{
+				label: "Платные образовательные услуги",
+				to: "/info/paid",
+				customIndex: 9,
+			},
+			{
+				label: "Финансово-хозяйственная деятельность",
+				to: "/info/finance",
+				customIndex: 10,
+			},
+			{
+				label: "Вакантные места для приема (перевода) обучающихся",
+				to: "/info/vacancies",
+				customIndex: 11,
+			},
+			{
+				label: "Доступная среда",
+				to: "/info/accessible-environment",
+				customIndex: 12,
+			},
+			{
+				label: "Международное сотрудничество",
+				to: "/info/collaboration",
+				customIndex: 13,
+			},
+			{
+				label: "Организация питания",
+				to: "/info/food",
+				customIndex: 14,
+			},
+			{
+				label: "Методические и иные документы",
+				to: "/info/materials",
+				customIndex: 15,
+			},
+		],
+	},
+	Родителям: {
+		"Информация для родителей": [
+			{
+				label: "Обучение с использованием ДОТ",
+				to: "/for-parents/distantedu",
+			},
+			{
+				label: "Информация о ГИА",
+				to: "/for-parents/gia",
+			},
+			{
+				label: "О приеме в школу",
+				to: "/for-parents/admission",
+			},
+			{
+				label: "О толерантности",
+				to: "/for-parents/tolerance",
+			},
+			{
+				label: "ОРКСЭ",
+				to: "/for-parents/orkse",
+			},
+		],
+	},
+	Еще: {
+		"Прочие разделы": [
+			{
+				label: "Партнеры",
+				to: "/partners",
+			},
+			{
+				label: "Противодействие коррупции",
+				to: "/curruption-prevention",
+			},
+			{
+				label: "Безопасная среда",
+				to: "/safe-environment",
+			},
+			{
+				label: "Функциональная грамотность",
+				to: "/funclit",
+			},
+			{
+				label: "Полезные ссылки",
+				to: "/useful-links",
+			},
+		],
+	},
 };
 
 const openHeader = (groupName: string, index: number) => {
-    state.active = true;
-    state.currentGroup = groupName;
-    state.animation = state.lastEnteredIndex > index ? "left" : "right";
-    state.lastEnteredIndex = index;
+	state.active = true;
+	state.currentGroup = groupName;
+	state.animation = state.lastEnteredIndex > index ? "left" : "right";
+	state.lastEnteredIndex = index;
 };
 
 const heights = [100, 450, 300, 290];
 
 const router = useRouter();
 
-router.afterEach(() => (state.active = false));
+const closeHeader = () => {
+	state.active = false;
+	state.mobileDepth = 0;
+};
+
+router.afterEach(() => closeHeader());
+
+const { y } = useWindowScroll();
+
+const focusFirstLink = () => {
+	const firstLink = document.querySelector(".__first-header-link");
+	if (firstLink) firstLink.focus();
+};
 </script>
 
 <template>
-    <div class="__header">
-        <h1 class="hidden">Школа 550</h1>
-        <div class="bg-blur" :class="{ active: state.active }" />
-        <div
-            class="wrapper"
-            :class="{ active: state.active }"
-            :style="{
-                '--section-height': `${heights[state.lastEnteredIndex]}px`,
-            }"
-        >
-            <header @mouseleave="state.active = false">
-                <div class="base">
-                    <UButton
-                        color="white"
-                        variant="link"
-                        icon="line-md:search-twotone"
-                        class="lg:hidden"
-                        @click="searchEnabled = true"
-                    />
-                    <AppLogo />
-                    <nav class="hidden lg:flex items-center gap-2">
-                        <UButton
-                            v-for="(group, groupName, index) in links"
-                            :key="groupName"
-                            :label="(groupName as string)"
-                            variant="link"
-                            color="white"
-                            :to="groupName === 'Новости' ? '/news' : undefined"
-                            @mouseenter="() => {if(groupName !== 'Новости') openHeader(groupName as string, index)}"
-                        />
-                    </nav>
-                    <div class="right flex items-center gap-2">
-                        <UButton
-                            color="white"
-                            variant="link"
-                            icon="line-md:search-twotone"
-                            class="hidden lg:block"
-                            @click="searchEnabled = true"
-                        />
-                        <ColorSwitcher />
-                        <!-- Mobile menu -->
-                        <UButton
-                            v-show="!isServer"
-                            :key="state.active ? 'closed' : 'opened'"
-                            class="lg:hidden"
-                            color="white"
-                            variant="link"
-                            :icon="
-                                state.active
-                                    ? 'line-md:menu-to-close-alt-transition'
-                                    : 'line-md:close-to-menu-alt-transition'
-                            "
-                            @click="state.active = !state.active"
-                        />
-                    </div>
-                </div>
-                <ClientOnly>
-                    <Transition :name="state.animation" mode="out-in">
-                        <div
-                            v-if="mobile"
-                            :key="`mobile_${state.mobileDepth}`"
-                            class="mobile flex flex-col gap-2 h-full"
-                        >
-                            <template v-if="state.mobileDepth === 0">
-                                <UButton
-                                    v-for="(group, groupName) in links"
-                                    :key="groupName"
-                                    :label="(groupName as string)"
-                                    color="gray"
-                                    trailing-icon="material-symbols:arrow-right-alt-rounded"
-                                    :to="
-                                        groupName === 'Новости'
-                                            ? '/news'
-                                            : undefined
-                                    "
-                                    @click="
-                                        () => {
-                                            if (groupName !== 'Новости') {
-                                                state.animation = 'right';
-                                                state.mobileDepth = 1;
-                                                state.currentGroup = groupName;
-                                            }
-                                        }
-                                    "
-                                />
-                            </template>
-                            <template v-else-if="state.currentGroup">
-                                <UButton
-                                    label="Назад"
-                                    color="gray"
-                                    variant="link"
-                                    :padded="false"
-                                    icon="material-symbols:arrow-left-alt-rounded"
-                                    @click="
-                                        () => {
-                                            state.animation = 'left';
-                                            state.mobileDepth = 0;
-                                        }
-                                    "
-                                />
-                                <template
-                                    v-for="(
-                                        subgroup, subgroupName, index
-                                    ) in links[state.currentGroup]"
-                                    :key="index"
-                                >
-                                    <TransitionGroup name="link">
-                                        <p
-                                            v-if="state.active && subgroupName"
-                                            class="text-md opacity-60"
-                                        >
-                                            {{ subgroupName }}
-                                        </p>
-                                        <template
-                                            v-for="(
-                                                link, link_index
-                                            ) in subgroup"
-                                            :key="`${link.to}_${link.label}_${link_index}`"
-                                        >
-                                            <UButton
-                                                v-if="state.mobileDepth > 0"
-                                                v-bind="link"
-                                                class="transition-all"
-                                                :style="{
-                                                    transitionDelay: `${
-                                                        (link.customIndex ??
-                                                            index) * 0.05
-                                                    }s`,
-                                                }"
-                                                :label="link.label"
-                                                color="gray"
-                                            />
-                                        </template>
-                                    </TransitionGroup>
-                                </template>
-                            </template>
-                        </div>
-                        <div
-                            v-else-if="state.currentGroup"
-                            :key="state.currentGroup"
-                            class="desktop flex gap-8 justify-center"
-                        >
-                            <div
-                                v-for="(subgroup, subgroupName) in links[
-                                    state.currentGroup
-                                ]"
-                                :key="subgroupName"
-                                class="flex flex-col gap-2 h-full flex-wrap"
-                            >
-                                <TransitionGroup name="link">
-                                    <p
-                                        v-if="state.active"
-                                        class="text-sm opacity-60"
-                                    >
-                                        {{ subgroupName }}
-                                    </p>
-                                    <template
-                                        v-for="(link, index) in subgroup"
-                                        :key="`${link.to}_${link.label}_${index}`"
-                                    >
-                                        <NuxtLink
-                                            v-if="state.active"
-                                            v-bind="link"
-                                            class="hover:underline underline-offset-4 transition-all w-fit max-w-96"
-                                            :style="{
-                                                transitionDelay: `${
-                                                    (link.customIndex ??
-                                                        index) * 0.05
-                                                }s`,
-                                            }"
-                                            >{{ link.label }}</NuxtLink
-                                        >
-                                    </template>
-                                </TransitionGroup>
-                            </div>
-                        </div>
-                    </Transition>
-                </ClientOnly>
-            </header>
-        </div>
-    </div>
+	<div class="__header">
+		<h1 class="hidden">Школа 550</h1>
+		<div class="bg-blur" :class="{ active: state.active }" />
+		<div
+			class="wrapper"
+			:class="{ active: state.active }"
+			:style="{
+				'--section-height': `${heights[state.lastEnteredIndex]}px`,
+			}"
+		>
+			<header :class="{ scrolled: y > 100 }" @mouseleave="closeHeader">
+				<div class="base">
+					<AppLogo class="ml-4 lg:ml-0" tabindex="0" />
+					<nav class="hidden items-center gap-2 lg:flex">
+						<UButton
+							v-for="(group, groupName, index) in links"
+							:key="groupName"
+							:label="groupName as string"
+							variant="link"
+							color="white"
+							class="font-light"
+							:to="groupName === 'Новости' ? '/news' : undefined"
+							@mouseenter="
+								() => {
+									if (groupName !== 'Новости')
+										openHeader(groupName as string, index);
+								}
+							"
+							@focus="
+								() => {
+									if (groupName !== 'Новости')
+										openHeader(groupName as string, index);
+								}
+							"
+							@click="focusFirstLink"
+						/>
+					</nav>
+					<div class="right flex items-center gap-2">
+						<UButton
+							aria-label="Поиск"
+							color="white"
+							variant="link"
+							icon="line-md:search-twotone"
+							@click="searchEnabled = true"
+						/>
+						<ColorSwitcher />
+						<!-- Mobile menu -->
+						<UButton
+							v-show="!isServer"
+							:key="state.active ? 'closed' : 'opened'"
+							aria-label="Меню страниц"
+							class="lg:hidden"
+							color="white"
+							variant="link"
+							:icon="
+								state.active
+									? 'line-md:menu-to-close-alt-transition'
+									: 'line-md:close-to-menu-alt-transition'
+							"
+							@click="
+								state.active
+									? closeHeader()
+									: (state.active = true)
+							"
+						/>
+					</div>
+				</div>
+				<ClientOnly>
+					<Transition :name="state.animation" mode="out-in">
+						<div
+							v-if="mobile"
+							:key="`mobile_${state.mobileDepth}`"
+							class="mobile flex h-full flex-col gap-2"
+						>
+							<template v-if="state.mobileDepth === 0">
+								<UButton
+									v-for="(group, groupName) in links"
+									:key="groupName"
+									:label="groupName as string"
+									color="gray"
+									trailing-icon="material-symbols:arrow-right-alt-rounded"
+									:to="
+										groupName === 'Новости'
+											? '/news'
+											: undefined
+									"
+									@click="
+										() => {
+											if (groupName !== 'Новости') {
+												state.animation = 'right';
+												state.mobileDepth = 1;
+												state.currentGroup = groupName;
+											}
+										}
+									"
+								/>
+							</template>
+							<template v-else-if="state.currentGroup">
+								<UButton
+									label="Назад"
+									color="gray"
+									variant="link"
+									:padded="false"
+									icon="material-symbols:arrow-left-alt-rounded"
+									@click="
+										() => {
+											state.animation = 'left';
+											state.mobileDepth = 0;
+										}
+									"
+								/>
+								<template
+									v-for="(
+										subgroup, subgroupName, index
+									) in links[state.currentGroup]"
+									:key="index"
+								>
+									<TransitionGroup name="link">
+										<p
+											v-if="state.active && subgroupName"
+											class="text-md opacity-60"
+										>
+											{{ subgroupName }}
+										</p>
+										<template
+											v-for="(
+												link, link_index
+											) in subgroup"
+											:key="`${link.to}_${link.label}_${link_index}`"
+										>
+											<UButton
+												v-if="state.mobileDepth > 0"
+												v-bind="link"
+												class="transition-all"
+												:style="{
+													transitionDelay: `${
+														(link.customIndex ??
+															index) * 0.05
+													}s`,
+												}"
+												:label="link.label"
+												color="gray"
+											/>
+										</template>
+									</TransitionGroup>
+								</template>
+							</template>
+						</div>
+						<div
+							v-else-if="state.currentGroup"
+							:key="state.currentGroup"
+							class="desktop flex justify-center gap-8"
+						>
+							<div
+								v-for="(
+									subgroup, subgroupName, subgroupIndex
+								) in links[state.currentGroup]"
+								:key="subgroupName"
+								class="flex h-full flex-col flex-wrap gap-2"
+							>
+								<TransitionGroup name="link">
+									<p
+										v-if="state.active"
+										class="text-sm opacity-60"
+									>
+										{{ subgroupName }}
+									</p>
+									<template
+										v-for="(link, index) in subgroup"
+										:key="`${link.to}_${link.label}_${index}`"
+									>
+										<NuxtLink
+											v-if="state.active"
+											:class="{
+												'__first-header-link':
+													subgroupIndex === 0 &&
+													index === 0,
+											}"
+											v-bind="link"
+											class="w-fit max-w-96 underline-offset-4 transition-all hover:underline"
+											:tabindex="subgroupIndex"
+											:style="{
+												transitionDelay: `${
+													(link.customIndex ??
+														index) * 0.05
+												}s`,
+											}"
+											>{{ link.label }}</NuxtLink
+										>
+									</template>
+								</TransitionGroup>
+							</div>
+						</div>
+					</Transition>
+				</ClientOnly>
+			</header>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .__header {
-    --header-height: 80px;
-    height: var(--header-height);
-    .wrapper {
-        @apply flex justify-center z-20;
-        @apply transition-all duration-300;
-        height: var(--header-height);
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        padding: 0.8rem;
-        --section-height: 500px;
-        header {
-            @apply px-4 w-full h-full;
-            @apply rounded-2xl backdrop-blur-xl bg-opacity-20 bg-gray-50;
-            @apply dark:bg-gray-800 dark:border-gray-600 dark:border-2 dark:bg-opacity-50;
-            @apply transition-all duration-300 overflow-hidden;
-            max-width: 1200px;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-            .base {
-                @apply flex items-center justify-between mx-auto mb-4;
-                @apply transition-all duration-300;
-                @apply border-b border-b-gray-900 border-opacity-0 dark:border-opacity-0 dark:border-b-gray-100;
-                max-width: 100%;
-                height: calc(var(--header-height) - 1.6rem - 2px);
-            }
-        }
-        &.active {
-            @apply h-screen lg:h-[--section-height];
-            padding: 0;
-            header {
-                @apply border-none;
-                max-width: 100vw;
-                border-radius: 0;
-                padding: 1rem;
-                .base {
-                    @apply border-opacity-20;
-                }
-            }
-        }
-    }
+	--header-height: 80px;
+	height: var(--header-height);
+	.wrapper {
+		@apply z-20 flex justify-center;
+		@apply transition-all duration-300;
+		height: var(--header-height);
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		padding: 0.8rem;
+		--section-height: 500px;
+		header {
+			@apply z-50 h-full w-full px-4;
+			@apply rounded-3xl bg-gray-50 bg-opacity-20 backdrop-blur-xl;
+			@apply dark:border dark:border-gray-900 dark:border-opacity-0 dark:bg-gray-800 dark:bg-opacity-50;
+			@apply overflow-hidden transition-all duration-300;
+			max-width: 1200px;
+			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+			.base {
+				@apply mx-auto mb-4 flex items-center justify-between;
+				@apply transition-all duration-300;
+				@apply border-b border-b-gray-900 border-opacity-0 dark:border-b-gray-100 dark:border-opacity-0;
+				max-width: 100%;
+				height: calc(var(--header-height) - 1.6rem - 2px);
+			}
+			&.scrolled {
+				@apply dark:border-opacity-50;
+			}
+		}
+		&.active {
+			@apply h-screen lg:h-[--section-height];
+			padding: 0;
+			header {
+				@apply border-none;
+				max-width: 100vw;
+				border-radius: 0;
+				padding: 1rem;
+				.base {
+					@apply border-opacity-20 pb-4;
+				}
+			}
+		}
+	}
 }
 
 .bg-blur {
-    @apply fixed z-20 inset-0 pointer-events-none transition-all duration-700;
-    &.active {
-        @apply bg-gray-50 bg-opacity-20 backdrop-blur-sm;
-        @apply dark:bg-gray-800 dark:bg-opacity-50;
-    }
+	@apply pointer-events-none fixed inset-0 z-20 transition-all duration-700;
+	&.active {
+		@apply bg-gray-50 bg-opacity-20 backdrop-blur-sm;
+		@apply dark:bg-gray-800 dark:bg-opacity-50;
+	}
 }
 
 .left-enter-from,
 .right-leave-to {
-    opacity: 0;
-    translate: -1rem 0;
+	opacity: 0;
+	translate: -1rem 0;
 }
 
 .left-leave-to,
 .right-enter-from {
-    opacity: 0;
-    translate: 1rem 0;
+	opacity: 0;
+	translate: 1rem 0;
 }
 
 .left-enter-active,
 .left-leave-active,
 .right-enter-active,
 .right-leave-active {
-    transition: all 0.3s ease;
+	transition: all 0.3s ease;
 }
 
 .link-enter-from {
-    opacity: 0;
-    translate: -1rem 0;
+	opacity: 0;
+	translate: -1rem 0;
 }
 .link-leave-to {
-    opacity: 0;
+	opacity: 0;
 }
 
 .link-enter-active {
-    transition: all 0.3s ease;
+	transition: all 0.3s ease;
 }
 
 .link-leave-active {
-    transition: all 0.3s ease;
+	transition: all 0.3s ease;
 }
 </style>
diff --git a/app/components/ColorSwitcher.vue b/app/components/ColorSwitcher.vue
index 1b7e404..d7bbde9 100644
--- a/app/components/ColorSwitcher.vue
+++ b/app/components/ColorSwitcher.vue
@@ -2,44 +2,49 @@
 const colorMode = useColorMode();
 
 const modes = [
-    {
-        key: "dark",
-        icon: "line-md:sunny-outline-to-moon-alt-loop-transition",
-    },
-    {
-        key: "light",
-        icon: "line-md:moon-alt-to-sunny-outline-loop-transition",
-    },
+	{
+		key: "dark",
+		icon: "line-md:sunny-outline-to-moon-alt-loop-transition",
+	},
+	{
+		key: "light",
+		icon: "line-md:moon-alt-to-sunny-outline-loop-transition",
+	},
 ];
 
 const currentMode = computed(() => {
-    return modes.find((mode) => mode.key === colorMode.preference) || modes[0];
+	return modes.find((mode) => mode.key === colorMode.preference) || modes[0];
 });
 
 const toggleMode = () => {
-    let done = false;
-    modes.forEach((mode, index) => {
-        if (currentMode.value.key === mode.key && !done) {
-            done = true;
-            colorMode.preference = modes[(index + 1) % modes.length].key;
-        }
-    });
+	let done = false;
+	modes.forEach((mode, index) => {
+		if (currentMode.value && currentMode.value.key === mode.key && !done) {
+			done = true;
+			colorMode.preference = modes[(index + 1) % modes.length].key;
+		}
+	});
 };
 </script>
 
 <template>
-    <div class="color-switcher">
-        <ClientOnly>
-            <UButton
-                :key="currentMode.key"
-                :icon="currentMode.icon"
-                size="lg"
-                color="white"
-                variant="link"
-                @click="toggleMode"
-            />
-        </ClientOnly>
-    </div>
+	<ClientOnly>
+		<UButton
+			v-if="currentMode"
+			:key="currentMode.key"
+			:icon="currentMode.icon"
+			color="white"
+			variant="link"
+			@click="toggleMode"
+		/>
+		<template #fallback>
+			<UButton
+				icon="svg-spinners:ring-resize"
+				variant="link"
+				color="white"
+			/>
+		</template>
+	</ClientOnly>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/components/FeedbackForm.vue b/app/components/FeedbackForm.vue
index fe6a91a..08941c9 100644
--- a/app/components/FeedbackForm.vue
+++ b/app/components/FeedbackForm.vue
@@ -3,18 +3,18 @@ const feedbackForm = useState("feedback_form_enabled", () => false);
 
 let msgListener: EventListener | undefined = undefined;
 onMounted(() => {
-    if (msgListener) {
-        return;
-    }
-    msgListener = window.addEventListener(
-        "message",
-        function (event) {
-            if (event.data.close) {
-                feedbackForm.value = false;
-            }
-        },
-        false
-    );
+	if (msgListener) {
+		return;
+	}
+	msgListener = window.addEventListener(
+		"message",
+		function (event) {
+			if (event.data.close) {
+				feedbackForm.value = false;
+			}
+		},
+		false,
+	);
 });
 
 const spinner = ref(true);
@@ -22,28 +22,28 @@ const hideSpinner = () => (spinner.value = false);
 </script>
 
 <template>
-    <UModal v-model="feedbackForm">
-        <UCard
-            :ui="{
-                base: 'overflow-hidden',
-                body: { base: 'h-[600px] bg-white', padding: '!p-0' },
-            }"
-        >
-            <UIcon
-                v-if="spinner"
-                class="text-gray-900 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl z-10"
-                name="svg-spinners:6-dots-rotate"
-            />
+	<UModal v-model="feedbackForm">
+		<UCard
+			:ui="{
+				base: 'overflow-hidden',
+				body: { base: 'h-[600px] bg-white', padding: '!p-0' },
+			}"
+		>
+			<UIcon
+				v-if="spinner"
+				class="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 text-6xl text-gray-900"
+				name="svg-spinners:6-dots-rotate"
+			/>
 
-            <iframe
-                ref="iframe"
-                class="w-full h-full"
-                src="https://pos.gosuslugi.ru/form/?opaId=268828&fz59=false"
-                frameborder="0"
-                @load="hideSpinner"
-            />
-        </UCard>
-    </UModal>
+			<iframe
+				ref="iframe"
+				class="h-full w-full"
+				src="https://pos.gosuslugi.ru/form/?opaId=268828&fz59=false"
+				frameborder="0"
+				@load="hideSpinner"
+			/>
+		</UCard>
+	</UModal>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/app/components/MarkdownFormatter.vue b/app/components/MarkdownFormatter.vue
index f0f26dc..abb3574 100644
--- a/app/components/MarkdownFormatter.vue
+++ b/app/components/MarkdownFormatter.vue
@@ -1,71 +1,72 @@
 <script lang="ts" setup></script>
 
 <template>
-    <div class="__md-formatter">
-        <slot />
-    </div>
+	<div class="__md-formatter">
+		<slot />
+	</div>
 </template>
 
 <style lang="scss">
 .__md-formatter > div {
-    > * {
-        @apply mb-4;
-    }
-    h1 {
-        @apply text-2xl sm:text-3xl font-bold opacity-100;
-    }
-    h2 {
-        @apply text-xl sm:text-2xl font-semibold opacity-100;
-    }
-    h3 {
-        @apply text-lg sm:text-xl font-semibold opacity-90;
-    }
-    h4 {
-        @apply text-base sm:text-lg font-normal opacity-90;
-    }
-    h5 {
-        @apply text-sm sm:text-base font-normal opacity-80;
-    }
-    h6 {
-        @apply text-sm font-normal opacity-80;
-    }
-    p {
-        @apply opacity-80;
-    }
-    ul {
-        li {
-            @apply list-disc ml-6;
-        }
-    }
-    ol {
-        li {
-            @apply list-decimal ml-6;
-        }
-    }
-    blockquote {
-        @apply border-l-4 border-gray-400 pl-4 opacity-70;
-    }
-    table {
-        thead {
-            @apply text-left;
-            th {
-                @apply p-2 border border-gray-400 border-opacity-50 rounded-xl;
-            }
-        }
-        tbody {
-            td {
-                @apply p-2 border border-gray-400 border-opacity-40;
-            }
-        }
-    }
-    a {
-        @apply text-sky-500;
-        &:hover {
-            @apply text-sky-600;
-        }
-    }
-    hr {
-        @apply dark:opacity-10;
-    }
+	> * {
+		@apply mb-4;
+	}
+	h1 {
+		@apply text-2xl font-bold opacity-100 sm:text-3xl;
+	}
+	h2 {
+		@apply text-xl font-semibold opacity-100 sm:text-2xl;
+	}
+	h3 {
+		@apply text-lg font-semibold opacity-90 sm:text-xl;
+	}
+	h4 {
+		@apply text-base font-normal opacity-90 sm:text-lg;
+	}
+	h5 {
+		@apply text-sm font-normal opacity-80 sm:text-base;
+	}
+	h6 {
+		@apply text-sm font-normal opacity-80;
+	}
+	p {
+		@apply opacity-80;
+	}
+	ul {
+		li {
+			@apply ml-6 list-disc;
+		}
+	}
+	ol {
+		li {
+			@apply ml-6 list-decimal;
+		}
+	}
+	blockquote {
+		@apply rounded-l-md border-l-4 border-gray-400 pl-4 opacity-70;
+	}
+	table {
+		@apply overflow-hidden rounded-xl outline outline-1 outline-gray-400 dark:outline-gray-600;
+		thead {
+			@apply text-left;
+			th {
+				@apply rounded-xl border border-gray-400 border-opacity-50 px-4 py-2;
+			}
+		}
+		tbody {
+			td {
+				@apply border border-gray-400 border-opacity-40 px-4 py-2;
+			}
+		}
+	}
+	a {
+		@apply relative text-sky-500 dark:text-sky-400;
+		&:hover {
+			@apply text-sky-600 dark:text-sky-500;
+		}
+	}
+	hr {
+		@apply dark:opacity-20;
+	}
 }
 </style>
diff --git a/app/components/SearchPalette.vue b/app/components/SearchPalette.vue
index ec0225a..8857b63 100644
--- a/app/components/SearchPalette.vue
+++ b/app/components/SearchPalette.vue
@@ -2,86 +2,87 @@
 import type { SearchResponse } from "@nuxtjs/algolia";
 
 const {
-    public: { environment },
+	public: { environment },
 } = useRuntimeConfig();
 const { search } = useAlgoliaSearch(`pages_${environment}`);
 
 const enabled = useState("search_palette", () => false);
 
 const results = [
-    {
-        key: "results",
-        label: (q: string) => q && `Результаты поиска "${q}"`,
-        search: async (q: string) => {
-            if (!q) {
-                return [];
-            }
+	{
+		key: "results",
+		label: (q: string) => q && `Результаты на запрос «${q}»`,
+		search: async (q: string) => {
+			if (!q) {
+				return [];
+			}
 
-            const { hits } = (await search({ query: q })) as SearchResponse<{
-                title: string;
-                description: string;
-                slug: string;
-                content: string;
-            }>;
-            return hits.map((hit) => {
-                return {
-                    label: hit.title,
-                    suffix: hit.description,
-                    to: `/${hit.slug}`,
-                };
-            });
-        },
-    },
+			const { hits } = (await search({ query: q })) as SearchResponse<{
+				title: string;
+				description: string;
+				slug: string;
+				content: string;
+			}>;
+			return hits.map((hit) => {
+				return {
+					id: hit.title,
+					label: hit.title,
+					suffix: hit.description,
+					to: `/${hit.slug}`,
+				};
+			});
+		},
+	},
 ];
 
 const router = useRouter();
 
-const onNavigate = (slug: string) => {
-    router.push(slug);
-    enabled.value = false;
+const onNavigate = (option: { label: string; suffix: string; to: string }) => {
+	router.push(option.to);
+	enabled.value = false;
 };
 
 defineShortcuts({
-    meta_k: { handler: () => (enabled.value = true) },
+	meta_k: { handler: () => (enabled.value = true) },
 });
 </script>
 
 <template>
-    <UModal
-        v-model="enabled"
-        :ui="{
-            container:
-                'flex min-h-full items-center justify-center text-center',
-        }"
-    >
-        <UCommandPalette
-            :groups="results"
-            :autoselect="false"
-            placeholder="Поиск..."
-            :empty-state="{
-                icon: 'i-heroicons-magnifying-glass-20-solid',
-                label: 'Ничего не найдено',
-                queryLabel: 'Мы не нашли ничего по вашему запросу.',
-            }"
-            @update:model-value="(option) => onNavigate(option.to)"
-        >
-            <template #empty-state>
-                <div
-                    class="flex flex-col items-center justify-center py-6 gap-3"
-                >
-                    <span class="text-sm flex items-center gap-2"
-                        >Поиск реализован на основе
-                        <NuxtLink to="https://www.algolia.com/">
-                            <UIcon
-                                class="text-6xl h-4 bg-cover bg-center"
-                                name="devicon:algolia-wordmark"
-                            />
-                        </NuxtLink>
-                    </span>
-                </div>
-            </template>
-        </UCommandPalette>
-    </UModal>
+	<UModal
+		v-model="enabled"
+		:ui="{
+			container:
+				'flex min-h-full items-center justify-center text-center',
+		}"
+	>
+		<LazyUCommandPalette
+			:groups="results"
+			:autoselect="false"
+			placeholder="Поиск..."
+			:empty-state="{
+				icon: 'i-heroicons-magnifying-glass-20-solid',
+				label: 'Ничего не найдено',
+				queryLabel: 'Мы не нашли ничего по вашему запросу.',
+			}"
+			@update:model-value="(option) => onNavigate(option)"
+		>
+			<template #empty-state>
+				<div
+					class="flex flex-col items-center justify-center gap-3 py-6"
+				>
+					<UTooltip text="Поиск реализован на основе Algolia Search">
+						<NuxtLink to="https://www.algolia.com/">
+							<NuxtImg
+								src="/images/algolia.svg"
+								alt="Algolia Search"
+								width="100px"
+							/>
+						</NuxtLink>
+					</UTooltip>
+				</div>
+			</template>
+		</LazyUCommandPalette>
+	</UModal>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/components/VisualImpairmentToggle.vue b/app/components/VisualImpairmentToggle.vue
new file mode 100644
index 0000000..86c1ad6
--- /dev/null
+++ b/app/components/VisualImpairmentToggle.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+const visuallyImpaired = useCookie("visImpairmentMode");
+const visuallyImpairedToggleEnabled = ref(true);
+
+const toggleVisuallyImpaired = () => {
+	visuallyImpaired.value = !visuallyImpaired.value;
+	visuallyImpairedToggleEnabled.value = false;
+
+	setTimeout(() => (visuallyImpairedToggleEnabled.value = true), 1000);
+};
+</script>
+
+<template>
+	<UButton
+		variant="solid"
+		color="gray"
+		icon="material-symbols:accessibility"
+		label="Версия для слабовидящих"
+		:disabled="!visuallyImpairedToggleEnabled"
+		@click="toggleVisuallyImpaired"
+	/>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/app/components/author_name.vue b/app/components/author_name.vue
deleted file mode 100644
index ea511d2..0000000
--- a/app/components/author_name.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <div class="w-[245px] h-[90px] rounded-xl flex bg-slate-100 space-x-[5px]">
-        <NuxtImg src="/images/author_photo.svg" />
-        <div class="flex flex-col space-y-[1px] my-auto">
-            <p>{{ name.second_name }}</p>
-            <p>{{ name.first_name }}</p>
-            <p>{{ name.third_name }}</p>
-        </div>
-    </div>
-</template>
-
-<script setup>
-defineProps({
-    name: Object,
-});
-</script>
-
-<style></style>
diff --git a/app/components/blog/author_name.vue b/app/components/blog/author_name.vue
new file mode 100644
index 0000000..4518c65
--- /dev/null
+++ b/app/components/blog/author_name.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="flex h-[90px] w-[245px] space-x-[5px] rounded-xl bg-slate-100">
+		<NuxtImg src="/images/author_photo.svg" />
+		<div class="my-auto flex flex-col space-y-[1px]">
+			<p>{{ name.second_name }}</p>
+			<p>{{ name.first_name }}</p>
+			<p>{{ name.third_name }}</p>
+		</div>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	name: Object,
+});
+</script>
+
+<style></style>
diff --git a/app/components/blog/blog_block.vue b/app/components/blog/blog_block.vue
new file mode 100644
index 0000000..32d97be
--- /dev/null
+++ b/app/components/blog/blog_block.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="w-[378px] max-[1670px]:w-[448px] max-[500px]:w-[300px]">
+		<div class="relative">
+			<NuxtImg src="/images/hand.svg" class="max-[1670px]:w-[448px]" />
+			<div
+				class="absolute left-[50%] top-4 flex -translate-x-1/2 space-x-4 rounded-3xl bg-white p-2"
+			>
+				<NuxtImg src="/images/kalendar_ison.svg" />
+				<p>05.12.2023</p>
+			</div>
+			<div
+				class="absolute bottom-2 left-[50%] flex -translate-x-1/2 place-items-center rounded-3xl bg-white p-2"
+			>
+				<NuxtImg src="/images/author_photo.svg" />
+				<p>{{ name.second_name }}</p>
+			</div>
+		</div>
+
+		<p class="text-wrap text-2xl font-bold">
+			Заголовок статьи может быть и две строки
+		</p>
+		<p class="mt-2">
+			Маленькое описание, я считаю, что оно должно занимать не больше трёх
+			строк, а то как-то много получается не правда ли?
+		</p>
+		<div
+			class="mt-3 grid place-items-center rounded-3xl border-2 border-black p-2"
+		>
+			<p class="text-xl font-bold">Читать</p>
+		</div>
+	</div>
+</template>
+<script setup>
+defineProps({
+	name: Object,
+});
+</script>
+
+<style></style>
diff --git a/app/components/blog/page_numbers.vue b/app/components/blog/page_numbers.vue
new file mode 100644
index 0000000..8bb287b
--- /dev/null
+++ b/app/components/blog/page_numbers.vue
@@ -0,0 +1,17 @@
+<template>
+	<div
+		class="flex h-[20px] w-[40px] rounded border border-slate-600 text-slate-600 hover:border-slate-900 hover:text-slate-900 max-[600px]:w-[20px]"
+	>
+		<p class="mx-auto my-auto text-xl">{{ num.num }}</p>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	num: {
+		type: Object,
+	},
+});
+</script>
+
+<style></style>
diff --git a/app/components/blog_block.vue b/app/components/blog_block.vue
deleted file mode 100644
index ca04884..0000000
--- a/app/components/blog_block.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <div class="w-[378px] max-[1670px]:w-[448px] max-[500px]:w-[300px]">
-        <div class="relative">
-            <NuxtImg src="/images/hand.svg" class="max-[1670px]:w-[448px]" />
-            <div
-                class="absolute top-4 left-[50%] -translate-x-1/2 bg-white rounded-3xl p-2 flex space-x-4"
-            >
-                <NuxtImg src="/images/kalendar_ison.svg" />
-                <p>05.12.2023</p>
-            </div>
-            <div
-                class="absolute bottom-2 left-[50%] bg-white rounded-3xl p-2 flex place-items-center -translate-x-1/2"
-            >
-                <NuxtImg src="/images/author_photo.svg" />
-                <p>{{ name.second_name }}</p>
-            </div>
-        </div>
-
-        <p class="font-bold text-2xl text-wrap">
-            Заголовок статьи может быть и две строки
-        </p>
-        <p class="mt-2">
-            Маленькое описание, я считаю, что оно должно занимать не больше трёх
-            строк, а то как-то много получается не правда ли?
-        </p>
-        <div
-            class="mt-3 border-2 border-black p-2 rounded-3xl grid place-items-center"
-        >
-            <p class="text-xl font-bold">Читать</p>
-        </div>
-    </div>
-</template>
-<script setup>
-defineProps({
-    name: Object,
-});
-</script>
-
-<style></style>
diff --git a/app/components/content/ArticleList.vue b/app/components/content/ArticleList.vue
index 7d39ffd..f46a5c0 100644
--- a/app/components/content/ArticleList.vue
+++ b/app/components/content/ArticleList.vue
@@ -1,121 +1,89 @@
 <script lang="ts" setup>
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
-import type { Article } from "~/types/article";
+import type { Article } from "~/app/types/article";
 
 const props = defineProps<{
-    articles: (Article & { globalIndex: number })[];
+	articles: (Article & { globalIndex: number })[];
 }>();
 
 const breakpoints = useBreakpoints(breakpointsTailwind);
 
 const shown = computed(() => {
-    if (breakpoints["xl"].value || import.meta.server) return 4;
-    if (breakpoints["lg"].value) return 3;
-    if (breakpoints["md"].value) return 2;
-    return 1;
+	if (breakpoints["xl"].value || import.meta.server) return 4;
+	if (breakpoints["lg"].value) return 3;
+	if (breakpoints["md"].value) return 2;
+	return 1;
 });
 
 const route = useRoute();
 
 const articleRows = computed(() => {
-    const arrayOfArrays: (Article & { globalIndex: number })[][] = new Array(
-        shown.value
-    );
-    props.articles.forEach((article, index) => {
-        if (route.path === "/" && index >= shown.value) return;
-        if (!arrayOfArrays[index % shown.value]) {
-            arrayOfArrays[index % shown.value] = [];
-        }
-        (
-            arrayOfArrays[index % shown.value] as (Article & {
-                globalIndex: number;
-            })[]
-        ).push({
-            ...article,
-            globalIndex: index,
-        });
-    });
-    return arrayOfArrays;
+	const arrayOfArrays: (Article & { globalIndex: number })[][] = new Array(
+		shown.value,
+	);
+	props.articles.forEach((article, index) => {
+		if (route.path === "/" && index >= shown.value) return;
+		if (!arrayOfArrays[index % shown.value]) {
+			arrayOfArrays[index % shown.value] = [];
+		}
+		(
+			arrayOfArrays[index % shown.value] as (Article & {
+				globalIndex: number;
+			})[]
+		).push({
+			...article,
+			globalIndex: index,
+		});
+	});
+	return arrayOfArrays;
 });
 
 const entryStaggerMs = 50;
 </script>
 
 <template>
-    <section class="__articles w-full">
-        <ClientOnly>
-            <div class="flex">
-                <ArticleCard
-                    v-for="article in articleRows[0]"
-                    :key="article.title"
-                    v-bind="article"
-                    :data-aos-delay="article.globalIndex * entryStaggerMs"
-                />
-            </div>
-            <div class="hidden md:flex">
-                <ArticleCard
-                    v-for="article in articleRows[1]"
-                    :key="article.title"
-                    v-bind="article"
-                    :data-aos-delay="article.globalIndex * entryStaggerMs"
-                />
-            </div>
-            <div class="hidden lg:flex">
-                <ArticleCard
-                    v-for="article in articleRows[2]"
-                    :key="article.title"
-                    v-bind="article"
-                    :data-aos-delay="article.globalIndex * entryStaggerMs"
-                />
-            </div>
-            <div class="hidden xl:flex">
-                <ArticleCard
-                    v-for="article in articleRows[3]"
-                    :key="article.title"
-                    v-bind="article"
-                    :data-aos-delay="article.globalIndex * entryStaggerMs"
-                />
-            </div>
-            <template #fallback>
-                <div class="flex">
-                    <ArticlePlaceholder
-                        v-for="article in articleRows[0]"
-                        :key="article.title"
-                        v-bind="article"
-                    />
-                </div>
-                <div class="hidden md:flex">
-                    <ArticlePlaceholder
-                        v-for="article in articleRows[1]"
-                        :key="article.title"
-                        v-bind="article"
-                    />
-                </div>
-                <div class="hidden lg:flex">
-                    <ArticlePlaceholder
-                        v-for="article in articleRows[2]"
-                        :key="article.title"
-                        v-bind="article"
-                    />
-                </div>
-                <div class="hidden xl:flex">
-                    <ArticlePlaceholder
-                        v-for="article in articleRows[3]"
-                        :key="article.title"
-                        v-bind="article"
-                    />
-                </div>
-            </template>
-        </ClientOnly>
-    </section>
+	<section class="__articles w-full">
+		<div class="flex">
+			<ArticleCard
+				v-for="article in articleRows[0]"
+				:key="article.title"
+				v-bind="article"
+				:data-aos-delay="article.globalIndex * entryStaggerMs"
+			/>
+		</div>
+		<div class="hidden md:flex">
+			<ArticleCard
+				v-for="article in articleRows[1]"
+				:key="article.title"
+				v-bind="article"
+				:data-aos-delay="article.globalIndex * entryStaggerMs"
+			/>
+		</div>
+		<div class="hidden lg:flex">
+			<ArticleCard
+				v-for="article in articleRows[2]"
+				:key="article.title"
+				v-bind="article"
+				:data-aos-delay="article.globalIndex * entryStaggerMs"
+			/>
+		</div>
+		<div class="hidden xl:flex">
+			<ArticleCard
+				v-for="article in articleRows[3]"
+				:key="article.title"
+				v-bind="article"
+				:data-aos-delay="article.globalIndex * entryStaggerMs"
+			/>
+		</div>
+	</section>
 </template>
 
 <style lang="scss" scoped>
 .__articles {
-    @apply flex gap-4 justify-center;
-    > div {
-        @apply w-full md:w-1/2 lg:w-1/3 xl:w-1/4 max-w-96;
-        @apply flex-col items-center p-2 gap-4;
-    }
+	@apply flex justify-center gap-4;
+	> div {
+		@apply w-full max-w-96 md:w-1/2 lg:w-1/3 xl:w-1/4;
+		@apply flex-col items-center gap-4 p-2;
+	}
 }
 </style>
diff --git a/app/components/content/Docs.vue b/app/components/content/Docs.vue
index 1825159..ef9a861 100644
--- a/app/components/content/Docs.vue
+++ b/app/components/content/Docs.vue
@@ -1,112 +1,112 @@
 <script lang="ts" setup>
-import type { File } from "~/types/file";
+import type { File } from "~/app/types/file";
 
 const props = defineProps<{
-    base: string;
+	base: string;
 }>();
 
 const state = reactive<{
-    modal: boolean;
-    pathFragments: string[];
+	modal: boolean;
+	pathFragments: string[];
 }>({
-    modal: false,
-    pathFragments: [],
+	modal: false,
+	pathFragments: [],
 });
 
 const {
-    public: { file_server_url },
+	public: { file_server_url },
 } = useRuntimeConfig();
 
 const currentPath = computed(
-    () => `${props.base}/${state.pathFragments.join("/")}`
+	() => `${props.base}/${state.pathFragments.join("/")}`,
 );
 
 const { data: currentPathFiles, refresh: refreshFiles } = await useAsyncData(
-    `${currentPath.value}_list`,
-    () => useFS(`/list${currentPath.value}`, {}) as Promise<File[]>,
-    {
-        server: false,
-        watch: [currentPath],
-        transform: (data) => data ?? [],
-    }
+	`${currentPath.value}_list`,
+	() => useFS(`/list${currentPath.value}`, {}) as Promise<File[]>,
+	{
+		server: false,
+		watch: [currentPath],
+		transform: (data) => data ?? [],
+	},
 );
 
 const handleFileAction = (file: File) => {
-    if (file.download) {
-        const url = `${file_server_url}/download${currentPath.value}${file.name}`;
+	if (file.download) {
+		const url = `${file_server_url}/download${currentPath.value}${file.name}`;
 
-        window.open(url);
-    } else {
-        if (file.isDirectory) state.pathFragments.push(file.name);
-        else {
-            const url = `${file_server_url}${currentPath.value}${file.name}`;
+		window.open(url);
+	} else {
+		if (file.isDirectory) state.pathFragments.push(file.name);
+		else {
+			const url = `${file_server_url}${currentPath.value}${file.name}`;
 
-            window.open(url);
-        }
-    }
+			window.open(url);
+		}
+	}
 };
 
 onMounted(() => refreshFiles());
 </script>
 
 <template>
-    <div class="__document-preview">
-        <UAlert
-            title="К этой странице прикреплена папка с документами"
-            icon="mdi-file-document-outline"
-        >
-            <template #description>
-                <UButton
-                    label="Помотреть"
-                    color="gray"
-                    size="xs"
-                    class="mt-2"
-                    @click="state.modal = true"
-                />
-            </template>
-        </UAlert>
-        <USlideover v-model="state.modal">
-            <div class="p-4">
-                <div class="flex gap-4 items-center mb-2">
-                    <UButton color="gray" @click="state.pathFragments = []">
-                        <UIcon name="codicon:root-folder" />
-                    </UButton>
-                    <template
-                        v-for="(node, index) in state.pathFragments"
-                        :key="node"
-                    >
-                        <UIcon name="codicon:arrow-right" />
-                        <UButton
-                            class="flex items-center gap-2"
-                            color="gray"
-                            @click="
-                                state.pathFragments =
-                                    state.pathFragments.splice(0, index + 1)
-                            "
-                        >
-                            <UIcon name="codicon:folder" />
-                            <p>{{ node }}</p>
-                        </UButton>
-                    </template>
+	<div class="__document-preview">
+		<UAlert
+			title="К этой странице прикреплена папка с документами"
+			icon="mdi-file-document-outline"
+		>
+			<template #description>
+				<UButton
+					label="Помотреть"
+					color="gray"
+					size="xs"
+					class="mt-2"
+					@click="state.modal = true"
+				/>
+			</template>
+		</UAlert>
+		<USlideover v-model="state.modal">
+			<div class="p-4">
+				<div class="mb-2 flex items-center gap-4">
+					<UButton color="gray" @click="state.pathFragments = []">
+						<UIcon name="codicon:root-folder" />
+					</UButton>
+					<template
+						v-for="(node, index) in state.pathFragments"
+						:key="node"
+					>
+						<UIcon name="codicon:arrow-right" />
+						<UButton
+							class="flex items-center gap-2"
+							color="gray"
+							@click="
+								state.pathFragments =
+									state.pathFragments.splice(0, index + 1)
+							"
+						>
+							<UIcon name="codicon:folder" />
+							<p>{{ node }}</p>
+						</UButton>
+					</template>
 
-                    <UButton
-                        icon="mdi:close"
-                        color="gray"
-                        class="ml-auto"
-                        @click="state.modal = false"
-                    />
-                </div>
-                <LazyFsFileList
-                    v-model:path="currentPath"
-                    :files="currentPathFiles"
-                    :selectable="false"
-                    downloadable
-                    @file-action="handleFileAction"
-                />
-            </div>
-        </USlideover>
-        <hr class="my-4" >
-    </div>
+					<UButton
+						icon="mdi:close"
+						color="gray"
+						class="ml-auto"
+						@click="state.modal = false"
+					/>
+				</div>
+				<LazyFsFileList
+					v-model:path="currentPath"
+					:files="currentPathFiles"
+					:selectable="false"
+					downloadable
+					@file-action="handleFileAction"
+				/>
+			</div>
+		</USlideover>
+		<hr class="my-4" >
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/components/content/Document.vue b/app/components/content/Document.vue
new file mode 100644
index 0000000..3741e9e
--- /dev/null
+++ b/app/components/content/Document.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineProps<{
+	resource: string;
+	server?: string;
+	icon?: string;
+}>();
+
+const {
+	public: { file_server_url },
+} = useRuntimeConfig();
+</script>
+
+<template>
+	<UButton
+		:to="`${server ?? file_server_url}/${resource}`"
+		target="_blank"
+		color="gray"
+		:icon="icon ?? 'vscode-icons:file-type-pdf2'"
+	>
+		<ContentSlot />
+	</UButton>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/app/components/frontpage/FederalFeedback.vue b/app/components/frontpage/FederalFeedback.vue
index 66da4f5..aa095a9 100644
--- a/app/components/frontpage/FederalFeedback.vue
+++ b/app/components/frontpage/FederalFeedback.vue
@@ -3,35 +3,35 @@ const feedbackForm = useState("feedback_form_enabled", () => false);
 </script>
 
 <template>
-    <UAlert
-        id="content"
-        class="max-w-[1200px] w-full mx-auto space-y-4"
-        data-aos="fade-right"
-        color="blue"
-        variant="subtle"
-    >
-        <template #title>
-            <NuxtImg
-                src="https://pos.gosuslugi.ru/bin/banner-fluid/gosuslugi-logo-blue.svg"
-                class="opacity-80 dark:brightness-150 dark:contrast-125 my-4"
-                width="150px"
-            />
-        </template>
-        <template #description>
-            <div class="flex flex-col gap-4">
-                <p class="sm:w-3/4 text-sm">
-                    Есть предложения по организации учебного процесса или
-                    знаете, как сделать школу лучше?
-                </p>
-                <UButton
-                    class="w-fit"
-                    icon="line-md:bell-twotone-alert-loop"
-                    @click="feedbackForm = true"
-                    >Сообщить о проблеме</UButton
-                >
-            </div>
-        </template>
-    </UAlert>
+	<UAlert
+		id="content"
+		class="mx-auto w-full max-w-[1200px] space-y-4"
+		data-aos="fade-right"
+		color="blue"
+		variant="subtle"
+	>
+		<template #title>
+			<NuxtImg
+				src="https://pos.gosuslugi.ru/bin/banner-fluid/gosuslugi-logo-blue.svg"
+				class="my-4 opacity-80 dark:brightness-150 dark:contrast-125"
+				width="150px"
+			/>
+		</template>
+		<template #description>
+			<div class="flex flex-col gap-4">
+				<p class="text-sm sm:w-3/4">
+					Есть предложения по организации учебного процесса или
+					знаете, как сделать школу лучше?
+				</p>
+				<UButton
+					class="w-fit"
+					icon="line-md:bell-twotone-alert-loop"
+					@click="feedbackForm = true"
+					>Сообщить о проблеме</UButton
+				>
+			</div>
+		</template>
+	</UAlert>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/components/frontpage/Hero.vue b/app/components/frontpage/Hero.vue
index a0de8dd..ceb7512 100644
--- a/app/components/frontpage/Hero.vue
+++ b/app/components/frontpage/Hero.vue
@@ -1,208 +1,339 @@
 <script lang="ts" setup>
-import { useMouse, useWindowSize } from "@vueuse/core";
-const isServer = import.meta.server;
+import { useMouse } from "@vueuse/core";
 
 const suffix = "|";
 const suffixActive = ref(true);
 
 onMounted(() => {
-    setInterval(() => {
-        suffixActive.value = !suffixActive.value;
-    }, 500);
+	setInterval(() => {
+		suffixActive.value = !suffixActive.value;
+	}, 500);
 });
 
 const { x, y } = useMouse();
+const visuallyImpaired = useCookie("visImpairmentMode");
 </script>
 
 <template>
-    <section
-        class="hero flex items-center justify-center select-none overflow-hidden"
-    >
-        <NuxtPicture
-            src="/images/gradient.png"
-            alt="Фон"
-            width="1920"
-            sizes="sm:100vw md:100vw lg:100vw"
-            quality="10"
-            fit="contain"
-            :img-attrs="{ class: 'h-screen object-cover' }"
-            class="absolute top-0 left-0 w-full h-screen object-cover blur-md -z-20"
-        />
-        <NuxtPicture
-            src="/images/noise.png"
-            class="static-noise absolute top-0 left-0 w-full object-cover opacity-30 -z-10"
-            width="1920"
-            sizes="sm:100vw md:100vw lg:100vw"
-            quality="10"
-            fit="cover"
-            :img-attrs="{
-                style: 'height: calc(100vh + 5px)',
-                class: 'object-cover',
-            }"
-            style="height: calc(100vh + 5px)"
-        />
-        <NuxtPicture
-            src="/images/noise.png"
-            class="dynamic-noise absolute top-0 left-0 w-full object-cover opacity-50 z-10 pointer-events-none"
-            width="1920"
-            sizes="sm:100vw md:100vw lg:100vw"
-            quality="10"
-            fit="cover"
-            :img-attrs="{
-                style: 'height: calc(100vh + 5px)',
-                class: 'object-cover',
-            }"
-            style="height: calc(100vh + 5px)"
-            :style="{ '--x': x + 'px', '--y': y + 'px' }"
-        />
-        <!-- Hero -->
-        <div v-show="!isServer" class="flex flex-col items-center gap-2">
-            <!-- Line 1 -->
-            <div class="flex gap-5 flex-wrap max-w-full" data-aos="fade-right">
-                <h1
-                    class="gradient text-5xl sm:text-6xl md:text-7xl lg:text-8xl"
-                    style="animation-delay: 1.84s"
-                >
-                    Школа
-                </h1>
-                <img
-                    src="/images/school_compact.png"
-                    alt="Школа"
-                    sizes="sm:75 md:90 lg:120"
-                    class="rounded-full hidden sm:block sm:h-12 md:h-14 lg:h-20"
-                />
-            </div>
-            <!-- Line 2 -->
-            <div class="flex gap-5 flex-wrap" data-aos="fade-left">
-                <h1
-                    class="gradient text-md sm:text-2xl md:text-3xl lg:text-4xl"
-                    style="animation-delay: 2.74s"
-                >
-                    Информационных технологий<span
-                        class="ml-1"
-                        :style="{ opacity: suffixActive ? 1 : 0 }"
-                    >
-                        {{ suffix }}</span
-                    >
-                </h1>
-            </div>
-            <!-- Line 3 -->
-            <div class="flex gap-5 flex-wrap" data-aos="fade-right">
-                <div
-                    class="sm:flex sm:h-12 md:h-14 lg:h-20 items-center justify-center bg-white py-2 px-4 rounded-full hidden"
-                >
-                    <img
-                        class="h-2/3"
-                        src="/images/ort.png"
-                        sizes="sm:65 md:80 lg:130"
-                        alt="ORT"
-                    />
-                </div>
-                <h1
-                    class="gradient text-6xl md:text-7xl lg:text-8xl"
-                    style="animation-delay: 0.67s"
-                >
-                    550
-                </h1>
-            </div>
-        </div>
-        <div v-show="isServer" class="flex items-center justify-center">
-            <UIcon
-                name="svg-spinners:blocks-wave"
-                class="text-4xl text-white opacity-70 blur-[1px]"
-            />
-        </div>
-        <div
-            class="hero-links absolute max-w-[1200px] w-full bottom-0 flex justify-between p-4 sm:p-6 md:p-8 pb-8"
-        >
-            <div class="flex flex-wrap gap-y-2 gap-x-4">
-                <UButton variant="solid" color="gray" to="#location"
-                    >Торговый переулок, 2А</UButton
-                >
-                <UButton
-                    variant="solid"
-                    color="gray"
-                    to="tel:+7 (812) 315-50-60"
-                    >+7 (812) 315-50-60</UButton
-                >
-            </div>
-            <div class="flex flex-wrap gap-y-2 gap-x-4 ml-8 justify-end">
-                <UButton
-                    variant="solid"
-                    color="gray"
-                    to="https://t.me/school550_spb"
-                >
-                    <UIcon name="icon-park-outline:telegram" />
-                </UButton>
-                <UButton
-                    variant="solid"
-                    color="gray"
-                    to="https://vk.com/school_550_spb"
-                >
-                    <UIcon name="entypo-social:vk" />
-                </UButton>
-            </div>
-        </div>
-    </section>
+	<section
+		class="hero flex select-none items-center justify-center overflow-hidden"
+	>
+		<div
+			class="hero-bg absolute inset-0 -z-10 overflow-hidden bg-[#295FF5]"
+		>
+			<div class="shapes absolute left-0 top-0 h-full w-full">
+				<div
+					class="aspect-1 circle absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#00F0FF]"
+				/>
+				<div
+					class="aspect-1 circle absolute bottom-0 left-40 -translate-x-1/2 translate-y-1/2 rounded-full bg-[#F046FF]"
+				/>
+				<div
+					class="aspect-1 circle 64translate-x-1/2 absolute bottom-1/2 right-40 translate-y-1/2 rounded-full bg-[#20FFCB] lg:bottom-0"
+				/>
+			</div>
+			<div
+				class="overlay absolute inset-0 bg-white bg-opacity-40 backdrop-blur-[200px] md:backdrop-blur-[400px]"
+			/>
+		</div>
+		<div
+			v-for="i in 3"
+			:key="i"
+			class="dashed-circles absolute left-0 top-0 -z-10 flex h-full w-full items-center justify-center overflow-hidden"
+		>
+			<div
+				class="aspect-1 relative"
+				style="rotate: 90deg"
+				:style="{ width: 50 + i * 10 + '%', opacity: 0.7 - i * 0.1 }"
+			>
+				<img
+					class="absolute left-0 top-0 h-full w-full rotate-[102deg] object-contain"
+					:src="`/images/hero-circle${i === 1 || i === 3 ? '-break' : ''}.svg`"
+					alt="Круг который крутится"
+				>
+				<div
+					v-if="i === 1"
+					class="absolute -top-[2vw] left-1/2 h-[5vw] w-[5vw]"
+				>
+					<UIcon
+						name="flowbite:atom-outline"
+						class="icon absolute left-[30%] top-[30%] h-[40%] w-[40%]"
+					/>
+					<img
+						src="/images/hexagon.svg"
+						alt="Шестиугольник"
+						class="hexagon ansolute left-0 top-0 h-full w-full object-contain"
+					>
+				</div>
+				<div
+					v-if="i === 3"
+					class="absolute -top-[2.5vw] left-1/2 h-[6vw] w-[6vw]"
+				>
+					<UIcon
+						name="ant-design:laptop-outlined"
+						class="icon absolute left-[30%] top-[30%] h-[40%] w-[40%]"
+					/>
+					<img
+						src="/images/hexagon.svg"
+						alt="Шестиугольник"
+						class="hexagon ansolute left-0 top-0 h-full w-full object-contain"
+					>
+				</div>
+			</div>
+		</div>
+		<NuxtPicture
+			src="/images/noise.png"
+			loading="lazy"
+			alt="Текустура шума"
+			preload
+			class="static-noise absolute left-0 top-0 -z-10 w-full object-cover opacity-20"
+			width="4000"
+			sizes="sm:100vw md:100vw lg:100vw"
+			quality="10"
+			fotmat="avif, webp"
+			fit="cover"
+			:img-attrs="{
+				style: 'height: calc(100vh + 5px)',
+				class: 'object-cover',
+			}"
+			style="height: calc(100vh + 5px)"
+		/>
+		<NuxtPicture
+			src="/images/noise.png"
+			alt="Динамичная текустура шума"
+			loading="lazy"
+			class="dynamic-noise pointer-events-none absolute left-0 top-0 z-10 w-full object-cover opacity-20"
+			width="4000"
+			sizes="sm:100vw md:100vw lg:100vw"
+			quality="10"
+			fotmat="avif, webp"
+			fit="cover"
+			:img-attrs="{
+				style: 'height: calc(100vh + 5px)',
+				class: 'object-cover',
+			}"
+			style="height: calc(100vh + 5px)"
+			:style="{ '--x': x + 'px', '--y': y + 'px' }"
+		/>
+		<!-- Hero -->
+		<div class="animate-fade-in flex flex-col items-center gap-2">
+			<!-- Line 1 -->
+			<div class="flex max-w-full flex-wrap gap-5">
+				<h1
+					class="large text-5xl sm:text-6xl md:text-7xl lg:text-8xl"
+					style="animation-delay: 1.84s"
+					:style="{
+						'--gradient-white': visuallyImpaired
+							? 'black'
+							: 'white',
+					}"
+				>
+					Школа
+				</h1>
+			</div>
+			<!-- Line 2 -->
+			<div class="flex flex-wrap gap-5">
+				<h1
+					class="large text-md sm:text-2xl md:text-3xl lg:text-4xl"
+					style="animation-delay: 2.74s"
+					:style="{
+						'--gradient-white': visuallyImpaired
+							? 'black'
+							: 'white',
+					}"
+				>
+					Информационных технологий<span
+						class="ml-1"
+						:style="{ opacity: suffixActive ? 1 : 0 }"
+					>
+						{{ suffix }}</span
+					>
+				</h1>
+			</div>
+			<!-- Line 3 -->
+			<div class="flex flex-wrap gap-5">
+				<h1
+					class="large text-6xl md:text-7xl lg:text-8xl"
+					style="animation-delay: 0.67s"
+					:style="{
+						'--gradient-white': visuallyImpaired
+							? 'black'
+							: 'white',
+					}"
+				>
+					550
+				</h1>
+			</div>
+		</div>
+		<!-- <div v-show="isServer" class="flex items-center justify-center">
+			<UIcon
+				name="svg-spinners:blocks-wave"
+				class="text-4xl text-white opacity-70 blur-[1px]"
+			/>
+		</div> -->
+		<div
+			class="hero-links absolute bottom-0 flex w-full max-w-[1200px] justify-between p-4 pb-8 opacity-80 sm:p-6 md:p-8"
+		>
+			<div class="flex flex-wrap gap-x-4 gap-y-2">
+				<UButton variant="solid" color="gray" to="#location"
+					>Торговый переулок, 2А</UButton
+				>
+				<UButton
+					variant="solid"
+					color="gray"
+					to="tel:+7 (812) 315-50-60"
+					>+7 (812) 315-50-60</UButton
+				>
+				<VisualImpairmentToggle />
+			</div>
+			<div class="ml-8 flex flex-wrap justify-end gap-x-4 gap-y-2">
+				<UButton
+					variant="solid"
+					color="gray"
+					to="https://t.me/school550_spb"
+					aria-label="Канал в Telegram"
+				>
+					<UIcon name="icon-park-outline:telegram" />
+				</UButton>
+				<UButton
+					variant="solid"
+					color="gray"
+					to="https://vk.com/school_550_spb"
+					aria-label="Группа в ВКонтакте"
+				>
+					<UIcon name="entypo-social:vk" />
+				</UButton>
+			</div>
+		</div>
+	</section>
 </template>
 
 <style lang="scss" scoped>
 @keyframes scale {
-    0% {
-        scale: 1 1;
-    }
+	0% {
+		scale: 1 1;
+	}
 
-    50% {
-        scale: 0.95 1;
-    }
+	50% {
+		scale: 0.95 1;
+	}
 
-    100% {
-        scale: 1 1;
-    }
+	100% {
+		scale: 1 1;
+	}
+}
+
+@keyframes fade {
+	0% {
+		opacity: 0;
+	}
+	50% {
+		opacity: 0;
+		scale: 0.9;
+	}
+	100% {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes shapes {
+	0% {
+		rotate: 0deg;
+	}
+	100% {
+		rotate: 360deg;
+	}
 }
 
 .__home {
-    .hero {
-        @apply w-full;
-        padding-bottom: calc(80px + 1.8rem);
-        height: calc(100vh - 80px + 3rem);
-
-        .gradient {
-            font-family: Akony, sans-serif;
-            text-transform: uppercase;
-            background: linear-gradient(to right, #ffffff 16%, #b8d4ff);
-            -webkit-text-fill-color: transparent;
-            -webkit-background-clip: text;
-            background-clip: text;
-            text-align: center;
-            animation: scale 3s infinite ease-in-out;
-        }
-
-        .static-noise {
-            --image: linear-gradient(to bottom, black, black 90%, transparent);
-            mask-image: var(--image);
-        }
-
-        .dynamic-noise {
-            --image: radial-gradient(
-                    circle 200px at var(--x) var(--y),
-                    black 0,
-                    transparent 100%
-                ),
-                linear-gradient(to bottom, black, black 90%, transparent);
-            -webkit-mask-image: var(--image);
-            mask-image: var(--image);
-            -webkit-mask-composite: intersect;
-            mask-composite: intersect;
-
-            @supports not (mask-composite: intersect) {
-                --image: radial-gradient(
-                    circle 200px at var(--x) var(--y),
-                    black 0,
-                    transparent 100%
-                );
-            }
-        }
-    }
+	.shapes {
+		--unit: max(50vw, 50vh);
+
+		animation: shapes 10s forwards linear infinite;
+		.circle {
+			width: var(--unit);
+			height: var(--unit);
+			translate: 20% -10%;
+		}
+	}
+	.dashed-circles {
+		> div {
+			animation: shapes 20s linear infinite;
+		}
+		&:nth-child(3) {
+			> div {
+				animation-direction: reverse;
+				animation-duration: 25s;
+			}
+		}
+		&:nth-child(2) {
+			> div {
+				animation-duration: 16s;
+			}
+		}
+		.hexagon {
+			animation: shapes 5s linear reverse infinite;
+		}
+		.icon {
+			animation: shapes 20s linear reverse infinite;
+			color: white;
+		}
+	}
+	.hero {
+		@apply w-full;
+		padding-bottom: calc(80px + 1.8rem);
+		height: calc(100vh - 80px + 3rem);
+
+		.animate-fade-in {
+			animation: fade 0.5s forwards ease-in-out;
+		}
+
+		.large {
+			font-family: "Akony", "Arial Black";
+			font-weight: 900;
+			text-transform: uppercase;
+			letter-spacing: 5px;
+			background: linear-gradient(
+				to bottom,
+				var(--gradient-white),
+				var(--gradient-white) 23%,
+				#e4e4e4 100%
+			);
+			text-align: center;
+			-webkit-text-fill-color: transparent;
+			-webkit-background-clip: text;
+			background-clip: text;
+			-webkit-text-stroke: 1px white;
+		}
+
+		.static-noise,
+		.hero-bg,
+		.dashed-circles {
+			--image: linear-gradient(to bottom, black, black 98%, transparent);
+			mask-image: var(--image);
+		}
+
+		.dynamic-noise {
+			--image: radial-gradient(
+					circle 200px at var(--x) var(--y),
+					black 0,
+					transparent 100%
+				),
+				linear-gradient(to bottom, black, black 90%, transparent);
+			-webkit-mask-image: var(--image);
+			mask-image: var(--image);
+			-webkit-mask-composite: intersect;
+			mask-composite: intersect;
+
+			@supports not (mask-composite: intersect) {
+				--image: radial-gradient(
+					circle 200px at var(--x) var(--y),
+					black 0,
+					transparent 100%
+				);
+			}
+		}
+	}
 }
 </style>
diff --git a/app/components/frontpage/InfoSection.vue b/app/components/frontpage/InfoSection.vue
new file mode 100644
index 0000000..6365bfb
--- /dev/null
+++ b/app/components/frontpage/InfoSection.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+const feedbackForm = useState("feedback_form_enabled", () => false);
+
+const info = ["engineering"];
+
+const carouselRef = ref();
+
+onMounted(() => {
+	setInterval(() => {
+		if (!carouselRef.value) return;
+
+		if (carouselRef.value.page === carouselRef.value.pages) {
+			return carouselRef.value.select(0);
+		}
+
+		carouselRef.value.next();
+	}, 3000);
+});
+</script>
+
+<template>
+	<UCarousel
+		ref="carouselRef"
+		v-slot="{ item }"
+		:items="info"
+		:ui="{ item: 'basis-full' }"
+		class="overflow-hidden rounded-2xl"
+	>
+		<template v-if="item === 'engineering'"/>
+	</UCarousel>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/app/components/frontpage/Location.vue b/app/components/frontpage/Location.vue
index 2091e6b..c1d8b94 100644
--- a/app/components/frontpage/Location.vue
+++ b/app/components/frontpage/Location.vue
@@ -1,53 +1,94 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const activated = ref(false);
+</script>
 
 <template>
-    <section id="location" class="max-w-[1200px] w-full mx-auto space-y-4">
-        <h3 class="text-2xl font-semibold">Где находится</h3>
-        <p>
-            Школа расположена в Центральном районе, в историческом центре
-            города. Рядом со школой — площадь Ломоносова, улица Зодчего Росси,
-            Большой драматическим театр имени Г. А. Товстоногова. Ближайшие
-            станции метро:
-            <UBadge color="green" variant="subtle">Гостиный Двор</UBadge>,
-            <UBadge color="red" variant="subtle">Владимирская</UBadge>,
-            <UBadge color="orange" variant="subtle">Достоевская</UBadge>.
-            <br >
-            <NuxtLink to="">
-                (Посмотреть схему безопасного подхода к школе)
-            </NuxtLink>
-        </p>
-        <div class="relative rounded-2xl overflow-hidden">
-            <a
-                href="https://yandex.com/maps/org/gbou_secondary_school_550/1319139635/?utm_medium=mapframe&utm_source=maps"
-                style="
-                    color: #eee;
-                    font-size: 12px;
-                    position: absolute;
-                    top: 0px;
-                "
-                class="opacity-0"
-                >Санкт-Петербург</a
-            ><a
-                href="https://yandex.com/maps/2/saint-petersburg/category/school/184106240/?utm_medium=mapframe&utm_source=maps"
-                style="
-                    color: #eee;
-                    font-size: 12px;
-                    position: absolute;
-                    top: 14px;
-                "
-                class="opacity-0"
-                >Торговый переулок, 2А — Yandex Maps</a
-            >
-            <iframe
-                src="https://yandex.com/map-widget/v1/?ll=30.332925%2C59.929026&mode=poi&poi%5Bpoint%5D=30.332778%2C59.928912&poi%5Buri%5D=ymapsbm1%3A%2F%2Forg%3Foid%3D1319139635&z=15&lang=ru"
-                class="w-full h-96 rounded-2xl"
-                frameborder="1"
-                data-aos="fade-left"
-                allowfullscreen="true"
-                style="position: relative"
-            />
-        </div>
-    </section>
+	<section id="location" class="mx-auto w-full max-w-[1200px] space-y-4">
+		<h3 class="text-2xl font-semibold">Где находится</h3>
+		<p>
+			Школа расположена в Центральном районе, в историческом центре
+			города. Рядом со школой — площадь Ломоносова, улица Зодчего Росси,
+			Большой драматическим театр имени Г. А. Товстоногова. Ближайшие
+			станции метро:
+			<UBadge color="green" variant="subtle">Гостиный Двор</UBadge>,
+			<UBadge color="red" variant="subtle">Владимирская</UBadge>,
+			<UBadge color="orange" variant="subtle">Достоевская</UBadge>.
+			<br >
+			<NuxtLink to="">
+				(Посмотреть схему безопасного подхода к школе)
+			</NuxtLink>
+		</p>
+		<div
+			class="relative overflow-hidden rounded-2xl"
+			:class="{
+				'pointer-events-none': !activated,
+			}"
+		>
+			<UButton
+				v-if="!activated"
+				class="pointer-events-auto absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2"
+				color="gray"
+				@click="activated = true"
+			>
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M12 1a9.002 9.002 0 0 0-6.366 15.362c1.63 1.63 5.466 3.988 5.693 6.465.034.37.303.673.673.673.37 0 .64-.303.673-.673.227-2.477 4.06-4.831 5.689-6.46A9.002 9.002 0 0 0 12 1z"
+						fill="#F43"
+					/>
+					<path
+						d="M12 13.079a3.079 3.079 0 1 1 0-6.158 3.079 3.079 0 0 1 0 6.158z"
+						fill="#fff"
+					/>
+				</svg>
+				Посмотреть на карте
+			</UButton>
+			<a
+				href="https://yandex.com/maps/org/gbou_secondary_school_550/1319139635/?utm_medium=mapframe&utm_source=maps"
+				style="
+					color: #eee;
+					font-size: 12px;
+					position: absolute;
+					top: 0px;
+				"
+				class="opacity-0"
+				>Санкт-Петербург</a
+			><a
+				href="https://yandex.com/maps/2/saint-petersburg/category/school/184106240/?utm_medium=mapframe&utm_source=maps"
+				style="
+					color: #eee;
+					font-size: 12px;
+					position: absolute;
+					top: 14px;
+				"
+				class="opacity-0"
+				>Торговый переулок, 2А — Yandex Maps</a
+			>
+			<div
+				class="transition-all duration-300 ease-in-out"
+				:class="{
+					'opacity-50': !activated,
+					'scale-150': !activated,
+					'blur-lg': !activated,
+				}"
+			>
+				<iframe
+					src="https://yandex.com/map-widget/v1/?ll=30.332925%2C59.929026&mode=poi&poi%5Bpoint%5D=30.332778%2C59.928912&poi%5Buri%5D=ymapsbm1%3A%2F%2Forg%3Foid%3D1319139635&z=15&lang=ru"
+					class="h-96 w-full rounded-2xl"
+					frameborder="1"
+					data-aos="fade-left"
+					allowfullscreen="true"
+					style="position: relative"
+					loading="lazy"
+					title="Школа на карте"
+				/>
+			</div>
+		</div>
+	</section>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/components/frontpage/ReducedNews.server.vue b/app/components/frontpage/ReducedNews.server.vue
new file mode 100644
index 0000000..a4cf241
--- /dev/null
+++ b/app/components/frontpage/ReducedNews.server.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { parseMarkdown } from "@nuxtjs/mdc/runtime";
+
+const supabase = useSupabaseClient();
+
+const { data: ast } = await useAsyncData("news", async () => {
+	const { data, error } = await supabase
+		.from("content")
+		.select("md")
+		.eq("slug", "/news")
+		.maybeSingle();
+	if (error) throw error;
+	return parseMarkdown(data?.md);
+});
+</script>
+
+<template>
+	<section v-if="ast" class="__news mx-auto w-full max-w-[1200px] space-y-4">
+		<div class="flex justify-between">
+			<h2 class="text-2xl font-bold">Новости</h2>
+			<UButton
+				label="Все новости"
+				to="/news"
+				trailing-icon="mdi:arrow-right"
+				variant="link"
+			/>
+		</div>
+		<MarkdownFormatter>
+			<MDCRenderer :body="ast.body" :data="ast.data" />
+		</MarkdownFormatter>
+	</section>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/app/components/frontpage/ReducedNews.vue b/app/components/frontpage/ReducedNews.vue
deleted file mode 100644
index a4295ed..0000000
--- a/app/components/frontpage/ReducedNews.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { parseMarkdown } from "@nuxtjs/mdc/runtime";
-
-const { data: md } = await useFetch(`/api/content/news`);
-
-const { data: ast } = await useAsyncData<typeof parseMarkdown>(
-    `md_news`,
-    () => parseMarkdown(md.value),
-    {
-        watch: [md],
-    }
-);
-</script>
-
-<template>
-    <section v-if="ast" class="__news max-w-[1200px] w-full mx-auto space-y-4">
-        <div class="flex justify-between">
-            <h2 class="text-2xl font-bold">Новости</h2>
-            <UButton
-                label="Все новости"
-                to="/news"
-                trailing-icon="mdi:arrow-right"
-                variant="link"
-            />
-        </div>
-        <MarkdownFormatter>
-            <MDCRenderer :body="ast.body" :data="ast.data" />
-        </MarkdownFormatter>
-    </section>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/app/components/fs/FileList.vue b/app/components/fs/FileList.vue
index e045234..ccc5bb9 100644
--- a/app/components/fs/FileList.vue
+++ b/app/components/fs/FileList.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { useMouse, useWindowScroll } from "@vueuse/core";
-import type { File } from "~/types/file";
+import type { File } from "~/app/types/file";
 const props = defineProps<{
-    files?: File[];
-    selectable: boolean;
-    downloadable?: boolean;
+	files?: File[];
+	selectable: boolean;
+	downloadable?: boolean;
 }>();
 const emit = defineEmits<{
-    (e: "fileUpload", files: FileList): void;
-    (e: "fileAction", file: File): void;
+	(e: "fileUpload", files: FileList): void;
+	(e: "fileAction", file: File): void;
 }>();
 
 const selectedFiles = defineModel<Set<string>>("selected");
@@ -16,159 +16,159 @@ if (!selectedFiles.value) selectedFiles.value = new Set();
 
 const path = defineModel<string>("path");
 watch(
-    () => props.files,
-    () => {
-        if (selectedFiles.value) selectedFiles.value.clear();
-    }
+	() => props.files,
+	() => {
+		if (selectedFiles.value) selectedFiles.value.clear();
+	},
 );
 
 const onClick = (file: File) => {
-    if (!props.selectable || !selectedFiles.value) return;
+	if (!props.selectable || !selectedFiles.value) return;
 
-    if (selectedFiles.value.has(file.name)) {
-        selectedFiles.value.delete(file.name);
-    } else {
-        selectedFiles.value.add(file.name);
-    }
+	if (selectedFiles.value.has(file.name)) {
+		selectedFiles.value.delete(file.name);
+	} else {
+		selectedFiles.value.add(file.name);
+	}
 };
 
 const handledragAndDrop = (event: Event) => {
-    event.stopPropagation();
-    event.preventDefault();
+	event.stopPropagation();
+	event.preventDefault();
 };
 
 const uploadOverlay = ref(false);
 const enterdragAndDrop = (event: Event) => {
-    handledragAndDrop(event);
-    uploadOverlay.value = true;
+	handledragAndDrop(event);
+	uploadOverlay.value = true;
 };
 
 const exitdragAndDrop = (event: Event) => {
-    handledragAndDrop(event);
-    uploadOverlay.value = false;
+	handledragAndDrop(event);
+	uploadOverlay.value = false;
 };
 
 const handleFileUpload = (event: DragEvent) => {
-    handledragAndDrop(event);
-    uploadOverlay.value = false;
-    const files = event.dataTransfer?.files;
-    if (files)
-        emit(
-            "fileUpload",
-            files.filter((file) => file.type)
-        );
+	handledragAndDrop(event);
+	uploadOverlay.value = false;
+	const files = event.dataTransfer?.files;
+	if (files)
+		emit(
+			"fileUpload",
+			files.filter((file) => file.type),
+		);
 };
 
 const { x, y } = useMouse();
 const { y: windowY } = useWindowScroll();
 
 const contextMenuState = reactive({
-    open: false,
+	open: false,
 });
 const rightClickedFile = defineModel<File>("rightClickedFile");
 const virtualElement = ref({ getBoundingClientRect: () => ({}) });
 
 function onContextMenu(file: File) {
-    const top = unref(y) - unref(windowY);
-    const left = unref(x);
-
-    virtualElement.value.getBoundingClientRect = () => ({
-        width: 0,
-        height: 0,
-        top,
-        left,
-    });
-
-    rightClickedFile.value = file;
-    contextMenuState.open = true;
+	const top = unref(y) - unref(windowY);
+	const left = unref(x);
+
+	virtualElement.value.getBoundingClientRect = () => ({
+		width: 0,
+		height: 0,
+		top,
+		left,
+	});
+
+	rightClickedFile.value = file;
+	contextMenuState.open = true;
 }
 </script>
 
 <template>
-    <div
-        class="flex flex-col divide-y divide-gray-200 dark:divide-gray-800 rounded-md overflow-hidden relative min-h-40"
-        @dragenter="enterdragAndDrop"
-        @dragleave="exitdragAndDrop"
-        @dragover="enterdragAndDrop"
-        @drop="handleFileUpload"
-    >
-        <UContextMenu
-            v-model="contextMenuState.open"
-            :virtual-element="virtualElement"
-        >
-            <slot name="file-options" />
-        </UContextMenu>
-        <Transition name="dnd-overlay">
-            <div
-                v-if="uploadOverlay"
-                class="absolute inset-0 pointer-events-none bg-opacity-50 bg-white dark:bg-opacity-50 dark:bg-black flex items-center flex-col justify-center gap-2 rounded-md"
-            >
-                <p>Загрузка файлов</p>
-            </div>
-        </Transition>
-        <template v-if="files">
-            <div
-                v-if="files.length === 0"
-                class="flex flex-col items-center gap-2"
-            >
-                <UIcon class="text-3xl" name="material-symbols:texture-minus" />
-                <p class="text-lg text-gray-500">Папка пуста</p>
-            </div>
-            <div
-                v-for="file in files"
-                :key="file.name"
-                :class="{
-                    'bg-gray-200 dark:bg-gray-700':
-                        selectedFiles && selectedFiles.has(file.name),
-                }"
-                class="flex items-center gap-4 justify-between p-1 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
-                @contextmenu.prevent="onContextMenu(file)"
-                @click="onClick(file)"
-                @dblclick="$emit('fileAction', file)"
-            >
-                <!-- Left -->
-                <div class="flex items-center gap-2">
-                    <UIcon
-                        v-if="file.isDirectory"
-                        name="heroicons-outline:folder"
-                        class="text-gray-400"
-                    />
-                    <UIcon
-                        v-else
-                        name="heroicons-outline:document-text"
-                        class="text-gray-400"
-                    />
-                    <span>{{ file.name }}</span>
-                </div>
-                <!-- Right -->
-                <div class="flex items-center gap-2">
-                    <UButton
-                        v-if="downloadable"
-                        icon="mdi:download"
-                        color="gray"
-                        size="xs"
-                        @click="
-                            $emit('fileAction', { ...file, download: true })
-                        "
-                    />
-                    <div v-if="!file.isDirectory" class="text-sm text-gray-500">
-                        {{ useFormattedFileSize(file.size) }}
-                    </div>
-                </div>
-            </div>
-        </template>
-        <UIcon v-else name="svg-spinners:ring-resize" />
-    </div>
+	<div
+		class="relative flex min-h-40 flex-col divide-y divide-gray-200 overflow-hidden rounded-md dark:divide-gray-800"
+		@dragenter="enterdragAndDrop"
+		@dragleave="exitdragAndDrop"
+		@dragover="enterdragAndDrop"
+		@drop="handleFileUpload"
+	>
+		<UContextMenu
+			v-model="contextMenuState.open"
+			:virtual-element="virtualElement"
+		>
+			<slot name="file-options" />
+		</UContextMenu>
+		<Transition name="dnd-overlay">
+			<div
+				v-if="uploadOverlay"
+				class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 rounded-md bg-white bg-opacity-50 dark:bg-black dark:bg-opacity-50"
+			>
+				<p>Загрузка файлов</p>
+			</div>
+		</Transition>
+		<template v-if="files">
+			<div
+				v-if="files.length === 0"
+				class="flex flex-col items-center gap-2"
+			>
+				<UIcon class="text-3xl" name="material-symbols:texture-minus" />
+				<p class="text-lg text-gray-500">Папка пуста</p>
+			</div>
+			<div
+				v-for="file in files"
+				:key="file.name"
+				:class="{
+					'bg-gray-200 dark:bg-gray-700':
+						selectedFiles && selectedFiles.has(file.name),
+				}"
+				class="flex cursor-pointer items-center justify-between gap-4 p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
+				@contextmenu.prevent="onContextMenu(file)"
+				@click="onClick(file)"
+				@dblclick="$emit('fileAction', file)"
+			>
+				<!-- Left -->
+				<div class="flex items-center gap-2">
+					<UIcon
+						v-if="file.isDirectory"
+						name="heroicons-outline:folder"
+						class="text-gray-400"
+					/>
+					<UIcon
+						v-else
+						name="heroicons-outline:document-text"
+						class="text-gray-400"
+					/>
+					<span>{{ file.name }}</span>
+				</div>
+				<!-- Right -->
+				<div class="flex items-center gap-2">
+					<UButton
+						v-if="downloadable"
+						icon="mdi:download"
+						color="gray"
+						size="xs"
+						@click="
+							$emit('fileAction', { ...file, download: true })
+						"
+					/>
+					<div v-if="!file.isDirectory" class="text-sm text-gray-500">
+						{{ useFormattedFileSize(file.size) }}
+					</div>
+				</div>
+			</div>
+		</template>
+		<UIcon v-else name="svg-spinners:ring-resize" />
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .dnd-overlay-enter-active,
 .dnd-overlay-leave-active {
-    transition: all 1s;
+	transition: all 1s;
 }
 
 .dnd-overlay-enter-from,
 .dnd-overlay-leave-to {
-    opacity: 0;
+	opacity: 0;
 }
 </style>
diff --git a/app/components/manage/option/Content.vue b/app/components/manage/option/Content.vue
index 04a6c5a..8a74eb1 100644
--- a/app/components/manage/option/Content.vue
+++ b/app/components/manage/option/Content.vue
@@ -1,178 +1,189 @@
 <script lang="ts" setup>
-import { computedAsync } from "@vueuse/core";
-import type * as Monaco from "monaco-editor";
+// import type * as Monaco from "monaco-editor";
+
+const toast = useToast();
+const supabase = useSupabaseClient();
 
 const sectionActive = useCookie("admin_section_content");
 
 const pageSlugCookie = useCookie("editing_page_slug");
 
-const toast = useToast();
-
 const loading = ref(false);
 
 const state = reactive<{
-    slug: string;
-    open: boolean;
-    md: string;
+	slug: string;
+	open: boolean;
+	md: string;
 }>({ slug: pageSlugCookie.value ?? "", md: "", open: true });
 
-const { data: content, refresh: refreshContent } = await useFetch(
-    "/api/content",
-    {
-        transform: (data) =>
-            data.map((item) => ({
-                label: item.slug,
-            })),
-    }
+const { data: content, refresh: refreshContent } = await useAsyncData(
+	"content_list_sb",
+	async () => {
+		const { data, error } = await supabase.from("content").select("*");
+		if (error) throw error;
+		return data;
+	},
+	{
+		transform: (data) =>
+			data.map((item) => ({
+				...item,
+				label: item.slug,
+			})),
+	},
 );
 
-const mdRefresher = ref(1);
-const fetchedMD = computedAsync(async () => {
-    if (mdRefresher.value) {
-        loading.value = true;
-        const md = (await $fetch(`/api/content${state.slug}`)) as string;
-        loading.value = false;
-        return (
-            md ||
-            "---\ntitle: Название Страницы\ndescription: Описание Страницы\n---\n # Странца пока что пуста, но это легко исправить.\n\n[Ресурсы для редакторов](/manage/learn)"
-        );
-    }
-}, null);
+const fetchedMD = computed(() => {
+	const md = content.value?.find((item) => item.slug === state.slug)?.md;
+	return md;
+});
+
+onMounted(() => (state.md = fetchedMD.value ?? ""));
 
 watch(fetchedMD, (md) => {
-    if (md && state.slug) {
-        pageSlugCookie.value = state.slug;
-        return (state.md = md);
-    }
+	if (md && state.slug) {
+		pageSlugCookie.value = state.slug;
+		return (state.md = md);
+	}
 });
 
-const gotSomeMD = computed(() => fetchedMD.value || fetchedMD.value === "");
-
 const newPageSlug = ref("");
 
 const createNewPage = async () => {
-    if (newPageSlug.value === state.slug) return;
-    const slug = newPageSlug.value;
-    if (!slug || !slug.startsWith("/")) return;
-    loading.value = true;
-    await $fetch(`/api/content`, {
-        method: "POST",
-        body: {
-            slug: slug,
-        },
-    });
-    await refreshContent();
-    loading.value = false;
-    state.slug = slug;
+	if (newPageSlug.value === state.slug) return;
+	const slug = newPageSlug.value;
+	if (!slug || !slug.startsWith("/")) return;
+	loading.value = true;
+	try {
+		const { error } = await supabase.from("content").insert({
+			slug,
+		});
+		if (error) throw error;
+	} catch (error) {
+		toast.add({
+			title: "Ошибка создания страницы",
+			description: (error as Error).message,
+			color: "red",
+		});
+	}
+	await refreshContent();
+	loading.value = false;
+	state.slug = slug;
 };
 
 const savePage = async () => {
-    if (state.md === fetchedMD.value) return;
-    const slug = state.slug;
-    if (!slug || !slug.startsWith("/")) return;
-    loading.value = true;
+	if (state.md === fetchedMD.value) return;
+	const slug = state.slug;
+	if (!slug || !slug.startsWith("/")) return;
+	loading.value = true;
 
-    const ast = await parseMarkdown(state.md);
-    const { title, description } = ast.data;
-
-    await $fetch(`/api/content${slug}`, {
-        method: "PUT",
-        body: { title, description, md: state.md },
-    });
-    loading.value = false;
-    mdRefresher.value++;
+	const ast = await parseMarkdown(state.md);
+	const { title, description } = ast.data;
+	try {
+		await $fetch(`/api/content/regsearch`, {
+			method: "PUT",
+			body: { title, description, md: state.md, slug },
+			headers: useRequestHeaders(["cookie"]),
+		});
+		const { error } = await supabase
+			.from("content")
+			.update({
+				md: state.md,
+				updated_at: new Date().toISOString(),
+			})
+			.eq("slug", slug);
+		if (error) throw error;
+		await refreshContent();
+	} catch (error) {
+		toast.add({
+			title: "Ошибка сохранения страницы",
+			description: (error as Error).message,
+			color: "red",
+		});
+	}
+	loading.value = false;
 };
 
-const statusAnim = computed(() => {
-    if (newPageSlug.value && newPageSlug.value !== state.slug) {
-        return {
-            value: null,
-            animation: "swing",
-        };
-    }
-    if (fetchedMD.value !== state.md) {
-        return {
-            value: null,
-            animation: "elastic",
-        };
-    }
-    return {
-        value: 0,
-        animation: "",
-    };
-});
-
 defineShortcuts({
-    meta_s: { handler: savePage, usingInput: true },
-    enter: {
-        handler: createNewPage,
-        usingInput: "content-slug",
-    },
+	meta_s: { handler: savePage, usingInput: true },
+	enter: {
+		handler: createNewPage,
+		usingInput: "content-slug",
+	},
 });
 
 const promptDelete = async () => {
-    if (!gotSomeMD.value) return;
-    toast.add({
-        title: "Удалить страницу",
-        description: "Вы уверены, что хотите удалить страницу?",
-        color: "red",
-        actions: [
-            {
-                label: "Удалить",
-                color: "red",
-                click: async () => {
-                    await $fetch(`/api/content${state.slug}`, {
-                        method: "DELETE",
-                    });
-                    await $fetch(`/api/content`, {
-                        body: {
-                            firefoslug: state.slug,
-                        },
-                        method: "DELETE",
-                    });
-                    await refreshContent();
-                    toast.add({
-                        title: "Страница удалена",
-                        description: "Страница удалена из базы данных",
-                    });
-                },
-            },
-        ],
-    });
+	if (!fetchedMD.value) return;
+	toast.add({
+		title: "Удалить страницу",
+		description: "Вы уверены, что хотите удалить страницу?",
+		color: "red",
+		actions: [
+			{
+				label: "Удалить",
+				color: "red",
+				click: async () => {
+					try {
+						await $fetch(`/api/content/regsearch`, {
+							method: "DELETE",
+							body: { slug: state.slug },
+							headers: useRequestHeaders(["cookie"]),
+						});
+						const { error } = await supabase
+							.from("content")
+							.delete()
+							.eq("slug", state.slug);
+						if (error) throw error;
+						await refreshContent();
+						toast.add({
+							title: "Страница удалена",
+							description: "Страница удалена из базы данных",
+						});
+						pageSlugCookie.value = "";
+					} catch (error) {
+						toast.add({
+							title: "Ошибка удаления страницы",
+							description: (error as Error).message,
+							color: "red",
+						});
+					}
+				},
+			},
+		],
+	});
 };
 
 const colorMode = useColorMode();
 
-const editor = ref<Monaco.editor.ICodeEditor | null>(null);
+// const editor = ref<Monaco.editor.ICodeEditor | null>(null);
 
-const getSelection = () => {
-    if (editor.value) {
-        const model = editor.value.getModel();
-        const selection = editor.value.getSelection();
+// const getSelection = () => {
+// 	if (editor.value) {
+// 		const model = editor.value.getModel();
+// 		const selection = editor.value.getSelection();
 
-        if (model && selection) {
-            const start = model.getOffsetAt(selection.getStartPosition());
-            const end = model.getOffsetAt(selection.getEndPosition());
-            return { start, end };
-        }
-    }
-    return { start: 0, end: 0 };
-};
+// 		if (model && selection) {
+// 			const start = model.getOffsetAt(selection.getStartPosition());
+// 			const end = model.getOffsetAt(selection.getEndPosition());
+// 			return { start, end };
+// 		}
+// 	}
+// 	return { start: 0, end: 0 };
+// };
 
-const initialSetupEditor = (editorPassed: Monaco.editor.ICodeEditor) => {
-    editor.value = editorPassed;
-};
+// const initialSetupEditor = (editorPassed: Monaco.editor.ICodeEditor) => {
+// 	editor.value = editorPassed;
+// };
 
-const monaco = useMonaco();
-onMounted(() => {
-    setTimeout(() => {
-        if (monaco && import.meta.client) {
-            const { editor } = monaco;
-            const editors = editor.getEditors();
-            editors.map(initialSetupEditor);
-        }
-    }, 100);
-});
+// const monaco = useMonaco();
+// onMounted(() => {
+// 	setTimeout(() => {
+// 		if (monaco && import.meta.client) {
+// 			const { editor } = monaco;
+// 			const editors = editor.getEditors();
+// 			editors.map(initialSetupEditor);
+// 		}
+// 	}, 100);
+// });
 
 // const wrapSelection = (wrapper: string) => {
 //     const { start, end } = getSelection();
@@ -218,91 +229,84 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="flex flex-col gap-4">
-        <UAlert
-            title="Редактор контента "
-            :color="useKeyToColor('edit_content')"
-            variant="soft"
-            icon="line-md:document-code-twotone"
-            :class="sectionActive ? 'cursor-zoom-out' : 'cursor-zoom-in'"
-            @click="sectionActive = sectionActive ? '' : 'true'"
-        />
-        <template v-if="sectionActive">
-            <UProgress
-                size="sm"
-                class="transition-opacity"
-                :style="{ opacity: statusAnim.value === 0 ? 0 : 1 }"
-                :animation="statusAnim.animation"
-                :value="statusAnim.value"
-            />
-            <div>
-                <UButtonGroup class="w-full">
-                    <UInputMenu
-                        v-model="state.slug"
-                        v-model:query="newPageSlug"
-                        class="w-full"
-                        :options="content"
-                        value-attribute="label"
-                        placeholder="URL страницы"
-                        name="content-slug"
-                    >
-                        <template #option-empty="{ query }">
-                            Страница с URL <q>{{ query }}</q> не существует
-                        </template>
-                        <template #empty>
-                            Пока что не создано ни одной страницы
-                        </template>
-                    </UInputMenu>
-
-                    <UButton
-                        v-show="newPageSlug !== state.slug"
-                        color="gray"
-                        icon="line-md:plus"
-                        @click="createNewPage"
-                    />
-                    <UButton
-                        v-show="gotSomeMD"
-                        color="gray"
-                        icon="material-symbols:eye-tracking-outline-rounded"
-                        :to="state.slug"
-                        target="_blank"
-                    />
-                    <UButton
-                        color="gray"
-                        icon="akar-icons:save"
-                        :disabled="fetchedMD === state.md || !gotSomeMD"
-                        @click="savePage"
-                    />
-                    <UButton
-                        color="red"
-                        icon="material-symbols:delete-outline"
-                        :disabled="!gotSomeMD"
-                        @click="promptDelete"
-                    />
-                </UButtonGroup>
-            </div>
-            <div v-if="gotSomeMD" class="flex flex-wrap max-h-screen">
-                <div
-                    class="w-full xl:!w-1/2 overflow-hidden min-h-96 max-h-screen flex flex-col xl:flex-1"
-                >
-                    <MonacoEditor
-                        v-model="state.md"
-                        lang="markdown"
-                        class="h-full flex-grow"
-                        :options="{
-                            theme:
-                                colorMode.value === 'dark' ? 'vs-dark' : 'vs',
-                        }"
-                    />
-                </div>
-                <MarkdownFormatter
-                    class="border border-gray-200 dark:border-gray-800 w-full xl:w-1/2 px-4 max-h-screen overflow-auto"
-                >
-                    <MDC v-if="state.md" class="mt-4" :value="state.md" />
-                </MarkdownFormatter>
-            </div>
-        </template>
-    </div>
+	<div class="flex flex-col gap-4">
+		<UAlert
+			title="Редактор контента "
+			:color="useKeyToColor('edit_content')"
+			variant="soft"
+			icon="line-md:document-code-twotone"
+			:class="sectionActive ? 'cursor-zoom-out' : 'cursor-zoom-in'"
+			@click="sectionActive = sectionActive ? '' : 'true'"
+		/>
+		<template v-if="sectionActive">
+			<div>
+				<UButtonGroup class="w-full">
+					<UInputMenu
+						v-model="state.slug"
+						v-model:query="newPageSlug"
+						class="w-full"
+						:options="content"
+						value-attribute="label"
+						placeholder="URL страницы"
+						name="content-slug"
+					>
+						<template #option-empty="{ query }">
+							Страница с URL <q>{{ query }}</q> не существует
+						</template>
+						<template #empty>
+							Пока что не создано ни одной страницы
+						</template>
+					</UInputMenu>
+					{{ newPageSlug }}
+					<UButton
+						v-show="newPageSlug !== state.slug"
+						color="gray"
+						icon="line-md:plus"
+						@click="createNewPage"
+					/>
+					<UButton
+						v-show="fetchedMD"
+						color="gray"
+						icon="material-symbols:eye-tracking-outline-rounded"
+						:to="state.slug"
+						target="_blank"
+					/>
+					<UButton
+						color="gray"
+						icon="akar-icons:save"
+						:disabled="fetchedMD === state.md || !fetchedMD"
+						@click="savePage"
+					/>
+					<UButton
+						color="red"
+						icon="material-symbols:delete-outline"
+						:disabled="!fetchedMD"
+						@click="promptDelete"
+					/>
+				</UButtonGroup>
+			</div>
+			<div v-if="fetchedMD" class="flex max-h-screen flex-wrap">
+				<div
+					class="flex max-h-screen min-h-96 w-full flex-col overflow-hidden xl:!w-1/2 xl:flex-1"
+				>
+					<MonacoEditor
+						v-model="state.md"
+						lang="markdown"
+						class="h-full flex-grow"
+						:options="{
+							theme:
+								colorMode.value === 'dark' ? 'vs-dark' : 'vs',
+						}"
+					/>
+				</div>
+				<MarkdownFormatter
+					class="max-h-screen w-full overflow-auto border border-gray-200 px-4 xl:w-1/2 dark:border-gray-800"
+				>
+					<MDC v-if="state.md" class="mt-4" :value="state.md" />
+				</MarkdownFormatter>
+			</div>
+		</template>
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/components/manage/option/FS.vue b/app/components/manage/option/FS.vue
index b8e3a66..5bc9fc4 100644
--- a/app/components/manage/option/FS.vue
+++ b/app/components/manage/option/FS.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { useClipboard } from "@vueuse/core";
-import type { File } from "~/types/file";
+import type { File } from "~/app/types/file";
 
 const {
-    public: { file_server_url },
+	public: { file_server_url },
 } = useRuntimeConfig();
 
 const sectionActive = useCookie("admin_section_fs");
@@ -11,332 +11,332 @@ const sectionActive = useCookie("admin_section_fs");
 const toast = useToast();
 
 const state = reactive<{
-    pathFragments: string[];
-    selectedFiles: Set<string>;
-    rightClickedFile: File | undefined;
+	pathFragments: string[];
+	selectedFiles: Set<string>;
+	rightClickedFile: File | undefined;
 }>({
-    pathFragments: [],
-    selectedFiles: new Set(),
-    rightClickedFile: undefined,
+	pathFragments: [],
+	selectedFiles: new Set(),
+	rightClickedFile: undefined,
 });
 
 const currentPath = computed(() => `/${state.pathFragments.join("/")}`);
 
 const {
-    data: currentPathFiles,
-    status: fileFetchStatus,
-    refresh: refreshCurrentPathFilesNow,
+	data: currentPathFiles,
+	status: fileFetchStatus,
+	refresh: refreshCurrentPathFilesNow,
 } = await useAsyncData(
-    `${currentPath.value}_list`,
-    () => useFS(`/list${currentPath.value}`, {}) as Promise<File[]>,
-    {
-        server: false,
-        watch: [currentPath],
-        transform: (data) => data ?? [],
-    }
+	`${currentPath.value}_list`,
+	() => useFS(`/list${currentPath.value}`, {}) as Promise<File[]>,
+	{
+		server: false,
+		watch: [currentPath],
+		transform: (data) => data ?? [],
+	},
 );
 
 const refreshCurrentPathFiles = () =>
-    setTimeout(refreshCurrentPathFilesNow, 100);
+	setTimeout(refreshCurrentPathFilesNow, 100);
 
 const operationState = reactive<{
-    active: boolean;
-    opeartion: string | null;
-    files?: FileList | string[];
+	active: boolean;
+	opeartion: string | null;
+	files?: FileList | string[];
 }>({
-    active: false,
-    opeartion: null,
-    files: undefined,
+	active: false,
+	opeartion: null,
+	files: undefined,
 });
 
 const uploadFiles = async (files: FileList) => {
-    const formData = new FormData();
-    for (const file of files) {
-        formData.append("files", file, file.name);
-    }
-    if (files.length === 0) return;
-    try {
-        operationState.active = true;
-        operationState.opeartion = "Загрузка файлов...";
-        operationState.files = files;
-        await useFS(`${currentPath.value}`, {
-            method: "POST",
-            body: formData,
-        });
-        operationState.active = false;
-    } catch (error) {
-        operationState.active = false;
-    }
-    refreshCurrentPathFiles();
+	const formData = new FormData();
+	for (const file of files) {
+		formData.append("files", file, file.name);
+	}
+	if (files.length === 0) return;
+	try {
+		operationState.active = true;
+		operationState.opeartion = "Загрузка файлов...";
+		operationState.files = files;
+		await useFS(`${currentPath.value}`, {
+			method: "POST",
+			body: formData,
+		});
+		operationState.active = false;
+	} catch (error) {
+		operationState.active = false;
+	}
+	refreshCurrentPathFiles();
 };
 
 const handleFileAction = (file: File) => {
-    if (file.isDirectory) state.pathFragments.push(file.name);
-    else window.open(`${file_server_url}${currentPath.value}/${file.name}`);
+	if (file.isDirectory) state.pathFragments.push(file.name);
+	else window.open(`${file_server_url}${currentPath.value}/${file.name}`);
 };
 
 const deleteFiles = async (fileNames: string[]) => {
-    try {
-        operationState.active = true;
-        operationState.opeartion = "Удаление...";
-        operationState.files = fileNames;
-        await useFS(`${currentPath.value}`, {
-            method: "DELETE",
-            body: { files: fileNames },
-        });
-    } catch (error) {
-        toast.add({
-            title: "Ошибка удаления",
-            description: (error as Error).message,
-        });
-    }
-    operationState.active = false;
-    refreshCurrentPathFiles();
+	try {
+		operationState.active = true;
+		operationState.opeartion = "Удаление...";
+		operationState.files = fileNames;
+		await useFS(`${currentPath.value}`, {
+			method: "DELETE",
+			body: { files: fileNames },
+		});
+	} catch (error) {
+		toast.add({
+			title: "Ошибка удаления",
+			description: (error as Error).message,
+		});
+	}
+	operationState.active = false;
+	refreshCurrentPathFiles();
 };
 
 const renameState = reactive<{
-    name: string;
-    active: boolean;
-    newName: string;
+	name: string;
+	active: boolean;
+	newName: string;
 }>({
-    name: "",
-    active: false,
-    newName: "",
+	name: "",
+	active: false,
+	newName: "",
 });
 
 const renameFile = async () => {
-    try {
-        operationState.active = true;
-        operationState.opeartion = "Переименование...";
-        operationState.files = [renameState.name];
-        await useFS(`/rename`, {
-            method: "PUT",
-            body: {
-                from: `${state.pathFragments.join("/")}/${renameState.name}`,
-                to: `${state.pathFragments.join("/")}/${renameState.newName}`,
-            },
-        });
-        refreshCurrentPathFiles();
-        renameState.newName = "";
-    } catch (error) {
-        toast.add({
-            title: "Ошибка переименования",
-            description: (error as Error).message,
-        });
-    }
-    operationState.active = false;
-    renameState.active = false;
+	try {
+		operationState.active = true;
+		operationState.opeartion = "Переименование...";
+		operationState.files = [renameState.name];
+		await useFS(`/rename`, {
+			method: "PUT",
+			body: {
+				from: `${state.pathFragments.join("/")}/${renameState.name}`,
+				to: `${state.pathFragments.join("/")}/${renameState.newName}`,
+			},
+		});
+		refreshCurrentPathFiles();
+		renameState.newName = "";
+	} catch (error) {
+		toast.add({
+			title: "Ошибка переименования",
+			description: (error as Error).message,
+		});
+	}
+	operationState.active = false;
+	renameState.active = false;
 };
 
 const newFolderState = reactive<{
-    name: string;
+	name: string;
 }>({
-    name: "",
+	name: "",
 });
 
 const createFolder = async () => {
-    try {
-        operationState.opeartion = "Создание папки...";
-        operationState.files = [newFolderState.name];
-        await useFS(`/directory${currentPath.value}/${newFolderState.name}`, {
-            method: "POST",
-        });
-        refreshCurrentPathFiles();
-        newFolderState.name = "";
-    } catch (error) {
-        toast.add({
-            title: "Ошибка создания папки",
-            description: (error as Error).message,
-        });
-    }
-    operationState.active = false;
+	try {
+		operationState.opeartion = "Создание папки...";
+		operationState.files = [newFolderState.name];
+		await useFS(`/directory${currentPath.value}/${newFolderState.name}`, {
+			method: "POST",
+		});
+		refreshCurrentPathFiles();
+		newFolderState.name = "";
+	} catch (error) {
+		toast.add({
+			title: "Ошибка создания папки",
+			description: (error as Error).message,
+		});
+	}
+	operationState.active = false;
 };
 </script>
 
 <template>
-    <div class="flex flex-col gap-4">
-        <UAlert
-            title="Редактор файловой системы "
-            :color="useKeyToColor('fs')"
-            variant="soft"
-            icon="line-md:cloud-upload-outline-loop"
-            :class="sectionActive ? 'cursor-zoom-out' : 'cursor-zoom-in'"
-            @click="sectionActive = sectionActive ? '' : 'true'"
-        />
-        <UModal v-model="operationState.active" prevent-close>
-            <UCard>
-                <template #header>
-                    <h3 class="text-xl font-semibold">
-                        {{ operationState.opeartion }}
-                    </h3>
-                </template>
-                <div
-                    v-for="file in operationState.files"
-                    :key="typeof file === 'string' ? file : file.name"
-                    class="flex items-center justify-between"
-                >
-                    <div class="flex items-center gap-2">
-                        <UIcon name="svg-spinners:ring-resize" />
-                        <p class="text-truncate">
-                            {{ typeof file === "string" ? file : file.name }}
-                        </p>
-                    </div>
-                    <p v-if="typeof file !== 'string' && !file.isDirectory">
-                        {{ useFormattedFileSize(file.size) }}
-                    </p>
-                </div>
-            </UCard>
-        </UModal>
-        <UModal v-model="renameState.active">
-            <UCard>
-                <template #header>
-                    <h3 class="text-xl font-semibold">
-                        Переименовать файл - {{ renameState.name }}
-                    </h3>
-                </template>
-                <UInput
-                    v-model="renameState.newName"
-                    placeholder="Новое название"
-                    class="mb-4"
-                />
-                <UButton
-                    label="Переименовать"
-                    color="gray"
-                    :disabled="!renameState.newName"
-                    @click="renameFile"
-                />
-            </UCard>
-        </UModal>
-        <template v-if="sectionActive">
-            <UCard>
-                <template #header>
-                    <div class="flex gap-4 items-center">
-                        <UButton color="gray" @click="state.pathFragments = []">
-                            <UIcon name="codicon:root-folder" />
-                        </UButton>
-                        <template
-                            v-for="(node, index) in state.pathFragments"
-                            :key="node"
-                        >
-                            <UIcon name="codicon:arrow-right" />
-                            <UButton
-                                class="flex items-center gap-2"
-                                color="gray"
-                                @click="
-                                    state.pathFragments =
-                                        state.pathFragments.splice(0, index + 1)
-                                "
-                            >
-                                <UIcon name="codicon:folder" />
-                                <p>{{ node }}</p>
-                            </UButton>
-                        </template>
-                    </div>
-                </template>
-                <FsFileList
-                    v-model:selected="state.selectedFiles"
-                    v-model:right-clicked-file="state.rightClickedFile"
-                    :files="
-                        fileFetchStatus === 'success' ? currentPathFiles : null
-                    "
-                    selectable
-                    @file-action="handleFileAction"
-                    @file-upload="uploadFiles"
-                >
-                    <template #file-options>
-                        <UButtonGroup
-                            v-if="state.rightClickedFile"
-                            orientation="vertical"
-                        >
-                            <UButton
-                                v-if="!state.rightClickedFile.isDirectory"
-                                label="Переименовать"
-                                color="gray"
-                                @click="
-                                    () => {
-                                        if (state.rightClickedFile) {
-                                            renameState.active = true;
-                                            renameState.name =
-                                                state.rightClickedFile?.name;
-                                            renameState.newName =
-                                                state.rightClickedFile?.name;
-                                        }
-                                    }
-                                "
-                            />
-                            <UButton
-                                v-if="state.rightClickedFile.isDirectory"
-                                label="Копировать компонент Markdown"
-                                color="gray"
-                                @click="
-                                    useClipboard({
-                                        source: `:docs{base='${currentPath}${state.rightClickedFile.name}'}`,
-                                    }).copy()
-                                "
-                            />
-                            <UButton
-                                label="Удалить"
-                                color="gray"
-                                @click="
-                                    () => {
-                                        if (state.rightClickedFile)
-                                            deleteFiles([
-                                                state.rightClickedFile.name,
-                                            ]);
-                                    }
-                                "
-                            />
-                            <UButton
-                                v-if="
-                                    state.selectedFiles &&
-                                    state.selectedFiles.size > 1
-                                "
-                                :label="`Удалить выбранные - ${state.selectedFiles.size}`"
-                                color="gray"
-                                @click="
-                                    deleteFiles(Array.from(state.selectedFiles))
-                                "
-                            />
-                        </UButtonGroup>
-                    </template>
-                </FsFileList>
-                <template #footer>
-                    <div class="flex items-center gap-4">
-                        <UTooltip text="Загрузить файлы в выбранную папку">
-                            <UInput
-                                type="file"
-                                size="xs"
-                                icon="line-md:cloud-upload-outline-loop"
-                                class="w-fit"
-                                multiple
-                                @change="uploadFiles"
-                            />
-                        </UTooltip>
-                        <UTooltip text="Создать папку">
-                            <UButtonGroup>
-                                <UInput
-                                    v-model="newFolderState.name"
-                                    placeholder="Название папки"
-                                    size="xs"
-                                    class="w-fit"
-                                />
-                                <UButton
-                                    size="xs"
-                                    icon="mdi:plus"
-                                    color="gray"
-                                    @click="createFolder"
-                                />
-                            </UButtonGroup>
-                        </UTooltip>
-                        <p v-show="state.selectedFiles.size > 0">
-                            Выбран(о)
-                            {{ state.selectedFiles.size }} файл(а)
-                        </p>
-                    </div>
-                </template>
-            </UCard>
-        </template>
-    </div>
+	<div class="flex flex-col gap-4">
+		<UAlert
+			title="Редактор файловой системы "
+			:color="useKeyToColor('fs')"
+			variant="soft"
+			icon="line-md:cloud-upload-outline-loop"
+			:class="sectionActive ? 'cursor-zoom-out' : 'cursor-zoom-in'"
+			@click="sectionActive = sectionActive ? '' : 'true'"
+		/>
+		<UModal v-model="operationState.active" prevent-close>
+			<UCard>
+				<template #header>
+					<h3 class="text-xl font-semibold">
+						{{ operationState.opeartion }}
+					</h3>
+				</template>
+				<div
+					v-for="file in operationState.files"
+					:key="typeof file === 'string' ? file : file.name"
+					class="flex items-center justify-between"
+				>
+					<div class="flex items-center gap-2">
+						<UIcon name="svg-spinners:ring-resize" />
+						<p class="text-truncate">
+							{{ typeof file === "string" ? file : file.name }}
+						</p>
+					</div>
+					<p v-if="typeof file !== 'string' && !file.isDirectory">
+						{{ useFormattedFileSize(file.size) }}
+					</p>
+				</div>
+			</UCard>
+		</UModal>
+		<UModal v-model="renameState.active">
+			<UCard>
+				<template #header>
+					<h3 class="text-xl font-semibold">
+						Переименовать файл - {{ renameState.name }}
+					</h3>
+				</template>
+				<UInput
+					v-model="renameState.newName"
+					placeholder="Новое название"
+					class="mb-4"
+				/>
+				<UButton
+					label="Переименовать"
+					color="gray"
+					:disabled="!renameState.newName"
+					@click="renameFile"
+				/>
+			</UCard>
+		</UModal>
+		<template v-if="sectionActive">
+			<UCard>
+				<template #header>
+					<div class="flex items-center gap-4">
+						<UButton color="gray" @click="state.pathFragments = []">
+							<UIcon name="codicon:root-folder" />
+						</UButton>
+						<template
+							v-for="(node, index) in state.pathFragments"
+							:key="node"
+						>
+							<UIcon name="codicon:arrow-right" />
+							<UButton
+								class="flex items-center gap-2"
+								color="gray"
+								@click="
+									state.pathFragments =
+										state.pathFragments.splice(0, index + 1)
+								"
+							>
+								<UIcon name="codicon:folder" />
+								<p>{{ node }}</p>
+							</UButton>
+						</template>
+					</div>
+				</template>
+				<FsFileList
+					v-model:selected="state.selectedFiles"
+					v-model:right-clicked-file="state.rightClickedFile"
+					:files="
+						fileFetchStatus === 'success' ? currentPathFiles : null
+					"
+					selectable
+					@file-action="handleFileAction"
+					@file-upload="uploadFiles"
+				>
+					<template #file-options>
+						<UButtonGroup
+							v-if="state.rightClickedFile"
+							orientation="vertical"
+						>
+							<UButton
+								v-if="!state.rightClickedFile.isDirectory"
+								label="Переименовать"
+								color="gray"
+								@click="
+									() => {
+										if (state.rightClickedFile) {
+											renameState.active = true;
+											renameState.name =
+												state.rightClickedFile?.name;
+											renameState.newName =
+												state.rightClickedFile?.name;
+										}
+									}
+								"
+							/>
+							<UButton
+								v-if="state.rightClickedFile.isDirectory"
+								label="Копировать компонент Markdown"
+								color="gray"
+								@click="
+									useClipboard({
+										source: `:docs{base='${currentPath}${state.rightClickedFile.name}'}`,
+									}).copy()
+								"
+							/>
+							<UButton
+								label="Удалить"
+								color="gray"
+								@click="
+									() => {
+										if (state.rightClickedFile)
+											deleteFiles([
+												state.rightClickedFile.name,
+											]);
+									}
+								"
+							/>
+							<UButton
+								v-if="
+									state.selectedFiles &&
+									state.selectedFiles.size > 1
+								"
+								:label="`Удалить выбранные - ${state.selectedFiles.size}`"
+								color="gray"
+								@click="
+									deleteFiles(Array.from(state.selectedFiles))
+								"
+							/>
+						</UButtonGroup>
+					</template>
+				</FsFileList>
+				<template #footer>
+					<div class="flex items-center gap-4">
+						<UTooltip text="Загрузить файлы в выбранную папку">
+							<UInput
+								type="file"
+								size="xs"
+								icon="line-md:cloud-upload-outline-loop"
+								class="w-fit"
+								multiple
+								@change="uploadFiles"
+							/>
+						</UTooltip>
+						<UTooltip text="Создать папку">
+							<UButtonGroup>
+								<UInput
+									v-model="newFolderState.name"
+									placeholder="Название папки"
+									size="xs"
+									class="w-fit"
+								/>
+								<UButton
+									size="xs"
+									icon="mdi:plus"
+									color="gray"
+									@click="createFolder"
+								/>
+							</UButtonGroup>
+						</UTooltip>
+						<p v-show="state.selectedFiles.size > 0">
+							Выбран(о)
+							{{ state.selectedFiles.size }} файл(а)
+						</p>
+					</div>
+				</template>
+			</UCard>
+		</template>
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/components/manage/option/KVEditor.vue b/app/components/manage/option/KVEditor.vue
deleted file mode 100644
index 1d15ccb..0000000
--- a/app/components/manage/option/KVEditor.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup>
-import { useFileSystemAccess } from "@vueuse/core";
-
-const sectionActive = useCookie("admin_section_kv");
-
-const envs = ["development", "production"];
-
-const toast = useToast();
-
-const state = reactive({
-    env: envs[0],
-    key: "",
-});
-
-const json = ref("");
-
-const { data: fetchedValue, refresh: refreshValue } = await useFetch(
-    "/api/devonly/kv",
-    {
-        query: state,
-        transform: (data) => (data === "__undefined__" ? undefined : data),
-    }
-);
-
-watch(state, () => refreshValue());
-
-watch(fetchedValue, () => {
-    try {
-        json.value = JSON.stringify(fetchedValue.value, null, 4);
-    } catch (error) {
-        console.error(error);
-    }
-});
-
-const write = async () => {
-    await $fetch("/api/devonly/kv", {
-        method: "PUT",
-        body: { ...state, value: json.value },
-    });
-    refreshValue();
-};
-
-const colorMode = useColorMode();
-
-const { data, open } = useFileSystemAccess({
-    dataType: "Text",
-    types: [
-        {
-            description: "550",
-            accept: {
-                "application/json": [".json"],
-            },
-        },
-    ],
-});
-
-const backedUp = ref(false);
-const loadConfirmation = ref(false);
-const confirmationPhrase = "I am sure I want to replace the database.";
-const confirmationPhraseInput = ref("");
-const loadDB = async () => {
-    if (backedUp.value) {
-        await open();
-        await data.value;
-        loadConfirmation.value = true;
-    } else {
-        toast.add({
-            title: "To replace database you first need to download a backup",
-            color: "red",
-            icon: "mdi:alert",
-        });
-    }
-};
-
-const loadDBConfirmation = async () => {
-    if (confirmationPhraseInput.value === confirmationPhrase) {
-        await $fetch("/api/devonly/snapshot", {
-            method: "PUT",
-            body: data.value,
-        });
-        window.location.reload();
-    }
-};
-</script>
-
-<template>
-    <div class="__kv-editor my-4 flex flex-col gap-4">
-        <UAlert
-            title="Администрирование KV"
-            color="rose"
-            variant="soft"
-            icon="maki:danger"
-            :class="sectionActive ? 'cursor-zoom-out' : 'cursor-zoom-in'"
-            @click="sectionActive = sectionActive ? '' : 'true'"
-        />
-        <template v-if="sectionActive">
-            <UCard>
-                <div class="flex flex-col">
-                    <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
-                        KV Editor
-
-                        <UButton
-                            icon="mdi:github"
-                            color="gray"
-                            size="2xs"
-                            to="https://github.com/paranoidPhantom/school.550/tree/dev/server/api"
-                            target="_blank"
-                        />
-                        <UBadge
-                            v-if="!fetchedValue"
-                            variant="subtle"
-                            color="rose"
-                            >fetched value is undefined</UBadge
-                        >
-                    </h3>
-                    <UButtonGroup class="mb-4">
-                        <USelect
-                            v-model="state.env"
-                            :color="state.env === 'production' ? 'red' : 'gray'"
-                            :options="envs"
-                        />
-                        <UInput
-                            v-model="state.key"
-                            :color="state.env === 'production' ? 'red' : 'gray'"
-                            placeholder="Key"
-                        />
-
-                        <UButton
-                            icon="mdi:database-alert-outline"
-                            :disabled="
-                                json === JSON.stringify(fetchedValue, null, 4)
-                            "
-                            :color="state.env === 'production' ? 'red' : 'gray'"
-                            @click="write"
-                        />
-                    </UButtonGroup>
-                    <MonacoEditor
-                        v-model="json"
-                        lang="json"
-                        class="h-96 mb-4"
-                        :options="{
-                            theme:
-                                colorMode.value === 'dark' ? 'vs-dark' : 'vs',
-                        }"
-                    />
-                    <hr class="opacity-20 mb-4" >
-                    <UAlert
-                        color="red"
-                        variant="soft"
-                        icon="mdi:alert"
-                        title="Danger zone"
-                    >
-                        <template #description>
-                            <div class="flex items-center gap-4 py-2">
-                                <UButton
-                                    color="gray"
-                                    icon="mdi:database-export"
-                                    @click="backedUp = true"
-                                >
-                                    <a
-                                        :download="`backup-${new Date().toISOString()}.json`"
-                                        href="/api/devonly/snapshot"
-                                        >Download DB</a
-                                    >
-                                </UButton>
-                                <UButton
-                                    icon="mdi:database-import"
-                                    color="red"
-                                    variant="outline"
-                                    label="Replace DB"
-                                    @click="loadDB"
-                                />
-                            </div>
-                        </template>
-                    </UAlert>
-                    <!-- Confirmation -->
-                    <UModal v-model="loadConfirmation">
-                        <UCard
-                            :ui="{
-                                base: 'overflow-hidden',
-                                body: {
-                                    base: 'h-[680px]',
-                                    padding: '!p-0',
-                                },
-                            }"
-                        >
-                            <div class="flex flex-col gap-2 h-full">
-                                <MonacoEditor
-                                    v-model="data"
-                                    lang="json"
-                                    class="h-[600px]"
-                                    :options="{
-                                        theme:
-                                            colorMode.value === 'dark'
-                                                ? 'vs-dark'
-                                                : 'vs',
-                                    }"
-                                />
-                                <div class="p-2 flex flex-col gap-4">
-                                    <UInput
-                                        v-model="confirmationPhraseInput"
-                                        color="red"
-                                        :placeholder="confirmationPhrase"
-                                    />
-                                    <UButton
-                                        color="red"
-                                        :disabled="
-                                            confirmationPhrase !==
-                                            confirmationPhraseInput
-                                        "
-                                        @click="loadDBConfirmation"
-                                        >Confirm</UButton
-                                    >
-                                </div>
-                            </div>
-                        </UCard>
-                    </UModal>
-                </div>
-            </UCard></template
-        >
-    </div>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/app/components/manage/option/Root.vue b/app/components/manage/option/Root.vue
index c8e595a..de65b1b 100644
--- a/app/components/manage/option/Root.vue
+++ b/app/components/manage/option/Root.vue
@@ -1,350 +1,361 @@
 <script lang="ts" setup>
-import { computedAsync } from "@vueuse/core";
-import type { Role } from "~~/server/types/role";
-const toast = useToast();
+import { useClipboard } from "@vueuse/core";
 
 const sectionActive = useCookie("admin_section_root");
 
-// ROLES
-const { data: roles, refresh: refreshRoles } = await useFetch("/api/roles");
-
-const newRoleState = reactive({ key: "", description: "" });
-
-const createRole = async (key: string, description: string) => {
-    try {
-        if (!key || !description) return;
-        await $fetch("/api/roles", {
-            method: "POST",
-            body: { key, description },
-        });
-        if (roles.value) {
-            roles.value.push({ key, description });
-            newRoleState.key = "";
-            newRoleState.description = "";
-            toast.add({
-                title: "Успешно",
-                description: "Роль успешно создана",
-                color: "green",
-            });
-            refreshRoles();
-        }
-    } catch (error) {
-        toast.add({
-            title: "Ошибка",
-            description: (error as Error).message,
-            color: "red",
-        });
-    }
-};
-
-// USERS
-const { data: users, refresh: refreshUsers } = await useFetch("/api/users");
+const toast = useToast();
+const supabase = useSupabaseClient();
 
-const userActionState = reactive<{
-    add: boolean;
-    edit: boolean;
-    uid: string | number;
-}>({ add: false, edit: false, uid: "" });
+const { data: users, refresh: refreshUsers } = await useAsyncData(
+	"user_list_sb",
+	async () => {
+		const { data, error } = await supabase.from("users").select("*");
+		if (error) throw error;
+		return data;
+	},
+);
 
-const popoverActive = ref(false);
+const columns = [
+	{ key: "id", label: "ID" },
+	{ key: "created_at", label: "Дата создания" },
+	{ key: "perms", label: "Роли" },
+];
 
-const idValid = computed(
-    () => userActionState.uid && !Number.isNaN(Number(userActionState.uid))
+const newRoleInputs = reactive(
+	Object.fromEntries((users.value ?? []).map((user) => [user.id, ""])),
 );
 
-const userFromId = computedAsync(async () => {
-    if (!idValid.value) return null;
-    return await $fetch(`/api/user/${userActionState.uid}`);
-}, null);
-
-const createUser = async () => {
-    try {
-        if (!userActionState.uid || !userFromId.value) return;
-        await $fetch("/api/users", {
-            method: "POST",
-            body: userFromId.value,
-        });
+const addRole = async (uid: string, role: string) => {
+	newRoleInputs[uid] = "";
+	try {
+		await $fetch(`/api/user/${uid}/perms`, {
+			method: "POST",
+			body: { newPerms: [role] },
+		});
 		refreshUsers();
-        userActionState.uid = Number(userFromId.value.id);
-		userActionState.edit = true;
-		userActionState.add = false;
+	} catch (error) {
 		toast.add({
-            title: "Успешно",
-            description: "Пользователь успешно создан",
-            color: "green",
-        });
+			title: "Ошибка добавления роли",
+			description: (error as Error).message,
+			color: "red",
+		});
+	}
+};
 
-    } catch (error) {
-        toast.add({
-            title: "Ошибка",
-            description: (error as Error).message,
-            color: "red",
-        });
-    }
+const removeRole = async (uid: string, role: string) => {
+	try {
+		await $fetch(`/api/user/${uid}/perms`, {
+			method: "DELETE",
+			body: { deletePerms: [role] },
+			headers: useRequestHeaders(["cookie"]),
+		});
+		refreshUsers();
+	} catch (error) {
+		toast.add({
+			title: "Ошибка удаления роли",
+			description: (error as Error).message,
+			color: "red",
+		});
+	}
 };
 
-const now = Date.now();
+const { data: invitations, refresh: refreshInvitations } = useFetch(
+	"/api/auth/invitation",
+	{
+		transform: (data) =>
+			data.map((invitation: (typeof invitations.value)[number]) => ({
+				...invitation,
+				perms: invitation["initial-perms"],
+			})),
+	},
+);
 
-const userOptions = computed(() => {
-    return users.value?.map((user) => ({
-        ...user,
-        label: `${user.first_name} ${user.last_name}`,
-    }));
+const newAdminState = reactive<{
+	metadata: Record<string, string>;
+	perm: string;
+	perms: string[];
+	open: boolean;
+}>({
+	metadata: {
+		first_name: "",
+		last_name: "",
+		middle_name: "",
+	},
+	perm: "",
+	perms: [],
+	open: false,
 });
 
-// User roles
-
-const userRoleRefresher = ref(0);
-
-const userRoles = computedAsync(async () => {
-    if (userRoleRefresher.value !== undefined) {
-        if (!userFromId.value) return [];
-        return await $fetch(`/api/user/${userFromId.value.id}/roles`);
-    }
-}, null);
-
-const giveUserRole = async (role: string) => {
-    try {
-        if (!userFromId.value) return;
-        await $fetch(`/api/user/${userActionState.uid}/roles`, {
-            method: "POST",
-            body: { role },
-        });
-        toast.add({
-            title: "Успешно",
-            description: "Роль успешно добавлена",
-            color: "green",
-        });
-        userRoleRefresher.value++;
-    } catch (error) {
-        toast.add({
-            title: "Ошибка",
-            description: (error as Error).message,
-            color: "red",
-        });
-    }
+const addAdmin = async () => {
+	try {
+		await $fetch("/api/auth/invitation", {
+			method: "POST",
+			body: {
+				metadata: newAdminState.metadata,
+				initialPerms: newAdminState.perms,
+			},
+		});
+	} catch (error) {
+		console.error(error as Error);
+		toast.add({
+			title: "Ошибка приглашения",
+			description: (error as Error).message,
+			color: "red",
+		});
+	} finally {
+		newAdminState.open = false;
+		newAdminState.perms = [];
+		newAdminState.perm = "";
+		newAdminState.metadata = {
+			first_name: "",
+			last_name: "",
+			middle_name: "",
+		};
+		refreshInvitations();
+	}
 };
 
-const revokeUserRole = async (role: string) => {
-    try {
-        if (!userFromId.value) return;
-        await $fetch(`/api/user/${userActionState.uid}/roles`, {
-            method: "DELETE",
-            body: { role },
-        });
-        toast.add({
-            title: "Успешно",
-            description: "Роль успешно удалена",
-            color: "green",
-        });
-        userRoleRefresher.value++;
-    } catch (error) {
-        toast.add({
-            title: "Ошибка",
-            description: (error as Error).message,
-            color: "red",
-        });
-    }
-};
+const invitationColumns = [
+	{ key: "id", label: "Ссылка" },
+	{ key: "created_at", label: "Дата создания" },
+	{ key: "metadata.last_name", label: "Фамилия" },
+	{ key: "metadata.first_name", label: "Имя" },
+	{ key: "metadata.middle_name", label: "Отчество" },
+	{ key: "activated_at", label: "Активировано" },
+	{ key: "perms", label: "Стартовые роли" },
+];
 
-const userRolePicked = ref();
+const {
+	public: { site_url },
+} = useRuntimeConfig();
 
-watch(userRolePicked, (picked) => {
-    if (!picked) return;
-    giveUserRole(picked);
-    userRolePicked.value = undefined;
-});
+const { copy, copied, isSupported, text } = useClipboard();
 </script>
 
 <template>
 	<div class="flex flex-col gap-4">
+		<USlideover v-model="newAdminState.open">
+			<UForm @submit="addAdmin" class="space-y-4 p-8">
+				<h2 class="text-xl font-semibold">Приглашение админа</h2>
+				<hr class="opacity-10" />
+				<UFormGroup label="Фамилия" name="last_name" required>
+					<UInput v-model="newAdminState.metadata.last_name" />
+				</UFormGroup>
+				<UFormGroup label="Имя" name="first_name" required>
+					<UInput v-model="newAdminState.metadata.first_name" />
+				</UFormGroup>
+				<UFormGroup label="Отчество" name="middle_name" required>
+					<UInput v-model="newAdminState.metadata.middle_name" />
+				</UFormGroup>
+
+				<UFormGroup label="Стартовые роли">
+					<div class="flex max-w-52 flex-wrap gap-2">
+						<TransitionGroup name="fade" mode="out-in">
+							<UBadge
+								v-for="perm in newAdminState.perms"
+								:key="perm"
+								variant="soft"
+								size="xs"
+								:color="useKeyToColor(perm)"
+								>{{ perm }}
+								<UButton
+									v-if="perm !== 'root'"
+									size="2xs"
+									color="white"
+									icon="mdi:close"
+									variant="link"
+									@click="
+										newAdminState.perms =
+											newAdminState.perms.filter(
+												(val) => val !== perm,
+											)
+									"
+								/>
+							</UBadge>
+						</TransitionGroup>
+						<UButtonGroup size="xs">
+							<UInput
+								v-model="newAdminState.perm"
+								placeholder="Добавить роль"
+								@keyup.enter="
+									() => {
+										if (newAdminState.perm === 'root')
+											return;
+										newAdminState.perms.push(
+											newAdminState.perm,
+										);
+										newAdminState.perm = '';
+									}
+								"
+							/>
+							<UButton
+								icon="mdi:plus"
+								color="gray"
+								:disabled="!newAdminState.perm"
+								@click="
+									() => {
+										if (newAdminState.perm === 'root')
+											return;
+										newAdminState.perms.push(
+											newAdminState.perm,
+										);
+										newAdminState.perm = '';
+									}
+								"
+							/>
+						</UButtonGroup>
+					</div>
+				</UFormGroup>
+				<UButton
+					label="Создать приглашение"
+					:disabled="
+						!newAdminState.metadata.first_name ||
+						!newAdminState.metadata.last_name ||
+						!newAdminState.metadata.middle_name
+					"
+					icon="ph:link-simple-duotone"
+					type="submit"
+				/>
+			</UForm>
+		</USlideover>
 		<UAlert
 			title="Корневой пользователь"
 			:color="useKeyToColor('root')"
 			variant="soft"
 			icon="ph:identification-badge-duotone"
-            :class="sectionActive ? 'cursor-zoom-out' : 'cursor-zoom-in'"
-            @click="sectionActive = sectionActive ? '' : 'true'"
+			:class="sectionActive ? 'cursor-zoom-out' : 'cursor-zoom-in'"
+			@click="sectionActive = sectionActive ? '' : 'true'"
 		/>
-        <template v-if="sectionActive">
-		<div class="flex gap-2">
-			<UPopover v-if="roles">
-				<UButton color="gray" label="Роли" />
-				<template #panel>
-					<UCard>
-						<div class="flex flex-col gap-2 divide-y divide-gray-800">
-							<div
-								v-for="role in roles"
-								:key="role.key"
-								class="role flex gap-2 w-80 items-center pt-2"
-							>
-								<UBadge
-									variant="soft"
-									:color="useKeyToColor(role.key)"
-									>{{ role.key }}</UBadge
-								>
-								<p
-									class="overflow-hidden text-xs text-wrap text-right opacity-80"
-									:title="role.description"
-								>
-									{{ role.description }}
-								</p>
-							</div>
-							<div class="border-none">
-								<UButtonGroup>
-									<UInput
-										v-model="newRoleState.key"
-										placeholder="Роль"
-										size="xs"
-									/>
-									<UInput
-										v-model="newRoleState.description"
-										placeholder="Описание"
-										size="xs"
-									/>
-									<UButton
-										icon="mdi:plus"
-										size="xs"
-										color="gray"
-										@click="
-											createRole(
-												newRoleState.key,
-												newRoleState.description
-											)
-										"
-									/>
-								</UButtonGroup>
-							</div>
-						</div>
-					</UCard>
+		<template v-if="sectionActive">
+			<h2 class="text-xl font-semibold">Пользователи</h2>
+			<UTable :rows="users" :columns="columns">
+				<template #created_at-data="{ row }">
+					{{ new Date(row.created_at).toLocaleDateString("ru") }}@{{
+						new Date(row.created_at).toLocaleTimeString("ru")
+					}}
 				</template>
-			</UPopover>
-			<UPopover v-if="users" v-model:open="popoverActive">
-				<UButton color="gray" label="Пользователи" />
-				<template #panel>
-					<UCard>
-						<div v-if="users" class="flex flex-col gap-2">
-							<UButtonGroup>
-								<UInputMenu
-									v-model="userActionState.uid"
-									:options="userOptions"
-									:search-attributes="['username', 'id']"
-									value-attribute="id"
-								/>
+				<template #perms-data="{ row }">
+					<div class="flex max-w-52 flex-wrap gap-2">
+						<TransitionGroup name="fade" mode="out-in">
+							<UBadge
+								v-for="perm in row.perms"
+								:key="perm"
+								variant="soft"
+								size="xs"
+								:color="useKeyToColor(perm)"
+								>{{ perm }}
 								<UButton
-									icon="line-md:edit-twotone-full"
-									:disabled="!userFromId"
-									color="gray"
-									@click="
-										userActionState.edit = true;
-										popoverActive = false;
-									"
+									v-if="perm !== 'root'"
+									size="2xs"
+									color="white"
+									icon="mdi:close"
+									variant="link"
+									@click="removeRole(row.id, perm)"
 								/>
-							</UButtonGroup>
+							</UBadge>
+						</TransitionGroup>
+						<UButtonGroup size="xs">
+							<UInput
+								v-model="newRoleInputs[row.id]"
+								placeholder="Добавить роль"
+								@keyup.enter="
+									addRole(
+										row.id,
+										newRoleInputs[row.id] as string,
+									)
+								"
+							/>
 							<UButton
+								icon="mdi:plus"
 								color="gray"
-								icon="line-md:person-add-filled"
+								:disabled="!newRoleInputs[row.id]"
 								@click="
-									userActionState.add = true;
-									popoverActive = false;
-									userActionState.uid = '';
-								"
-								>Добавить пользователя</UButton
-							>
-						</div>
-					</UCard>
-				</template>
-			</UPopover>
-			<!-- Add user modal -->
-			<UModal v-model="userActionState.add">
-				<UCard>
-					<template #header>
-						<h3 class="text-lg font-bold">Добавить пользователя</h3>
-					</template>
-					<UAlert class="mb-4" variant="subtle" color="yellow" title="Пользователь появиться только если он ранее входил" icon="mdi:alert" />
-					<div v-if="userFromId" class="flex gap-2 items-center mb-4">
-						<UAvatar :src="userFromId.photo_url" size="lg" />
-						<div class="flex flex-col">
-							<h3 class="text-lg font-bold">
-								{{ userFromId.first_name }}
-								{{ userFromId.last_name }}
-							</h3>
-							<p class="text-sm text-gray-500">
-								Создан
-								{{
-									useFormattedInterval(
-										now / 1000 - userFromId.auth_date
+									addRole(
+										row.id,
+										newRoleInputs[row.id] as string,
 									)
-								}}
-								назад
-							</p>
-						</div>
+								"
+							/>
+						</UButtonGroup>
 					</div>
-					<UButtonGroup class="w-full">
-						<UInput
-							v-model="userActionState.uid"
-							class="w-full"
-							placeholder="ID пользователя"
-						/>
+				</template>
+			</UTable>
+			<hr class="opacity-10" />
+			<h2 class="text-xl font-semibold">Приглашения</h2>
+			<UTable :rows="invitations" :columns="invitationColumns">
+				<template #id-data="{ row }">
+					<UBadge v-if="!row.activated_at" variant="subtle" size="xs">
+						<span class="text-xs">
+							{{ site_url }}/register/{{ row.id }}
+						</span>
 						<UButton
-							color="gray"
-							label="Добавить"
-							:disabled="!userFromId"
-							@click="createUser"
+							v-if="isSupported"
+							class="ml-2"
+							:padded="false"
+							variant="link"
+							:icon="
+								copied &&
+								text === `${site_url}/register/${row.id}`
+									? 'mdi:check'
+									: 'ic:twotone-content-copy'
+							"
+							color="white"
+							size="xs"
+							@click="copy(`${site_url}/register/${row.id}`)"
 						/>
-					</UButtonGroup>
-				</UCard>
-			</UModal>
-			<!-- Edit user modal -->
-			<UModal v-model="userActionState.edit">
-				<UCard>
-					<template #header>
-						<div v-if="userFromId" class="flex gap-2">
-							<UAvatar :src="userFromId.photo_url" size="lg" />
-							<div class="info">
-								<h3 class="text-lg font-bold">
-									{{ userFromId.first_name }}
-									{{ userFromId.last_name }}
-								</h3>
-								<p class="text-sm text-gray-500">
-									@{{ userFromId.username }} | Создан
-									{{
-										useFormattedInterval(
-											now / 1000 - userFromId.auth_date
-										)
-									}}
-									назад
-								</p>
-							</div>
-						</div>
-					</template>
-					<h3 class="text-lg font-semibold mb-2">Роли</h3>
-					<div class="flex gap-2 items-center flex-wrap">
+					</UBadge>
+					<UBadge
+						v-else
+						variant="subtle"
+						color="rose"
+						label="Уже активировано"
+					/>
+				</template>
+				<template #created_at-data="{ row }">
+					{{ new Date(row.created_at).toLocaleDateString("ru") }}@{{
+						new Date(row.created_at).toLocaleTimeString("ru")
+					}}
+				</template>
+				<template #activated_at-data="{ row }">
+					{{
+						row.activated_at
+							? `${new Date(row.created_at).toLocaleDateString("ru")}
+						@${new Date(row.created_at).toLocaleTimeString("ru")}`
+							: "-"
+					}}
+				</template>
+				<template #perms-data="{ row }">
+					<div class="flex max-w-52 flex-wrap gap-2">
 						<UBadge
-							v-for="role in userRoles"
-							:key="role"
+							v-for="perm in row.perms"
+							:key="perm"
 							variant="soft"
-							:color="useKeyToColor(role)"
-							>{{ role }} <UButton v-if="role !== 'root'" class="ml-2" color="white" size="xs" variant="link" :padded="false" icon="mdi:close" @click="revokeUserRole(role)" />
+							size="xs"
+							:color="useKeyToColor(perm)"
+							>{{ perm }}
 						</UBadge>
-						<UButtonGroup size="xs">
-							<UInputMenu
-								v-if="roles"
-								v-model="userRolePicked"
-								:options="
-									roles.map((role: Role) => ({
-										label: role.key,
-									}))
-								"
-								value-attribute="label"
-								placeholder="Добавить роль"
-							/>
-						</UButtonGroup>
 					</div>
-				</UCard>
-			</UModal>
-		</div></template>
+				</template>
+			</UTable>
+			<UButton
+				label="Пригласить админа"
+				class="w-fit"
+				color="white"
+				icon="mdi:plus"
+				@click="newAdminState.open = true"
+			/>
+		</template>
 	</div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: all 1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/app/components/page_numbers.vue b/app/components/page_numbers.vue
deleted file mode 100644
index 1631972..0000000
--- a/app/components/page_numbers.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-<div class="w-[40px] border border-slate-600 text-slate-600 hover:text-slate-900 hover:border-slate-900 rounded flex max-[600px]:w-[20px] h-[20px]">
-    <p class="text-xl mx-auto my-auto">{{ num.num }}</p>
-</div>
-</template>
-
-<script setup>
-defineProps({
-        num: {
-			type: Object,
-			
-		}
-    })
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/app/error.vue b/app/error.vue
index 6cf872e..bfd9dbf 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -3,19 +3,19 @@ import type { NuxtError } from "#app";
 import { useMouse } from "@vueuse/core";
 
 const { error } = defineProps<{
-    error: NuxtError;
+	error: NuxtError;
 }>();
 const comment = ref();
 
 switch (error.statusCode) {
-    case 404: {
-        comment.value = `Страница, которую вы ищите, не существует. Возможно, она была перемещена или удалена.`;
-        break;
-    }
-    case 500: {
-        comment.value = `Возникла серверная ошибка (не гуд). Самое время настучать по голове Андрею...`;
-        break;
-    }
+	case 404: {
+		comment.value = `Страница, которую вы ищите, не существует. Возможно, она была перемещена или удалена.`;
+		break;
+	}
+	case 500: {
+		comment.value = `Возникла серверная ошибка (не гуд). Самое время настучать по голове Андрею...`;
+		break;
+	}
 }
 
 const { x, y } = useMouse();
@@ -23,87 +23,104 @@ const { x, y } = useMouse();
 const sensetivity = -100;
 
 const displacement = computed(() => {
-    if (!document) return { x: 0, y: 0 };
-    return {
-        x: (x.value - document.documentElement.clientWidth / 2) / sensetivity,
-        y: (y.value - document.documentElement.clientHeight / 2) / sensetivity,
-    };
+	if (!document) return { x: 0, y: 0 };
+	return {
+		x: (x.value - document.documentElement.clientWidth / 2) / sensetivity,
+		y: (y.value - document.documentElement.clientHeight / 2) / sensetivity,
+	};
 });
 
 const barcode = computed(() => `${error.statusCode} ${error.message}`);
 </script>
 
 <template>
-    <div class="__error">
-        <div class="creative-block">
-            <NuxtImg
-                :style="`translate: ${displacement.x}% ${displacement.y}%;`"
-                class="a hidden sm:block transition-all"
-                src="/images/question_mark.svg"
-            />
-            <NuxtImg
-                :style="`translate: ${displacement.x}% ${displacement.y}%;`"
-                class="b transition-all"
-                src="/images/question_mark.svg"
-            />
-        </div>
-        <div class="error-wrapper">
-            <h1 class="text-center">
-                <span v-for="c in barcode" :key="c">{{ c }}</span>
-            </h1>
-            <p class="text-center opacity-50">{{ comment }}</p>
-            <UButton size="lg" to="/" label="На главную" />
-        </div>
-    </div>
+	<div class="__error">
+		<div class="creative-block">
+			<NuxtImg
+				:style="`translate: ${displacement.x}% ${displacement.y}%;`"
+				class="a hidden sm:block"
+				src="/images/question_mark.svg"
+			/>
+			<NuxtImg
+				:style="`translate: ${displacement.x}% ${displacement.y}%;`"
+				class="b"
+				src="/images/question_mark.svg"
+			/>
+		</div>
+		<div class="error-wrapper">
+			<h1 class="text-center">
+				<span
+					v-for="(c, index) in barcode"
+					:key="c"
+					:style="`animation-delay: ${index * 0.1}s`"
+					>{{ c }}</span
+				>
+			</h1>
+			<p class="text-center opacity-50">{{ comment }}</p>
+			<UButton size="lg" to="/" variant="link" :padded="false"
+				><UBadge variant="subtle" label="На главную" size="lg" />
+			</UButton>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .__error {
-    height: 100vh;
-    position: relative;
-    h1 {
-        font-size: 5rem;
-        font-weight: 200;
-        font-family: "Libre Barcode 128 Text" sans-serif;
-        color: rgb(var(--color-primary-DEFAULT));
-        user-select: none;
-
-        span {
-            &:hover {
-                font-weight: 900;
-            }
-            &:active {
-                @apply text-red-500;
-            }
-        }
-    }
-    .error-wrapper {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 2rem;
-        z-index: 3;
-    }
-    .creative-block {
-        position: fixed;
-        overflow: hidden;
-        inset: 0;
-        img {
-            position: absolute;
-            &.a {
-                left: 10%;
-                top: 500px;
-                rotate: -20deg;
-                scale: 0.7;
-            }
-            &.b {
-                right: 10%;
-                top: 200px;
-            }
-        }
-    }
+	height: 100vh;
+	position: relative;
+	@keyframes letter {
+		0% {
+			opacity: 0.5;
+		}
+		50% {
+			opacity: 1;
+			font-size: 1.1em;
+		}
+		100% {
+			opacity: 0.5;
+		}
+	}
+	h1 {
+		font-size: 2rem;
+		font-weight: 300;
+		font-family: "Source Code Pro", sans-serif;
+		max-width: 70%;
+		color: rgb(var(--color-primary-DEFAULT));
+		span {
+			animation: letter 1s infinite 1s;
+		}
+	}
+	p {
+		font-family: "Source Code Pro", sans-serif;
+		font-weight: 200;
+	}
+	.error-wrapper {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 2rem;
+		z-index: 3;
+	}
+	.creative-block {
+		position: fixed;
+		overflow: hidden;
+		inset: 0;
+		img {
+			position: absolute;
+			&.a {
+				left: 10%;
+				top: 500px;
+				rotate: -20deg;
+				scale: 0.7;
+			}
+			&.b {
+				right: 10%;
+				top: 200px;
+			}
+		}
+	}
 }
 </style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 74e9e60..dbbc5b3 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 defineShortcuts({
-    shift_a: {
-        handler: () => navigateTo("/manage"),
-    },
+	shift_a: {
+		handler: () => navigateTo("/manage"),
+	},
 });
 </script>
 
 <template>
-    <div class="__layout-default">
-        <ClientHeader />
-        <main class="px-4 mt-4 md:px-8 pb-4">
-            <slot />
-        </main>
-        <ClientFooter />
-        <FeedbackForm />
-    </div>
+	<div class="__layout-default">
+		<ClientHeader />
+		<main class="mt-4 px-4 pb-4 md:px-8">
+			<slot />
+		</main>
+		<ClientFooter />
+		<FeedbackForm />
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/layouts/manage.vue b/app/layouts/manage.vue
index e002636..f6ceb42 100644
--- a/app/layouts/manage.vue
+++ b/app/layouts/manage.vue
@@ -1,18 +1,18 @@
 <script lang="ts" setup></script>
 
 <template>
-    <div class="__manage-layout">
-        <header
-            class="fixed top-0 left-1/2 -translate-x-1/2 z-10 m-2 px-6 py-1 backdrop-blur-lg rounded-3xl border border-gray-200 dark:border-gray-800 flex items-center gap-4"
-        >
-            <UButton variant="soft" to="/manage">Редактор</UButton>
-            <UButton variant="soft" to="/manage/learn"
-                >Ресурсы для редакторов</UButton
-            >
-            <ColorSwitcher />
-        </header>
-        <slot />
-    </div>
+	<div class="__manage-layout">
+		<header
+			class="fixed left-1/2 top-0 z-10 m-2 flex -translate-x-1/2 items-center gap-4 rounded-3xl border border-gray-200 px-6 py-1 backdrop-blur-lg dark:border-gray-800"
+		>
+			<!-- <UButton variant="soft" to="/manage">Редактор</UButton>
+			<UButton variant="soft" to="/manage/learn"
+				>Ресурсы для редакторов</UButton
+			> -->
+			<ColorSwitcher />
+		</header>
+		<slot />
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/middleware/auth.ts b/app/middleware/auth.ts
deleted file mode 100644
index 8d5ee6c..0000000
--- a/app/middleware/auth.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export default defineNuxtRouteMiddleware(async (to) => {
-    if (to.path.startsWith("/manage/auth")) {
-        const { user } = useTelegramUser();
-        const { data: valid } = await useFetch("/api/auth/validate");
-
-        if (user.value && valid.value) return navigateTo("/manage");
-    } else {
-        const { user } = useTelegramUser();
-        if (!user.value)
-            return navigateTo({
-                path: "/manage/auth",
-                query: { redirect: to.path },
-            });
-    }
-});
diff --git a/app/middleware/content.ts b/app/middleware/content.ts
index 152cbdb..46e1a42 100644
--- a/app/middleware/content.ts
+++ b/app/middleware/content.ts
@@ -1,15 +1,21 @@
+import { parseMarkdown } from "@nuxtjs/mdc/runtime";
+
 export default defineNuxtRouteMiddleware(async (to) => {
-    const {
-        params: { slug },
-    } = to as unknown as { params: { slug: string[] } };
-    const { data: md } = await useFetch(`/api/content/${slug.join("/")}`);
+	const supabase = useSupabaseClient();
 
-    if (md.value) {
-        to.meta.md = md.value;
-    } else {
-        return abortNavigation({
-            statusCode: 404,
-            message: "Not found",
-        });
-    }
+	const { data } = await supabase
+		.from("content")
+		.select("md")
+		.eq("slug", to.path)
+		.maybeSingle();
+	if (data) {
+		const { md } = data;
+		const ast = await parseMarkdown(md);
+		to.meta.ast = ast;
+	} else {
+		return abortNavigation({
+			statusCode: 404,
+			message: "ツ",
+		});
+	}
 });
diff --git a/app/middleware/registration.ts b/app/middleware/registration.ts
new file mode 100644
index 0000000..296d83a
--- /dev/null
+++ b/app/middleware/registration.ts
@@ -0,0 +1,13 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+	const { id } = to.params;
+	try {
+		const metadata = (await $fetch(`/api/auth/registration`, {
+			query: { id },
+		})) as Record<string, string>;
+		to.meta.metadata = metadata;
+		to.meta.id = id;
+		to.meta.title = `Регистрация - ${metadata.first_name} ${metadata.last_name}`;
+	} catch (error) {
+		return abortNavigation(error as Error);
+	}
+});
diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
index b7fa426..3217c52 100644
--- a/app/pages/[...slug].vue
+++ b/app/pages/[...slug].vue
@@ -1,42 +1,64 @@
 <script setup lang="ts">
-import { parseMarkdown } from "@nuxtjs/mdc/runtime";
-
 definePageMeta({
-    middleware: ["content"],
+	middleware: ["content"],
 });
 
 const {
-    meta: { md },
-    params: { slug },
-} = useRoute();
-
-const { data: ast } = await useAsyncData<typeof parseMarkdown>(
-    `md_${slug}`,
-    () => parseMarkdown(md)
-);
+	params: { slug },
+	meta: { ast },
+} = useRoute() as any;
 
 const refreshSeo = () => {
-    if (ast.value) {
-        useSeoMeta({
-            title: ast.value.data.title,
-            description:
-                ast.value.data.description === ""
-                    ? undefined
-                    : ast.value.data.description,
-        });
-    }
+	if (ast) {
+		useSeoMeta({
+			title: ast.data.title,
+			description:
+				ast.data.description === "" ? undefined : ast.data.description,
+		});
+	}
 };
 
 onMounted(refreshSeo);
 watch(ast, refreshSeo);
+
+const brklinks = computed(() => {
+	const links = [
+		{ label: "Домашняя", icon: "heroicons:home-20-solid", to: "/" },
+	];
+	if (slug) {
+		const category = slug[0];
+		switch (category) {
+			case "info":
+				links.push({
+					label: "Сведения об ОУ",
+					icon: "heroicons:information-circle-20-solid",
+				} as any);
+				break;
+			case "for-parents":
+				links.push({
+					label: "Родителям",
+				} as any);
+				break;
+			default:
+				break;
+		}
+	}
+
+	links.push({
+		label: ast.value?.data.title,
+	} as any);
+
+	return links;
+});
 </script>
 
 <template>
-    <div v-if="ast" :class="`__dynamic_${slug}`">
-        <MarkdownFormatter>
-            <MDCRenderer :body="ast.body" :data="ast.data" />
-        </MarkdownFormatter>
-    </div>
+	<div v-if="ast" :class="`__dynamic_${slug}`" class="mx-auto max-w-[1200px]">
+		<UBreadcrumb class="mb-4" :links="brklinks" />
+		<MarkdownFormatter>
+			<MDCRenderer :body="ast.body" :data="ast.data" />
+		</MarkdownFormatter>
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/pages/_future/blog.vue b/app/pages/_future/blog.vue
new file mode 100644
index 0000000..ac901d4
--- /dev/null
+++ b/app/pages/_future/blog.vue
@@ -0,0 +1,59 @@
+<template>
+	<div class="__blog">
+		<div class="flex place-content-center">
+			<div
+				class="flex h-[60%] w-[60%] flex-col space-y-[2%] rounded-xl border-2 bg-[#fffff] p-[2%] max-[600px]:w-[95%] max-[520px]:w-[90%] max-[370px]:w-[95%]"
+			>
+				<p class="text-5xl font-[500]">Блог</p>
+				<p class="text-xl">
+					Я предполагаю, что здесь должно находиться маленькое
+					описание
+				</p>
+				<label class="relative block">
+					<input
+						class="block w-[25%] rounded-xl border border-slate-300 bg-[#EDEBF0] py-2 pl-[1%] pr-3 shadow-sm placeholder:text-slate-400"
+						placeholder="Поиск"
+						type="text"
+					>
+					<span
+						class="absolute inset-y-0 left-[20%] flex items-center pl-2 max-[1200px]:left-[15%]"
+					>
+						<NuxtImg src="/images/search_icon.svg" />
+					</span>
+				</label>
+			</div>
+		</div>
+		<div class="ml-[20%] mt-8 flex w-[100%] space-x-[3%] overflow-hidden">
+			<div v-for="name in names" :key="name">
+				<author_name :name="name" />
+			</div>
+		</div>
+
+		<div class="mt-8 flex justify-center">
+			<div
+				class="flex w-[62%] flex-wrap justify-center gap-4 max-[1880px]:w-[70%]"
+			>
+				<div v-for="name in names" :key="name">
+					<blog_block :name="name" />
+				</div>
+			</div>
+		</div>
+
+		<div
+			class="mx-auto mt-16 flex w-[404px] space-x-[10px] max-[600px]:w-[300px] max-[600px]:space-x-[5px]"
+		>
+			<div v-for="num in numbers" :key="num">
+				<page_numbers :num="num" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const { data: names } = await useFetch(
+	"https://8b7551eccf282a4d.mokky.dev/names",
+);
+const { data: numbers } = await useFetch(
+	"https://6a1d77422e9b027a.mokky.dev/numbers",
+);
+</script>
diff --git a/app/pages/blog.vue b/app/pages/blog.vue
deleted file mode 100644
index 9db2124..0000000
--- a/app/pages/blog.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <div class="__blog">
-        <div class="flex place-content-center">
-            <div
-                class="w-[60%] h-[60%] border-2 rounded-xl p-[2%] flex flex-col space-y-[2%] bg-[#fffff] max-[370px]:w-[95%] max-[520px]:w-[90%] max-[600px]:w-[95%]"
-            >
-                <p class="text-5xl font-[500]">Блог</p>
-                <p class="text-xl">
-                    Я предполагаю, что здесь должно находиться маленькое
-                    описание
-                </p>
-                <label class="relative block">
-                    <input
-                        class="placeholder:text-slate-400 block bg-[#EDEBF0] w-[25%] border border-slate-300 rounded-xl py-2 pl-[1%] pr-3 shadow-sm"
-                        placeholder="Поиск"
-                        type="text"
-                    />
-                    <span
-                        class="absolute inset-y-0 left-[20%] flex items-center pl-2 max-[1200px]:left-[15%]"
-                    >
-                        <NuxtImg src="/images/search_icon.svg" />
-                    </span>
-                </label>
-            </div>
-        </div>
-        <div class="ml-[20%] mt-8 flex space-x-[3%] w-[100%] overflow-hidden">
-            <div v-for="name in names" :key="name">
-                <author_name :name="name" />
-            </div>
-        </div>
-
-        <div class="mt-8 flex justify-center">
-            <div
-                class="w-[62%] flex flex-wrap justify-center gap-4 max-[1880px]:w-[70%]"
-            >
-                <div v-for="name in names" :key="name">
-                    <blog_block :name="name" />
-                </div>
-            </div>
-        </div>
-
-        <div
-            class="w-[404px] flex space-x-[10px] mx-auto mt-16 max-[600px]:w-[300px] max-[600px]:space-x-[5px]"
-        >
-            <div v-for="num in numbers" :key="num">
-                <page_numbers :num="num" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-const { data: names } = await useFetch(
-    "https://8b7551eccf282a4d.mokky.dev/names"
-);
-const { data: numbers } = await useFetch(
-    "https://6a1d77422e9b027a.mokky.dev/numbers"
-);
-</script>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index a5ede26..783ee1b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,14 +1,26 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+useHead({
+	link: [
+		{
+			rel: "preload",
+			href: "/fonts/akony.ttf",
+			as: "font",
+			type: "font/ttf",
+			crossorigin: "anonymous",
+		},
+	],
+});
+</script>
 
 <template>
-    <div class="__home">
-        <FrontpageHero />
-        <div class="space-y-16">
-            <FrontpageFederalFeedback />
-            <FrontpageReducedNews />
-            <FrontpageLocation />
-        </div>
-    </div>
+	<div class="__home">
+		<FrontpageHero />
+		<div class="space-y-16">
+			<FrontpageFederalFeedback />
+			<FrontpageReducedNews />
+			<FrontpageLocation />
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/pages/login.vue b/app/pages/login.vue
new file mode 100644
index 0000000..10f62a1
--- /dev/null
+++ b/app/pages/login.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from "#vue-router";
+definePageMeta({
+	name: "Авторизация",
+});
+
+const toast = useToast();
+
+const { auth } = useSupabaseClient();
+
+const waitingForRes = ref(false);
+const {
+	query: { callback, message },
+} = useRoute();
+const state = ref<{
+	email: string | undefined;
+	password: string | undefined;
+	error: string | undefined;
+}>({
+	email: undefined,
+	password: undefined,
+	error: undefined,
+});
+const validate = (
+	stateParam: typeof state.value,
+): { path: string; message: string }[] => {
+	const errors = [];
+	if (!stateParam.email)
+		errors.push({ path: "email", message: "Обязательное поле" });
+	if (!stateParam.password)
+		errors.push({ path: "password", message: "Обязательное поле" });
+	return errors;
+};
+
+async function submit() {
+	waitingForRes.value = true;
+	if (!state.value.email || !state.value.password) {
+		return;
+	}
+	const { error } = await auth.signInWithPassword({
+		email: state.value.email,
+		password: state.value.password,
+	});
+	if (!error) {
+		toast.add({
+			id: "auth_event",
+			title: "Вы успешно вошли",
+			icon: "i-heroicons-check-circle",
+			timeout: 3000,
+		});
+		navigateTo(callback ? (callback as RouteLocationRaw) : "/manage");
+		return;
+	}
+	waitingForRes.value = false;
+	console.warn(error.message);
+	switch (error.status) {
+		case 401: {
+			state.value.error = "Неверные данные";
+			break;
+		}
+		default: {
+			toast.add({
+				id: "auth_error",
+				title: "Ошибка авторизации",
+				message: error.message,
+				icon: "i-heroicons-exclamation-circle",
+				timeout: 3000,
+			});
+		}
+	}
+}
+</script>
+
+<template>
+	<section class="__login">
+		<UForm :validate="validate" :state="state" @submit="submit">
+			<UIcon
+				name="clarity:employee-line"
+				class="animate-pulse text-4xl"
+			/>
+			<h1>Вход</h1>
+			<UAlert
+				v-if="message && message !== 'undefined'"
+				icon="i-heroicons-lock-closed"
+				color="primary"
+				variant="subtle"
+				:title="message as string"
+			/>
+			<hr class="w-1/2 opacity-10" />
+			<UFormGroup label="Email" name="email">
+				<UInput v-model="state.email" placeholder="email@example.ru" />
+			</UFormGroup>
+			<UFormGroup label="Пароль" name="password" :error="state.error">
+				<UInput v-model="state.password" type="password" />
+			</UFormGroup>
+			<UButton
+				type="submit"
+				:disabled="!state.email || !state.password"
+				:loading="waitingForRes"
+			>
+				Войти
+			</UButton>
+		</UForm>
+	</section>
+</template>
+
+<style scoped lang="scss">
+.__login {
+	display: flex;
+	justify-content: center;
+	form {
+		--form-width: 36rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+		width: calc(var(--form-width) - 2rem);
+		max-width: 90%;
+		padding: 2rem 1rem;
+		margin: 1rem min(5%, calc((100% - var(--form-width)) / 2));
+		box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5);
+		border-radius: 1rem;
+		h1 {
+			font-weight: 700;
+			font-size: 1.5rem;
+		}
+	}
+}
+</style>
diff --git a/app/pages/logo.vue b/app/pages/logo.vue
deleted file mode 100644
index 88964b2..0000000
--- a/app/pages/logo.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-    name: "Мы ищем логотип",
-});
-</script>
-
-<template>
-    <div class="__logo"/>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/app/pages/manage/auth.vue b/app/pages/manage/auth.vue
deleted file mode 100644
index f37a070..0000000
--- a/app/pages/manage/auth.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-const {
-    public: { tgbot },
-} = useRuntimeConfig();
-
-definePageMeta({
-    title: "Авторизация",
-    middleware: ["auth"],
-    layout: "manage",
-});
-
-const {
-    query: { redirect },
-} = useRoute();
-</script>
-
-<template>
-    <div class="__auth p-8">
-        <UCard>
-            <div class="flex flex-col gap-4 items-center">
-                <h1 class="text-2xl font-semibold text-center">Авторизация</h1>
-                <hr class="opacity-10 w-full max-w-96" >
-                <UAlert
-                    description="Для доступа к инструментам администратора необходимо авторизоваться"
-                    color="primary"
-                    variant="subtle"
-                />
-                <TelegramAuth
-                    :bot="tgbot"
-                    @login="navigateTo(String(redirect) ?? '/manage')"
-                />
-            </div>
-        </UCard>
-    </div>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/app/pages/manage/index.vue b/app/pages/manage/index.vue
index 0d49e20..6844c78 100644
--- a/app/pages/manage/index.vue
+++ b/app/pages/manage/index.vue
@@ -1,77 +1,109 @@
 <script lang="ts" setup>
+import { useClipboard } from "@vueuse/core";
+import type { User } from "@supabase/supabase-js";
+
 definePageMeta({
-    middleware: ["auth"],
-    layout: "manage",
+	layout: "manage",
 });
 
-const { user, logout: clearCredentials } = useTelegramUser();
+const { auth } = useSupabaseClient();
+
+const user = useSupabaseUser();
+
+const { data: perms } = await useFetch<string[] | null>(
+	`/api/user/${(user.value as User).id}/perms`,
+	{
+		headers: useRequestHeaders(["cookie"]),
+	},
+);
 
-const { data: perms } = await useFetch("/api/auth/perms");
+const loggingOut = ref(false);
 
-const logout = () => {
-    clearCredentials();
-    window.location.reload();
+const logout = async () => {
+	loggingOut.value = true;
+	await auth.signOut();
+	window.location.reload();
 };
 
-// Extra protective layer (can be bypassed easily but mainly here to not show the option to devs who don't need it)
-const kvEditors = [5491328220];
+const uid = ref(user.value ? user.value.id : "");
+const { copy, copied, isSupported } = useClipboard({ source: uid.value });
 </script>
 
 <template>
-    <div class="__manage p-4">
-        <UCard v-if="user">
-            <template #header>
-                <div class="flex items-center gap-4">
-                    <UAvatar
-                        :src="user.photo_url"
-                        icon="line-md:account"
-                        size="xl"
-                    />
-                    <div class="flex flex-col">
-                        <h2 class="text-xl">
-                            {{ user.first_name }} {{ user.last_name }}
-                        </h2>
-                        <p class="text-xs opacity-50">
-                            @{{ user.username }} - {{ user.id }}
-                        </p>
-                    </div>
-                    <UButton
-                        class="ml-auto"
-                        icon="line-md:logout"
-                        variant="ghost"
-                        color="white"
-                        size="xl"
-                        @click="logout"
-                    />
-                </div>
-            </template>
-            <DevOnly v-if="kvEditors.includes(user.id)">
-                <ManageOptionKVEditor />
-            </DevOnly>
-            <UAlert
-                v-if="perms.length === 0"
-                title="У вас пока нет доступа ни к одной части сайта"
-                color="yellow"
-                variant="subtle"
-                icon="line-md:alert-loop"
-            >
-                <template #description>
-                    <p class="text-sm">
-                        Чтобы получить права необходимо обратиться к
-                        администратору сайта и сообщить свой ID -
-                        <UBadge variant="subtle" color="yellow">
-                            {{ user.id }}</UBadge
-                        >
-                    </p>
-                </template>
-            </UAlert>
-            <div v-else class="flex flex-col gap-4">
-                <ManageOptionRoot v-if="perms.includes('root')" />
-                <ManageOptionContent v-if="perms.includes('edit_content')" />
-                <ManageOptionFS v-if="perms.includes('fs')" />
-            </div>
-        </UCard>
-    </div>
+	<div v-if="user" class="__manage p-8">
+		<UCard>
+			<template #header>
+				<div class="flex items-center gap-4">
+					<UAvatar
+						v-if="user.user_metadata.avatar_url"
+						:src="user.user_metadata.avatar_url"
+						icon="line-md:account"
+						size="xl"
+					/>
+					<div class="flex justify-between gap-4">
+						<h2
+							v-if="
+								user.user_metadata.first_name &&
+								user.user_metadata.last_name
+							"
+							class="text-xl"
+						>
+							{{ user.user_metadata.first_name }}
+							{{ user.user_metadata.last_name }}
+						</h2>
+						<p v-else>
+							{{ user.email }}
+						</p>
+					</div>
+					<UButton
+						class="ml-auto"
+						:icon="
+							loggingOut
+								? 'svg-spinners:3-dots-scale'
+								: 'line-md:logout'
+						"
+						variant="ghost"
+						color="white"
+						size="xl"
+						@click="logout"
+					/>
+				</div>
+			</template>
+			<div v-if="perms" class="flex flex-col gap-4">
+				<ManageOptionRoot v-if="perms.includes('root')" />
+				<ManageOptionContent v-if="perms.includes('edit_content')" />
+				<ManageOptionFS v-if="perms.includes('fs')" />
+				<UAlert
+					v-if="perms.length === 0"
+					color="yellow"
+					variant="subtle"
+					title="Вам еще не выдали права для работы с системой"
+					icon="mdi:alert-circle-outline"
+				>
+					<template #description>
+						Ваш ID -
+						<UBadge color="yellow" variant="solid"
+							>{{ user.id }}
+							<UButton
+								v-if="isSupported"
+								class="ml-2"
+								:padded="false"
+								variant="link"
+								:icon="
+									copied
+										? 'mdi:check'
+										: 'ic:twotone-content-copy'
+								"
+								color="white"
+								size="xs"
+								@click="copy(user.id)"
+							/>
+						</UBadge>
+					</template>
+				</UAlert>
+			</div>
+		</UCard>
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/pages/manage/learn.vue b/app/pages/manage/learn.vue
index 59788d4..6b9a1f7 100644
--- a/app/pages/manage/learn.vue
+++ b/app/pages/manage/learn.vue
@@ -1,49 +1,60 @@
 <script lang="ts" setup>
 definePageMeta({
-    title: "Ресурсы для редакторов",
-    layout: "manage",
-    middleware: ["auth"],
+	title: "Ресурсы для редакторов",
+	layout: "manage",
 });
 const ytVids: {
-    title: string;
-    url: string;
+	title: string;
+	url: string;
 }[] = [
-    {
-        title: "Ресурсы для редакторов сайта - Часть 1 - Авторизация",
-        url: "https://youtube.com/watch?v=aWsS0d7xpB4",
-    },
+	{
+		title: "Авторизация",
+		url: "https://www.youtube.com/watch?v=KQGNfAvRJcE&list=PL2sSeg_ec3jepkdiiomwD6wfT9sS5eMrb",
+	},
+	{
+		title: "Контент",
+		url: "https://www.youtube.com/watch?v=6Np2jQfdPCc&list=PL2sSeg_ec3jepkdiiomwD6wfT9sS5eMrb&index=2",
+	},
+	{
+		title: "Новости",
+		url: "https://www.youtube.com/watch?v=MaJVLs66kq4&list=PL2sSeg_ec3jepkdiiomwD6wfT9sS5eMrb&index=3",
+	},
+	{
+		title: "Файловая система",
+		url: "https://www.youtube.com/watch?v=EFjb_g_afn0&list=PL2sSeg_ec3jepkdiiomwD6wfT9sS5eMrb&index=4",
+	},
 ];
 const ytID = ({ url }: (typeof ytVids)[number]) =>
-    (url.split("v=")[1] as string).split("?")[0];
+	(url.split("v=")[1] as string).split("?")[0];
 </script>
 
 <template>
-    <div class="__learn p-4 flex flex-col gap-4">
-        <h1 class="text-2xl font-semibold">Ресурсы</h1>
-        <hr class="opacity-10" />
-        <div class="flex flex-wrap gap-2">
-            <UCard
-                v-for="vid in ytVids"
-                :key="vid.url"
-                class="cursor-pointer w-full sm:w-1/2 md:w-1/3 lg:w-1/4"
-                :ui="{ body: { padding: '!px-4 !py-4' } }"
-                @click="navigateTo(vid.url, { external: true })"
-            >
-                <div class="flex flex-col gap-4">
-                    <NuxtImg
-                        style="aspect-ratio: 16/9"
-                        class="w-full object-cover rounded"
-                        :src="`https://i.ytimg.com/vi/${ytID(
-                            vid
-                        )}/sddefault.jpg`"
-                        :alt="vid.title"
-                    />
-                    <hr class="opacity-10" />
-                    <h3 class="text-lg font-semibold">{{ vid.title }}</h3>
-                </div>
-            </UCard>
-        </div>
-    </div>
+	<div class="__learn flex flex-col gap-4 p-4">
+		<h1 class="text-2xl font-semibold">Ресурсы</h1>
+		<hr class="opacity-10" >
+		<div class="flex flex-wrap gap-2">
+			<UCard
+				v-for="vid in ytVids"
+				:key="vid.url"
+				class="w-full cursor-pointer sm:w-1/2 md:w-1/3 lg:w-1/4"
+				:ui="{ body: { padding: '!px-4 !py-4' } }"
+				@click="navigateTo(vid.url, { external: true })"
+			>
+				<div class="flex flex-col gap-4">
+					<NuxtImg
+						style="aspect-ratio: 16/9"
+						class="w-full rounded object-cover"
+						:src="`https://i.ytimg.com/vi/${ytID(
+							vid,
+						)}/sddefault.jpg`"
+						:alt="vid.title"
+					/>
+					<hr class="opacity-10" >
+					<h3 class="text-lg font-semibold">{{ vid.title }}</h3>
+				</div>
+			</UCard>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/app/pages/register/[id].vue b/app/pages/register/[id].vue
new file mode 100644
index 0000000..59cabff
--- /dev/null
+++ b/app/pages/register/[id].vue
@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+definePageMeta({
+	title: "Регистрация",
+	middleware: ["registration"],
+});
+
+const supabase = useSupabaseClient();
+
+const { metadata, id } = useRoute().meta as {
+	metadata: Record<string, string>;
+	id: string;
+};
+
+const toast = useToast();
+
+const email = ref("");
+const password = ref("");
+const passwordConfirm = ref("");
+
+const loading = ref(false);
+
+const router = useRouter();
+
+const step = ref(1);
+
+const register = async () => {
+	loading.value = true;
+	try {
+		await $fetch("/api/auth/registration", {
+			method: "POST",
+			body: {
+				email: email.value,
+				password: password.value,
+			},
+			query: { id },
+		});
+		await supabase.auth.signInWithPassword({
+			email: email.value,
+			password: password.value,
+		});
+		toast.add({
+			color: "green",
+			icon: "mdi:check-circle-outline",
+			title: "Регистрация успешна",
+		});
+		router.push("/manage");
+	} catch (error) {
+		console.error(error as Error);
+		toast.add({
+			color: "red",
+			icon: "mdi:alert-circle-outline",
+			title: "Ошибка регистрации",
+			description: (error as Error).message,
+		});
+	} finally {
+		loading.value = false;
+	}
+};
+</script>
+
+<template>
+	<div class="__register">
+		<UCard v-if="metadata" class="mx-auto max-w-[600px]">
+			<div v-if="step === 1" class="space-y-4">
+				<h1 class="text-2xl font-semibold">
+					{{
+						metadata.first_name
+							? `Добрый день, ${metadata.first_name}!`
+							: `Добрый день!`
+					}}
+				</h1>
+				<hr class="my-4 opacity-10" />
+				<p class="opacity-80">
+					Вас пригласили стать администратором сайта
+				</p>
+				<UButton
+					@click="step++"
+					trailing-icon="mdi:arrow-right"
+					color="white"
+					>Начать регистрацию</UButton
+				>
+			</div>
+			<div v-else-if="step === 2" class="space-y-4">
+				<h1 class="text-2xl font-semibold">
+					Подтвердите правильность данных
+				</h1>
+				<hr class="my-4 opacity-10" />
+				<UCard class="mx-auto max-w-[300px] p-4">
+					<div class="flex flex-col items-center gap-8">
+						<UIcon name="clarity:employee-line" class="text-5xl" />
+						<p class="animate-bounce text-center text-xl">
+							{{ metadata.last_name }} {{ metadata.first_name }}
+							{{ metadata.middle_name }}
+						</p>
+					</div>
+				</UCard>
+				<div class="flex gap-2">
+					<UButton
+						color="white"
+						icon="mdi:arrow-left"
+						@click="step--"
+					/>
+					<UButton
+						@click="step++"
+						trailing-icon="mdi:arrow-right"
+						color="white"
+						>Всё верно</UButton
+					>
+				</div>
+			</div>
+			<div v-else-if="step === 3" class="space-y-4">
+				<h1 class="text-2xl font-semibold">Введите данные для входа</h1>
+				<hr class="my-4 opacity-10" />
+				<UForm @submit="register" class="space-y-4">
+					<UFormGroup label="Почта" required>
+						<UInput
+							id="email"
+							v-model="email"
+							type="email"
+							placeholder="pochta@example.ru"
+						/>
+					</UFormGroup>
+					<UFormGroup label="Пароль" required>
+						<UInput
+							id="password"
+							v-model="password"
+							type="password"
+						/>
+					</UFormGroup>
+					<UFormGroup label="Подтверждение пароля" required>
+						<UInput
+							id="password-confirm"
+							v-model="passwordConfirm"
+							type="password"
+						/>
+					</UFormGroup>
+					<div class="flex gap-2">
+						<UButton
+							color="white"
+							icon="mdi:arrow-left"
+							@click="step--"
+						/>
+						<UButton
+							:loading="loading"
+							:disabled="
+								loading ||
+								!email ||
+								!password ||
+								!passwordConfirm ||
+								password !== passwordConfirm
+							"
+							type="submit"
+							icon="mdi:check"
+							color="white"
+							>Зарегистрироваться</UButton
+						>
+					</div>
+				</UForm>
+			</div>
+		</UCard>
+	</div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/app/types/article.d.ts b/app/types/article.d.ts
index 55f4c59..8e1576c 100644
--- a/app/types/article.d.ts
+++ b/app/types/article.d.ts
@@ -1,7 +1,8 @@
 export interface Article {
-    title: string;
-    image: string;
-    to: string;
-    date: string;
-    customHeight: string;
+	title: string;
+	description?: string;
+	image: string;
+	to: string;
+	date: string;
+	customHeight: string;
 }
diff --git a/app/types/file.d.ts b/app/types/file.d.ts
index 96f851a..adce5fd 100644
--- a/app/types/file.d.ts
+++ b/app/types/file.d.ts
@@ -1,6 +1,6 @@
 export interface File {
-    name: string;
-    size: number;
-    isDirectory: boolean;
-    download?: boolean;
+	name: string;
+	size: number;
+	isDirectory: boolean;
+	download?: boolean;
 }
diff --git a/app/utils/useFS.ts b/app/utils/useFS.ts
index 52d0813..306ce4c 100644
--- a/app/utils/useFS.ts
+++ b/app/utils/useFS.ts
@@ -1,29 +1,31 @@
 export default async (...args: (typeof $fetch)["arguments"]) => {
-    const {
-        public: { file_server_url },
-    } = useRuntimeConfig();
-    const fstoken = useCookie<string | undefined>("fstoken");
-    if (!fstoken.value) {
-        const token = (await $fetch(`/api/auth/fstoken`)) as string;
-        fstoken.value = token;
-    }
-    try {
-        const response = await $fetch(`${file_server_url}${args[0]}`, {
-            ...args[1],
-            headers: {
-                fstoken: fstoken.value,
-            },
-        });
-        return response;
-    } catch (error) {
-        const token = (await $fetch(`/api/auth/fstoken`)) as string;
-        fstoken.value = token;
-        const response = await $fetch(`${file_server_url}${args[0]}`, {
-            ...args[1],
-            headers: {
-                fstoken: fstoken.value,
-            },
-        });
-        return response;
-    }
+	const {
+		public: { file_server_url },
+	} = useRuntimeConfig();
+	const fstoken = useCookie<string | undefined>("fstoken");
+	if (!fstoken.value) {
+		const token = (await $fetch(`/api/auth/fstoken`, {
+			headers: useRequestHeaders(["cookie"]),
+		})) as string;
+		fstoken.value = token;
+	}
+	try {
+		const response = await $fetch(`${file_server_url}${args[0]}`, {
+			...args[1],
+			headers: {
+				fstoken: fstoken.value,
+			},
+		});
+		return response;
+	} catch (error) {
+		const token = (await $fetch(`/api/auth/fstoken`)) as string;
+		fstoken.value = token;
+		const response = await $fetch(`${file_server_url}${args[0]}`, {
+			...args[1],
+			headers: {
+				fstoken: fstoken.value,
+			},
+		});
+		return response;
+	}
 };
diff --git a/app/utils/useFormattedFileSize.ts b/app/utils/useFormattedFileSize.ts
index de5422d..74a8150 100644
--- a/app/utils/useFormattedFileSize.ts
+++ b/app/utils/useFormattedFileSize.ts
@@ -1,10 +1,10 @@
 export default (fileSizeInBytes: number) => {
-    let i = -1;
-    const byteUnits = [" КБ", " МБ", " ГБ", " ТБ", "ПБ", "ЭБ", "ЗБ", "ЙБ"];
-    do {
-        fileSizeInBytes /= 1024;
-        i++;
-    } while (fileSizeInBytes > 1024);
+	let i = -1;
+	const byteUnits = [" КБ", " МБ", " ГБ", " ТБ", "ПБ", "ЭБ", "ЗБ", "ЙБ"];
+	do {
+		fileSizeInBytes /= 1024;
+		i++;
+	} while (fileSizeInBytes > 1024);
 
-    return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
+	return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
 };
diff --git a/app/utils/useFormattedInterval.ts b/app/utils/useFormattedInterval.ts
index 5a2d2c3..ea3c94a 100644
--- a/app/utils/useFormattedInterval.ts
+++ b/app/utils/useFormattedInterval.ts
@@ -1,25 +1,25 @@
 export default (seconds: number) => {
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    const weeks = Math.floor(days / 7);
-    const result = [];
-    if (weeks > 0) {
-        const unit = weeks > 1 ? (weeks > 4 ? "недель" : "недели") : "неделю";
-        result.push(`${weeks} ${unit}`);
-    }
-    if (days > 0) {
-        const unit = days > 1 ? (days > 4 ? "дней" : "дня") : "день";
-        result.push(`${days} ${unit}`);
-    }
-    if (hours > 0) {
-        const unit = hours > 1 ? (hours > 4 ? "часов" : "часа") : "час";
-        result.push(`${hours} ${unit}`);
-    }
-    if (minutes > 0) {
-        const unit =
-            minutes > 1 ? (minutes > 4 ? "минут" : "минуты") : "минуту";
-        result.push(`${minutes} ${unit}`);
-    }
-    return result[0];
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+	const weeks = Math.floor(days / 7);
+	const result = [];
+	if (weeks > 0) {
+		const unit = weeks > 1 ? (weeks > 4 ? "недель" : "недели") : "неделю";
+		result.push(`${weeks} ${unit}`);
+	}
+	if (days > 0) {
+		const unit = days > 1 ? (days > 4 ? "дней" : "дня") : "день";
+		result.push(`${days} ${unit}`);
+	}
+	if (hours > 0) {
+		const unit = hours > 1 ? (hours > 4 ? "часов" : "часа") : "час";
+		result.push(`${hours} ${unit}`);
+	}
+	if (minutes > 0) {
+		const unit =
+			minutes > 1 ? (minutes > 4 ? "минут" : "минуты") : "минуту";
+		result.push(`${minutes} ${unit}`);
+	}
+	return result[0];
 };
diff --git a/app/utils/useKeyToColor.ts b/app/utils/useKeyToColor.ts
index 9aa2138..d59aee5 100644
--- a/app/utils/useKeyToColor.ts
+++ b/app/utils/useKeyToColor.ts
@@ -1,26 +1,26 @@
 export default (str: string) => {
-    const colors = [
-        "red",
-        "orange",
-        "amber",
-        "yellow",
-        "lime",
-        "green",
-        "emerald",
-        "teal",
-        "cyan",
-        "sky",
-        "blue",
-        "indigo",
-        "violet",
-        "purple",
-        "fuchsia",
-        "pink",
-        "rose",
-    ];
-    let hash = 1;
-    for (let i = 0; i < str.length; i++) {
-        hash = (hash + str.charCodeAt(i)) % colors.length;
-    }
-    return colors[hash];
+	const colors = [
+		"red",
+		"orange",
+		"amber",
+		"yellow",
+		"lime",
+		"green",
+		"emerald",
+		"teal",
+		"cyan",
+		"sky",
+		"blue",
+		"indigo",
+		"violet",
+		"purple",
+		"fuchsia",
+		"pink",
+		"rose",
+	] as const;
+	let hash = 1;
+	for (let i = 0; i < str.length; i++) {
+		hash = (hash + str.charCodeAt(i)) % colors.length;
+	}
+	return colors[hash];
 };
diff --git a/bun.lockb b/bun.lockb
index 3167bf8..73c06b1 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/compose.build.preview.yaml b/compose.build.preview.yaml
new file mode 100644
index 0000000..38e2760
--- /dev/null
+++ b/compose.build.preview.yaml
@@ -0,0 +1,21 @@
+name: sch550-build-preview
+
+include:
+  - path: db/compose.yaml # File server
+
+services:
+    uipreview:
+        image: paranoidphantom/school.550:preview
+        build: .
+        restart: unless-stopped
+        volumes:
+            - ./.env.preview:/usr/src/app/.env
+    nginx:
+        image: paranoidphantom/nginx.school.550:latest
+        build: ./nginx
+        restart: unless-stopped
+        ports:
+            - 80:80
+            - 443:443
+        volumes:
+            - /etc/letsencrypt/live:/etc/letsencrypt/live
\ No newline at end of file
diff --git a/compose.build.prod.yaml b/compose.build.prod.yaml
new file mode 100644
index 0000000..53cbeb9
--- /dev/null
+++ b/compose.build.prod.yaml
@@ -0,0 +1,21 @@
+name: sch550-build-prod
+
+include:
+  - path: db/compose.yaml # File server
+
+services:
+    uiprod:
+        image: paranoidphantom/school.550:latest
+        build: .
+        restart: unless-stopped
+        volumes:
+            - ./.env.prod:/usr/src/app/.env
+    nginx:
+        image: paranoidphantom/nginx.school.550:latest
+        build: ./nginx
+        restart: unless-stopped
+        ports:
+            - 80:80
+            - 443:443
+        volumes:
+            - /etc/letsencrypt/live:/etc/letsencrypt/livech
\ No newline at end of file
diff --git a/compose.yaml b/compose.yaml
new file mode 100644
index 0000000..0dbc635
--- /dev/null
+++ b/compose.yaml
@@ -0,0 +1,42 @@
+name: sch550-root
+
+include:
+  - path: db/compose.yaml # File server
+  - path: supabase/compose.yaml # Supabase
+
+services:
+    uiprod:
+        image: paranoidphantom/school.550:latest
+        build: .
+        restart: unless-stopped
+        volumes:
+            - ./.env.master:/usr/src/frontend/.env
+    uipreview:
+        image: paranoidphantom/school.550:preview
+        build: .
+        restart: unless-stopped
+        volumes:
+            - ./.env.dev:/usr/src/frontend/.env
+    nginx:
+        image: paranoidphantom/nginx.school.550:latest
+        build: ./nginx
+        restart: unless-stopped
+        depends_on:
+            - uiprod
+        ports:
+            - 80:80
+            - 443:443
+        volumes:
+          - /etc/letsencrypt:/etc/letsencrypt
+    dozzle:
+      image: amir20/dozzle:latest
+      restart: unless-stopped
+      volumes:
+        - /var/run/docker.sock:/var/run/docker.sock
+      ports:
+        - 8080:8080
+    watchtower:
+      image: containrrr/watchtower
+      volumes:
+        - /var/run/docker.sock:/var/run/docker.sock
+      command: --interval 30
\ No newline at end of file
diff --git a/db/compose.yaml b/db/compose.yaml
index 4a5c7e0..e87ad00 100644
--- a/db/compose.yaml
+++ b/db/compose.yaml
@@ -1,30 +1,28 @@
+name: sch550-fs
 
 services:
-  app:
-    image: paranoidphantom/db.school.550:latest
-    build: .
-    restart: always
-    volumes:
-      - .env:/usr/src/app/.env
-      - storage:/usr/src/app/storage
-  nginx:
-    image: nginx:latest
-    restart: always
-    depends_on:
-      - app
-    ports:
-      - 80:80
-      - 443:443
-    volumes:
-      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
-      - /etc/letsencrypt/live/portaltest.ort.spb.ru/fullchain.pem:/etc/letsencrypt/live/portaltest.ort.spb.ru/fullchain.pem
-      - /etc/letsencrypt/live/portaltest.ort.spb.ru/privkey.pem:/etc/letsencrypt/live/portaltest.ort.spb.ru/privkey.pem
-  watchtower:
-    image: containrrr/watchtower
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-    restart: always
-    command: --interval 30
+    fs:
+        image: paranoidphantom/db.school.550:latest
+        build: .
+        restart: unless-stopped
+        volumes:
+            - .env:/usr/src/app/.env
+            - storage:/usr/src/app/storage
+    fs_ftp:
+        image: delfer/alpine-ftp-server
+        restart: unless-stopped
+        ports:
+            - 21:21
+            - 21000-21010:21000-21010
+        environment:
+            - "ADDRESS=${IP}"
+            - "USERS=${AUTHENTICATION}"
+            - "TLS_CERT=/etc/letsencrypt/live/portaltest.ort.spb.ru/fullchain.pem"
+            - "TLS_KEY=/etc/letsencrypt/live/portaltest.ort.spb.ru/privkey.pem"
+        volumes:
+            - storage:/home/ftp/storage
+            - /etc/letsencrypt/live/portaltest.ort.spb.ru/fullchain.pem:/etc/letsencrypt/live/portaltest.ort.spb.ru/fullchain.pem
+            - /etc/letsencrypt/live/portaltest.ort.spb.ru/privkey.pem:/etc/letsencrypt/live/portaltest.ort.spb.ru/privkey.pem
 
 volumes:
-  storage:
\ No newline at end of file
+    storage:
\ No newline at end of file
diff --git a/db/nginx/nginx.conf b/db/nginx/nginx.conf
deleted file mode 100644
index 983bcc2..0000000
--- a/db/nginx/nginx.conf
+++ /dev/null
@@ -1,68 +0,0 @@
-events {
-	worker_connections 1024;
-}
-
-http {
-	include mime.types;
-	default_type application/octet-stream;
-
-	sendfile on;
-	keepalive_timeout 65;
-
-	client_max_body_size 1000M;
-
-	map $http_origin $cors_origin {
-		default "";
-		"http://127.0.0.1" $http_origin;
-		"http://dev550.vercel.app" $http_origin;
-		"http://sch550.vercel.app" $http_origin;
-		"https://dev550.vercel.app" $http_origin;
-		"https://sch550.vercel.app" $http_origin;
-	}
-
-
-	# HTTP server block
-	server {
-		listen 80;
-		server_name localhost portaltest.ort.spb.ru db.portal.ort.spb.ru;
-
-		# Redirect all HTTP requests to HTTPS
-		location / {
-			return 301 https://$host$request_uri;
-		}
-	}
-
-	# HTTPS server block
-	server {
-		listen 443 ssl;
-		server_name localhost portaltest.ort.spb.ru db.portal.ort.spb.ru;
-
-		# SSL configuration
-		ssl_certificate /etc/letsencrypt/live/portaltest.ort.spb.ru/fullchain.pem;
-		ssl_certificate_key /etc/letsencrypt/live/portaltest.ort.spb.ru/privkey.pem;
-		ssl_protocols TLSv1.2 TLSv1.3;
-		ssl_ciphers HIGH:!aNULL:!MD5;
-		ssl_prefer_server_ciphers on;
-		ssl_session_cache shared:SSL:10m;
-		# Proxy settings
-		location / {
-			# Handle CORS preflight requests
-			if ($request_method = 'OPTIONS') {
-				add_header 'Access-Control-Allow-Origin' $cors_origin;
-				add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
-				add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, fstoken';
-				return 204; # No Content
-			}
-
-			# Handle actual requests
-			proxy_set_header 'Access-Control-Allow-Origin' $cors_origin;
-
-			proxy_pass http://app:3000;
-			proxy_set_header Host $host;
-			proxy_set_header X-Real-IP $remote_addr;
-			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-			proxy_set_header X-Forwarded-Proto $scheme;
-			proxy_set_header fstoken $http_fstoken; # Pass the fstoken header
-		}
-	}
-}
\ No newline at end of file
diff --git a/db/package.json b/db/package.json
index 3918f3b..1f834cc 100644
--- a/db/package.json
+++ b/db/package.json
@@ -17,4 +17,4 @@
 		"bun-types": "latest"
 	},
 	"module": "src/index.js"
-}
\ No newline at end of file
+}
diff --git a/db/src/index.ts b/db/src/index.ts
index 4a8eff2..1131349 100644
--- a/db/src/index.ts
+++ b/db/src/index.ts
@@ -1,12 +1,13 @@
 // File system imports
 import {
-    unlinkSync,
-    readdirSync,
-    statSync,
-    mkdirSync,
-    rmdirSync,
-    existsSync,
-    createWriteStream,
+	unlinkSync,
+	readdirSync,
+	statSync,
+	mkdirSync,
+	rmdirSync,
+	existsSync,
+	chownSync,
+	createWriteStream,
 } from "node:fs";
 import { readdir } from "node:fs/promises";
 import { pipeline } from "node:stream/promises";
@@ -21,215 +22,235 @@ import { jwtVerify } from "jose";
 import archiver from "archiver";
 
 if (!existsSync(join(import.meta.dir, "../", "storage")))
-    mkdirSync(join(import.meta.dir, "../", "storage"));
+	mkdirSync(join(import.meta.dir, "../", "storage"));
 if (!existsSync(join(import.meta.dir, "../", "temp")))
-    mkdirSync(join(import.meta.dir, "../", "temp"));
+	mkdirSync(join(import.meta.dir, "../", "temp"));
 
 const secret = new TextEncoder().encode(Bun.env.FILE_SERVER_SIGNATURE);
 
 const handleError = ({ code, error }: { code: string; error: Error }) => {
-    switch (code) {
-        case "ERR_JWS_INVALID":
-            return "Token invalid";
-        case "ERR_JWT_EXPIRED":
-            return "Token expired";
-        default:
-            console.error(error);
-            return "Internal server error";
-    }
+	switch (code) {
+		case "ERR_JWS_INVALID":
+			return "Token invalid";
+		case "ERR_JWT_EXPIRED":
+			return "Token expired";
+		default:
+			console.error(error);
+			return "Internal server error";
+	}
 };
 
 const app = new Elysia()
-    .use(cors())
-    .onError(handleError)
-    .get("/*", ({ path }) => {
-        path = decodeURI(path);
-        const filePath = `storage${path}`;
-        const file = Bun.file(filePath);
-        const stats = statSync(join(import.meta.dir, "../", filePath));
-        if (stats.isDirectory()) {
-            return new Response("Provided path points to a directory", {
-                status: 404,
-            });
-        }
-        return file;
-    })
-    .onError(handleError)
-    .get("/download/*", async ({ path }) => {
-        path = decodeURI(path);
-        const filePath = `storage${path.split("/download")[1] ?? ""}`;
-        const file = Bun.file(filePath);
-        const stats = statSync(join(import.meta.dir, "../", filePath));
-        if (stats.isDirectory()) {
-            // Cleanup other zips
-            const zips = await readdir(join(import.meta.dir, "../", "temp"));
-            zips.forEach((file) => {
-                if (file.endsWith(".zip")) {
-                    unlinkSync(join(import.meta.dir, "../", "temp", file));
-                }
-            });
+	.use(cors())
+	.onError(handleError)
+	.get("/*", ({ path }) => {
+		path = decodeURI(path);
+		const filePath = `storage${path}`;
+		const file = Bun.file(filePath);
+		try {
+			const stats = statSync(join(import.meta.dir, "../", filePath));
+			if (stats.isDirectory()) {
+				return new Response("Provided path points to a directory", {
+					status: 404,
+				});
+			}
+			return file;
+		} catch (error) {
+			return new Response((error as Error).message, {
+				status: 404,
+			});
+		}
+	})
+	.onError(handleError)
+	.get("/download/*", async ({ path }) => {
+		path = decodeURI(path);
+		const filePath = `storage${path.split("/download")[1] ?? ""}`;
+		const file = Bun.file(filePath);
+		const stats = statSync(join(import.meta.dir, "../", filePath));
+		if (stats.isDirectory()) {
+			// Cleanup other zips
+			const zips = await readdir(join(import.meta.dir, "../", "temp"));
+			zips.forEach((file) => {
+				if (file.endsWith(".zip")) {
+					unlinkSync(join(import.meta.dir, "../", "temp", file));
+				}
+			});
 
-            // Create the write stream
-            const outputPath = `temp/${Date.now()}.zip`;
+			// Create the write stream
+			const outputPath = `temp/${Date.now()}.zip`;
 
-            // read all the files in the current directory
-            const archiveOutput = createWriteStream(
-                join(import.meta.dir, "../", outputPath)
-            );
-            // Create the archive
-            const archive = archiver("zip", {
-                zlib: { level: 9 }, // Sets the compression level.
-            });
-            const pipeProcess = pipeline(archive, archiveOutput);
-            archive.directory(join(import.meta.dir, "../", filePath), false);
-            archive.finalize();
-            await pipeProcess;
-            return new Response(Bun.file(outputPath), {
-                headers: {
-                    "Content-Type": "application/zip",
-                },
-            });
-        } else {
-            return new Response(file, {
-                headers: {
-                    "Content-Type": "application/octet-stream",
-                },
-            });
-        }
-    })
-    .onError(handleError)
-    .get("/list/*", async ({ path }) => {
-        path = decodeURI(path);
-        const folderPath = `storage${path.split("/list")[1] ?? ""}`;
-        const files = readdirSync(join(import.meta.dir, "../", folderPath));
-        return files.map((file) => {
-            const stats = statSync(
-                join(import.meta.dir, "../", folderPath, file)
-            );
-            return {
-                name: file,
-                size: stats.size,
-                isDirectory: stats.isDirectory(),
-            };
-        });
-    })
-    .onError(handleError)
-    .put(
-        "/rename",
-        async ({ body, headers }) => {
-            const { fstoken } = headers;
-            await jwtVerify(fstoken, secret);
+			// read all the files in the current directory
+			const archiveOutput = createWriteStream(
+				join(import.meta.dir, "../", outputPath),
+			);
+			// Create the archive
+			const archive = archiver("zip", {
+				zlib: { level: 9 }, // Sets the compression level.
+			});
+			const pipeProcess = pipeline(archive, archiveOutput);
+			archive.directory(join(import.meta.dir, "../", filePath), false);
+			archive.finalize();
+			await pipeProcess;
+			return new Response(Bun.file(outputPath), {
+				headers: {
+					"Content-Type": "application/zip",
+				},
+			});
+		} else {
+			return new Response(file, {
+				headers: {
+					"Content-Type": "application/octet-stream",
+				},
+			});
+		}
+	})
+	.onError(handleError)
+	.get("/list/*", async ({ path }) => {
+		path = decodeURI(path);
+		const folderPath = `storage${path.split("/list")[1] ?? ""}`;
+		const files = readdirSync(join(import.meta.dir, "../", folderPath));
+		return files.map((file) => {
+			const stats = statSync(
+				join(import.meta.dir, "../", folderPath, file),
+			);
+			return {
+				name: file,
+				size: stats.size,
+				isDirectory: stats.isDirectory(),
+			};
+		});
+	})
+	.onError(handleError)
+	.put(
+		"/rename",
+		async ({ body, headers }) => {
+			const { fstoken } = headers;
+			await jwtVerify(fstoken, secret);
 
-            const { from, to } = body;
+			const { from, to } = body;
 
-            try {
-                const renamingFile = await Bun.file(`storage${from}`);
+			try {
+				const renamingFile = await Bun.file(`storage${from}`);
 
-                await Bun.write(`storage${to}`, renamingFile);
-                unlinkSync(join(import.meta.dir, "../", `storage${from}`));
-            } catch (error) {
-                return new Response((error as Error).message, {
-                    status: 400,
-                });
-            }
-        },
-        {
-            body: t.Object({
-                from: t.String(),
-                to: t.String(),
-            }),
-            headers: t.Object({
-                fstoken: t.String(),
-            }),
-        }
-    )
-    .onError(handleError)
-    .delete(
-        "/*",
-        async ({ path, headers, body }) => {
-            path = decodeURI(path);
-            const { fstoken } = headers;
-            await jwtVerify(fstoken, secret);
+				await Bun.write(`storage${to}`, renamingFile);
+				unlinkSync(join(import.meta.dir, "../", `storage${from}`));
+			} catch (error) {
+				return new Response((error as Error).message, {
+					status: 400,
+				});
+			}
+		},
+		{
+			body: t.Object({
+				from: t.String(),
+				to: t.String(),
+			}),
+			headers: t.Object({
+				fstoken: t.String(),
+			}),
+		},
+	)
+	.onError(handleError)
+	.delete(
+		"/*",
+		async ({ path, headers, body }) => {
+			path = decodeURI(path);
+			const { fstoken } = headers;
+			await jwtVerify(fstoken, secret);
 
-            const folderPath = `storage${path}`;
-            const { files } = body;
-            files.forEach((file) => {
-                const fileInfo = statSync(
-                    join(import.meta.dir, "../", `${folderPath}/${file}`)
-                );
-                if (fileInfo.isDirectory()) {
-                    rmdirSync(
-                        join(import.meta.dir, "../", `${folderPath}/${file}`)
-                    );
-                } else {
-                    unlinkSync(
-                        join(import.meta.dir, "../", `${folderPath}/${file}`)
-                    );
-                }
-            });
-        },
-        {
-            body: t.Object({
-                files: t.Array(t.String()),
-            }),
-            headers: t.Object({
-                fstoken: t.String(),
-            }),
-        }
-    )
-    .onError(handleError)
-    .post(
-        "/*",
-        async ({ path, body, headers }) => {
-            path = decodeURI(path);
-            const { fstoken } = headers;
-            await jwtVerify(fstoken, secret);
-            try {
-                const folderPath = `storage${path}`;
-                const { files } = body;
-                await Promise.all(
-                    files.map((file) =>
-                        Bun.write(`${folderPath}/${file.name}`, file)
-                    )
-                );
-            } catch (error) {
-                return new Response((error as Error).message, {
-                    status: 500,
-                });
-            }
-        },
-        {
-            headers: t.Object({
-                fstoken: t.String(),
-            }),
-            body: t.Object({
-                files: t.Files(),
-            }),
-        }
-    )
-    .onError(handleError)
-    .post(
-        "/directory/*",
-        async ({ path, headers }) => {
-            path = decodeURI(path);
-            const { fstoken } = headers;
-            await jwtVerify(fstoken, secret);
+			const folderPath = `storage${path}`;
+			const { files } = body;
+			files.forEach((file) => {
+				const fileInfo = statSync(
+					join(import.meta.dir, "../", `${folderPath}/${file}`),
+				);
+				if (fileInfo.isDirectory()) {
+					rmdirSync(
+						join(import.meta.dir, "../", `${folderPath}/${file}`),
+					);
+				} else {
+					unlinkSync(
+						join(import.meta.dir, "../", `${folderPath}/${file}`),
+					);
+				}
+			});
+		},
+		{
+			body: t.Object({
+				files: t.Array(t.String()),
+			}),
+			headers: t.Object({
+				fstoken: t.String(),
+			}),
+		},
+	)
+	.onError(handleError)
+	.post(
+		"/*",
+		async ({ path, body, headers }) => {
+			path = decodeURI(path);
+			const { fstoken } = headers;
+			await jwtVerify(fstoken, secret);
+			try {
+				const folderPath = `storage${path}`;
+				const { files } = body;
+				await Promise.all(
+					files.map((file) =>
+						Bun.write(`${folderPath}/${file.name}`, file),
+					),
+				);
+				await Promise.all(
+					files.map((file) =>
+						chownSync(
+							join(
+								import.meta.dir,
+								"../",
+								`${folderPath}/${file.name}`,
+							),
+							1000,
+							1000,
+						),
+					),
+				);
+			} catch (error) {
+				return new Response((error as Error).message, {
+					status: 500,
+				});
+			}
+		},
+		{
+			headers: t.Object({
+				fstoken: t.String(),
+			}),
+			body: t.Object({
+				files: t.Files(),
+			}),
+		},
+	)
+	.onError(handleError)
+	.post(
+		"/directory/*",
+		async ({ path, headers }) => {
+			path = decodeURI(path);
+			const { fstoken } = headers;
+			await jwtVerify(fstoken, secret);
 
-            const folderPath = `storage${path.split("/directory")[1] ?? ""}`;
-            mkdirSync(join(import.meta.dir, "../", `${folderPath}`), {
-                recursive: true,
-            });
-        },
-        {
-            headers: t.Object({
-                fstoken: t.String(),
-            }),
-        }
-    )
-    .listen(3000);
+			const folderPath = `storage${path.split("/directory")[1] ?? ""}`;
+			mkdirSync(join(import.meta.dir, "../", folderPath), {
+				recursive: true,
+			});
+			chownSync(join(import.meta.dir, "../", folderPath), 1000, 1000);
+		},
+		{
+			headers: t.Object({
+				fstoken: t.String(),
+			}),
+		},
+	)
+	.listen(3000);
 
 export type App = typeof app;
 
 console.log(
-    `File server is running at ${app.server?.hostname}:${app.server?.port}`
+	`File server is running at ${app.server?.hostname}:${app.server?.port}`,
 );
diff --git a/db/tsconfig.json b/db/tsconfig.json
index 1ca2350..eb284dc 100644
--- a/db/tsconfig.json
+++ b/db/tsconfig.json
@@ -1,103 +1,105 @@
 {
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig to read more about this file */
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig to read more about this file */
 
-    /* Projects */
-    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
-    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+		/* Projects */
+		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
-    /* Language and Environment */
-    "target": "ES2021",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
-    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
-    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
-    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
-    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
-    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+		/* Language and Environment */
+		"target": "ES2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+		// "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		// "jsx": "preserve",                                /* Specify what JSX code is generated. */
+		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+		// "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+		// "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
-    /* Modules */
-    "module": "ES2022",                                /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    "types": ["bun-types"],                                      /* Specify type package names to be included without being referenced in a source file. */
-    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
-    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+		/* Modules */
+		"module": "ES2022" /* Specify what module code is generated. */,
+		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
+		"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+		"types": [
+			"bun-types"
+		] /* Specify type package names to be included without being referenced in a source file. */,
+		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+		// "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+		// "resolveJsonModule": true,                        /* Enable importing .json files. */
+		// "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
-    /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
-    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
-    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+		/* JavaScript Support */
+		// "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+		// "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
-    /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
-    // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
-    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
-    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
-    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+		/* Emit */
+		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+		// "removeComments": true,                           /* Disable emitting comments. */
+		// "noEmit": true,                                   /* Disable emitting files from a compilation. */
+		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+		// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
+		// "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+		// "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+		// "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 
-    /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+		/* Interop Constraints */
+		// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+		// "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
-    /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+		/* Type Checking */
+		"strict": true /* Enable all strict type-checking options. */,
+		// "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+		// "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+		// "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+		// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+		// "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
 
-    /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
+		/* Completeness */
+		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+		"skipLibCheck": true /* Skip type checking all .d.ts files. */
+	}
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 225bc5f..4b785f2 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,5 @@
 // @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
+import withNuxt from "./.nuxt/eslint.config.mjs";
 
-export default withNuxt(
-	// Your custom configs here
-)
+export default withNuxt();
+// Your custom configs here
diff --git a/modules/md-editor.ts b/modules/md-editor.ts
deleted file mode 100644
index 548758f..0000000
--- a/modules/md-editor.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { addComponent, defineNuxtModule } from "@nuxt/kit";
-
-export default defineNuxtModule({
-    setup() {
-        // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
-        addComponent({
-            name: "MDEditor",
-            export: "MdEditor",
-            filePath: "md-editor-v3",
-        });
-    },
-});
diff --git a/nginx/Dockerfile b/nginx/Dockerfile
new file mode 100644
index 0000000..47b5bb7
--- /dev/null
+++ b/nginx/Dockerfile
@@ -0,0 +1,7 @@
+FROM nginx:mainline-alpine
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+RUN mkdir -p /etc/letsencrypt/live
+
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
new file mode 100644
index 0000000..ee879e3
--- /dev/null
+++ b/nginx/nginx.conf
@@ -0,0 +1,123 @@
+events {
+	worker_connections 1024;
+}
+
+http {
+	include mime.types;
+	default_type application/octet-stream;
+
+
+	sendfile on;
+	keepalive_timeout 65;
+
+	client_max_body_size 1000M;
+
+	map_hash_max_size 32;
+	map_hash_bucket_size 32;
+
+
+	# TLS Enforcement
+	server {
+		listen 80;
+		server_name portal.ort.spb.ru portalstaging.ort.spb.ru portaltest.ort.spb.ru db.portal.ort.spb.ru;
+		# Redirect all HTTP requests to HTTPS
+		location / {
+			return 301 https://$host$request_uri;
+		}
+	}
+	##############################
+	# File server/Supabase block #
+	##############################
+
+	map $http_upgrade $connection_upgrade {
+		default upgrade;
+		'' close;
+	}
+	server {
+		listen 443 ssl;
+		server_name db.portal.ort.spb.ru;
+		# SSL configuration
+		ssl_certificate /etc/letsencrypt/live/db.portal.ort.spb.ru/fullchain.pem;
+		ssl_certificate_key /etc/letsencrypt/live/db.portal.ort.spb.ru/privkey.pem;
+		ssl_protocols TLSv1.2 TLSv1.3;
+		ssl_ciphers HIGH:!aNULL:!MD5;
+		ssl_prefer_server_ciphers on;
+		ssl_session_cache shared:SSL:10m;
+
+		# Supabase
+		location / {
+			proxy_pass http://kong:8000;
+			proxy_set_header Host $host;
+			proxy_set_header X-Real-IP $remote_addr;
+			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+			proxy_set_header X-Forwarded-Proto $scheme;
+		}
+
+		# File server
+		location /_fs {
+			# Handle CORS preflight requests
+			if ($request_method = 'OPTIONS') {
+				add_header 'Access-Control-Allow-Origin' $http_origin;
+				add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
+				add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, fstoken';
+				return 204; # No Content
+			}
+
+			# Remove _fs prefix
+			rewrite ^/_fs/(.*)$ /$1 break;
+
+			# Handle actual requests
+			proxy_pass http://fs:3000;
+			proxy_set_header Host $host;
+			proxy_set_header X-Real-IP $remote_addr;
+			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+			proxy_set_header X-Forwarded-Proto $scheme;
+			proxy_set_header fstoken $http_fstoken; # Pass the fstoken header
+		}
+	}
+	##################
+	# Frontend block #
+	##################
+	# Preview
+	server {
+		listen 443 ssl;
+		server_name portaltest.ort.spb.ru;
+
+		# SSL configuration
+		ssl_certificate /etc/letsencrypt/live/portaltest.ort.spb.ru/fullchain.pem;
+		ssl_certificate_key /etc/letsencrypt/live/portaltest.ort.spb.ru/privkey.pem;
+		ssl_protocols TLSv1.2 TLSv1.3;
+		ssl_ciphers HIGH:!aNULL:!MD5;
+		ssl_prefer_server_ciphers on;
+		ssl_session_cache shared:SSL:10m;
+		# Proxy settings
+		location / {
+			proxy_pass http://uipreview:3000;
+			proxy_set_header Host $host;
+			proxy_set_header X-Real-IP $remote_addr;
+			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+			proxy_set_header X-Forwarded-Proto $scheme;
+		}
+	}
+	# # Production
+	# server {
+	# 	listen 443 ssl;
+	# 	server_name portal.ort.spb.ru;
+
+	# 	# SSL configuration
+	# 	ssl_certificate /etc/letsencrypt/live/portal.ort.spb.ru/fullchain.pem;
+	# 	ssl_certificate_key /etc/letsencrypt/live/portal.ort.spb.ru/privkey.pem;
+	# 	ssl_protocols TLSv1.2 TLSv1.3;
+	# 	ssl_ciphers HIGH:!aNULL:!MD5;
+	# 	ssl_prefer_server_ciphers on;
+	# 	ssl_session_cache shared:SSL:10m;
+	# 	# Proxy settings
+	# 	location / {
+	# 		proxy_pass http://uiprod:3000;
+	# 		proxy_set_header Host $host;
+	# 		proxy_set_header X-Real-IP $remote_addr;
+	# 		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+	# 		proxy_set_header X-Forwarded-Proto $scheme;
+	# 	}
+	# }
+}
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e2d6dbe..a8fd872 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,95 +1,103 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    nitro: {
-        storage: {
-            default: {
-                driver: "cloudflare-kv-http",
-                accountId: process.env.KV_ACCOUND_ID,
-                namespaceId: process.env.KV_NAMESPACE_ID,
-                apiToken: process.env.KV_API_TOKEN,
-            },
-        },
-    },
-
-    devServer: {
-        port: 80,
-        host: "0.0.0.0",
-    },
-
-    devtools: { enabled: true },
-
-    monacoEditor: {
-        // These are default values:
-        locale: "ru",
-    },
-
-    mdc: {
-        headings: {
-            anchorLinks: false,
-        },
-    },
-
-    modules: [
-        "nuxt-aos",
-        "@paranoidphantom/tgauth",
-        "nuxt-monaco-editor",
-        "@nuxt/ui",
-        "@nuxt/fonts",
-        "@nuxt/image",
-        "@nuxt/content",
-        "@nuxt/eslint",
-        "@nuxtjs/seo",
-        "@nuxtjs/mdc",
-        "@nuxtjs/algolia",
-    ],
-
-    image: {
-        // TODO: fix this domain
-        domains: ["db.portaltest.ort.spb.ru"],
-        formats: ["avif", "webp"],
-    },
-
-    routeRules: {
-        "/": { isr: 600 },
-        "/**": { isr: 600 },
-        "/manage/**": { robots: false, isr: false, swr: true },
-    },
-
-    sitemap: {
-        sources: ["/api/sitemap/content"],
-    },
-
-    app: {
-        layoutTransition: { name: "layout", mode: "out-in" },
-        pageTransition: { name: "page", mode: "out-in" },
-    },
-
-    algolia: {
-        instantSearch: {
-            theme: "algolia",
-        },
-    },
-
-    css: ["@/assets/style.scss"],
-
-    site: {
-        url: "https://portal.ort.spb.ru",
-        name: "Школа №550",
-        description: "Официальный портал школы №550",
-        defaultLocale: "ru",
-    },
-
-    future: {
-        compatibilityVersion: 4,
-    },
-
-    runtimeConfig: {
-        public: {
-            tgbot: process.env.TG_BOT,
-            environment: process.env.NODE_ENV,
-            file_server_url: process.env.FILE_SERVER_URL,
-        },
-    },
-
-    compatibilityDate: "2024-07-17",
+	experimental: {
+		componentIslands: true,
+	},
+
+	devServer: {
+		port: 80,
+		host: "0.0.0.0",
+	},
+
+	devtools: { enabled: true },
+
+	monacoEditor: {
+		// These are default values:
+		locale: "ru",
+	},
+
+	mdc: {
+		headings: {
+			anchorLinks: false,
+		},
+	},
+
+	content: {
+		headings: {
+			anchorLinks: false,
+		},
+	},
+
+	modules: [
+		"nuxt-aos",
+		"nuxt-monaco-editor",
+		"@nuxt/ui",
+		"@nuxt/fonts",
+		"@nuxt/image",
+		"@nuxt/eslint",
+		"@nuxtjs/seo",
+		// "@nuxtjs/algolia",
+		"@nuxtjs/mdc",
+		"@nuxtjs/supabase",
+		"@nuxt/content",
+	],
+
+	image: {
+		domains: ["db.portal.ort.spb.ru"],
+		formats: ["avif", "webp"],
+	},
+
+	routeRules: {
+		"/manage/**": { robots: false },
+	},
+
+	sitemap: {
+		sources: ["/api/sitemap/content"],
+	},
+
+	app: {
+		layoutTransition: { name: "layout", mode: "out-in" },
+		pageTransition: { name: "page", mode: "out-in" },
+	},
+
+	// algolia: {
+	// 	instantSearch: {
+	// 		theme: "algolia",
+	// 	},
+	// },
+
+	css: ["./app/assets/style.scss"],
+
+	site: {
+		url: process.env.SITE_URL,
+		name: "Школа №550",
+		description: "Официальный портал школы №550",
+		defaultLocale: "ru",
+	},
+
+	future: {
+		compatibilityVersion: 4,
+	},
+
+	runtimeConfig: {
+		public: {
+			site_url: process.env.SITE_URL,
+			environment: process.env.NODE_ENV,
+			file_server_url: process.env.FILE_SERVER_URL,
+		},
+	},
+
+	supabase: {
+		url: process.env.SUPABASE_PUBLIC_URL,
+		key: process.env.ANON_KEY,
+		serviceKey: process.env.SERVICE_ROLE_KEY,
+		types: "./supabase/types.ts",
+		redirectOptions: {
+			include: ["/manage(/*)?"],
+			login: "/login",
+			callback: "/test",
+		},
+	},
+
+	compatibilityDate: "2024-07-17",
 });
diff --git a/package.json b/package.json
index a2cc2b2..1c985a4 100644
--- a/package.json
+++ b/package.json
@@ -1,54 +1,43 @@
 {
-  "name": "nuxt-app",
-  "devDependencies": {
-    "@iconify-json/akar-icons": "^1.1.26",
-    "@iconify-json/codicon": "^1.1.51",
-    "@iconify-json/entypo-social": "^1.1.9",
-    "@iconify-json/fluent": "^1.1.61",
-    "@iconify-json/heroicons-outline": "^1.1.11",
-    "@iconify-json/icon-park-outline": "^1.1.16",
-    "@iconify-json/line-md": "^1.1.39",
-    "@iconify-json/maki": "^1.1.25",
-    "@iconify-json/material-symbols": "^1.1.86",
-    "@iconify-json/material-symbols-light": "^1.1.26",
-    "@iconify-json/mdi": "^1.1.68",
-    "@iconify-json/ph": "^1.1.14",
-    "@iconify-json/svg-spinners": "^1.1.3",
-    "@nuxt/content": "^2.13.2",
-    "@nuxt/eslint": "^0.4.0",
-    "@nuxt/fonts": "^0.7.1",
-    "@nuxt/image": "^1.7.0",
-    "@nuxt/ui": "^2.18.4",
-    "@nuxtjs/algolia": "^1.10.2",
-    "@nuxtjs/mdc": "^0.8.3",
-    "@nuxtjs/seo": "2.0.0-rc.15",
-    "@paranoidphantom/tgauth": "^1.2.1",
-    "@vercel/kv": "^2.0.0",
-    "@vercel/speed-insights": "^1.0.12",
-    "algoliasearch": "^4.24.0",
-    "jose": "^5.6.3",
-    "monaco-editor": "^0.50.0",
-    "nuxt": "^3.12.4",
-    "nuxt-aos": "1.2.5",
-    "nuxt-monaco-editor": "^1.2.9",
-    "sass": "1.77.8",
-    "vue": "^3.4.36",
-    "vue-router": "^4.4.3"
-  },
-  "private": true,
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "lint": "eslint . --fix"
-  },
-  "trustedDependencies": [
-    "@vercel/speed-insights",
-    "esbuild",
-    "sharp",
-    "vue-demi"
-  ],
-  "type": "module"
+	"name": "nuxt-app",
+	"devDependencies": {
+		"@nuxt/content": "^2.13.2",
+		"@nuxt/eslint": "0.5.5",
+		"@nuxt/fonts": "^0.7.2",
+		"@nuxt/image": "^1.8.0",
+		"@nuxt/ui": "^2.18.4",
+		"@nuxtjs/algolia": "^1.10.2",
+		"@nuxtjs/mdc": "^0.8.3",
+		"@nuxtjs/seo": "2.0.0-rc.20",
+		"@nuxtjs/supabase": "^1.4.0",
+		"algoliasearch": "^5.3.0",
+		"jose": "^5.8.0",
+		"monaco-editor": "0.50.0",
+		"nuxt": "^3.13.2",
+		"nuxt-aos": "1.2.5",
+		"nuxt-monaco-editor": "^1.2.9",
+		"prettier": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.6",
+		"sass": "1.78.0",
+		"vue": "^3.5.4",
+		"vue-router": "^4.4.4"
+	},
+	"private": true,
+	"scripts": {
+		"build": "nuxt build",
+		"dev": "nuxt dev",
+		"generate": "nuxt generate",
+		"preview": "nuxt preview",
+		"postinstall": "nuxt prepare",
+		"lint": "eslint . --fix",
+		"format": "prettier --write .",
+		"supatypes": "export POSTGRES_PASSWORD=$(grep '^POSTGRES_PASSWORD=' .env | cut -d '=' -f2-) && bunx supabase gen types --db-url=\"postgres://postgres:$POSTGRES_PASSWORD@db.portal.ort.spb.ru:5432/postgres\" --schema public > supabase/types.ts",
+		"deploy": "sh -c 'branch=$(git rev-parse --abbrev-ref HEAD) && if [ \"$branch\" = \"dev\" ]; then docker compose -f compose.build.preview.yaml build --push; elif [ \"$branch\" = \"master\" ]; then docker compose -f compose.build.prod.yaml build --push; else echo \"Branch not recognized. No action taken.\"; fi'"
+	},
+	"trustedDependencies": [
+		"esbuild",
+		"sharp",
+		"vue-demi"
+	],
+	"type": "module"
 }
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
index 18993ad..53acb8d 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..53acb8d
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/images/algolia.svg b/public/images/algolia.svg
new file mode 100644
index 0000000..f2cb9d3
--- /dev/null
+++ b/public/images/algolia.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2196.2 500"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-2{fill-rule:evenodd;}</style></defs><path class="cls-2" d="M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"/><rect class="cls-1" x="1845.88" y="104.73" width="62.58" height="277.9" rx="5.9" ry="5.9"/><path class="cls-2" d="M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z"/><path class="cls-2" d="M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"/><path class="cls-2" d="M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z"/><path class="cls-2" d="M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"/><path class="cls-2" d="M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"/><path class="cls-2" d="M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z"/><path class="cls-1" d="M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z"/></svg>
\ No newline at end of file
diff --git a/public/images/gradient.png b/public/images/gradient.png
deleted file mode 100644
index 2746367..0000000
Binary files a/public/images/gradient.png and /dev/null differ
diff --git a/public/images/hero-circle-break.svg b/public/images/hero-circle-break.svg
new file mode 100644
index 0000000..0fd49ce
--- /dev/null
+++ b/public/images/hero-circle-break.svg
@@ -0,0 +1,3 @@
+<svg width="415" height="416" viewBox="0 0 415 416" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.02367 198.071C5.50632 147.073 27.0023 98.8551 63.2747 62.9211C99.5471 26.9872 147.964 5.94413 198.983 3.93964C250.002 1.93515 299.921 19.1147 338.901 52.092C377.881 85.0693 403.093 131.452 409.569 182.098C416.046 232.744 403.315 283.978 373.888 325.703C344.46 367.427 300.47 396.615 250.589 407.513C200.707 418.411 148.553 410.228 104.405 384.577C60.2582 358.927 27.3208 317.67 12.0855 268.937" stroke="white" stroke-opacity="1" stroke-width="3" stroke-linejoin="round" stroke-dasharray="20 20"/>
+</svg>
diff --git a/public/images/hero-circle.svg b/public/images/hero-circle.svg
new file mode 100644
index 0000000..422d33c
--- /dev/null
+++ b/public/images/hero-circle.svg
@@ -0,0 +1,3 @@
+<svg width="938" height="938" viewBox="0 0 938 938" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="469.402" cy="469.403" r="467" stroke="white" stroke-opacity="1" stroke-width="3" stroke-linejoin="round" stroke-dasharray="20 20"/>
+</svg>
diff --git a/public/images/hexagon.svg b/public/images/hexagon.svg
new file mode 100644
index 0000000..2ae10ab
--- /dev/null
+++ b/public/images/hexagon.svg
@@ -0,0 +1,3 @@
+<svg width="58" height="67" viewBox="0 0 58 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.27392 18.8511L28.8353 4.67056L53.3966 18.8511V47.2121L28.8353 61.3926L4.27392 47.2121V18.8511Z" stroke="white" stroke-opacity="0.5" stroke-width="8"/>
+</svg>
diff --git a/public/images/ort.png b/public/images/ort.png
deleted file mode 100644
index 89acc41..0000000
Binary files a/public/images/ort.png and /dev/null differ
diff --git a/public/images/school_compact.png b/public/images/school_compact.png
deleted file mode 100644
index 4b72ea4..0000000
Binary files a/public/images/school_compact.png and /dev/null differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..b898ff9
Binary files /dev/null and b/public/logo.png differ
diff --git a/public/partial.png b/public/partial.png
new file mode 100644
index 0000000..d1fcdb4
Binary files /dev/null and b/public/partial.png differ
diff --git a/server/api/auth/fstoken.get.ts b/server/api/auth/fstoken.get.ts
index 208b73b..4a75dfe 100644
--- a/server/api/auth/fstoken.get.ts
+++ b/server/api/auth/fstoken.get.ts
@@ -1,24 +1,40 @@
+import {
+	serverSupabaseUser,
+	serverSupabaseServiceRole,
+} from "#supabase/server";
 import { SignJWT } from "jose";
+import type { Database } from "~~/supabase/types";
 
 export default defineEventHandler(async (event) => {
-    const { perms } = event.context;
-    if (perms.includes("fs")) {
-        const { user } = event.context;
-        if (user && Object.prototype.hasOwnProperty.call(user, "id")) {
-            const secret = new TextEncoder().encode(
-                process.env.FILE_SERVER_SIGNATURE
-            );
-            const alg = "HS256";
+	const user = await serverSupabaseUser(event);
+	const supabase = serverSupabaseServiceRole<Database>(event);
 
-            const jwt = await new SignJWT()
-                .setProtectedHeader({ alg })
-                .setIssuedAt()
-                .setIssuer("nitro.api")
-                .setAudience(user.id)
-                .setExpirationTime("1h")
-                .sign(secret);
+	if (!user) throw createError({ status: 401, message: "Unauthorized" });
 
-            return jwt;
-        }
-    }
+	const { id: requesterID } = user;
+
+	const { data, error } = await supabase
+		.from("users")
+		.select("perms")
+		.eq("id", requesterID)
+		.maybeSingle();
+	if (error) throw createError(error);
+	if (!data) throw createError({ status: 404, message: "User not found" });
+	let { perms } = data;
+	if (!perms) perms = [];
+	if (!perms?.includes("fs"))
+		throw createError({ status: 403, message: "Forbidden" });
+
+	const secret = new TextEncoder().encode(process.env.FILE_SERVER_SIGNATURE);
+	const alg = "HS256";
+
+	const jwt = await new SignJWT()
+		.setProtectedHeader({ alg })
+		.setIssuedAt()
+		.setIssuer("nitro.api")
+		.setAudience(requesterID)
+		.setExpirationTime("1h")
+		.sign(secret);
+
+	return jwt;
 });
diff --git a/server/api/auth/invitation.ts b/server/api/auth/invitation.ts
new file mode 100644
index 0000000..b277b95
--- /dev/null
+++ b/server/api/auth/invitation.ts
@@ -0,0 +1,60 @@
+import {
+	serverSupabaseUser,
+	serverSupabaseServiceRole,
+} from "#supabase/server";
+import type { Database } from "~~/supabase/types";
+
+export default defineEventHandler(async (event) => {
+	if (!["GET", "POST"].includes(event.method)) {
+		throw createError({
+			statusCode: 405,
+			statusMessage: "Method not allowed",
+		});
+	}
+	const user = await serverSupabaseUser(event);
+	const supabase = serverSupabaseServiceRole<Database>(event);
+
+	if (!user) throw createError({ status: 401, message: "Unauthorized" });
+
+	const { id: requesterID } = user;
+
+	const { data, error } = await supabase
+		.from("users")
+		.select("perms")
+		.eq("id", requesterID)
+		.maybeSingle();
+	if (error) throw createError(error);
+	if (!data) throw createError({ status: 404, message: "User not found" });
+	let { perms } = data;
+	if (!perms) perms = [];
+	if (!perms?.includes("root"))
+		throw createError({ status: 403, message: "Forbidden" });
+
+	switch (event.method) {
+		case "GET": {
+			const { data: invitations, error: invitationsError } =
+				await supabase.from("registration-links").select();
+			if (invitationsError) throw createError(invitationsError);
+			return invitations;
+		}
+		case "POST": {
+			const { metadata, initialPerms } = await readBody(event);
+			const { data: invitation, error: invitationError } = await supabase
+				.from("registration-links")
+				.insert({
+					metadata,
+					"initial-perms": initialPerms,
+				})
+				.select()
+				.maybeSingle();
+			if (invitationError) throw createError(invitationError);
+			if (!invitation)
+				throw createError({
+					status: 500,
+					message:
+						"Invitation was not created and an error was not thrown",
+				});
+			return invitation;
+		}
+	}
+});
diff --git a/server/api/auth/perms.get.ts b/server/api/auth/perms.get.ts
deleted file mode 100644
index 18bfbd4..0000000
--- a/server/api/auth/perms.get.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default defineEventHandler(async (event) => {
-    return event.context.perms;
-});
diff --git a/server/api/auth/registration.ts b/server/api/auth/registration.ts
new file mode 100644
index 0000000..b700283
--- /dev/null
+++ b/server/api/auth/registration.ts
@@ -0,0 +1,89 @@
+import { serverSupabaseServiceRole } from "#supabase/server";
+
+import type { Database } from "~~/supabase/types";
+
+export default defineEventHandler(async (event) => {
+	if (!["GET", "POST"].includes(event.method)) {
+		throw createError({
+			statusCode: 405,
+			statusMessage: "Method not allowed",
+		});
+	}
+
+	const { id } = getQuery(event);
+	if (!id) {
+		throw createError({
+			statusCode: 400,
+			statusMessage: "No ID provided with request",
+		});
+	}
+
+	const supabase = serverSupabaseServiceRole<Database>(event);
+
+	const { data, error } = await supabase
+		.from("registration-links")
+		.select()
+		.eq("id", id)
+		.maybeSingle();
+	if (error) {
+		throw createError({
+			status: 400,
+			message: "Bad credentials",
+		});
+	}
+	if (!data) throw createError({ status: 404, message: "Not found" });
+	if (data.activated_at)
+		throw createError({
+			status: 403,
+			message: "Already activated",
+		});
+
+	switch (event.method) {
+		case "GET": {
+			return data.metadata;
+		}
+		case "POST": {
+			const { email, password } = await readBody(event);
+			if (!email || !password)
+				throw createError({
+					status: 400,
+					message: "Data is incomplete",
+				});
+			const { data: newUser, error: newUserError } =
+				await supabase.auth.admin.createUser({
+					email,
+					password,
+					email_confirm: true,
+					user_metadata: data.metadata as object,
+				});
+			if (newUserError) throw createError(newUserError);
+			if (!newUser)
+				throw createError({
+					status: 500,
+					message: "User was not created and an error was not thrown",
+				});
+
+			const { error: activationError } = await supabase
+				.from("registration-links")
+				.update({ activated_at: new Date().toISOString() })
+				.eq("id", id);
+
+			if (activationError)
+				throw createError({
+					status: 500,
+					message: "Activation error",
+				});
+
+			const perms = data["initial-perms"];
+
+			perms.filter((perm) => perm !== "root");
+
+			await supabase
+				.from("users")
+				.update({
+					perms,
+				})
+				.eq("id", newUser.user.id);
+		}
+	}
+});
diff --git a/server/api/auth/validate.get.ts b/server/api/auth/validate.get.ts
deleted file mode 100644
index 80577db..0000000
--- a/server/api/auth/validate.get.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default defineEventHandler(async (event) => {
-    return event.context.valid;
-});
diff --git a/server/api/content.delete.ts b/server/api/content.delete.ts
deleted file mode 100644
index 5ea469a..0000000
--- a/server/api/content.delete.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Content } from "../types/content";
-
-export default defineEventHandler(async (event) => {
-    // EDIT_CONTENT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("edit_content")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Can't delete content",
-        });
-    }
-    const environment = process.env.NODE_ENV;
-    try {
-        const previousContent =
-            (await storage.getItem<Content[]>(`${environment}_content`)) ?? [];
-        const body = (await readBody(event)) as Content;
-        previousContent.splice(
-            previousContent.findIndex((item) => item.slug === body.slug),
-            1
-        );
-        await storage.setItem(`${environment}_content`, previousContent);
-    } catch (error) {
-        console.error("Error content.delete:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/content.get.ts b/server/api/content.get.ts
deleted file mode 100644
index 60f8b00..0000000
--- a/server/api/content.get.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Content } from "../types/content";
-
-export default defineEventHandler(async (event) => {
-    // EDIT_CONTENT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("edit_content")) {
-        throw createError({
-            statusCode: 403,
-            message: `Cant edit content`,
-        });
-    }
-    const environment = process.env.NODE_ENV;
-    try {
-        const content =
-            (await storage.getItem<Content[]>(`${environment}_content`)) ?? [];
-        return content;
-    } catch (error) {
-        console.error("Error content.get:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/content.post.ts b/server/api/content.post.ts
deleted file mode 100644
index 1e7f128..0000000
--- a/server/api/content.post.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Content } from "../types/content";
-
-export default defineEventHandler(async (event) => {
-    // EDIT_CONTENT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("edit_content")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Can't edit content",
-        });
-    }
-    const environment = process.env.NODE_ENV;
-    try {
-        const previousContent =
-            (await storage.getItem<Content[]>(`${environment}_content`)) ?? [];
-        const body = (await readBody(event)) as Content;
-        for (const content of previousContent) {
-            if (content.slug === body.slug) {
-                return createError({
-                    statusCode: 400,
-                    statusMessage: "Content page already exists",
-                });
-            }
-        }
-        const { id: UID } = await event.context.user;
-        await storage.setItem(`${environment}_content`, [
-            ...previousContent,
-            { ...body, created_by: UID },
-        ]);
-    } catch (error) {
-        console.error("Error content.post:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/content/[...slug].delete.ts b/server/api/content/[...slug].delete.ts
deleted file mode 100644
index a43cf72..0000000
--- a/server/api/content/[...slug].delete.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import algoliasearch from "algoliasearch";
-
-export default defineEventHandler(async (event) => {
-    // EDIT_CONTENT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("edit_content")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Can't delete content",
-        });
-    }
-    try {
-        const { slug } = getRouterParams(event);
-        const environment = process.env.NODE_ENV;
-        await storage.removeItem(`${environment}_content_${slug}`);
-
-        let hash = 0;
-        const keyUnhashed = slug;
-        for (let i = 0; i < keyUnhashed.length; i++) {
-            const chr = keyUnhashed.charCodeAt(i);
-            hash = (hash << 5) - hash + chr;
-            hash |= 0;
-        }
-        await useStorage("cache").removeItem(
-            `nitro:handlers:content:${Math.abs(hash)}.json`
-        );
-
-        const algolia = algoliasearch(
-            process.env.ALGOLIA_APPLICATION_ID as string,
-            process.env.ALGOLIA_API_KEY as string
-        );
-        const index = algolia.initIndex(`pages_${environment}`);
-
-        index.deleteObject(slug);
-    } catch (error) {
-        console.error("Error content/[...slug].delete:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/content/[...slug].get.ts b/server/api/content/[...slug].get.ts
deleted file mode 100644
index 058fadc..0000000
--- a/server/api/content/[...slug].get.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export default defineCachedEventHandler(
-    async (event) => {
-        try {
-            const storage = useStorage(event.context.storage_driver);
-            const { slug } = getRouterParams(event);
-            const environment = process.env.NODE_ENV;
-            const md = await storage.getItem<string>(
-                `${environment}_content_${slug}`
-            );
-            return md;
-        } catch (error) {
-            console.error("Error content/[....get:", error);
-            throw createError(error as Error);
-        }
-    },
-    {
-        name: "content",
-        maxAge: 28800,
-        getKey: (event) => {
-            let hash = 0;
-            const keyUnhashed = getRouterParams(event).slug;
-            for (let i = 0; i < keyUnhashed.length; i++) {
-                const chr = keyUnhashed.charCodeAt(i);
-                hash = (hash << 5) - hash + chr;
-                hash |= 0;
-            }
-            return `${Math.abs(hash)}`;
-        },
-    }
-);
diff --git a/server/api/content/[...slug].put.ts b/server/api/content/[...slug].put.ts
deleted file mode 100644
index 9bc4eac..0000000
--- a/server/api/content/[...slug].put.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import algoliasearch from "algoliasearch";
-
-export default defineEventHandler(async (event) => {
-    // EDIT_CONTENT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("edit_content")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Can't edit content",
-        });
-    }
-    try {
-        const { slug } = getRouterParams(event);
-        const environment = process.env.NODE_ENV;
-        const { md, title, description } = (await readBody(event)) as {
-            title: string;
-            description: string;
-            md: string;
-        };
-        await storage.setItem(`${environment}_content_${slug}`, md);
-
-        let hash = 0;
-        const keyUnhashed = getRouterParams(event).slug;
-        for (let i = 0; i < keyUnhashed.length; i++) {
-            const chr = keyUnhashed.charCodeAt(i);
-            hash = (hash << 5) - hash + chr;
-            hash |= 0;
-        }
-        await useStorage("cache").removeItem(
-            `nitro:handlers:content:${Math.abs(hash)}.json`
-        );
-        const algolia = algoliasearch(
-            process.env.ALGOLIA_APPLICATION_ID as string,
-            process.env.ALGOLIA_API_KEY as string
-        );
-        const index = algolia.initIndex(`pages_${environment}`);
-
-        index.saveObject({
-            objectID: slug,
-            title: title.slice(0, 300),
-            description: description.slice(0, 700),
-            content: md
-                .replaceAll("\n", " ")
-                .replaceAll("-", "")
-                .slice(0, 5000),
-            slug,
-        });
-    } catch (error) {
-        console.error("Error content/[...slug].put:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/content/regsearch.ts b/server/api/content/regsearch.ts
new file mode 100644
index 0000000..d8fbc14
--- /dev/null
+++ b/server/api/content/regsearch.ts
@@ -0,0 +1,63 @@
+import {
+	serverSupabaseUser,
+	serverSupabaseServiceRole,
+} from "#supabase/server";
+import { algoliasearch } from "algoliasearch";
+import type { Database } from "~~/supabase/types";
+
+export default defineEventHandler(async (event) => {
+	if (!["PUT", "DELETE"].includes(event.method))
+		throw createError({ status: 405, message: "Method not allowed" });
+
+	const user = await serverSupabaseUser(event);
+	const supabase = serverSupabaseServiceRole<Database>(event);
+
+	if (!user) throw createError({ status: 401, message: "Unauthorized" });
+
+	const { id: requesterID } = user;
+
+	const { data, error } = await supabase
+		.from("users")
+		.select("perms")
+		.eq("id", requesterID)
+		.maybeSingle();
+	if (error) throw createError(error);
+	if (!data) throw createError({ status: 404, message: "User not found" });
+	let { perms } = data;
+	if (!perms) perms = [];
+	if (!perms?.includes("edit_content"))
+		throw createError({ status: 403, message: "Forbidden" });
+
+	// Update algolia index
+	const algolia = algoliasearch(
+		process.env.ALGOLIA_APPLICATION_ID as string,
+		process.env.ALGOLIA_API_KEY as string,
+	);
+
+	try {
+		if (event.method === "PUT") {
+			const { title, description, md, slug } = await readBody(event);
+			algolia.saveObject({
+				indexName: `pages_production`,
+				body: {
+					objectID: slug,
+					title: title.slice(0, 300),
+					description: description.slice(0, 700),
+					content: md
+						.replaceAll("\n", " ")
+						.replaceAll("-", "")
+						.slice(0, 5000),
+					slug,
+				},
+			});
+		} else if (event.method === "DELETE") {
+			const { slug } = await readBody(event);
+			algolia.deleteObject({
+				indexName: `pages_production`,
+				objectID: slug,
+			});
+		}
+	} catch (error) {
+		throw createError(error as Error);
+	}
+});
diff --git a/server/api/devonly/kv.get.ts b/server/api/devonly/kv.get.ts
deleted file mode 100644
index c268ca5..0000000
--- a/server/api/devonly/kv.get.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default defineEventHandler(async (event) => {
-    if (import.meta.dev) {
-        const storage = useStorage(event.context.storage_driver);
-        const { env, key } = getQuery(event);
-        const data = await storage.getItem(`${env}_${key}`);
-        return data ?? "__undefined__";
-    }
-});
diff --git a/server/api/devonly/kv.put.ts b/server/api/devonly/kv.put.ts
deleted file mode 100644
index 02f0c04..0000000
--- a/server/api/devonly/kv.put.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default defineEventHandler(async (event) => {
-    if (import.meta.dev) {
-        const storage = useStorage(event.context.storage_driver);
-        const { env, key, value } = await readBody(event);
-        await storage.setItem(`${env}_${key}`, value);
-    }
-});
diff --git a/server/api/devonly/snapshot.get.ts b/server/api/devonly/snapshot.get.ts
deleted file mode 100644
index a0f1530..0000000
--- a/server/api/devonly/snapshot.get.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { snapshot } from "unstorage";
-export default defineEventHandler(async (event) => {
-    if (import.meta.dev) {
-        const storage = useStorage(event.context.storage_driver);
-        const data = await snapshot(storage, "");
-        return data;
-    }
-});
diff --git a/server/api/devonly/snapshot.put.ts b/server/api/devonly/snapshot.put.ts
deleted file mode 100644
index 455aad8..0000000
--- a/server/api/devonly/snapshot.put.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { restoreSnapshot } from "unstorage";
-export default defineEventHandler(async (event) => {
-    if (import.meta.dev) {
-        const body = await readBody(event);
-        const storage = useStorage(event.context.storage_driver);
-        await restoreSnapshot(storage, body);
-    }
-});
diff --git a/server/api/roles.get.ts b/server/api/roles.get.ts
deleted file mode 100644
index fea66a0..0000000
--- a/server/api/roles.get.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Role } from "../types/role";
-
-export default defineEventHandler(async (event) => {
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("root")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Forbidden",
-        });
-    }
-    const environment = process.env.NODE_ENV;
-    try {
-        const roles =
-            (await storage.getItem<Role[]>(`${environment}_roles`)) ?? [];
-        return roles;
-    } catch (error) {
-        console.error("Error roles.get:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/roles.post.ts b/server/api/roles.post.ts
deleted file mode 100644
index 283bf8c..0000000
--- a/server/api/roles.post.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Role } from "../types/role";
-
-export default defineEventHandler(async (event) => {
-    // ROOT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("root")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Forbidden",
-        });
-    }
-    const environment = process.env.NODE_ENV;
-    try {
-        const previousRoles =
-            (await storage.getItem<Role[]>(`${environment}_roles`)) ?? [];
-        const body = (await readBody(event)) as Role;
-        for (const role of previousRoles) {
-            if (role.key === body.key) {
-                return createError({
-                    statusCode: 400,
-                    statusMessage: "Role already exists",
-                });
-            }
-        }
-
-        await storage.setItem(`${environment}_roles`, [...previousRoles, body]);
-    } catch (error) {
-        console.error("Error roles.put:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/sitemap/content.ts b/server/api/sitemap/content.ts
deleted file mode 100644
index 76c543b..0000000
--- a/server/api/sitemap/content.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Content } from "../../types/content";
-
-export default defineCachedEventHandler(
-    async (event) => {
-        const storage = useStorage(event.context.storage_driver);
-        const environment = process.env.NODE_ENV;
-        try {
-            const content =
-                (await storage.getItem<Content[]>(`${environment}_content`)) ??
-                [];
-            return content.map((p) =>
-                asSitemapUrl({
-                    loc: p.slug,
-                })
-            );
-        } catch (error) {
-            console.error("Sitemap error:", error);
-        }
-    },
-    {
-        maxAge: 60, // Sitemap cachced for 1 minute
-    }
-);
diff --git a/server/api/user/[id].get.ts b/server/api/user/[id].get.ts
deleted file mode 100644
index 3b22941..0000000
--- a/server/api/user/[id].get.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { User } from "~~/server/types/user";
-
-export default defineEventHandler(async (event) => {
-    const storage = useStorage(event.context.storage_driver);
-    const { id } = getRouterParams(event);
-    const environment = process.env.NODE_ENV;
-    try {
-        const user = await storage.getItem<User>(
-            `${environment}_auth_byid_${id}`
-        );
-        return user;
-    } catch (error) {
-        console.error("Error user/[id].get:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/user/[id]/roles.delete.ts b/server/api/user/[id]/roles.delete.ts
deleted file mode 100644
index d86ffdc..0000000
--- a/server/api/user/[id]/roles.delete.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Role } from "../../../types/role";
-
-export default defineEventHandler(async (event) => {
-    // ROOT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("root")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Forbidden",
-        });
-    }
-    const { id } = getRouterParams(event);
-    const environment = process.env.NODE_ENV;
-    try {
-        const body = (await readBody(event)) as { role: string };
-        const roles =
-            (await storage.getItem<Role["key"][]>(
-                `${environment}_auth_perms_${id}`
-            )) ?? [];
-        if (!roles.includes(body.role)) {
-            return createError({
-                statusCode: 400,
-                statusMessage: "User does not have this role",
-            });
-        }
-        roles.splice(roles.indexOf(body.role), 1);
-        await storage.setItem(`${environment}_auth_perms_${id}`, roles);
-    } catch (error) {
-        console.error("Error user/[id]/roles.delete:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/user/[id]/roles.get.ts b/server/api/user/[id]/roles.get.ts
deleted file mode 100644
index af13998..0000000
--- a/server/api/user/[id]/roles.get.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export default defineEventHandler(async (event) => {
-    // ROOT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("root")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Forbidden",
-        });
-    }
-    const { id } = getRouterParams(event);
-    const environment = process.env.NODE_ENV;
-    try {
-        const roles =
-            (await storage.getItem<string[]>(
-                `${environment}_auth_perms_${id}`
-            )) ?? [];
-        return roles;
-    } catch (error) {
-        console.error("Error user/[id]/roles.get:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/user/[id]/roles.post.ts b/server/api/user/[id]/roles.post.ts
deleted file mode 100644
index 11ec443..0000000
--- a/server/api/user/[id]/roles.post.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Role } from "../../../types/role";
-
-export default defineEventHandler(async (event) => {
-    // ROOT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("root")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Forbidden",
-        });
-    }
-    const { id } = getRouterParams(event);
-    const environment = process.env.NODE_ENV;
-    try {
-        const body = (await readBody(event)) as { role: string };
-        const roles =
-            (await storage.getItem<Role["key"][]>(
-                `${environment}_auth_perms_${id}`
-            )) ?? [];
-        if (roles.includes(body.role)) {
-            return createError({
-                statusCode: 400,
-                statusMessage: "User already has this role",
-            });
-        }
-        await storage.setItem(`${environment}_auth_perms_${id}`, [
-            ...roles,
-            body.role,
-        ]);
-    } catch (error) {
-        console.error("Error user/[id]/roles.post:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/user/[uid]/perms.ts b/server/api/user/[uid]/perms.ts
new file mode 100644
index 0000000..ff788dc
--- /dev/null
+++ b/server/api/user/[uid]/perms.ts
@@ -0,0 +1,90 @@
+import {
+	serverSupabaseUser,
+	serverSupabaseServiceRole,
+} from "#supabase/server";
+import type { Database } from "~~/supabase/types";
+
+export default defineEventHandler(async (event) => {
+	const user = await serverSupabaseUser(event);
+	const supabase = serverSupabaseServiceRole<Database>(event);
+
+	if (!user) throw createError({ status: 401, message: "Unauthorized" });
+
+	const { id: requesterID } = user;
+	const uid = getRouterParam(event, "uid") as string;
+
+	if (requesterID !== uid || event.method !== "GET") {
+		const { data, error } = await supabase
+			.from("users")
+			.select("perms")
+			.eq("id", requesterID)
+			.maybeSingle();
+		if (error) throw createError(error);
+		if (!data)
+			throw createError({ status: 404, message: "User not found" });
+		let { perms } = data;
+		if (!perms) perms = [];
+		if (!perms?.includes("root"))
+			throw createError({ status: 403, message: "Forbidden" });
+	}
+
+	if (!uid) throw createError({ status: 400, message: "No user specified" });
+
+	const { data, error } = await supabase
+		.from("users")
+		.select("perms")
+		.eq("id", uid)
+		.maybeSingle();
+	if (error) throw createError(error);
+	if (!data) throw createError({ status: 404, message: "User not found" });
+	let { perms } = data;
+	if (!perms) perms = [];
+	switch (event.method) {
+		case "GET": {
+			return perms;
+		}
+		case "POST": {
+			const { newPerms } = await readBody(event);
+			if (newPerms.includes("root")) {
+				throw createError({
+					status: 403,
+					message: "Root role is not modifiable",
+				});
+			}
+			perms = perms.concat(newPerms);
+			const { error: writeError } = await supabase
+				.from("users")
+				.update({
+					perms,
+				} as never)
+				.eq("id", uid);
+			if (writeError) throw createError(writeError);
+			return { perms };
+		}
+		case "DELETE": {
+			const { deletePerms } = await readBody(event);
+			if (deletePerms.includes("root")) {
+				throw createError({
+					status: 403,
+					message: "Root role is not modifiable",
+				});
+			}
+			perms = perms.filter((p: string) => !deletePerms.includes(p));
+			const { error: writeError } = await supabase
+				.from("users")
+				.update({
+					perms,
+				} as never)
+				.eq("id", uid);
+			if (writeError) throw createError(writeError);
+			return {
+				perms,
+			};
+		}
+		default:
+			throw createError({
+				status: 405,
+				message: "Method not allowed",
+			});
+	}
+});
diff --git a/server/api/users.get.ts b/server/api/users.get.ts
deleted file mode 100644
index cb64adb..0000000
--- a/server/api/users.get.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { User } from "../types/user";
-
-export default defineEventHandler(async (event) => {
-    // ROOT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("root")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Forbidden",
-        });
-    }
-    const environment = process.env.NODE_ENV;
-    try {
-        const users =
-            (await storage.getItem<User[]>(`${environment}_users`)) ?? [];
-        return users;
-    } catch (error) {
-        console.error("Error users.get:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/api/users.post.ts b/server/api/users.post.ts
deleted file mode 100644
index 0c13c0f..0000000
--- a/server/api/users.post.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { User } from "../types/user";
-
-export default defineEventHandler(async (event) => {
-    // ROOT ONLY
-    const storage = useStorage(event.context.storage_driver);
-    if (!event.context.perms.includes("root")) {
-        throw createError({
-            statusCode: 403,
-            statusMessage: "Forbidden",
-        });
-    }
-    const environment = process.env.NODE_ENV;
-    try {
-        const previousUsers =
-            (await storage.getItem<User[]>(`${environment}_users`)) ?? [];
-        const body = (await readBody(event)) as User;
-        for (const user of previousUsers) {
-            if (user.id === body.id) {
-                return createError({
-                    statusCode: 400,
-                    statusMessage: "User already exists",
-                });
-            }
-        }
-        await storage.setItem(`${environment}_users`, [...previousUsers, body]);
-    } catch (error) {
-        console.error("Error users.post:", error);
-        throw createError(error as Error);
-    }
-});
diff --git a/server/middleware/01.storage.ts b/server/middleware/01.storage.ts
deleted file mode 100644
index 04a96c2..0000000
--- a/server/middleware/01.storage.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default defineEventHandler(async (event) => {
-    event.context.storage_driver = "default";
-});
diff --git a/server/middleware/02.auth.ts b/server/middleware/02.auth.ts
deleted file mode 100644
index 656c79f..0000000
--- a/server/middleware/02.auth.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { serverTelegramUser } from "#tgauth/server";
-
-export default defineEventHandler(async (event) => {
-    // Skip middleware for non-API routes (performance)
-    const storage = useStorage(event.context.storage_driver);
-    const isAPI = event.path.startsWith("/api");
-    const isContent =
-        event.method === "GET" && event.path.match(/^\/api\/content\/(.*)$/);
-
-    if (isAPI && !isContent) {
-        const { valid, user } = await serverTelegramUser(event);
-
-        event.context.perms = [];
-        event.context.valid = valid;
-
-        try {
-            if (valid && user) {
-                // If user is valid
-                event.context.user = user;
-                const environment = process.env.NODE_ENV;
-                // Get user permissions
-                const perms =
-                    (await storage.getItem(
-                        `${environment}_auth_perms_${user.id}`
-                    )) ?? [];
-                event.context.perms = perms;
-
-                storage
-                    .getItem(`${environment}_auth_byid_${user.id}`)
-                    .then(async (userCheck) => {
-                        if (!userCheck) {
-                            // Save user in DB if he just "signed up"
-                            await storage.setItem(
-                                `${environment}_auth_byid_${user.id}`,
-                                user
-                            );
-                        }
-                    });
-            }
-        } catch (error) {
-            console.error("Error auth middleware:", error);
-            throw createError(error as Error);
-        }
-    }
-});
diff --git a/server/tsconfig.json b/server/tsconfig.json
index b9ed69c..d1dabed 100644
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -1,3 +1,3 @@
 {
-  "extends": "../.nuxt/tsconfig.server.json"
+	"extends": "../.nuxt/tsconfig.server.json"
 }
diff --git a/server/types/content.d.ts b/server/types/content.d.ts
deleted file mode 100644
index 4ba4545..0000000
--- a/server/types/content.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Content {
-    slug: string;
-    created_by: number;
-}
diff --git a/server/types/role.d.ts b/server/types/role.d.ts
deleted file mode 100644
index 2d48c22..0000000
--- a/server/types/role.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Role {
-    key: string;
-    description: string;
-}
diff --git a/server/types/user.d.ts b/server/types/user.d.ts
deleted file mode 100644
index a57f15c..0000000
--- a/server/types/user.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface User {
-    id: number;
-    first_name: string;
-    last_name: string;
-    username: string;
-    photo_url: string;
-    auth_date: number;
-}
diff --git a/supabase/.gitignore b/supabase/.gitignore
new file mode 100644
index 0000000..bf4e2af
--- /dev/null
+++ b/supabase/.gitignore
@@ -0,0 +1,5 @@
+volumes/db/data
+volumes/storage
+.env
+test.http
+docker-compose.override.yml
\ No newline at end of file
diff --git a/supabase/.temp/cli-latest b/supabase/.temp/cli-latest
new file mode 100644
index 0000000..4667390
--- /dev/null
+++ b/supabase/.temp/cli-latest
@@ -0,0 +1 @@
+v1.200.3
\ No newline at end of file
diff --git a/supabase/compose.yaml b/supabase/compose.yaml
new file mode 100644
index 0000000..40a73e6
--- /dev/null
+++ b/supabase/compose.yaml
@@ -0,0 +1,419 @@
+name: supabase
+
+services:
+  studio:
+    container_name: supabase-studio
+    image: supabase/studio:20240729-ce42139
+    restart: unless-stopped
+    healthcheck:
+      test:
+        [
+          "CMD",
+          "node",
+          "-e",
+          "require('http').get('http://localhost:3000/api/profile', (r) => {if (r.statusCode !== 200) throw new Error(r.statusCode)})"
+        ]
+      timeout: 5s
+      interval: 5s
+      retries: 3
+    depends_on:
+      analytics:
+        condition: service_healthy
+    environment:
+      STUDIO_PG_META_URL: http://meta:8080
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+
+      DEFAULT_ORGANIZATION_NAME: ${STUDIO_DEFAULT_ORGANIZATION}
+      DEFAULT_PROJECT_NAME: ${STUDIO_DEFAULT_PROJECT}
+
+      SUPABASE_URL: http://kong:8000
+      SUPABASE_PUBLIC_URL: ${SUPABASE_PUBLIC_URL}
+      SUPABASE_ANON_KEY: ${ANON_KEY}
+      SUPABASE_SERVICE_KEY: ${SERVICE_ROLE_KEY}
+      AUTH_JWT_SECRET: ${JWT_SECRET}
+
+      LOGFLARE_API_KEY: ${LOGFLARE_API_KEY}
+      LOGFLARE_URL: http://analytics:4000
+      NEXT_PUBLIC_ENABLE_LOGS: true
+      # Comment to use Big Query backend for analytics
+      NEXT_ANALYTICS_BACKEND_PROVIDER: postgres
+      # Uncomment to use Big Query backend for analytics
+      # NEXT_ANALYTICS_BACKEND_PROVIDER: bigquery
+
+  kong:
+    container_name: supabase-kong
+    image: kong:2.8.1
+    restart: unless-stopped
+    # https://unix.stackexchange.com/a/294837
+    entrypoint: bash -c 'eval "echo \"$$(cat ~/temp.yml)\"" > ~/kong.yml && /docker-entrypoint.sh kong docker-start'
+    depends_on:
+      analytics:
+        condition: service_healthy
+    environment:
+      KONG_DATABASE: "off"
+      KONG_DECLARATIVE_CONFIG: /home/kong/kong.yml
+      # https://github.com/supabase/cli/issues/14
+      KONG_DNS_ORDER: LAST,A,CNAME
+      KONG_PLUGINS: request-transformer,cors,key-auth,acl,basic-auth
+      KONG_NGINX_PROXY_PROXY_BUFFER_SIZE: 160k
+      KONG_NGINX_PROXY_PROXY_BUFFERS: 64 160k
+      SUPABASE_ANON_KEY: ${ANON_KEY}
+      SUPABASE_SERVICE_KEY: ${SERVICE_ROLE_KEY}
+      DASHBOARD_USERNAME: ${DASHBOARD_USERNAME}
+      DASHBOARD_PASSWORD: ${DASHBOARD_PASSWORD}
+    volumes:
+      # https://github.com/supabase/supabase/issues/12661
+      - ./volumes/api/kong.yml:/home/kong/temp.yml:ro
+
+  auth:
+    container_name: supabase-auth
+    image: supabase/gotrue:v2.158.1
+    depends_on:
+      db:
+        # Disable this if you are using an external Postgres database
+        condition: service_healthy
+      analytics:
+        condition: service_healthy
+    healthcheck:
+      test:
+        [
+          "CMD",
+          "wget",
+          "--no-verbose",
+          "--tries=1",
+          "--spider",
+          "http://localhost:9999/health"
+        ]
+      timeout: 5s
+      interval: 5s
+      retries: 3
+    restart: unless-stopped
+    environment:
+      GOTRUE_API_HOST: 0.0.0.0
+      GOTRUE_API_PORT: 9999
+      API_EXTERNAL_URL: ${API_EXTERNAL_URL}
+
+      GOTRUE_DB_DRIVER: postgres
+      GOTRUE_DB_DATABASE_URL: postgres://supabase_auth_admin:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
+
+      GOTRUE_SITE_URL: ${SITE_URL}
+      GOTRUE_URI_ALLOW_LIST: ${ADDITIONAL_REDIRECT_URLS}
+      GOTRUE_DISABLE_SIGNUP: ${DISABLE_SIGNUP}
+
+      GOTRUE_JWT_ADMIN_ROLES: service_role
+      GOTRUE_JWT_AUD: authenticated
+      GOTRUE_JWT_DEFAULT_GROUP_NAME: authenticated
+      GOTRUE_JWT_EXP: ${JWT_EXPIRY}
+      GOTRUE_JWT_SECRET: ${JWT_SECRET}
+
+      GOTRUE_EXTERNAL_EMAIL_ENABLED: ${ENABLE_EMAIL_SIGNUP}
+      GOTRUE_EXTERNAL_ANONYMOUS_USERS_ENABLED: ${ENABLE_ANONYMOUS_USERS}
+      GOTRUE_MAILER_AUTOCONFIRM: ${ENABLE_EMAIL_AUTOCONFIRM}
+      # GOTRUE_MAILER_SECURE_EMAIL_CHANGE_ENABLED: true
+      # GOTRUE_SMTP_MAX_FREQUENCY: 1s
+      GOTRUE_SMTP_ADMIN_EMAIL: ${SMTP_ADMIN_EMAIL}
+      GOTRUE_SMTP_HOST: ${SMTP_HOST}
+      GOTRUE_SMTP_PORT: ${SMTP_PORT}
+      GOTRUE_SMTP_USER: ${SMTP_USER}
+      GOTRUE_SMTP_PASS: ${SMTP_PASS}
+      GOTRUE_SMTP_SENDER_NAME: ${SMTP_SENDER_NAME}
+      GOTRUE_MAILER_URLPATHS_INVITE: ${MAILER_URLPATHS_INVITE}
+      GOTRUE_MAILER_URLPATHS_CONFIRMATION: ${MAILER_URLPATHS_CONFIRMATION}
+      GOTRUE_MAILER_URLPATHS_RECOVERY: ${MAILER_URLPATHS_RECOVERY}
+      GOTRUE_MAILER_URLPATHS_EMAIL_CHANGE: ${MAILER_URLPATHS_EMAIL_CHANGE}
+
+      GOTRUE_EXTERNAL_PHONE_ENABLED: ${ENABLE_PHONE_SIGNUP}
+      GOTRUE_SMS_AUTOCONFIRM: ${ENABLE_PHONE_AUTOCONFIRM}
+      # Uncomment to enable custom access token hook. You'll need to create a public.custom_access_token_hook function and grant necessary permissions.
+      # See: https://supabase.com/docs/guides/auth/auth-hooks#hook-custom-access-token for details
+      # GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_ENABLED="true"
+      # GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_URI="pg-functions://postgres/public/custom_access_token_hook"
+
+      # GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_ENABLED="true"
+      # GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_URI="pg-functions://postgres/public/mfa_verification_attempt"
+
+      # GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_ENABLED="true"
+      # GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_URI="pg-functions://postgres/public/password_verification_attempt"
+
+
+
+
+  rest:
+    container_name: supabase-rest
+    image: postgrest/postgrest:v12.2.0
+    depends_on:
+      db:
+        # Disable this if you are using an external Postgres database
+        condition: service_healthy
+      analytics:
+        condition: service_healthy
+    restart: unless-stopped
+    environment:
+      PGRST_DB_URI: postgres://authenticator:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
+      PGRST_DB_SCHEMAS: ${PGRST_DB_SCHEMAS}
+      PGRST_DB_ANON_ROLE: anon
+      PGRST_JWT_SECRET: ${JWT_SECRET}
+      PGRST_DB_USE_LEGACY_GUCS: "false"
+      PGRST_APP_SETTINGS_JWT_SECRET: ${JWT_SECRET}
+      PGRST_APP_SETTINGS_JWT_EXP: ${JWT_EXPIRY}
+    command: "postgrest"
+
+  realtime:
+    # This container name looks inconsistent but is correct because realtime constructs tenant id by parsing the subdomain
+    container_name: realtime-dev.supabase-realtime
+    image: supabase/realtime:v2.30.34
+    depends_on:
+      db:
+        # Disable this if you are using an external Postgres database
+        condition: service_healthy
+      analytics:
+        condition: service_healthy
+    healthcheck:
+      test:
+        [
+          "CMD",
+          "curl",
+          "-sSfL",
+          "--head",
+          "-o",
+          "/dev/null",
+          "-H",
+          "Authorization: Bearer ${ANON_KEY}",
+          "http://localhost:4000/api/tenants/realtime-dev/health"
+        ]
+      timeout: 5s
+      interval: 5s
+      retries: 3
+    restart: unless-stopped
+    environment:
+      PORT: 4000
+      DB_HOST: ${POSTGRES_HOST}
+      DB_PORT: ${POSTGRES_PORT}
+      DB_USER: supabase_admin
+      DB_PASSWORD: ${POSTGRES_PASSWORD}
+      DB_NAME: ${POSTGRES_DB}
+      DB_AFTER_CONNECT_QUERY: 'SET search_path TO _realtime'
+      DB_ENC_KEY: supabaserealtime
+      API_JWT_SECRET: ${JWT_SECRET}
+      SECRET_KEY_BASE: UpNVntn3cDxHJpq99YMc1T1AQgQpc8kfYTuRgBiYa15BLrx8etQoXz3gZv1/u2oq
+      ERL_AFLAGS: -proto_dist inet_tcp
+      DNS_NODES: "''"
+      RLIMIT_NOFILE: "10000"
+      APP_NAME: realtime
+      SEED_SELF_HOST: true
+
+  # To use S3 backed storage: docker compose -f docker-compose.yml -f docker-compose.s3.yml up
+  storage:
+    container_name: supabase-storage
+    image: supabase/storage-api:v1.10.1
+    depends_on:
+      db:
+        # Disable this if you are using an external Postgres database
+        condition: service_healthy
+      rest:
+        condition: service_started
+      imgproxy:
+        condition: service_started
+    healthcheck:
+      test:
+        [
+          "CMD",
+          "wget",
+          "--no-verbose",
+          "--tries=1",
+          "--spider",
+          "http://localhost:5000/status"
+        ]
+      timeout: 5s
+      interval: 5s
+      retries: 3
+    restart: unless-stopped
+    environment:
+      ANON_KEY: ${ANON_KEY}
+      SERVICE_KEY: ${SERVICE_ROLE_KEY}
+      POSTGREST_URL: http://rest:3000
+      PGRST_JWT_SECRET: ${JWT_SECRET}
+      DATABASE_URL: postgres://supabase_storage_admin:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
+      FILE_SIZE_LIMIT: 52428800
+      STORAGE_BACKEND: file
+      FILE_STORAGE_BACKEND_PATH: /var/lib/storage
+      TENANT_ID: stub
+      # TODO: https://github.com/supabase/storage-api/issues/55
+      REGION: stub
+      GLOBAL_S3_BUCKET: stub
+      ENABLE_IMAGE_TRANSFORMATION: "true"
+      IMGPROXY_URL: http://imgproxy:5001
+    volumes:
+      - ./volumes/storage:/var/lib/storage:z
+
+  imgproxy:
+    container_name: supabase-imgproxy
+    image: darthsim/imgproxy:v3.8.0
+    healthcheck:
+      test: [ "CMD", "imgproxy", "health" ]
+      timeout: 5s
+      interval: 5s
+      retries: 3
+    environment:
+      IMGPROXY_BIND: ":5001"
+      IMGPROXY_LOCAL_FILESYSTEM_ROOT: /
+      IMGPROXY_USE_ETAG: "true"
+      IMGPROXY_ENABLE_WEBP_DETECTION: ${IMGPROXY_ENABLE_WEBP_DETECTION}
+    volumes:
+      - ./volumes/storage:/var/lib/storage:z
+
+  meta:
+    container_name: supabase-meta
+    image: supabase/postgres-meta:v0.83.2
+    depends_on:
+      db:
+        # Disable this if you are using an external Postgres database
+        condition: service_healthy
+      analytics:
+        condition: service_healthy
+    restart: unless-stopped
+    environment:
+      PG_META_PORT: 8080
+      PG_META_DB_HOST: ${POSTGRES_HOST}
+      PG_META_DB_PORT: ${POSTGRES_PORT}
+      PG_META_DB_NAME: ${POSTGRES_DB}
+      PG_META_DB_USER: supabase_admin
+      PG_META_DB_PASSWORD: ${POSTGRES_PASSWORD}
+
+  functions:
+    container_name: supabase-edge-functions
+    image: supabase/edge-runtime:v1.56.1
+    restart: unless-stopped
+    depends_on:
+      analytics:
+        condition: service_healthy
+    environment:
+      JWT_SECRET: ${JWT_SECRET}
+      SUPABASE_URL: http://kong:8000
+      SUPABASE_ANON_KEY: ${ANON_KEY}
+      SUPABASE_SERVICE_ROLE_KEY: ${SERVICE_ROLE_KEY}
+      SUPABASE_DB_URL: postgresql://postgres:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
+      # TODO: Allow configuring VERIFY_JWT per function. This PR might help: https://github.com/supabase/cli/pull/786
+      VERIFY_JWT: "${FUNCTIONS_VERIFY_JWT}"
+    volumes:
+      - ./volumes/functions:/home/deno/functions:Z
+    command:
+      - start
+      - --main-service
+      - /home/deno/functions/main
+
+  analytics:
+    container_name: supabase-analytics
+    image: supabase/logflare:1.4.0
+    healthcheck:
+      test: [ "CMD", "curl", "http://localhost:4000/health" ]
+      timeout: 5s
+      interval: 5s
+      retries: 10
+    restart: unless-stopped
+    depends_on:
+      db:
+        # Disable this if you are using an external Postgres database
+        condition: service_healthy
+    # Uncomment to use Big Query backend for analytics
+    # volumes:
+    #   - type: bind
+    #     source: ${PWD}/gcloud.json
+    #     target: /opt/app/rel/logflare/bin/gcloud.json
+    #     read_only: true
+    environment:
+      LOGFLARE_NODE_HOST: 127.0.0.1
+      DB_USERNAME: supabase_admin
+      DB_DATABASE: ${POSTGRES_DB}
+      DB_HOSTNAME: ${POSTGRES_HOST}
+      DB_PORT: ${POSTGRES_PORT}
+      DB_PASSWORD: ${POSTGRES_PASSWORD}
+      DB_SCHEMA: _analytics
+      LOGFLARE_API_KEY: ${LOGFLARE_API_KEY}
+      LOGFLARE_SINGLE_TENANT: true
+      LOGFLARE_SUPABASE_MODE: true
+      LOGFLARE_MIN_CLUSTER_SIZE: 1
+
+      # Comment variables to use Big Query backend for analytics
+      POSTGRES_BACKEND_URL: postgresql://supabase_admin:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
+      POSTGRES_BACKEND_SCHEMA: _analytics
+      LOGFLARE_FEATURE_FLAG_OVERRIDE: multibackend=true
+      # Uncomment to use Big Query backend for analytics
+      # GOOGLE_PROJECT_ID: ${GOOGLE_PROJECT_ID}
+      # GOOGLE_PROJECT_NUMBER: ${GOOGLE_PROJECT_NUMBER}
+    ports:
+      - 4000:4000
+
+  # Comment out everything below this point if you are using an external Postgres database
+  db:
+    container_name: supabase-db
+    image: supabase/postgres:15.1.1.78
+    healthcheck:
+      test: pg_isready -U postgres -h localhost
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    depends_on:
+      vector:
+        condition: service_healthy
+    command:
+      - postgres
+      - -c
+      - config_file=/etc/postgresql/postgresql.conf
+      - -c
+      - log_min_messages=fatal # prevents Realtime polling queries from appearing in logs
+    restart: unless-stopped
+    ports:
+      # Pass down internal port because it's set dynamically by other services
+      - ${POSTGRES_PORT}:${POSTGRES_PORT}
+    environment:
+      POSTGRES_HOST: /var/run/postgresql
+      PGPORT: ${POSTGRES_PORT}
+      POSTGRES_PORT: ${POSTGRES_PORT}
+      PGPASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      PGDATABASE: ${POSTGRES_DB}
+      POSTGRES_DB: ${POSTGRES_DB}
+      JWT_SECRET: ${JWT_SECRET}
+      JWT_EXP: ${JWT_EXPIRY}
+    volumes:
+      - ./volumes/db/realtime.sql:/docker-entrypoint-initdb.d/migrations/99-realtime.sql:Z
+      # Must be superuser to create event trigger
+      - ./volumes/db/webhooks.sql:/docker-entrypoint-initdb.d/init-scripts/98-webhooks.sql:Z
+      # Must be superuser to alter reserved role
+      - ./volumes/db/roles.sql:/docker-entrypoint-initdb.d/init-scripts/99-roles.sql:Z
+      # Initialize the database settings with JWT_SECRET and JWT_EXP
+      - ./volumes/db/jwt.sql:/docker-entrypoint-initdb.d/init-scripts/99-jwt.sql:Z
+      # PGDATA directory is persisted between restarts
+      - ./volumes/db/data:/var/lib/postgresql/data:Z
+      # Changes required for Analytics support
+      - ./volumes/db/logs.sql:/docker-entrypoint-initdb.d/migrations/99-logs.sql:Z
+      # Use named volume to persist pgsodium decryption key between restarts
+      - db-config:/etc/postgresql-custom
+
+  vector:
+    container_name: supabase-vector
+    image: timberio/vector:0.28.1-alpine
+    healthcheck:
+      test:
+        [
+
+          "CMD",
+          "wget",
+          "--no-verbose",
+          "--tries=1",
+          "--spider",
+          "http://vector:9001/health"
+        ]
+      timeout: 5s
+      interval: 5s
+      retries: 3
+    volumes:
+      - ./volumes/logs/vector.yml:/etc/vector/vector.yml:ro
+      - ${DOCKER_SOCKET_LOCATION}:/var/run/docker.sock:ro
+    environment:
+      LOGFLARE_API_KEY: ${LOGFLARE_API_KEY}
+    command: [ "--config", "etc/vector/vector.yml" ]
+
+volumes:
+  db-config:
\ No newline at end of file
diff --git a/supabase/types.ts b/supabase/types.ts
new file mode 100644
index 0000000..a4447d1
--- /dev/null
+++ b/supabase/types.ts
@@ -0,0 +1,186 @@
+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[]
+
+export type Database = {
+  public: {
+    Tables: {
+      content: {
+        Row: {
+          created_at: string
+          id: number
+          md: string
+          restricted: boolean
+          slug: string
+          updated_at: string
+        }
+        Insert: {
+          created_at?: string
+          id?: number
+          md?: string
+          restricted?: boolean
+          slug: string
+          updated_at?: string
+        }
+        Update: {
+          created_at?: string
+          id?: number
+          md?: string
+          restricted?: boolean
+          slug?: string
+          updated_at?: string
+        }
+        Relationships: []
+      }
+      "registration-links": {
+        Row: {
+          activated_at: string | null
+          created_at: string
+          id: string
+          "initial-perms": string[]
+          metadata: Json
+        }
+        Insert: {
+          activated_at?: string | null
+          created_at?: string
+          id?: string
+          "initial-perms"?: string[]
+          metadata?: Json
+        }
+        Update: {
+          activated_at?: string | null
+          created_at?: string
+          id?: string
+          "initial-perms"?: string[]
+          metadata?: Json
+        }
+        Relationships: []
+      }
+      users: {
+        Row: {
+          created_at: string
+          id: string
+          perms: string[] | null
+        }
+        Insert: {
+          created_at?: string
+          id: string
+          perms?: string[] | null
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          perms?: string[] | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "users_id_fkey"
+            columns: ["id"]
+            isOneToOne: true
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      [_ in never]: never
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+}
+
+type PublicSchema = Database[Extract<keyof Database, "public">]
+
+export type Tables<
+  PublicTableNameOrOptions extends
+    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+        Database[PublicTableNameOrOptions["schema"]]["Views"])
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
+        PublicSchema["Views"])
+    ? (PublicSchema["Tables"] &
+        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
+    : never
+
+export type TablesInsert<
+  PublicTableNameOrOptions extends
+    | keyof PublicSchema["Tables"]
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
+    : never
+
+export type TablesUpdate<
+  PublicTableNameOrOptions extends
+    | keyof PublicSchema["Tables"]
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
+    : never
+
+export type Enums<
+  PublicEnumNameOrOptions extends
+    | keyof PublicSchema["Enums"]
+    | { schema: keyof Database },
+  EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
+    : never = never,
+> = PublicEnumNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
+    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
+    : never
+
diff --git a/supabase/volumes/api/kong.yml b/supabase/volumes/api/kong.yml
new file mode 100644
index 0000000..7abf425
--- /dev/null
+++ b/supabase/volumes/api/kong.yml
@@ -0,0 +1,241 @@
+_format_version: '2.1'
+_transform: true
+
+###
+### Consumers / Users
+###
+consumers:
+  - username: DASHBOARD
+  - username: anon
+    keyauth_credentials:
+      - key: $SUPABASE_ANON_KEY
+  - username: service_role
+    keyauth_credentials:
+      - key: $SUPABASE_SERVICE_KEY
+
+###
+### Access Control List
+###
+acls:
+  - consumer: anon
+    group: anon
+  - consumer: service_role
+    group: admin
+
+###
+### Dashboard credentials
+###
+basicauth_credentials:
+  - consumer: DASHBOARD
+    username: $DASHBOARD_USERNAME
+    password: $DASHBOARD_PASSWORD
+
+###
+### API Routes
+###
+services:
+  ## Open Auth routes
+  - name: auth-v1-open
+    url: http://auth:9999/verify
+    routes:
+      - name: auth-v1-open
+        strip_path: true
+        paths:
+          - /auth/v1/verify
+    plugins:
+      - name: cors
+  - name: auth-v1-open-callback
+    url: http://auth:9999/callback
+    routes:
+      - name: auth-v1-open-callback
+        strip_path: true
+        paths:
+          - /auth/v1/callback
+    plugins:
+      - name: cors
+  - name: auth-v1-open-authorize
+    url: http://auth:9999/authorize
+    routes:
+      - name: auth-v1-open-authorize
+        strip_path: true
+        paths:
+          - /auth/v1/authorize
+    plugins:
+      - name: cors
+
+  ## Secure Auth routes
+  - name: auth-v1
+    _comment: 'GoTrue: /auth/v1/* -> http://auth:9999/*'
+    url: http://auth:9999/
+    routes:
+      - name: auth-v1-all
+        strip_path: true
+        paths:
+          - /auth/v1/
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: false
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+            - anon
+
+  ## Secure REST routes
+  - name: rest-v1
+    _comment: 'PostgREST: /rest/v1/* -> http://rest:3000/*'
+    url: http://rest:3000/
+    routes:
+      - name: rest-v1-all
+        strip_path: true
+        paths:
+          - /rest/v1/
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: true
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+            - anon
+
+  ## Secure GraphQL routes
+  - name: graphql-v1
+    _comment: 'PostgREST: /graphql/v1/* -> http://rest:3000/rpc/graphql'
+    url: http://rest:3000/rpc/graphql
+    routes:
+      - name: graphql-v1-all
+        strip_path: true
+        paths:
+          - /graphql/v1
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: true
+      - name: request-transformer
+        config:
+          add:
+            headers:
+              - Content-Profile:graphql_public
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+            - anon
+
+  ## Secure Realtime routes
+  - name: realtime-v1-ws
+    _comment: 'Realtime: /realtime/v1/* -> ws://realtime:4000/socket/*'
+    url: http://realtime-dev.supabase-realtime:4000/socket
+    protocol: ws
+    routes:
+      - name: realtime-v1-ws
+        strip_path: true
+        paths:
+          - /realtime/v1/
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: false
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+            - anon
+  - name: realtime-v1-rest
+    _comment: 'Realtime: /realtime/v1/* -> ws://realtime:4000/socket/*'
+    url: http://realtime-dev.supabase-realtime:4000/api
+    protocol: http
+    routes:
+      - name: realtime-v1-rest
+        strip_path: true
+        paths:
+          - /realtime/v1/api
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: false
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+            - anon
+  ## Storage routes: the storage server manages its own auth
+  - name: storage-v1
+    _comment: 'Storage: /storage/v1/* -> http://storage:5000/*'
+    url: http://storage:5000/
+    routes:
+      - name: storage-v1-all
+        strip_path: true
+        paths:
+          - /storage/v1/
+    plugins:
+      - name: cors
+
+  ## Edge Functions routes
+  - name: functions-v1
+    _comment: 'Edge Functions: /functions/v1/* -> http://functions:9000/*'
+    url: http://functions:9000/
+    routes:
+      - name: functions-v1-all
+        strip_path: true
+        paths:
+          - /functions/v1/
+    plugins:
+      - name: cors
+
+  ## Analytics routes
+  - name: analytics-v1
+    _comment: 'Analytics: /analytics/v1/* -> http://logflare:4000/*'
+    url: http://analytics:4000/
+    routes:
+      - name: analytics-v1-all
+        strip_path: true
+        paths:
+          - /analytics/v1/
+
+  ## Secure Database routes
+  - name: meta
+    _comment: 'pg-meta: /pg/* -> http://pg-meta:8080/*'
+    url: http://meta:8080/
+    routes:
+      - name: meta-all
+        strip_path: true
+        paths:
+          - /pg/
+    plugins:
+      - name: key-auth
+        config:
+          hide_credentials: false
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+
+  ## Protected Dashboard - catch all remaining routes
+  - name: dashboard
+    _comment: 'Studio: /* -> http://studio:3000/*'
+    url: http://studio:3000/
+    routes:
+      - name: dashboard-all
+        strip_path: true
+        paths:
+          - /
+    plugins:
+      - name: cors
+      - name: basic-auth
+        config:
+          hide_credentials: true
diff --git a/supabase/volumes/db/init/data.sql b/supabase/volumes/db/init/data.sql
new file mode 100755
index 0000000..e69de29
diff --git a/supabase/volumes/db/jwt.sql b/supabase/volumes/db/jwt.sql
new file mode 100644
index 0000000..cfd3b16
--- /dev/null
+++ b/supabase/volumes/db/jwt.sql
@@ -0,0 +1,5 @@
+\set jwt_secret `echo "$JWT_SECRET"`
+\set jwt_exp `echo "$JWT_EXP"`
+
+ALTER DATABASE postgres SET "app.settings.jwt_secret" TO :'jwt_secret';
+ALTER DATABASE postgres SET "app.settings.jwt_exp" TO :'jwt_exp';
diff --git a/supabase/volumes/db/logs.sql b/supabase/volumes/db/logs.sql
new file mode 100644
index 0000000..22fc247
--- /dev/null
+++ b/supabase/volumes/db/logs.sql
@@ -0,0 +1,4 @@
+\set pguser `echo "$POSTGRES_USER"`
+
+create schema if not exists _analytics;
+alter schema _analytics owner to :pguser;
diff --git a/supabase/volumes/db/realtime.sql b/supabase/volumes/db/realtime.sql
new file mode 100644
index 0000000..4d4b9ff
--- /dev/null
+++ b/supabase/volumes/db/realtime.sql
@@ -0,0 +1,4 @@
+\set pguser `echo "$POSTGRES_USER"`
+
+create schema if not exists _realtime;
+alter schema _realtime owner to :pguser;
diff --git a/supabase/volumes/db/roles.sql b/supabase/volumes/db/roles.sql
new file mode 100644
index 0000000..8f7161a
--- /dev/null
+++ b/supabase/volumes/db/roles.sql
@@ -0,0 +1,8 @@
+-- NOTE: change to your own passwords for production environments
+\set pgpass `echo "$POSTGRES_PASSWORD"`
+
+ALTER USER authenticator WITH PASSWORD :'pgpass';
+ALTER USER pgbouncer WITH PASSWORD :'pgpass';
+ALTER USER supabase_auth_admin WITH PASSWORD :'pgpass';
+ALTER USER supabase_functions_admin WITH PASSWORD :'pgpass';
+ALTER USER supabase_storage_admin WITH PASSWORD :'pgpass';
diff --git a/supabase/volumes/db/webhooks.sql b/supabase/volumes/db/webhooks.sql
new file mode 100644
index 0000000..5837b86
--- /dev/null
+++ b/supabase/volumes/db/webhooks.sql
@@ -0,0 +1,208 @@
+BEGIN;
+  -- Create pg_net extension
+  CREATE EXTENSION IF NOT EXISTS pg_net SCHEMA extensions;
+  -- Create supabase_functions schema
+  CREATE SCHEMA supabase_functions AUTHORIZATION supabase_admin;
+  GRANT USAGE ON SCHEMA supabase_functions TO postgres, anon, authenticated, service_role;
+  ALTER DEFAULT PRIVILEGES IN SCHEMA supabase_functions GRANT ALL ON TABLES TO postgres, anon, authenticated, service_role;
+  ALTER DEFAULT PRIVILEGES IN SCHEMA supabase_functions GRANT ALL ON FUNCTIONS TO postgres, anon, authenticated, service_role;
+  ALTER DEFAULT PRIVILEGES IN SCHEMA supabase_functions GRANT ALL ON SEQUENCES TO postgres, anon, authenticated, service_role;
+  -- supabase_functions.migrations definition
+  CREATE TABLE supabase_functions.migrations (
+    version text PRIMARY KEY,
+    inserted_at timestamptz NOT NULL DEFAULT NOW()
+  );
+  -- Initial supabase_functions migration
+  INSERT INTO supabase_functions.migrations (version) VALUES ('initial');
+  -- supabase_functions.hooks definition
+  CREATE TABLE supabase_functions.hooks (
+    id bigserial PRIMARY KEY,
+    hook_table_id integer NOT NULL,
+    hook_name text NOT NULL,
+    created_at timestamptz NOT NULL DEFAULT NOW(),
+    request_id bigint
+  );
+  CREATE INDEX supabase_functions_hooks_request_id_idx ON supabase_functions.hooks USING btree (request_id);
+  CREATE INDEX supabase_functions_hooks_h_table_id_h_name_idx ON supabase_functions.hooks USING btree (hook_table_id, hook_name);
+  COMMENT ON TABLE supabase_functions.hooks IS 'Supabase Functions Hooks: Audit trail for triggered hooks.';
+  CREATE FUNCTION supabase_functions.http_request()
+    RETURNS trigger
+    LANGUAGE plpgsql
+    AS $function$
+    DECLARE
+      request_id bigint;
+      payload jsonb;
+      url text := TG_ARGV[0]::text;
+      method text := TG_ARGV[1]::text;
+      headers jsonb DEFAULT '{}'::jsonb;
+      params jsonb DEFAULT '{}'::jsonb;
+      timeout_ms integer DEFAULT 1000;
+    BEGIN
+      IF url IS NULL OR url = 'null' THEN
+        RAISE EXCEPTION 'url argument is missing';
+      END IF;
+
+      IF method IS NULL OR method = 'null' THEN
+        RAISE EXCEPTION 'method argument is missing';
+      END IF;
+
+      IF TG_ARGV[2] IS NULL OR TG_ARGV[2] = 'null' THEN
+        headers = '{"Content-Type": "application/json"}'::jsonb;
+      ELSE
+        headers = TG_ARGV[2]::jsonb;
+      END IF;
+
+      IF TG_ARGV[3] IS NULL OR TG_ARGV[3] = 'null' THEN
+        params = '{}'::jsonb;
+      ELSE
+        params = TG_ARGV[3]::jsonb;
+      END IF;
+
+      IF TG_ARGV[4] IS NULL OR TG_ARGV[4] = 'null' THEN
+        timeout_ms = 1000;
+      ELSE
+        timeout_ms = TG_ARGV[4]::integer;
+      END IF;
+
+      CASE
+        WHEN method = 'GET' THEN
+          SELECT http_get INTO request_id FROM net.http_get(
+            url,
+            params,
+            headers,
+            timeout_ms
+          );
+        WHEN method = 'POST' THEN
+          payload = jsonb_build_object(
+            'old_record', OLD,
+            'record', NEW,
+            'type', TG_OP,
+            'table', TG_TABLE_NAME,
+            'schema', TG_TABLE_SCHEMA
+          );
+
+          SELECT http_post INTO request_id FROM net.http_post(
+            url,
+            payload,
+            params,
+            headers,
+            timeout_ms
+          );
+        ELSE
+          RAISE EXCEPTION 'method argument % is invalid', method;
+      END CASE;
+
+      INSERT INTO supabase_functions.hooks
+        (hook_table_id, hook_name, request_id)
+      VALUES
+        (TG_RELID, TG_NAME, request_id);
+
+      RETURN NEW;
+    END
+  $function$;
+  -- Supabase super admin
+  DO
+  $$
+  BEGIN
+    IF NOT EXISTS (
+      SELECT 1
+      FROM pg_roles
+      WHERE rolname = 'supabase_functions_admin'
+    )
+    THEN
+      CREATE USER supabase_functions_admin NOINHERIT CREATEROLE LOGIN NOREPLICATION;
+    END IF;
+  END
+  $$;
+  GRANT ALL PRIVILEGES ON SCHEMA supabase_functions TO supabase_functions_admin;
+  GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA supabase_functions TO supabase_functions_admin;
+  GRANT ALL PRIVILEGES ON ALL SEQUENCES IN SCHEMA supabase_functions TO supabase_functions_admin;
+  ALTER USER supabase_functions_admin SET search_path = "supabase_functions";
+  ALTER table "supabase_functions".migrations OWNER TO supabase_functions_admin;
+  ALTER table "supabase_functions".hooks OWNER TO supabase_functions_admin;
+  ALTER function "supabase_functions".http_request() OWNER TO supabase_functions_admin;
+  GRANT supabase_functions_admin TO postgres;
+  -- Remove unused supabase_pg_net_admin role
+  DO
+  $$
+  BEGIN
+    IF EXISTS (
+      SELECT 1
+      FROM pg_roles
+      WHERE rolname = 'supabase_pg_net_admin'
+    )
+    THEN
+      REASSIGN OWNED BY supabase_pg_net_admin TO supabase_admin;
+      DROP OWNED BY supabase_pg_net_admin;
+      DROP ROLE supabase_pg_net_admin;
+    END IF;
+  END
+  $$;
+  -- pg_net grants when extension is already enabled
+  DO
+  $$
+  BEGIN
+    IF EXISTS (
+      SELECT 1
+      FROM pg_extension
+      WHERE extname = 'pg_net'
+    )
+    THEN
+      GRANT USAGE ON SCHEMA net TO supabase_functions_admin, postgres, anon, authenticated, service_role;
+      ALTER function net.http_get(url text, params jsonb, headers jsonb, timeout_milliseconds integer) SECURITY DEFINER;
+      ALTER function net.http_post(url text, body jsonb, params jsonb, headers jsonb, timeout_milliseconds integer) SECURITY DEFINER;
+      ALTER function net.http_get(url text, params jsonb, headers jsonb, timeout_milliseconds integer) SET search_path = net;
+      ALTER function net.http_post(url text, body jsonb, params jsonb, headers jsonb, timeout_milliseconds integer) SET search_path = net;
+      REVOKE ALL ON FUNCTION net.http_get(url text, params jsonb, headers jsonb, timeout_milliseconds integer) FROM PUBLIC;
+      REVOKE ALL ON FUNCTION net.http_post(url text, body jsonb, params jsonb, headers jsonb, timeout_milliseconds integer) FROM PUBLIC;
+      GRANT EXECUTE ON FUNCTION net.http_get(url text, params jsonb, headers jsonb, timeout_milliseconds integer) TO supabase_functions_admin, postgres, anon, authenticated, service_role;
+      GRANT EXECUTE ON FUNCTION net.http_post(url text, body jsonb, params jsonb, headers jsonb, timeout_milliseconds integer) TO supabase_functions_admin, postgres, anon, authenticated, service_role;
+    END IF;
+  END
+  $$;
+  -- Event trigger for pg_net
+  CREATE OR REPLACE FUNCTION extensions.grant_pg_net_access()
+  RETURNS event_trigger
+  LANGUAGE plpgsql
+  AS $$
+  BEGIN
+    IF EXISTS (
+      SELECT 1
+      FROM pg_event_trigger_ddl_commands() AS ev
+      JOIN pg_extension AS ext
+      ON ev.objid = ext.oid
+      WHERE ext.extname = 'pg_net'
+    )
+    THEN
+      GRANT USAGE ON SCHEMA net TO supabase_functions_admin, postgres, anon, authenticated, service_role;
+      ALTER function net.http_get(url text, params jsonb, headers jsonb, timeout_milliseconds integer) SECURITY DEFINER;
+      ALTER function net.http_post(url text, body jsonb, params jsonb, headers jsonb, timeout_milliseconds integer) SECURITY DEFINER;
+      ALTER function net.http_get(url text, params jsonb, headers jsonb, timeout_milliseconds integer) SET search_path = net;
+      ALTER function net.http_post(url text, body jsonb, params jsonb, headers jsonb, timeout_milliseconds integer) SET search_path = net;
+      REVOKE ALL ON FUNCTION net.http_get(url text, params jsonb, headers jsonb, timeout_milliseconds integer) FROM PUBLIC;
+      REVOKE ALL ON FUNCTION net.http_post(url text, body jsonb, params jsonb, headers jsonb, timeout_milliseconds integer) FROM PUBLIC;
+      GRANT EXECUTE ON FUNCTION net.http_get(url text, params jsonb, headers jsonb, timeout_milliseconds integer) TO supabase_functions_admin, postgres, anon, authenticated, service_role;
+      GRANT EXECUTE ON FUNCTION net.http_post(url text, body jsonb, params jsonb, headers jsonb, timeout_milliseconds integer) TO supabase_functions_admin, postgres, anon, authenticated, service_role;
+    END IF;
+  END;
+  $$;
+  COMMENT ON FUNCTION extensions.grant_pg_net_access IS 'Grants access to pg_net';
+  DO
+  $$
+  BEGIN
+    IF NOT EXISTS (
+      SELECT 1
+      FROM pg_event_trigger
+      WHERE evtname = 'issue_pg_net_access'
+    ) THEN
+      CREATE EVENT TRIGGER issue_pg_net_access ON ddl_command_end WHEN TAG IN ('CREATE EXTENSION')
+      EXECUTE PROCEDURE extensions.grant_pg_net_access();
+    END IF;
+  END
+  $$;
+  INSERT INTO supabase_functions.migrations (version) VALUES ('20210809183423_update_grants');
+  ALTER function supabase_functions.http_request() SECURITY DEFINER;
+  ALTER function supabase_functions.http_request() SET search_path = supabase_functions;
+  REVOKE ALL ON FUNCTION supabase_functions.http_request() FROM PUBLIC;
+  GRANT EXECUTE ON FUNCTION supabase_functions.http_request() TO postgres, anon, authenticated, service_role;
+COMMIT;
diff --git a/supabase/volumes/functions/hello/index.ts b/supabase/volumes/functions/hello/index.ts
new file mode 100644
index 0000000..f1e20b9
--- /dev/null
+++ b/supabase/volumes/functions/hello/index.ts
@@ -0,0 +1,16 @@
+// Follow this setup guide to integrate the Deno language server with your editor:
+// https://deno.land/manual/getting_started/setup_your_environment
+// This enables autocomplete, go to definition, etc.
+
+import { serve } from "https://deno.land/std@0.177.1/http/server.ts"
+
+serve(async () => {
+  return new Response(
+    `"Hello from Edge Functions!"`,
+    { headers: { "Content-Type": "application/json" } },
+  )
+})
+
+// To invoke:
+// curl 'http://localhost:<KONG_HTTP_PORT>/functions/v1/hello' \
+//   --header 'Authorization: Bearer <anon/service_role API key>'
diff --git a/supabase/volumes/functions/main/index.ts b/supabase/volumes/functions/main/index.ts
new file mode 100644
index 0000000..a094010
--- /dev/null
+++ b/supabase/volumes/functions/main/index.ts
@@ -0,0 +1,94 @@
+import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'
+import * as jose from 'https://deno.land/x/jose@v4.14.4/index.ts'
+
+console.log('main function started')
+
+const JWT_SECRET = Deno.env.get('JWT_SECRET')
+const VERIFY_JWT = Deno.env.get('VERIFY_JWT') === 'true'
+
+function getAuthToken(req: Request) {
+  const authHeader = req.headers.get('authorization')
+  if (!authHeader) {
+    throw new Error('Missing authorization header')
+  }
+  const [bearer, token] = authHeader.split(' ')
+  if (bearer !== 'Bearer') {
+    throw new Error(`Auth header is not 'Bearer {token}'`)
+  }
+  return token
+}
+
+async function verifyJWT(jwt: string): Promise<boolean> {
+  const encoder = new TextEncoder()
+  const secretKey = encoder.encode(JWT_SECRET)
+  try {
+    await jose.jwtVerify(jwt, secretKey)
+  } catch (err) {
+    console.error(err)
+    return false
+  }
+  return true
+}
+
+serve(async (req: Request) => {
+  if (req.method !== 'OPTIONS' && VERIFY_JWT) {
+    try {
+      const token = getAuthToken(req)
+      const isValidJWT = await verifyJWT(token)
+
+      if (!isValidJWT) {
+        return new Response(JSON.stringify({ msg: 'Invalid JWT' }), {
+          status: 401,
+          headers: { 'Content-Type': 'application/json' },
+        })
+      }
+    } catch (e) {
+      console.error(e)
+      return new Response(JSON.stringify({ msg: e.toString() }), {
+        status: 401,
+        headers: { 'Content-Type': 'application/json' },
+      })
+    }
+  }
+
+  const url = new URL(req.url)
+  const { pathname } = url
+  const path_parts = pathname.split('/')
+  const service_name = path_parts[1]
+
+  if (!service_name || service_name === '') {
+    const error = { msg: 'missing function name in request' }
+    return new Response(JSON.stringify(error), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  const servicePath = `/home/deno/functions/${service_name}`
+  console.error(`serving the request with ${servicePath}`)
+
+  const memoryLimitMb = 150
+  const workerTimeoutMs = 1 * 60 * 1000
+  const noModuleCache = false
+  const importMapPath = null
+  const envVarsObj = Deno.env.toObject()
+  const envVars = Object.keys(envVarsObj).map((k) => [k, envVarsObj[k]])
+
+  try {
+    const worker = await EdgeRuntime.userWorkers.create({
+      servicePath,
+      memoryLimitMb,
+      workerTimeoutMs,
+      noModuleCache,
+      importMapPath,
+      envVars,
+    })
+    return await worker.fetch(req)
+  } catch (e) {
+    const error = { msg: e.toString() }
+    return new Response(JSON.stringify(error), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+})
diff --git a/supabase/volumes/logs/vector.yml b/supabase/volumes/logs/vector.yml
new file mode 100644
index 0000000..5e9675b
--- /dev/null
+++ b/supabase/volumes/logs/vector.yml
@@ -0,0 +1,232 @@
+api:
+  enabled: true
+  address: 0.0.0.0:9001
+
+sources:
+  docker_host:
+    type: docker_logs
+    exclude_containers:
+      - supabase-vector
+
+transforms:
+  project_logs:
+    type: remap
+    inputs:
+      - docker_host
+    source: |-
+      .project = "default"
+      .event_message = del(.message)
+      .appname = del(.container_name)
+      del(.container_created_at)
+      del(.container_id)
+      del(.source_type)
+      del(.stream)
+      del(.label)
+      del(.image)
+      del(.host)
+      del(.stream)
+  router:
+    type: route
+    inputs:
+      - project_logs
+    route:
+      kong: '.appname == "supabase-kong"'
+      auth: '.appname == "supabase-auth"'
+      rest: '.appname == "supabase-rest"'
+      realtime: '.appname == "supabase-realtime"'
+      storage: '.appname == "supabase-storage"'
+      functions: '.appname == "supabase-functions"'
+      db: '.appname == "supabase-db"'
+  # Ignores non nginx errors since they are related with kong booting up
+  kong_logs:
+    type: remap
+    inputs:
+      - router.kong
+    source: |-
+      req, err = parse_nginx_log(.event_message, "combined")
+      if err == null {
+          .timestamp = req.timestamp
+          .metadata.request.headers.referer = req.referer
+          .metadata.request.headers.user_agent = req.agent
+          .metadata.request.headers.cf_connecting_ip = req.client
+          .metadata.request.method = req.method
+          .metadata.request.path = req.path
+          .metadata.request.protocol = req.protocol
+          .metadata.response.status_code = req.status
+      }
+      if err != null {
+        abort
+      }
+  # Ignores non nginx errors since they are related with kong booting up
+  kong_err:
+    type: remap
+    inputs:
+      - router.kong
+    source: |-
+      .metadata.request.method = "GET"
+      .metadata.response.status_code = 200
+      parsed, err = parse_nginx_log(.event_message, "error")
+      if err == null {
+          .timestamp = parsed.timestamp
+          .severity = parsed.severity
+          .metadata.request.host = parsed.host
+          .metadata.request.headers.cf_connecting_ip = parsed.client
+          url, err = split(parsed.request, " ")
+          if err == null {
+              .metadata.request.method = url[0]
+              .metadata.request.path = url[1]
+              .metadata.request.protocol = url[2]
+          }
+      }
+      if err != null {
+        abort
+      }
+  # Gotrue logs are structured json strings which frontend parses directly. But we keep metadata for consistency.
+  auth_logs:
+    type: remap
+    inputs:
+      - router.auth
+    source: |-
+      parsed, err = parse_json(.event_message)
+      if err == null {
+          .metadata.timestamp = parsed.time
+          .metadata = merge!(.metadata, parsed)
+      }
+  # PostgREST logs are structured so we separate timestamp from message using regex
+  rest_logs:
+    type: remap
+    inputs:
+      - router.rest
+    source: |-
+      parsed, err = parse_regex(.event_message, r'^(?P<time>.*): (?P<msg>.*)$')
+      if err == null {
+          .event_message = parsed.msg
+          .timestamp = to_timestamp!(parsed.time)
+          .metadata.host = .project
+      }
+  # Realtime logs are structured so we parse the severity level using regex (ignore time because it has no date)
+  realtime_logs:
+    type: remap
+    inputs:
+      - router.realtime
+    source: |-
+      .metadata.project = del(.project)
+      .metadata.external_id = .metadata.project
+      parsed, err = parse_regex(.event_message, r'^(?P<time>\d+:\d+:\d+\.\d+) \[(?P<level>\w+)\] (?P<msg>.*)$')
+      if err == null {
+          .event_message = parsed.msg
+          .metadata.level = parsed.level
+      }
+  # Storage logs may contain json objects so we parse them for completeness
+  storage_logs:
+    type: remap
+    inputs:
+      - router.storage
+    source: |-
+      .metadata.project = del(.project)
+      .metadata.tenantId = .metadata.project
+      parsed, err = parse_json(.event_message)
+      if err == null {
+          .event_message = parsed.msg
+          .metadata.level = parsed.level
+          .metadata.timestamp = parsed.time
+          .metadata.context[0].host = parsed.hostname
+          .metadata.context[0].pid = parsed.pid
+      }
+  # Postgres logs some messages to stderr which we map to warning severity level
+  db_logs:
+    type: remap
+    inputs:
+      - router.db
+    source: |-
+      .metadata.host = "db-default"
+      .metadata.parsed.timestamp = .timestamp
+
+      parsed, err = parse_regex(.event_message, r'.*(?P<level>INFO|NOTICE|WARNING|ERROR|LOG|FATAL|PANIC?):.*', numeric_groups: true)
+
+      if err != null || parsed == null {
+        .metadata.parsed.error_severity = "info"
+      }
+      if parsed != null {
+       .metadata.parsed.error_severity = parsed.level
+      }
+      if .metadata.parsed.error_severity == "info" {
+          .metadata.parsed.error_severity = "log"
+      }
+      .metadata.parsed.error_severity = upcase!(.metadata.parsed.error_severity)
+
+sinks:
+  logflare_auth:
+    type: 'http'
+    inputs:
+      - auth_logs
+    encoding:
+      codec: 'json'
+    method: 'post'
+    request:
+      retry_max_duration_secs: 10
+    uri: 'http://analytics:4000/api/logs?source_name=gotrue.logs.prod&api_key=${LOGFLARE_API_KEY?LOGFLARE_API_KEY is required}'
+  logflare_realtime:
+    type: 'http'
+    inputs:
+      - realtime_logs
+    encoding:
+      codec: 'json'
+    method: 'post'
+    request:
+      retry_max_duration_secs: 10
+    uri: 'http://analytics:4000/api/logs?source_name=realtime.logs.prod&api_key=${LOGFLARE_API_KEY?LOGFLARE_API_KEY is required}'
+  logflare_rest:
+    type: 'http'
+    inputs:
+      - rest_logs
+    encoding:
+      codec: 'json'
+    method: 'post'
+    request:
+      retry_max_duration_secs: 10
+    uri: 'http://analytics:4000/api/logs?source_name=postgREST.logs.prod&api_key=${LOGFLARE_API_KEY?LOGFLARE_API_KEY is required}'
+  logflare_db:
+    type: 'http'
+    inputs:
+      - db_logs
+    encoding:
+      codec: 'json'
+    method: 'post'
+    request:
+      retry_max_duration_secs: 10
+    # We must route the sink through kong because ingesting logs before logflare is fully initialised will
+    # lead to broken queries from studio. This works by the assumption that containers are started in the
+    # following order: vector > db > logflare > kong
+    uri: 'http://kong:8000/analytics/v1/api/logs?source_name=postgres.logs&api_key=${LOGFLARE_API_KEY?LOGFLARE_API_KEY is required}'
+  logflare_functions:
+    type: 'http'
+    inputs:
+      - router.functions
+    encoding:
+      codec: 'json'
+    method: 'post'
+    request:
+      retry_max_duration_secs: 10
+    uri: 'http://analytics:4000/api/logs?source_name=deno-relay-logs&api_key=${LOGFLARE_API_KEY?LOGFLARE_API_KEY is required}'
+  logflare_storage:
+    type: 'http'
+    inputs:
+      - storage_logs
+    encoding:
+      codec: 'json'
+    method: 'post'
+    request:
+      retry_max_duration_secs: 10
+    uri: 'http://analytics:4000/api/logs?source_name=storage.logs.prod.2&api_key=${LOGFLARE_API_KEY?LOGFLARE_API_KEY is required}'
+  logflare_kong:
+    type: 'http'
+    inputs:
+      - kong_logs
+      - kong_err
+    encoding:
+      codec: 'json'
+    method: 'post'
+    request:
+      retry_max_duration_secs: 10
+    uri: 'http://analytics:4000/api/logs?source_name=cloudflare.logs.prod&api_key=${LOGFLARE_API_KEY?LOGFLARE_API_KEY is required}'
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index a746f2a..947f6b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,4 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+	// https://nuxt.com/docs/guide/concepts/typescript
+	"extends": "./.nuxt/tsconfig.json"
 }