diff --git a/src/app/index.tsx b/src/app/index.tsx
index 52bf22f..64559f4 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -19,8 +19,8 @@ export const App = () => {
           <Header />
           <Pages />
           <Footer />
-          <Toaster />
         </div>
+        <Toaster />
       </RouterProvider>
     </ThemeProvider>
   );
diff --git a/src/entities/types.tsx b/src/entities/types.tsx
index 7867f66..fe14ea6 100644
--- a/src/entities/types.tsx
+++ b/src/entities/types.tsx
@@ -36,7 +36,7 @@ export class UserEntity {
   }
 
   getPersonalStyle() {
-    const hue = hash(this.displayName + ' ' + this.username);
+    const hue = hash([this.displayName, this.username].join('..'));
     const color = `hsl(${hue}deg 90% 40%)`;
     return {hue, color};
   }
diff --git a/src/features/inline-avatars/index.module.scss b/src/features/inline-avatars/index.module.scss
index 547fa4d..4b7bb2d 100644
--- a/src/features/inline-avatars/index.module.scss
+++ b/src/features/inline-avatars/index.module.scss
@@ -4,7 +4,7 @@
 }
 
 .avatar {
-  outline: 2px solid var(--background);
+  outline: 3px solid var(--background);
   overflow: hidden;
 
   &:not(:first-child) {
diff --git a/src/features/profile/index.tsx b/src/features/profile/index.tsx
index 0d43772..0685975 100644
--- a/src/features/profile/index.tsx
+++ b/src/features/profile/index.tsx
@@ -56,13 +56,11 @@ export const Profile = memo((props: ProfileProps) => {
       {...otherProps}
     >
       <Avatar user={user} className={cn(variant === 'xs' && 'w-4 h-4')} />
-      <div className={cn('flex gap-1.5', variant === 'md' && 'flex-col')}>
-        <p className="text-sm font-medium leading-none">
+      <div className={cn('grid gap-1.5', variant === 'md' && 'flex-col')}>
+        <p className="text-sm font-medium leading-none -m-1 p-1 truncate">
           {user.displayName}
           {variant === 'xs' && (
-            <span className="ml-2 font-normal text-sm opacity-50 leading-none">
-              {user.username}
-            </span>
+            <span className="ml-2 font-normal text-muted-foreground">{user.username}</span>
           )}
           {isTopicStarter && (
             <span className="ml-2 text-muted-foreground font-normal">
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7ac0371..169996a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -90,14 +90,5 @@ export const getTimeSince = (timestamp: string | Date): string => {
 };
 
 export const hash = (input: string) => {
-  let hash = 0,
-    i,
-    chr;
-  if (input.length === 0) return hash;
-  for (i = 0; i < input.length; i++) {
-    chr = input.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0;
-  }
-  return hash;
+  return input.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
 };
diff --git a/src/pages/edit-profile/page.tsx b/src/pages/edit-profile/page.tsx
index dab7c95..f5e4763 100644
--- a/src/pages/edit-profile/page.tsx
+++ b/src/pages/edit-profile/page.tsx
@@ -1,5 +1,4 @@
 import {useForm} from 'effector-forms';
-import {useUnit} from 'effector-react';
 
 import {Profile} from '~/features/profile';
 
@@ -7,13 +6,11 @@ import {UserEntity} from '~/entities/types';
 
 import {Container, ContainerSize, CustomButton, Input, Page, Text, TextSize} from '~/shared/ui';
 
-import {$form, avatarFileChanged} from './model';
+import {$form} from './model';
 import cls from './page.module.scss';
 
 export const EditProfilePage = () => {
   const {fields, eachValid, submit} = useForm($form);
-  const onAvatarFileChanged = useUnit(avatarFileChanged);
-
   return (
     <Page>
       <Container size={ContainerSize.M}>
@@ -23,54 +20,38 @@ export const EditProfilePage = () => {
 
         <form className={cls.grid} onSubmit={() => submit()}>
           <Input
-            label="Display name"
             placeholder="Display name"
             value={fields.displayName?.value}
             onChange={(e) => fields.displayName?.onChange(e.target.value)}
-            isInvalid={fields.displayName?.hasError()}
-            errorMessage={fields.displayName?.errorText()}
           />
           <Input
-            label="Username"
             placeholder="Username"
             value={fields.username?.value}
             onChange={(e) => fields.username?.onChange(e.target.value)}
-            isInvalid={fields.username?.hasError()}
-            errorMessage={fields.username?.errorText()}
           />
 
           <Input
-            label="Current password"
             placeholder="Current password"
             value={fields.password?.value}
             onChange={(e) => fields.password?.onChange(e.target.value)}
-            isInvalid={fields.password?.hasError()}
-            errorMessage={fields.password?.errorText()}
             type="password"
             name="password"
           />
           <Input
-            label="New password"
             placeholder="New password"
             value={fields.newPassword?.value}
             onChange={(e) => fields.newPassword?.onChange(e.target.value)}
-            isInvalid={fields.newPassword?.hasError()}
-            errorMessage={fields.newPassword?.errorText()}
             type="password"
             name="new_password"
           />
 
           <Input
-            label="Avatar URL"
             placeholder="Avatar URL"
             readOnly={true}
             value={fields.avatarUrl?.value}
-            isInvalid={fields.avatarUrl?.hasError()}
-            errorMessage={fields.avatarUrl?.errorText()}
             type="file"
             accept="image/png, image/jpeg"
             name="avatar_url"
-            onFileChanged={onAvatarFileChanged}
           />
           <div className={cls.row}>
             <Profile
diff --git a/src/pages/explore/page.tsx b/src/pages/explore/page.tsx
index 6a96a25..efed98a 100644
--- a/src/pages/explore/page.tsx
+++ b/src/pages/explore/page.tsx
@@ -15,9 +15,9 @@ import {$discussions, $totalCount} from './model';
 export const ExplorePage = () => {
   const [discussions, totalCount] = useUnit([$discussions, $totalCount]);
   return (
-    <Page className="mx-auto w-full pt-16 pb-48">
+    <Page className="mx-auto w-full">
       <div className="flex-1 w-full mt-6 sm:max-w-xl md:max-w-3xl">
-        <div className="flex w-full mb-6 justify-between items-center px-6 sm:px-0 sm:ps-2">
+        <div className="flex w-full mb-6 justify-between items-center px-6 sm:pe-0 sm:ps-2">
           {discussions === 'loading' ? (
             <Skeleton className="w-24 h-3" />
           ) : (
@@ -30,9 +30,14 @@ export const ExplorePage = () => {
             </Button>
           </CreateDiscussionDialog>
         </div>
-        <div className="sm:space-y-6 sm:mb-6">
+        <div className="sm:space-y-6">
           {discussions === 'loading' &&
-            [...Array(5).keys()].map((i) => <DiscussionSkeleton key={i} />)}
+            [...Array(5).keys()].map((i) => (
+              <DiscussionSkeleton
+                key={i}
+                className="rounded-none sm:rounded-xl border-x-0 border-b-0 border-t sm:border"
+              />
+            ))}
           {discussions !== 'loading' &&
             discussions.map((discussion) => (
               <Discussion
diff --git a/src/pages/home/page.tsx b/src/pages/home/page.tsx
index 08f19fb..1640086 100644
--- a/src/pages/home/page.tsx
+++ b/src/pages/home/page.tsx
@@ -21,7 +21,8 @@ import Fresco from './assets/fresco.webp';
 export const HomePage = () => {
   const repos = useUnit($repos);
   return (
-    <Page className="pt-16">
+    <Page>
+      <div className="fixed top-0 z-999 h-[100vh] w-[100vw] mix-blend-screen pointer-events-none"></div>
       <div className="min-h-screen w-full px-10 sm:px-0 sm:max-w-xl lg:max-w-2xl">
         <Link to="/explore" className="block w-fit mx-auto mt-16 mb-12">
           <motion.div
@@ -33,7 +34,7 @@ export const HomePage = () => {
             }}
             viewport={{once: true}}
           >
-            <Button className="rounded-full bg-primary group gap-0">
+            <Button className="rounded-full bg-foreground group gap-0">
               Discussions
               <ArrowRight className="w-0! group-hover:w-4! group-hover:ms-2 pt-px transition-all" />
             </Button>
@@ -67,7 +68,7 @@ export const HomePage = () => {
             <a href={repo.html_url} target="_blank" key={repo.id} className="w-full">
               <Card className="bg-background">
                 <CardHeader>
-                  <div className="flex justify-between items-center text-sm whitespace-nowrap">
+                  <div className="md:flex space-y-4 md:space-y-0 justify-between items-center text-sm whitespace-nowrap">
                     <Profile
                       user={
                         new UserEntity({
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c32c3ed..89f21a5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,7 @@
 import {createRoutesView} from 'atomic-router-react';
 
+import {ProfilesRoute} from '~/pages/profiles';
+
 import {DiscussionRoute} from './discussion';
 import {EditProfileRoute} from './edit-profile';
 import {ExploreRoute} from './explore';
@@ -15,6 +17,7 @@ export const Pages = createRoutesView({
     HomeRoute,
     SignInRoute,
     SignUpRoute,
+    ProfilesRoute,
     ExploreRoute,
     ProfileRoute,
     EditProfileRoute,
diff --git a/src/pages/profile/model.ts b/src/pages/profile/model.ts
index bb51231..f236b88 100644
--- a/src/pages/profile/model.ts
+++ b/src/pages/profile/model.ts
@@ -19,7 +19,7 @@ export const dataLoadedRoute = chainRoute({
     mapParams: ({params}) => {
       return {
         query: {
-          username: params.username,
+          username: decodeURIComponent(params.username),
         },
       };
     },
diff --git a/src/pages/profiles/index.ts b/src/pages/profiles/index.ts
new file mode 100644
index 0000000..554cd75
--- /dev/null
+++ b/src/pages/profiles/index.ts
@@ -0,0 +1,7 @@
+import {currentRoute} from '~/pages/profiles/model';
+import {ProfilesPage} from '~/pages/profiles/page';
+
+export const ProfilesRoute = {
+  view: ProfilesPage,
+  route: currentRoute,
+};
diff --git a/src/pages/profiles/model.ts b/src/pages/profiles/model.ts
new file mode 100644
index 0000000..853807b
--- /dev/null
+++ b/src/pages/profiles/model.ts
@@ -0,0 +1,36 @@
+import {attach, createStore, sample} from 'effector';
+import {spread} from 'patronum';
+
+import {UserEntity} from '~/entities/types';
+
+import {apiV1UsersGetFx} from '~/shared/api';
+import {routes} from '~/shared/routes';
+
+export const currentRoute = routes.profiles;
+
+export const $users = createStore<UserEntity[] | 'loading'>('loading');
+export const $totalCount = createStore(0);
+
+const loadUsersFx = attach({
+  effect: apiV1UsersGetFx,
+  mapParams: () => ({query: {offset: 0, count: 100}}),
+});
+
+sample({
+  clock: currentRoute.opened,
+  target: loadUsersFx,
+});
+
+sample({
+  clock: loadUsersFx.doneData,
+  fn: ({answer}) => ({
+    users: (answer.items as any[]).map((item) => UserEntity.fromResponse(item)!),
+    totalCount: answer.total_count!,
+  }),
+  target: spread({
+    targets: {
+      users: $users,
+      totalCount: $totalCount,
+    },
+  }),
+});
diff --git a/src/pages/profiles/page.tsx b/src/pages/profiles/page.tsx
new file mode 100644
index 0000000..a7ec231
--- /dev/null
+++ b/src/pages/profiles/page.tsx
@@ -0,0 +1,32 @@
+import {useUnit} from 'effector-react';
+import {cn} from '~/lib/utils';
+
+import {Profile, ProfileSkeleton} from '~/features/profile';
+
+import {Page} from '~/shared/ui';
+import {Skeleton} from '~/shared/ui/skeleton';
+
+import * as model from './model';
+
+export const ProfilesPage = () => {
+  const [users, totalCount] = useUnit([model.$users, model.$totalCount]);
+  return (
+    <Page>
+      <div className="flex-1 w-full mt-6 sm:max-w-xl md:max-w-3xl">
+        <div className="flex w-full h-9 mb-6 justify-between items-center px-6 sm:pe-0 sm:ps-2">
+          {users === 'loading' ? <Skeleton className="w-16 h-3" /> : <p>{totalCount} users</p>}
+        </div>
+        <div
+          className={cn(
+            'grid sm:grid-cols-2 md:grid-cols-3 px-3 sm:px-0 gap-3 w-full sm:max-w-xl md:max-w-3xl',
+            '[&>*]:w-full [&>*]:p-3 [&>*]:rounded-xl [&>*]:border',
+          )}
+        >
+          {users === 'loading' && [...Array(50).keys()].map((i) => <ProfileSkeleton key={i} />)}
+          {users !== 'loading' &&
+            users.map((user) => <Profile key={user.id} variant={'md'} user={user} />)}
+        </div>
+      </div>
+    </Page>
+  );
+};
diff --git a/src/pages/sign-in/page.tsx b/src/pages/sign-in/page.tsx
index e71dd88..ef74664 100644
--- a/src/pages/sign-in/page.tsx
+++ b/src/pages/sign-in/page.tsx
@@ -2,18 +2,9 @@ import {useForm} from 'effector-forms';
 import {useUnit} from 'effector-react';
 
 import {routes} from '~/shared/routes';
-import {
-  Attention,
-  ButtonVariant,
-  Container,
-  ContainerSize,
-  CustomButton,
-  Input,
-  Link,
-  Page,
-  Text,
-  TextSize,
-} from '~/shared/ui';
+import {Attention, Input, Page} from '~/shared/ui';
+import {Button} from '~/shared/ui/button';
+import {Link} from '~/shared/ui/link';
 
 import GoogleIcon from './assets/google.svg';
 import {$form, $formError, $loading, signInWithGoogleClicked} from './model';
@@ -22,16 +13,12 @@ import cls from './page.module.scss';
 export const SignInPage = () => {
   const {fields, submit, eachValid} = useForm($form);
   const [loading, formError] = useUnit([$loading, $formError]);
-
   const [onSignInWithGoogleClicked] = useUnit([signInWithGoogleClicked]);
 
   return (
-    <Page>
-      <Container size={ContainerSize.S} className={cls.container}>
-        <Text center={true} size={TextSize.XL} className={cls.title} Component="h1">
-          Sign in
-        </Text>
-
+    <Page className="flex-1 py-16">
+      <div className="w-full max-w-xs text-center space-y-3">
+        <h1 className="text-5xl font-[Inter] font-bold mb-12">Sign in</h1>
         <form className={cls.list} onSubmit={() => submit()}>
           <Input
             autoFocus={true}
@@ -40,8 +27,6 @@ export const SignInPage = () => {
             name="username_or_email"
             value={fields.username?.value}
             onChange={(e) => fields.username?.onChange(e.target.value)}
-            isInvalid={fields.username?.hasError()}
-            errorMessage={fields.username?.errorText()}
           />
           <Input
             disabled={loading}
@@ -50,43 +35,24 @@ export const SignInPage = () => {
             name="password"
             value={fields.password?.value}
             onChange={(e) => fields.password?.onChange(e.target.value)}
-            isInvalid={fields.password?.hasError()}
-            errorMessage={fields.password?.errorText()}
           />
-
           {formError && <Attention>{formError}</Attention>}
-
-          <CustomButton disabled={loading || !eachValid} type="submit">
+          <Button disabled={loading || !eachValid} type="submit">
             Proceed
-          </CustomButton>
+          </Button>
         </form>
-
-        <div className={cls.external}>
-          <Text center={true} className={cls.or}>
-            or
-          </Text>
-
-          <div className={cls.list}>
-            <CustomButton
-              onClick={onSignInWithGoogleClicked}
-              variant={ButtonVariant.SECONDARY}
-              className={cls.button}
-            >
-              <GoogleIcon />
-              Proceed with Google
-            </CustomButton>
-          </div>
-
-          <div className={cls.list}>
-            <Link center={true} to={routes.auth.resetPassword}>
-              Reset password
-            </Link>
-            <Link center={true} to={routes.auth.signUp}>
-              Sign up
-            </Link>
-          </div>
+        <p className="text-muted-foreground">or</p>
+        <div className={cls.list}>
+          <Button onClick={onSignInWithGoogleClicked} variant="outline">
+            <GoogleIcon />
+            Sign in with Google
+          </Button>
+        </div>
+        <div className="flex flex-col items-center gap-3">
+          <Link to={routes.auth.resetPassword}>Reset password</Link>
+          <Link to={routes.auth.signUp}>Sign up</Link>
         </div>
-      </Container>
+      </div>
     </Page>
   );
 };
diff --git a/src/pages/sign-up/page.tsx b/src/pages/sign-up/page.tsx
index 7a4bd11..22839be 100644
--- a/src/pages/sign-up/page.tsx
+++ b/src/pages/sign-up/page.tsx
@@ -1,22 +1,16 @@
 import {useForm} from 'effector-forms';
 import {useUnit} from 'effector-react';
 
+import GoogleIcon from '~/pages/sign-in/assets/google.svg';
+
 import {Profile} from '~/features/profile';
 
 import {UserEntity} from '~/entities/types';
 
 import {routes} from '~/shared/routes';
-import {
-  Attention,
-  Container,
-  ContainerSize,
-  CustomButton,
-  Input,
-  Link,
-  Page,
-  Text,
-  TextSize,
-} from '~/shared/ui';
+import {Attention, Input, Page} from '~/shared/ui';
+import {Button} from '~/shared/ui/button';
+import {Link} from '~/shared/ui/link';
 
 import {$form, $formError, $loading, $provider} from './model';
 import cls from './page.module.scss';
@@ -28,12 +22,9 @@ export const SignUpPage = () => {
   const [provider] = useUnit([$provider]);
 
   return (
-    <Page>
-      <Container size={ContainerSize.S} className={cls.container}>
-        <Text center={true} size={TextSize.XL} className={cls.title} Component="h1">
-          Sign up
-        </Text>
-
+    <Page className="flex-1 py-16">
+      <div className="w-full max-w-xs text-center space-y-3">
+        <h1 className="text-5xl font-[Inter] font-bold mb-12">Sign up</h1>
         <form className={cls.list} onSubmit={() => submit()}>
           {provider === null && (
             <Input
@@ -44,28 +35,20 @@ export const SignUpPage = () => {
               name="email"
               value={fields.email?.value}
               onChange={(e) => fields.email?.onChange(e.target.value)}
-              isInvalid={fields.email?.hasError()}
-              errorMessage={fields.email?.errorText()}
             />
           )}
-
           <Input
             disabled={loading}
             placeholder="Username"
             value={fields.username?.value}
             onChange={(e) => fields.username?.onChange(e.target.value)}
-            isInvalid={fields.username?.hasError()}
-            errorMessage={fields.username?.errorText()}
           />
           <Input
             disabled={loading}
             placeholder="Display name"
             value={fields.display_name?.value}
             onChange={(e) => fields.display_name?.onChange(e.target.value)}
-            isInvalid={fields.display_name?.hasError()}
-            errorMessage={fields.display_name?.errorText()}
           />
-
           {provider === null && (
             <Input
               disabled={loading}
@@ -74,8 +57,6 @@ export const SignUpPage = () => {
               name="password"
               value={fields.password?.value}
               onChange={(e) => fields.password?.onChange(e.target.value)}
-              isInvalid={fields.password?.hasError()}
-              errorMessage={fields.password?.errorText()}
             />
           )}
           {provider === null && (
@@ -86,35 +67,34 @@ export const SignUpPage = () => {
               name="confirm_password"
               value={fields.confirm_password?.value}
               onChange={(e) => fields.confirm_password?.onChange(e.target.value)}
-              isInvalid={fields.confirm_password?.hasError()}
-              errorMessage={fields.confirm_password?.errorText()}
             />
           )}
-
           <Profile
+            className="text-start pointer-events-none"
             variant="md"
             user={
               new UserEntity({
                 id: '',
-                username: fields.username.value,
-                displayName: fields.display_name.value,
+                username: fields.username.value === '' ? 'username' : fields.username.value,
+                displayName:
+                  fields.display_name.value === '' ? 'Display name' : fields.display_name.value,
               })
             }
           />
-
           {formError && <Attention>{formError}</Attention>}
-
-          <CustomButton disabled={loading || !eachValid} type="submit" center={true}>
+          <Button disabled={loading || !eachValid} type="submit">
             Join
-          </CustomButton>
+          </Button>
         </form>
-
+        <p className="text-muted-foreground">or</p>
         <div className={cls.list}>
-          <Link center={true} to={routes.auth.signIn}>
-            I already have an account
-          </Link>
+          <Button variant="outline">
+            <GoogleIcon />
+            Sign up with Google
+          </Button>
         </div>
-      </Container>
+        <Link to={routes.auth.signIn}>I already have an account</Link>
+      </div>
     </Page>
   );
 };
diff --git a/src/shared/api/client.ts b/src/shared/api/client.ts
index 1d3465c..595f16d 100644
--- a/src/shared/api/client.ts
+++ b/src/shared/api/client.ts
@@ -1215,6 +1215,64 @@ export const apiV1AuthenticationSignInGoogleCallbackGetFx = createEffect<ApiV1Au
 });
 //#endregion apiV1AuthenticationSignInGoogleCallbackGet
 
+/* --- */
+//#region apiV1UsersGet
+export type ApiV1UsersGet = {
+  query?: {
+    order?: "newestFirst" | "oldestFirst";
+    offset?: number;
+    count?: number;
+  };
+};
+/* OK */
+export const apiV1UsersGetOk = typed.object({
+  total_count: typed.number.optional,
+  items: typed.array(typed.object({
+    id: typed.string.optional,
+    username: typed.string.optional,
+    display_name: typed.string.optional,
+    avatar_url: typed.string.maybe
+  })).optional
+});
+export type ApiV1UsersGetDone = {
+  status: "ok";
+  answer: typed.Get<typeof apiV1UsersGetOk>;
+};
+/* Bad Request */
+export const apiV1UsersGetBadRequest = typed.object({
+  error_description: typed.string.optional,
+  validation_errors: typed.object({}).optional
+});
+/* Internal Server Error */
+export const apiV1UsersGetInternalServerError = typed.object({
+  error_description: typed.string.optional
+});
+export type ApiV1UsersGetFail = {
+  status: "bad_request";
+  error: typed.Get<typeof apiV1UsersGetBadRequest>;
+} | {
+  status: "internal_server_error";
+  error: typed.Get<typeof apiV1UsersGetInternalServerError>;
+} | GenericErrors;
+export const apiV1UsersGetFx = createEffect<ApiV1UsersGet, ApiV1UsersGetDone, ApiV1UsersGetFail>({
+  async handler({
+    query
+  }) {
+    const name = "apiV1UsersGetFx.body";
+    const response = await requestFx({
+      path: "/api/v1/users",
+      method: "GET",
+      query
+    });
+    return parseByStatus(name, response, {
+      200: ["ok", apiV1UsersGetOk],
+      400: ["bad_request", apiV1UsersGetBadRequest],
+      500: ["internal_server_error", apiV1UsersGetInternalServerError]
+    });
+  }
+});
+//#endregion apiV1UsersGet
+
 /* --- */
 //#region apiV1UsersRegisterPost
 export type ApiV1UsersRegisterPost = {
diff --git a/src/shared/routes.ts b/src/shared/routes.ts
index 6a6203b..fb9ef17 100644
--- a/src/shared/routes.ts
+++ b/src/shared/routes.ts
@@ -16,6 +16,7 @@ export const routes = {
     signUp: createRoute(),
     resetPassword: createRoute(),
   },
+  profiles: createRoute(),
   profile: createRoute<{username: string}>(),
   editProfile: createRoute(),
   explore: createRoute(),
@@ -36,6 +37,7 @@ export const routesMap: UnmappedRouteObject<any>[] = [
   {path: '/sign-in', route: routes.auth.signIn},
   {path: '/sign-up', route: routes.auth.signUp},
   {path: '/reset-password', route: routes.auth.resetPassword},
+  {path: '/users', route: routes.profiles},
   {path: '/u/:username', route: routes.profile},
   {path: '/edit-profile', route: routes.editProfile},
   {path: '/explore', route: routes.explore},
diff --git a/src/shared/ui/badge.tsx b/src/shared/ui/badge.tsx
index 53ad4b9..229719e 100644
--- a/src/shared/ui/badge.tsx
+++ b/src/shared/ui/badge.tsx
@@ -7,7 +7,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow',
+        default: 'border-transparent bg-foreground text-background shadow',
         secondary: 'border-transparent bg-secondary text-secondary-foreground',
         destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',
         outline: 'text-foreground',
diff --git a/src/shared/ui/badge/index.module.scss b/src/shared/ui/badge/index.module.scss
deleted file mode 100644
index 4ad7716..0000000
--- a/src/shared/ui/badge/index.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.badge {
-  height: 20px;
-  min-width: 20px;
-  position: absolute;
-  left: calc(100% - 10px);
-  bottom: -12px;
-  box-sizing: border-box;
-  padding: 0 5px;
-  font: var(--font-s);
-  line-height: 18px !important;
-  color: var(--color-black);
-  text-align: center;
-  background: var(--color-white);
-  border: 2px solid var(--color-black);
-  border-radius: 10px;
-}
diff --git a/src/shared/ui/badge/index.tsx b/src/shared/ui/badge/index.tsx
deleted file mode 100644
index c505a38..0000000
--- a/src/shared/ui/badge/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import classNames from 'classnames';
-import {HTMLAttributes} from 'react';
-
-import cls from './index.module.scss';
-
-export type BadgeProps = HTMLAttributes<HTMLSpanElement>;
-
-export const Badge = (props: BadgeProps) => {
-  const {children, className, ...otherProps} = props;
-
-  return (
-    <span className={classNames(cls.badge, className)} {...otherProps}>
-      {children}
-    </span>
-  );
-};
diff --git a/src/shared/ui/button.tsx b/src/shared/ui/button.tsx
index c3be532..ee44c7b 100644
--- a/src/shared/ui/button.tsx
+++ b/src/shared/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-primary dark:bg-primary/90 dark:hover:bg-primary hover:bg-primary text-primary-foreground',
+          'bg-foreground dark:bg-foreground/90 dark:hover:bg-foreground hover:bg-foreground text-background',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
           'border border-input bg-background hover:border-transparent hover:bg-accent hover:text-accent-foreground',
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 32184af..faef866 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1,6 +1,5 @@
 export * from './text';
 export * from './custom-button';
-export * from './link';
 export * from './input';
 export * from './select';
 export * from './page';
diff --git a/src/shared/ui/input/index.stories.tsx b/src/shared/ui/input/index.stories.tsx
deleted file mode 100644
index 15f6232..0000000
--- a/src/shared/ui/input/index.stories.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {Input} from '~/shared/ui';
-
-import {PaddingDecorator} from '../../decorators';
-
-const meta: Meta<typeof Input> = {
-  title: 'shared/Input',
-  component: Input,
-  tags: ['autodocs'],
-  decorators: [PaddingDecorator(40, 40)],
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Email',
-  },
-};
-
-export const Password: Story = {
-  args: {
-    placeholder: 'Password',
-    defaultValue: 'toor',
-    type: 'password',
-  },
-};
-
-export const Hover: Story = {
-  args: {
-    forceHover: true,
-    placeholder: 'Email',
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    placeholder: 'Email',
-    defaultValue: 'mere1y@split-team.com',
-  },
-};
-
-export const Invalid: Story = {
-  args: {
-    placeholder: 'Email',
-    defaultValue: 'mere1y@',
-    isInvalid: true,
-    errorMessage: 'Invalid mail provider',
-  },
-};
-
-export const PasswordInvalid: Story = {
-  args: {
-    placeholder: 'Email',
-    defaultValue: 'toor',
-    type: 'password',
-    isInvalid: true,
-    errorMessage: 'Password must be unique',
-  },
-};
-
-export const WithLabel: Story = {
-  args: {
-    placeholder: 'Email',
-    defaultValue: 'mere1y@split-team.com',
-    label: 'Email',
-  },
-};
diff --git a/src/shared/ui/input/index.tsx b/src/shared/ui/input/index.tsx
index 79217f0..1fbe40d 100644
--- a/src/shared/ui/input/index.tsx
+++ b/src/shared/ui/input/index.tsx
@@ -1,127 +1,20 @@
-import classNames from 'classnames';
-import {InputHTMLAttributes, useState} from 'react';
-
-import {Text, TextSize} from '~/shared/ui';
-
-import ErrorIcon from './assets/error.svg';
-import FileIcon from './assets/file.svg';
-import cls from './index.module.scss';
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  isInvalid?: boolean;
-  errorMessage?: string;
-  center?: boolean;
-  forceFocus?: boolean;
-  forceHover?: boolean;
-  alwaysShown?: boolean;
-  onFileChanged?: (data: string) => void;
-}
-
-export const Input = (props: InputProps) => {
-  const {
-    label,
-    alwaysShown,
-    className,
-    forceHover,
-    forceFocus,
-    disabled,
-    isInvalid,
-    errorMessage,
-    center,
-    type = 'text',
-    accept,
-    onFileChanged,
-    ...otherProps
-  } = props;
-
-  const isFileMode = type === 'file';
-  const isPasswordMode = type === 'password';
-
-  let customType = type;
-  if (isPasswordMode && alwaysShown) {
-    customType = 'text';
-  }
-  if (isFileMode) {
-    customType = 'text';
-  }
-
-  const [isErrorIconHovered, setIsErrorIconHovered] = useState(false);
-
-  const wrapperMods = {
-    [cls.top]: Boolean(label),
-  };
-
-  const mods = {
-    [cls.password]: type === 'password',
-    [cls.disabled]: disabled,
-    [cls.invalid]: isInvalid,
-    [cls.center]: center,
-    [cls.focus]: forceFocus,
-    [cls.hover]: forceHover,
-    [cls.showMods]: isFileMode || isPasswordMode || isInvalid,
-    [cls.showMods2]: (isPasswordMode || isFileMode) && isInvalid,
-  };
-
-  const tooltipMods = {
-    [cls.tooltipVisible]: isErrorIconHovered,
-  };
+import * as React from 'react';
+import {cn} from '@/lib/utils';
 
+function Input({className, type, ...props}: React.ComponentProps<'input'>) {
   return (
-    <div className={classNames(cls.wrapper, wrapperMods, className)} data-top={label}>
-      <input
-        className={classNames(cls.input, mods)}
-        disabled={disabled}
-        type={customType}
-        {...otherProps}
-      />
-
-      <div className={cls.mods}>
-        {isFileMode && (
-          <div>
-            <label className={cls.fileLabel} htmlFor="file_upload">
-              <FileIcon />
-            </label>
-            <input
-              className={cls.file}
-              type="file"
-              accept={accept}
-              id="file_upload"
-              name="file_upload"
-              onChange={(e) => {
-                const file = e.target.files?.[0];
-                if (file && onFileChanged) {
-                  const reader = new FileReader();
-
-                  reader.onloadend = () => {
-                    if (reader.result) {
-                      onFileChanged(reader.result.toString());
-                    }
-                  };
-
-                  reader.readAsDataURL(file);
-                }
-              }}
-            />
-          </div>
-        )}
-
-        {isInvalid && (
-          <div
-            className={cls.errorContainer}
-            onMouseEnter={() => setIsErrorIconHovered(true)}
-            onMouseLeave={() => setIsErrorIconHovered(false)}
-          >
-            <ErrorIcon />
-          </div>
-        )}
-      </div>
-
-      {errorMessage && (
-        <Text size={TextSize.S} className={classNames(cls.tooltip, tooltipMods)}>
-          {errorMessage}
-        </Text>
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring/50',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
       )}
-    </div>
+      {...props}
+    />
   );
-};
+}
+
+export {Input};
diff --git a/src/shared/ui/link.tsx b/src/shared/ui/link.tsx
new file mode 100644
index 0000000..4e6282a
--- /dev/null
+++ b/src/shared/ui/link.tsx
@@ -0,0 +1,29 @@
+import {RouteInstance, RouteParams, RouteQuery} from 'atomic-router';
+import {Link as AtomicLink} from 'atomic-router-react';
+import React from 'react';
+import {cn} from '~/lib/utils';
+
+export const Link = <Params extends RouteParams>({
+  className,
+  children,
+  ...otherProps
+}: {
+  to: string | RouteInstance<Params>;
+  params?: Params | undefined;
+  query?: RouteQuery | undefined;
+  className?: string | undefined;
+  activeClassName?: string | undefined;
+  inactiveClassName?: string | undefined;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    ref?: React.ForwardedRef<HTMLAnchorElement> | undefined;
+  }) => (
+  <AtomicLink
+    className={cn(
+      'w-fit text-muted-foreground hover:text-foreground underline-offset-4 hover:underline transition-all duration-100',
+      className,
+    )}
+    {...otherProps}
+  >
+    {children}
+  </AtomicLink>
+);
diff --git a/src/shared/ui/link/index.module.scss b/src/shared/ui/link/index.module.scss
deleted file mode 100644
index 7473272..0000000
--- a/src/shared/ui/link/index.module.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.wrapper {
-  display: flex;
-  position: relative;
-}
-
-.link {
-  display: inline-flex;
-  flex-direction: row;
-  gap: 16px;
-  align-items: center;
-  font: var(--font-s);
-  border-bottom: 1px solid transparent;
-  margin-bottom: -1px;
-
-  &.active {
-    color: var(--color-white);
-    border-color: var(--color-white);
-  }
-}
-
-.primary {
-  color: var(--color-gray-lighter);
-
-  &:hover {
-    color: var(--color-white);
-  }
-}
-
-.raw {
-  color: var(--color-gray-lighter);
-
-  &:hover {
-    color: var(--color-gray-lightest);
-  }
-}
-
-.clear {
-  padding: 10px 25px 11px;
-  color: var(--color-white);
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.navigation {
-  color: var(--color-gray-lightest);
-  height: 60px;
-
-  &:hover {
-    color: var(--color-white);
-  }
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-.center {
-  margin: 0 auto;
-}
diff --git a/src/shared/ui/link/index.stories.tsx b/src/shared/ui/link/index.stories.tsx
deleted file mode 100644
index 9291c39..0000000
--- a/src/shared/ui/link/index.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {Link, LinkVariant} from '.';
-import {RouterDecorator} from '../../decorators';
-import AddIcon from '../icon/assets/add.svg';
-
-const meta: Meta<typeof Link> = {
-  title: 'shared/Link',
-  component: Link,
-  tags: ['autodocs'],
-  decorators: [RouterDecorator],
-};
-
-const to = '';
-
-export default meta;
-type Story = StoryObj<typeof Link>;
-
-export const Primary: Story = {
-  args: {
-    children: 'Sign In',
-    variant: LinkVariant.PRIMARY,
-    to,
-  },
-};
-
-export const Clear: Story = {
-  args: {
-    children: 'Sign Up',
-    variant: LinkVariant.CLEAR,
-    to,
-  },
-};
-
-export const Icon: Story = {
-  args: {
-    children: 'щитпост',
-    variant: LinkVariant.PRIMARY,
-    Icon: () => <AddIcon />,
-    to,
-  },
-};
-
-export const Badge: Story = {
-  args: {
-    children: 'My bets',
-    variant: LinkVariant.CLEAR,
-    badge: 2,
-    to,
-  },
-};
-
-export const Raw: Story = {
-  args: {
-    children: 'Reset password',
-    variant: LinkVariant.RAW,
-    to,
-  },
-};
-
-export const Navigation: Story = {
-  args: {
-    children: 'Explore',
-    variant: LinkVariant.NAVIGATION,
-    to,
-  },
-};
diff --git a/src/shared/ui/link/index.tsx b/src/shared/ui/link/index.tsx
deleted file mode 100644
index 047a340..0000000
--- a/src/shared/ui/link/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {RouteParams} from 'atomic-router';
-import {Link as AtomicLink, LinkProps as AtomicLinkProps} from 'atomic-router-react';
-import classNames from 'classnames';
-import {FC, SVGProps} from 'react';
-
-import {Badge} from '../badge';
-import cls from './index.module.scss';
-
-export enum LinkVariant {
-  PRIMARY = 'primary',
-  RAW = 'raw',
-  CLEAR = 'clear',
-  NAVIGATION = 'navigation',
-}
-
-export interface LinkProps extends AtomicLinkProps<RouteParams> {
-  variant?: LinkVariant;
-  Icon?: FC<SVGProps<SVGSVGElement>>;
-  badge?: number;
-  fullWidth?: boolean;
-  center?: boolean;
-}
-
-export const Link = (props: LinkProps) => {
-  const {
-    variant = LinkVariant.RAW,
-    Icon,
-    to,
-    fullWidth,
-    center,
-    badge,
-    className,
-    activeClassName,
-    children,
-    ...otherProps
-  } = props;
-
-  const mods = {
-    [cls[variant]]: true,
-    [cls.fullWidth]: fullWidth,
-    [cls.center]: center,
-  };
-
-  const activeMods = {
-    [cls.active]: variant === LinkVariant.NAVIGATION,
-  };
-
-  return (
-    <AtomicLink
-      to={to}
-      className={classNames(
-        cls.link,
-        mods,
-        className,
-        'text-foreground hover:text-muted-foreground',
-      )}
-      activeClassName={classNames(cls.link, mods, activeMods, activeClassName)}
-      {...otherProps}
-    >
-      {Icon && <Icon />}
-
-      <div className={cls.wrapper}>
-        {children}
-        {badge !== undefined && (
-          <Badge className="absolute rounded-full px-[0.3rem] py-0.5 border-2 border-background leading-none bottom-[-0.6rem] right-[-0.8rem]">
-            {badge}
-          </Badge>
-        )}
-      </div>
-    </AtomicLink>
-  );
-};
diff --git a/src/shared/ui/magnet-lines.tsx b/src/shared/ui/magnet-lines.tsx
deleted file mode 100644
index a40f15c..0000000
--- a/src/shared/ui/magnet-lines.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, {CSSProperties, useEffect, useRef} from 'react';
-
-interface MagnetLinesProps {
-  rows?: number;
-  columns?: number;
-  containerSize?: string;
-  lineColor?: string;
-  lineWidth?: string;
-  lineHeight?: string;
-  baseAngle?: number;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const MagnetLines: React.FC<MagnetLinesProps> = ({
-  rows = 9,
-  columns = 9,
-  containerSize = '80vmin',
-  lineColor = '#efefef',
-  lineWidth = '1vmin',
-  lineHeight = '6vmin',
-  baseAngle = -10,
-  className = '',
-  style = {},
-}) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const items = container.querySelectorAll<HTMLSpanElement>('span');
-
-    const onPointerMove = (pointer: {x: number; y: number}) => {
-      items.forEach((item) => {
-        const rect = item.getBoundingClientRect();
-        const centerX = rect.x + rect.width / 2;
-        const centerY = rect.y + rect.height / 2;
-
-        const b = pointer.x - centerX;
-        const a = pointer.y - centerY;
-        const c = Math.sqrt(a * a + b * b) || 1;
-        const r = ((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1);
-
-        item.style.setProperty('--rotate', `${r}deg`);
-      });
-    };
-
-    const handlePointerMove = (e: PointerEvent) => {
-      onPointerMove({x: e.x, y: e.y});
-    };
-
-    window.addEventListener('pointermove', handlePointerMove);
-
-    if (items.length) {
-      const middleIndex = Math.floor(items.length / 2);
-      const rect = items[middleIndex].getBoundingClientRect();
-      onPointerMove({x: rect.x, y: rect.y});
-    }
-
-    return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
-    };
-  }, []);
-
-  const total = rows * columns;
-  const spans = Array.from({length: total}, (_, i) => (
-    <span
-      key={i}
-      className="block origin-center"
-      style={{
-        backgroundColor: lineColor,
-        width: lineWidth,
-        height: lineHeight,
-        //@ts-ignore
-        '--rotate': `${baseAngle}deg`,
-        transform: 'rotate(var(--rotate))',
-        willChange: 'transform',
-      }}
-    />
-  ));
-
-  return (
-    <div
-      ref={containerRef}
-      className={`grid place-items-center ${className}`}
-      style={{
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gridTemplateRows: `repeat(${rows}, 1fr)`,
-        width: containerSize,
-        height: containerSize,
-        ...style,
-      }}
-    >
-      {spans}
-    </div>
-  );
-};
-
-export default MagnetLines;
diff --git a/src/shared/ui/page/index.tsx b/src/shared/ui/page/index.tsx
index 7890235..186c50f 100644
--- a/src/shared/ui/page/index.tsx
+++ b/src/shared/ui/page/index.tsx
@@ -6,10 +6,7 @@ export const Page = (props: HTMLAttributes<HTMLElement>) => {
 
   return (
     <main
-      className={cn(
-        'flex flex-col justify-center items-center min-h-screen pt-24 pb-56',
-        className,
-      )}
+      className={cn('flex flex-col justify-center items-center mt-10 py-6', className)}
       {...otherProps}
     >
       {children}
diff --git a/src/widgets/discussion/index.tsx b/src/widgets/discussion/index.tsx
index 0d9be3a..df6c1ff 100644
--- a/src/widgets/discussion/index.tsx
+++ b/src/widgets/discussion/index.tsx
@@ -107,10 +107,10 @@ export const Discussion = (props: DiscussionProps) => {
             params={{discussionId: discussion.id}}
             className="hover:text-foreground"
           >
+            <h1 className="text-xl md:text-2xl mb-1 font-extrabold font-[Inter] text-balance text-foreground/90">
+              {title}
+            </h1>
             <div>
-              <h1 className="text-3xl font-extrabold font-[Inter] text-balance mt-2 mb-3 text-foreground/90">
-                {title}
-              </h1>
               <FormattedContent>{content}</FormattedContent>
             </div>
           </ConditionalLink>
@@ -136,7 +136,11 @@ export const Discussion = (props: DiscussionProps) => {
         >
           {expandComments && <Comments subject={discussion} />}
           {user && (expandComments || expandReplyFormSection) && (
-            <div className={cn('w-full h-full absolute top-0 pointer-events-none transition-all')}>
+            <div
+              className={cn(
+                'w-full h-full absolute top-0 overflow-x-clip sm:overflow-x-visible pointer-events-none transition-all',
+              )}
+            >
               <div
                 className={cn(
                   'pt-4 sm:pt-0 -mt-4 sm:mt-0 sticky ml-[0.5px] sm:rounded-b-xl w-full pointer-events-auto sm:ring ring-background sm:shadow-[1.25rem_1.25rem_0_1px_var(--background),-1.25rem_1.25rem_0_1px_var(--background)]',
@@ -145,7 +149,7 @@ export const Discussion = (props: DiscussionProps) => {
               >
                 <div
                   ref={replyFormSectionRef}
-                  className="bg-background/90 backdrop-blur-2xl outline outline-1 outline-border sm:rounded-b-xl overflow-hidden"
+                  className="bg-background/90 backdrop-blur-2xl border-t sm:border-none sm:outline outline-border sm:rounded-b-xl overflow-hidden"
                 >
                   <CommentForm
                     author={user}
diff --git a/src/widgets/footer/index.module.scss b/src/widgets/footer/index.module.scss
deleted file mode 100644
index 000d339..0000000
--- a/src/widgets/footer/index.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.footer {
-  backdrop-filter: blur(50px);
-  border-top: 1px solid rgba(255 255 255 / 7%);
-  padding: 30px 0 40px;
-  z-index: 1;
-  height: 205px;
-  margin-top: -205px;
-}
-
-.row {
-  display: flex;
-}
-
-.column {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  align-items: start;
-
-  & > *:first-child {
-    height: 30px;
-    line-height: 30px;
-    margin-bottom: 10px;
-  }
-}
diff --git a/src/widgets/footer/index.tsx b/src/widgets/footer/index.tsx
index a5f13f1..8f98505 100644
--- a/src/widgets/footer/index.tsx
+++ b/src/widgets/footer/index.tsx
@@ -1,10 +1,79 @@
+import {RouteInstance, RouteParams} from 'atomic-router';
 import {HTMLAttributes} from 'react';
 import {cn} from '~/lib/utils';
 
-import {Container, ContainerSize, Link, LinkVariant, Text, TextSize} from '~/shared/ui';
+import {Link} from '~/shared/ui/link';
 
 import Logo from './assets/logo.svg';
-import cls from './index.module.scss';
+
+interface ColumnItem {
+  label: string;
+  route: string | RouteInstance<RouteParams>;
+  openInNewTab?: boolean;
+}
+
+interface Column {
+  title: string;
+  items: ColumnItem[];
+}
+
+const columns: Column[] = [
+  {
+    title: 'Legal',
+    items: [
+      {
+        label: 'Terms of use',
+        route: '/terms-of-use',
+      },
+      {
+        label: 'Platform policies',
+        route: 'https://github.com/crowdparlay/foundation/wiki/Концепция',
+        openInNewTab: true,
+      },
+      {
+        label: 'Privacy',
+        route: '#',
+      },
+    ],
+  },
+  {
+    title: 'Contacts',
+    items: [
+      {
+        label: 'Telegram',
+        route: 'https://t.me/crowdparlay',
+        openInNewTab: true,
+      },
+      {
+        label: 'Twitter',
+        route: '#',
+      },
+      {
+        label: 'Email',
+        route: '#',
+      },
+    ],
+  },
+  {
+    title: 'Developers',
+    items: [
+      {
+        label: 'Source code',
+        route: 'https://github.com/crowdparlay',
+        openInNewTab: true,
+      },
+      {
+        label: 'API reference',
+        route: 'https://bump.sh/undrcrxwn/doc/crowdparlay',
+        openInNewTab: true,
+      },
+      {
+        label: 'Status',
+        route: '/forbidden',
+      },
+    ],
+  },
+];
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
@@ -12,74 +81,28 @@ export const Footer = (props: FooterProps) => {
   const {className, ...otherProps} = props;
 
   return (
-    <footer
-      className={cn(
-        'h-48 -mt-48 py-6 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60 border-t',
-        className,
-      )}
-      {...otherProps}
-    >
-      <Container size={ContainerSize.L} style={{padding: 0}} className={cls.row}>
-        <Container className={cls.column}>
-          <Text size={TextSize.S} accent={true} Component="h4">
-            Legal
-          </Text>
-          <Link variant={LinkVariant.PRIMARY} to={'/terms-of-use'}>
-            Terms of use
-          </Link>
-          <Link
-            variant={LinkVariant.PRIMARY}
-            to={'https://github.com/crowdparlay/foundation/wiki/Концепция'}
-            target={'_blank'}
-          >
-            Platform policies
-          </Link>
-          <Link variant={LinkVariant.PRIMARY} to={'#'}>
-            Privacy
-          </Link>
-        </Container>
-        <Container className={cls.column}>
-          <Text size={TextSize.S} accent={true} Component="h4">
-            Contacts
-          </Text>
-          <Link variant={LinkVariant.PRIMARY} to={'https://t.me/crowdparlay'} target={'_blank'}>
-            Telegram
-          </Link>
-          <Link variant={LinkVariant.PRIMARY} to={'#'}>
-            Twitter
-          </Link>
-          <Link variant={LinkVariant.PRIMARY} to={'#'}>
-            Email
-          </Link>
-        </Container>
-        <Container className={cls.column}>
-          <Text size={TextSize.S} accent={true} Component="h4">
-            Developers
-          </Text>
-          <Link
-            variant={LinkVariant.PRIMARY}
-            to={'https://github.com/crowdparlay'}
-            target={'_blank'}
-          >
-            Source code
-          </Link>
-          <Link
-            variant={LinkVariant.PRIMARY}
-            to={'https://bump.sh/undrcrxwn/doc/crowdparlay'}
-            target={'_blank'}
-          >
-            API reference
-          </Link>
-          <Link variant={LinkVariant.PRIMARY} to={'/forbidden'}>
-            Status
-          </Link>
-        </Container>
-        <Container className={cls.column}>
-          <Logo />
-          <Text size={TextSize.S}>Copyright © {new Date().getFullYear()} Crowd Parlay</Text>
-          <Text size={TextSize.S}>All rights reserved</Text>
-        </Container>
-      </Container>
+    <footer className={cn('flex items-center px-6 py-8 border-t', className)} {...otherProps}>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-y-8 mx-auto w-full sm:max-w-xl md:max-w-3xl text-sm">
+        {columns.map(({title, items}) => (
+          <div>
+            <h3 className="leading-7 font-[Inter] font-bold mb-3">{title}</h3>
+            <div className="flex flex-col gap-2">
+              {items.map(({label, route, openInNewTab}, i) => (
+                <Link key={i} to={route} target={openInNewTab ? '_blank' : undefined}>
+                  {label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+        <div className="w-max">
+          <Logo className="flex-1 h-7 w-fit mb-3 invert dark:filter-none" />
+          <div className="space-y-2 text-muted-foreground">
+            <p>Copyright © {new Date().getFullYear()} Crowd Parlay</p>
+            <p>All rights reserved</p>
+          </div>
+        </div>
+      </div>
     </footer>
   );
 };
diff --git a/src/widgets/header/assets/avatar.png b/src/widgets/header/assets/avatar.png
deleted file mode 100644
index f04fce1..0000000
Binary files a/src/widgets/header/assets/avatar.png and /dev/null differ
diff --git a/src/widgets/header/assets/logo-mini.svg b/src/widgets/header/assets/logo-mini.svg
new file mode 100644
index 0000000..f78c659
--- /dev/null
+++ b/src/widgets/header/assets/logo-mini.svg
@@ -0,0 +1,21 @@
+<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 741.44 790.21">
+    <g>
+        <path d="M411 790.21h-80.57c-19.54 0-37.57-8.89-49.46-24.39s-15.82-35.22-10.76-54.09l40.29-150.35c7.41-27.64 31.61-46.21 60.22-46.21s52.81 18.57 60.22 46.21l40.29 150.35c5.06 18.87 1.14 38.59-10.76 54.09s-29.92 24.39-49.46 24.39zm-40.29-244.77c-11.9 0-26.29 6.25-30.99 23.78l-40.29 150.35c-2.6 9.71-.58 19.85 5.54 27.83s15.4 12.55 25.45 12.55h80.57c10.05 0 19.33-4.58 25.45-12.55s8.14-18.12 5.54-27.83l-40.29-150.35c-4.7-17.53-19.09-23.78-30.98-23.78z"
+              id="_Radial_Repeat_"/>
+        <path class="cls-1"
+              d="M102.84 658.73c-2.75 0-5.52-.18-8.3-.55-19.37-2.55-36.08-13.72-45.85-30.64L8.4 557.76c-9.77-16.92-11.08-36.98-3.61-55.03s22.59-31.3 41.46-36.36l150.35-40.29c27.64-7.41 55.82 4.27 70.13 29.05 14.31 24.78 10.33 55.02-9.91 75.26L146.76 640.45c-11.83 11.83-27.5 18.27-43.92 18.27zm110.71-204.65c-2.87 0-5.91.39-9.11 1.25L54.09 495.62c-9.71 2.6-17.49 9.42-21.33 18.71-3.85 9.29-3.17 19.61 1.86 28.31l40.29 69.78c5.03 8.71 13.63 14.45 23.59 15.76 9.96 1.31 19.76-2.01 26.87-9.12L235.43 509c12.83-12.83 11.05-28.42 5.1-38.72-4.86-8.42-14.17-16.19-26.97-16.19z"
+              id="_Radial_Repeat_-2"/>
+        <path class="cls-1"
+              d="M213.17 366.32c-5.47 0-11.03-.72-16.56-2.2L46.26 323.83c-18.87-5.06-33.99-18.31-41.46-36.36s-6.16-38.11 3.61-55.03l40.29-69.78c9.77-16.92 26.48-28.09 45.86-30.64 19.37-2.55 38.41 3.91 52.22 17.73l110.06 110.06c20.23 20.23 24.22 50.48 9.91 75.26-11.44 19.82-31.75 31.25-53.57 31.25zm-8.73-31.44c17.52 4.69 30.13-4.64 36.08-14.95 5.95-10.3 7.73-25.89-5.1-38.72L125.36 171.15c-7.11-7.11-16.91-10.43-26.87-9.12-9.97 1.31-18.57 7.06-23.59 15.76l-40.29 69.78c-5.03 8.71-5.7 19.03-1.86 28.31 3.85 9.29 11.62 16.11 21.33 18.71l150.35 40.29z"
+              id="_Radial_Repeat_-3"/>
+        <path class="cls-1"
+              d="M370.72 275.04c-28.61 0-52.81-18.57-60.22-46.21L270.21 78.48c-5.06-18.87-1.14-38.59 10.76-54.09S310.89 0 330.43 0H411c19.54 0 37.57 8.89 49.46 24.39s15.82 35.22 10.76 54.09l-40.29 150.35c-7.41 27.64-31.61 46.21-60.22 46.21zM339.74 221c4.7 17.53 19.09 23.77 30.98 23.77s26.29-6.25 30.99-23.77L442 70.65c2.6-9.71.58-19.85-5.54-27.83s-15.4-12.55-25.45-12.55h-80.57c-10.05 0-19.33 4.57-25.45 12.55s-8.14 18.12-5.54 27.83L339.74 221z"
+              id="_Radial_Repeat_-4"/>
+        <path class="cls-1"
+              d="M528.26 366.32c-21.81 0-42.12-11.43-53.57-31.25-14.31-24.78-10.32-55.02 9.91-75.26l110.06-110.06c13.82-13.82 32.85-20.28 52.22-17.73 19.37 2.55 36.09 13.72 45.86 30.64l40.29 69.78c9.77 16.92 11.08 36.98 3.61 55.03s-22.59 31.31-41.46 36.36l-150.35 40.29c-5.54 1.48-11.1 2.2-16.56 2.2zm110.41-204.57c-8.45 0-16.51 3.31-22.6 9.4L506.01 281.21c-12.83 12.83-11.05 28.42-5.1 38.72 5.95 10.31 18.55 19.64 36.08 14.95l150.35-40.29c9.71-2.6 17.49-9.42 21.33-18.71 3.85-9.29 3.17-19.61-1.86-28.31l-40.29-69.78c-5.03-8.71-13.63-14.45-23.59-15.76a32.34 32.34 0 0 0-4.27-.28z"
+              id="_Radial_Repeat_-5"/>
+        <path class="cls-1"
+              d="M638.59 658.73c-16.43 0-32.09-6.44-43.92-18.27L484.61 530.4c-20.23-20.23-24.21-50.48-9.91-75.26 14.31-24.78 42.5-36.45 70.13-29.05l150.35 40.29c18.87 5.06 33.99 18.31 41.46 36.36 7.48 18.05 6.16 38.11-3.61 55.03l-40.29 69.78c-9.77 16.92-26.48 28.09-45.86 30.64-2.78.37-5.55.55-8.3.55zM527.87 454.07c-12.8 0-22.11 7.77-26.97 16.19-5.95 10.3-7.74 25.89 5.1 38.72l110.06 110.06c7.11 7.11 16.9 10.43 26.87 9.12 9.97-1.31 18.57-7.06 23.59-15.76l40.29-69.78c5.03-8.71 5.7-19.03 1.86-28.31-3.85-9.29-11.62-16.11-21.33-18.71l-150.35-40.29c-3.21-.86-6.25-1.25-9.11-1.25z"
+              id="_Radial_Repeat_-6"/>
+    </g>
+</svg>
diff --git a/src/widgets/header/assets/notification.svg b/src/widgets/header/assets/notification.svg
deleted file mode 100644
index eea7c54..0000000
--- a/src/widgets/header/assets/notification.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.5 15C6.99254 15 7.46492 14.8025 7.8132 14.4509C8.16148 14.0992 8.35714 13.6224 8.35714 13.1251H4.64286C4.64286 13.6224 4.83852 14.0992 5.1868 14.4509C5.53508 14.8025 6.00745 15 6.5 15ZM6.5 1.79885L5.75993 1.94978C4.92046 2.12245 4.16588 2.58265 3.62389 3.25248C3.0819 3.9223 2.78581 4.76061 2.78571 5.62551C2.78571 6.21423 2.66129 7.68509 2.3595 9.13344C2.21093 9.85247 2.01036 10.6015 1.74386 11.2502H11.2561C10.9896 10.6015 10.79 9.8534 10.6405 9.13344C10.3387 7.68509 10.2143 6.21423 10.2143 5.62551C10.214 4.76077 9.91778 3.92268 9.37582 3.25305C8.83385 2.58342 8.07938 2.12336 7.24007 1.95071L6.5 1.79885ZM12.2757 11.2502C12.4828 11.6692 12.7224 12.0011 13 12.1877H0C0.277643 12.0011 0.517214 11.6692 0.724286 11.2502C1.56 9.5628 1.85714 6.45047 1.85714 5.62551C1.85714 3.35689 3.45429 1.46324 5.57607 1.03108C5.56311 0.900728 5.57736 0.769084 5.61789 0.644635C5.65842 0.520186 5.72434 0.405695 5.81139 0.308545C5.89845 0.211396 6.0047 0.133745 6.12331 0.0806014C6.24191 0.0274574 6.37024 0 6.5 0C6.62976 0 6.75809 0.0274574 6.87669 0.0806014C6.9953 0.133745 7.10155 0.211396 7.18861 0.308545C7.27566 0.405695 7.34158 0.520186 7.38211 0.644635C7.42264 0.769084 7.43689 0.900728 7.42393 1.03108C8.47348 1.2466 9.41699 1.82168 10.0947 2.65896C10.7724 3.49623 11.1427 4.54423 11.1429 5.62551C11.1429 6.45047 11.44 9.5628 12.2757 11.2502Z" fill="currentColor"/>
-</svg>
diff --git a/src/widgets/header/index.module.scss b/src/widgets/header/index.module.scss
deleted file mode 100644
index 0caa7ba..0000000
--- a/src/widgets/header/index.module.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-.header {
-  backdrop-filter: blur(50px);
-  border-bottom: 1px solid rgba(255 255 255 / 7%);
-  display: flex;
-  justify-content: space-between;
-  position: fixed;
-  width: 100%;
-  z-index: 1;
-  height: 60px;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.linksContainer {
-  display: flex;
-  gap: 35px;
-  margin-left: 30px;
-}
-
-.icon {
-  color: var(--color-white);
-}
-
-.button {
-  $size: 60px;
-
-  min-width: $size;
-  width: $size;
-  height: $size;
-  padding: 0;
-  justify-content: center;
-  border-radius: 0;
-}
-
-.logo {
-  height: 60px;
-  padding: 20px;
-  opacity: 1 !important;
-}
-
-.search {
-  width: 300px;
-
-  & > input {
-    border-width: 1px;
-    background: rgba(255 255 255 / 3%);
-
-    &:hover {
-      border-color: rgba(255 255 255 / 3%) !important;
-    }
-  }
-}
-
-.authorization {
-  display: flex;
-  gap: 12px;
-  margin-right: 12px;
-}
diff --git a/src/widgets/header/index.tsx b/src/widgets/header/index.tsx
index 9ca705c..17a020e 100644
--- a/src/widgets/header/index.tsx
+++ b/src/widgets/header/index.tsx
@@ -1,5 +1,7 @@
-import {RouteInstance} from 'atomic-router';
+import {Link} from 'atomic-router-react';
 import {useUnit} from 'effector-react';
+import {Bell, ChevronDown} from 'lucide-react';
+import {cn} from '~/lib/utils';
 
 import {ModeToggle} from '~/widgets/mode-toggle';
 
@@ -7,14 +9,11 @@ import {UserEntity} from '~/entities/types';
 
 import {routes} from '~/shared/routes';
 import {$user} from '~/shared/session';
-import {Avatar, Input, Link, LinkVariant} from '~/shared/ui';
+import {Avatar} from '~/shared/ui';
 import {Button} from '~/shared/ui/button';
-import ArrowIcon from '~/shared/ui/icon/assets/arrow.svg';
 
+import LogoMini from './assets/logo-mini.svg';
 import Logo from './assets/logo.svg';
-import NotificationIcon from './assets/notification.svg';
-import cls from './index.module.scss';
-import {$search, searchChange} from './model';
 
 export interface HeaderProps {
   forceUser?: UserEntity;
@@ -22,48 +21,37 @@ export interface HeaderProps {
 
 export const Header = (props: HeaderProps) => {
   const {forceUser} = props;
-
-  const [user, search, onSearchChange] = useUnit([$user, $search, searchChange]);
+  const user = useUnit($user);
 
   return (
-    <header className="fixed z-20 w-full h-16 flex flex-nowrap justify-between bg-background border-b overflow-hidden">
-      <div className="flex items-center">
-        <Link className={cls.logo} variant={LinkVariant.CLEAR} to={routes.home}>
-          <Logo className="invert dark:filter-none" />
+    <header className="fixed z-20 w-full h-16 flex flex-nowrap justify-between bg-background border-b">
+      <div className="flex grow-1 shrink-0">
+        <Link to={routes.home} className="flex items-center invert dark:filter-none">
+          <Logo className="hidden md:block ps-6 me-4" />
+          <LogoMini className="md:hidden h-full p-3 pe-4" />
         </Link>
-
-        <Input
-          value={search}
-          onChange={(e) => onSearchChange(e.target.value)}
-          placeholder="Search"
-          className={cls.search}
-        />
-
-        <div className="space-x-8 mx-8">
-          <Link variant={LinkVariant.NAVIGATION} to={routes.explore}>
-            Explore
-          </Link>
-          <Link variant={LinkVariant.NAVIGATION} badge={2} to={routes.bets}>
-            My bets
-          </Link>
-          <Link variant={LinkVariant.NAVIGATION} to={routes.events}>
-            My events
-          </Link>
-          <Link variant={LinkVariant.NAVIGATION} to={routes.bookmarks}>
-            Bookmarks
-          </Link>
-        </div>
       </div>
-
-      <div className="flex items-center gap-4 pe-3">
+      <div
+        className={cn(
+          'flex h-full font-medium text-sm',
+          'w-full sm:max-w-xl md:max-w-3xl',
+          '[&>*]:flex [&>*]:items-center [&>*]:h-full [&>*]:px-4 [&>*]:hover:opacity-80',
+          'xl:[&>*]:first:ps-0',
+        )}
+      >
+        <Link to={routes.explore}>Discussions</Link>
+        <Link to={routes.profiles}>Profiles</Link>
+      </div>
+      <div className="flex grow-1 shrink-0 justify-end overflow-hidden items-center gap-4 pe-3">
         <ModeToggle />
         {(forceUser ?? user) ? (
           <>
             <Button variant="ghost" size="icon">
-              <NotificationIcon />
+              <Bell />
             </Button>
             <Link
-              to={routes.profile as RouteInstance<any>}
+              className="shrink-0"
+              to={routes.profile}
               params={{
                 username: user!.username,
               }}
@@ -71,7 +59,7 @@ export const Header = (props: HeaderProps) => {
               <Avatar user={user} className="rounded-full size-8" />
             </Link>
             <Button variant="ghost" size="icon">
-              <ArrowIcon />
+              <ChevronDown />
             </Button>
           </>
         ) : (
diff --git a/src/widgets/header/model.ts b/src/widgets/header/model.ts
deleted file mode 100644
index efea7cd..0000000
--- a/src/widgets/header/model.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import {createEvent, createStore} from 'effector';
-
-export const searchChange = createEvent<string>();
-export const $search = createStore<string>('').on(searchChange, (_, payload) => payload);
diff --git a/vite.config.ts b/vite.config.ts
index c93f100..05ed936 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,7 +23,6 @@ export default defineConfig({
       {find: '@', replacement: '/src'},
     ],
   },
-
   server: {
     proxy: {
       '/api': {