diff --git a/apps/web/app/(main)/contacts/page.tsx b/apps/web/app/(main)/contacts/page.tsx
index 189951a..f7aa957 100644
--- a/apps/web/app/(main)/contacts/page.tsx
+++ b/apps/web/app/(main)/contacts/page.tsx
@@ -5,7 +5,7 @@ import { ContactsFilterProvider } from '@/context/contacts-filter';
 export default function ContactsPage() {
   return (
     <ContactsFilterProvider>
-      <div className="sticky top-0 z-50 flex flex-row items-center justify-between space-x-4 bg-background p-4">
+      <div className="flex flex-row items-center justify-between space-x-4 bg-background p-4">
         <h1 className="text-2xl font-bold">Контакты</h1>
         <ContactsFilter />
       </div>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 49adbfd..ce928e2 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -16,7 +16,7 @@ export default async function RootLayout({ children }: Readonly<PropsWithChildre
 
   return (
     <html lang={locale}>
-      <body className="bg-secondary">
+      <body className="bg-muted dark:bg-zinc-900">
         <I18nProvider>
           <ThemeProvider>
             <AuthProvider>
diff --git a/apps/web/components/profile/profile-card.tsx b/apps/web/components/profile/profile-card.tsx
index 5c8b4b6..5508818 100644
--- a/apps/web/components/profile/profile-card.tsx
+++ b/apps/web/components/profile/profile-card.tsx
@@ -8,28 +8,31 @@ import { Button } from '@repo/ui/components/ui/button';
 import { useQuery } from '@tanstack/react-query';
 import Link from 'next/link';
 
-type ProfileCardProps = {
+type ProfileProps = {
   readonly telegramId?: string;
 };
 
-export function ProfileCard({ telegramId }: ProfileCardProps) {
+export function ProfileCard(props: ProfileProps) {
+  return (
+    <div className="space-y-4">
+      <Person {...props} />
+      <ProfileFields {...props} />
+    </div>
+  );
+}
+
+export function ProfileFields({ telegramId }: ProfileProps) {
   const { data: customer } = useQuery({
     queryFn: () => getProfile({ telegramId }),
     queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
   });
 
-  if (!customer) return <div>Пользователь не найден</div>;
+  if (!customer) return null;
 
   return (
-    <div className="space-y-4 bg-background p-4">
-      <div className="flex flex-col items-center space-y-2">
-        <Avatar className="size-20">
-          <AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
-          <AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
-        </Avatar>
-        <h2 className="text-3xl font-bold">{customer?.name}</h2>
-      </div>
+    <div className="rounded-md bg-background p-4">
       <div className="flex flex-col gap-4">
+        {telegramId ? false : <ProfileFieldsHeader />}
         {telegramId ? (
           false
         ) : (
@@ -77,3 +80,33 @@ export function ProfileCard({ telegramId }: ProfileCardProps) {
     </div>
   );
 }
+
+function Person({ telegramId }: ProfileProps) {
+  const { data: customer } = useQuery({
+    queryFn: () => getProfile({ telegramId }),
+    queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
+  });
+
+  if (!customer) return null;
+
+  return (
+    <div className="rounded-md bg-background p-4">
+      <div className="flex flex-col items-center space-y-2">
+        <Avatar className="size-20">
+          <AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
+          <AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
+        </Avatar>
+        <h2 className="text-2xl font-bold">{customer?.name}</h2>
+      </div>
+    </div>
+  );
+}
+
+function ProfileFieldsHeader() {
+  return (
+    <div className="flex flex-row justify-between">
+      <h1 className="text-lg font-bold text-muted-foreground">Ваши данные</h1>
+      <div />
+    </div>
+  );
+}
