diff --git a/app/(root)/profile/page.tsx b/app/(root)/profile/page.tsx
index b0c3e24..f33f140 100644
--- a/app/(root)/profile/page.tsx
+++ b/app/(root)/profile/page.tsx
@@ -1,90 +1,12 @@
 import React from 'react';
-import styles from './UserProfile.module.css';
-import { Metadata } from 'next';
+import UserProfile from '../../components/UserProfile/UserProfile';
 
-export const metadata: Metadata = {
+export const metadata = {
     title: 'Profile',
 };
 
-const UserProfile = () => {
-    return (
-        <>
-            <div className={styles.container}>
-                <main className={styles.mainContent}>
-                    <div className={styles.profilesAndBalance}>
-                        <div className={styles.otherProfile}>
-                            <div className={styles.userProfile}>USER PROFILE</div>
-                            <div className={styles.profileInfo}>
-                                <div className={styles.profileInfoLeft}>
-                                    <img src="../../user-pic.png" alt="User Avatar" className={styles.avatar} />
-                                    <div className={styles.profileStatus}>
-                                        <div className={styles.userName}>User name</div>
-                                        <div className={styles.status}>status</div>
-                                        <div className={styles.info}>Information is absent.</div>
-                                    </div>
-                                </div>
-                                <div className={styles.profileInfoRight}>
-                                    <div className={styles.icons}>
-                                        <div className={styles.steamIcon}><img src="../../steam-icon.svg" alt="User Avatar" className={styles.avatar} /></div>
-                                    </div>
-                                    <div className={styles.actions}>
-                                        <button className={styles.writeButton}>Write</button>
-                                        <button className={styles.addButton}>Add as Friend</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className={styles.rating}>8.7</div>
-                        </div>
-                        <div className={styles.balance}>
-                            <div className={styles.balanceInfo}>
-                                <div className={styles.balanceText}>BALANCE</div>
-                                <div className={styles.amount}>14.256 ₽</div>
-                            </div>
-                            <div className={styles.cartContainer}>
-                                <div className={styles.cartIcon}> {/* Замените на реальную иконку, если доступно */}
-                                    <svg width="24" height="24" viewBox="0 0 24 24">
-                                        <path d="M7 4h-2l-1 2h16l-1-2h-2v-2h-8v2zm-2.05 3l-2.928 12h16.156l-2.928-12h-10.3zm10.932 2l1.297 5h-9.948l1.297-5h7.354z" />
-                                    </svg>
-                                </div>
-                                <div className={styles.cartCount}>3</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className={styles.sidebarAndContent}>
-                        <div className={styles.contentAndActions}>
-                            <div className={`${styles.productSection} overflow-auto`}>
-                                <div className={styles.productCards}>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-                                    <div className={styles.productCard}><img src="../../ak-47.png" alt="Product" />
-                                        <p className={styles.productTitle}>АК-47</p></div>
-
-                                </div>
-                            </div>
-                            <div className={styles.actionsWithSkins}>
-                                <button className={styles.actionInventory}>Инвентарь</button>
-                                <button className={styles.actionsSellSkins}>Скины на продаже</button>
-                            </div>
-                        </div>
-                    </div>
-                </main>
-            </div>
-        </>
-    );
+const Page: React.FC = () => {
+    return <UserProfile />;
 };
 
-export default UserProfile;
+export default Page;
diff --git a/app/(root)/profile/UserProfile.module.css b/app/components/UserProfile/UserProfile.module.css
similarity index 94%
rename from app/(root)/profile/UserProfile.module.css
rename to app/components/UserProfile/UserProfile.module.css
index ef205a1..85ebbef 100644
--- a/app/(root)/profile/UserProfile.module.css
+++ b/app/components/UserProfile/UserProfile.module.css
@@ -1,372 +1,372 @@
-.container {
-  background-color: transparent;
-  color: #fff;
-  min-height: 70vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow: hidden; /* Предотвращаем прокрутку страницы */
-}
-
-.mainContent {
-  display: grid;
-  grid-template-rows: auto auto; /* Для Header и остального содержимого */
-  width: 100%;
-  max-width: 1600px;
-  gap: 20px;
-  column-gap: 0px;
-  overflow: hidden; /* Предотвращаем прокрутку страницы */
-}
-
-.sidebar {
-  grid-row: 1 / 3; /* Sidebar будет растягиваться на две строки */
-}
-
-.profilesAndBalance {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-  grid-column: 2 / 3;
-}
-
-.userProfile {
-  width: 571px;
-  height: 50px;
-  background: #181819;
-  display: flex;
-  border-radius: 0px 10px 0px 10px;
-  border: 1px solid #42b5ff;
-  color: #42b5ff;
-  align-items: center;
-  justify-content: center;
-}
-
-.balance {
-  background-color: #333;
-  height: 60px;
-  width: 165px;
-  padding: 0px 10px 0px 10px;
-  border-radius: 0px 10px 0px 10px;
-  border: 1px solid grey;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: white;
-  position: relative;
-}
-
-.balanceInfo {
-  display: flex;
-  flex-direction: column;
-}
-
-.balanceText {
-  font-weight: bold;
-  font-size: 0.8em; /* Уменьшенный размер шрифта */
-}
-
-.amount {
-  font-size: 0.8em; /* Уменьшенный размер шрифта */
-}
-
-.cartContainer {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.cartIcon {
-  background-color: #444;
-  border-radius: 5px;
-  padding: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px; /* Уменьшенная ширина */
-  height: 30px; /* Уменьшенная высота */
-}
-
-.cartCount {
-  background-color: #02841e;
-  border-radius: 50%;
-  padding: 2px 5px; /* Отрегулированный отступ */
-  font-size: 0.7em; /* Уменьшенный размер шрифта */
-  color: white;
-  position: absolute;
-  top: -5px;
-  right: -5px;
-}
-
-.myProfile {
-  width: 275px;
-  height: 283px;
-}
-
-.otherProfile {
-  width: 570px;
-  background-color: #3a4340;
-  border-radius: 16px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  margin-right: 10px;
-}
-
-.profileInfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 200px;
-  width: 571px;
-}
-
-.profileInfoLeft {
-  display: flex;
-  margin-bottom: auto;
-  margin-left: -280px;
-  width: 250px;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.profileStatus {
-  display: flex;
-  flex-direction: column;
-  margin-top: 20px;
-}
-
-.profileInfoRight {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 520px;
-  margin-bottom: 20px;
-}
-
-.userName {
-  font-weight: bold;
-  color: #fff;
-  margin-right: 10px;
-}
-
-.status {
-  color: #ccc;
-  margin-right: 10px;
-}
-
-.info {
-  color: #ccc;
-  margin-right: 10px;
-}
-
-.icons {
-  display: flex;
-  align-items: center;
-  margin-right: auto;
-}
-
-.steamIcon {
-  width: 30px;
-  height: 30px;
-  background-color: #444;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  margin-right: 10px;
-}
-
-.writeButton {
-  background-color: #555;
-  color: #fff;
-  height: 20px;
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-.addButton {
-  background-color: #555;
-  color: #fff;
-  height: 20px;
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-.writeButton:hover,
-.addButton:hover {
-  background-color: #666;
-}
-
-.rating {
-  background-color: #02841e;
-  width: 41px;
-  height: 37px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  color: #fff;
-  font-weight: bold;
-  position: absolute;
-  top: 65px;
-  right: 20px;
-}
-
-.sidebarAndContent {
-  display: flex;
-  gap: 20px;
-  grid-column: 2 / 3; /* Охватывает второй столбец */
-}
-
-.contentAndActions {
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-}
-
-.productSection {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  background-color: #3a4340;
-  max-height: 388px;
-  width: 571px;
-  overflow-y: auto; /* Добавляем вертикальную прокрутку */
-  position: relative;
-  border-radius: 5px;
-  padding: 10px;
-}
-
-.productCards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-}
-
-.productCard {
-  background-color: #444;
-  width: 166px;
-  height: 166px;
-  padding: 20px;
-  border-radius: 5px;
-  text-align: center;
-}
-
-.productTitle {
-  text-align: left;
-}
-
-/* Стилизация полосы прокрутки для WebKit-браузеров */
-.productSection::-webkit-scrollbar {
-  width: 12px;
-}
-
-.productSection::-webkit-scrollbar-track {
-  background: #333;
-  border-radius: 10px;
-  position: relative;
-}
-
-.productSection::-webkit-scrollbar-thumb {
-  background: #555;
-  border-radius: 10px;
-  position: relative;
-}
-
-.productSection::-webkit-scrollbar-thumb:hover {
-  background: #777;
-}
-
-/* Используем псевдоэлементы для создания отступов */
-.productSection::-webkit-scrollbar-track:before,
-.productSection::-webkit-scrollbar-track:after {
-  content: "";
-  display: block;
-  height: 20px; /* Высота отступа */
-  background: transparent;
-}
-
-.actions {
-  display: flex;
-  flex-direction: row-reverse;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-start;
-  max-width: 275px;
-}
-
-.actions button {
-  background-color: #444;
-  max-width: 175px;
-  min-width: 90px;
-  height: 40px;
-  padding: 8px 20px 10px 20px;
-  border: 1px solid #fff;
-  border-radius: 35px;
-  color: white;
-  cursor: pointer;
-}
-
-.actions button:hover {
-  background-color: #555;
-}
-
-.actionsWithSkins {
-  height: 275px;
-  width: 278px;
-  display: flex;
-  flex-direction: column;
-  font-size: 25px;
-}
-
-.actionInventory {
-  height: 70px;
-  width: 100%;
-  border-radius: 0px 10px 0px 10px;
-  border: 1px solid #42b5ff;
-  margin-bottom: 20px;
-}
-
-.actionsSellSkins {
-  height: 70px;
-  width: 100%;
-}
-
-@media (max-width: 720px) {
-  .container {
-    padding: 5px;
-  }
-
-  .profilesAndBalance {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .profileInfo,
-  .otherProfile,
-  .userProfile,
-  .productSection {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .productCards {
-    grid-template-columns: 1fr;
-    gap: 10px;
-  }
-
-  .balance,
-  .actions,
-  .actionsWithSkins {
-    width: 100%;
-    max-width: 100%;
-  }
-}
+.container {
+  background-color: transparent;
+  color: #fff;
+  min-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden; /* Предотвращаем прокрутку страницы */
+}
+
+.mainContent {
+  display: grid;
+  grid-template-rows: auto auto; /* Для Header и остального содержимого */
+  width: 100%;
+  max-width: 1600px;
+  gap: 20px;
+  column-gap: 0px;
+  overflow: hidden; /* Предотвращаем прокрутку страницы */
+}
+
+.sidebar {
+  grid-row: 1 / 3; /* Sidebar будет растягиваться на две строки */
+}
+
+.profilesAndBalance {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  grid-column: 2 / 3;
+}
+
+.userProfile {
+  width: 571px;
+  height: 50px;
+  background: #181819;
+  display: flex;
+  border-radius: 0px 10px 0px 10px;
+  border: 1px solid #42b5ff;
+  color: #42b5ff;
+  align-items: center;
+  justify-content: center;
+}
+
+.balance {
+  background-color: #333;
+  height: 60px;
+  width: 165px;
+  padding: 0px 10px 0px 10px;
+  border-radius: 0px 10px 0px 10px;
+  border: 1px solid grey;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: white;
+  position: relative;
+}
+
+.balanceInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.balanceText {
+  font-weight: bold;
+  font-size: 0.8em; /* Уменьшенный размер шрифта */
+}
+
+.amount {
+  font-size: 0.8em; /* Уменьшенный размер шрифта */
+}
+
+.cartContainer {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.cartIcon {
+  background-color: #444;
+  border-radius: 5px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px; /* Уменьшенная ширина */
+  height: 30px; /* Уменьшенная высота */
+}
+
+.cartCount {
+  background-color: #02841e;
+  border-radius: 50%;
+  padding: 2px 5px; /* Отрегулированный отступ */
+  font-size: 0.7em; /* Уменьшенный размер шрифта */
+  color: white;
+  position: absolute;
+  top: -5px;
+  right: -5px;
+}
+
+.myProfile {
+  width: 275px;
+  height: 283px;
+}
+
+.otherProfile {
+  width: 570px;
+  background-color: #3a4340;
+  border-radius: 16px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.profileInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 200px;
+  width: 571px;
+}
+
+.profileInfoLeft {
+  display: flex;
+  margin-bottom: auto;
+  margin-left: -280px;
+  width: 250px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.profileStatus {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+.profileInfoRight {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 520px;
+  margin-bottom: 20px;
+}
+
+.userName {
+  font-weight: bold;
+  color: #fff;
+  margin-right: 10px;
+}
+
+.status {
+  color: #ccc;
+  margin-right: 10px;
+}
+
+.info {
+  color: #ccc;
+  margin-right: 10px;
+}
+
+.icons {
+  display: flex;
+  align-items: center;
+  margin-right: auto;
+}
+
+.steamIcon {
+  width: 30px;
+  height: 30px;
+  background-color: #444;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  margin-right: 10px;
+}
+
+.writeButton {
+  background-color: #555;
+  color: #fff;
+  height: 20px;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.addButton {
+  background-color: #555;
+  color: #fff;
+  height: 20px;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.writeButton:hover,
+.addButton:hover {
+  background-color: #666;
+}
+
+.rating {
+  background-color: #02841e;
+  width: 41px;
+  height: 37px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  color: #fff;
+  font-weight: bold;
+  position: absolute;
+  top: 65px;
+  right: 20px;
+}
+
+.sidebarAndContent {
+  display: flex;
+  gap: 20px;
+  grid-column: 2 / 3; /* Охватывает второй столбец */
+}
+
+.contentAndActions {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.productSection {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: #3a4340;
+  max-height: 388px;
+  width: 571px;
+  overflow-y: auto; /* Добавляем вертикальную прокрутку */
+  position: relative;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+.productCards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.productCard {
+  background-color: #444;
+  width: 166px;
+  height: 166px;
+  padding: 20px;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.productTitle {
+  text-align: left;
+}
+
+/* Стилизация полосы прокрутки для WebKit-браузеров */
+.productSection::-webkit-scrollbar {
+  width: 12px;
+}
+
+.productSection::-webkit-scrollbar-track {
+  background: #333;
+  border-radius: 10px;
+  position: relative;
+}
+
+.productSection::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 10px;
+  position: relative;
+}
+
+.productSection::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+/* Используем псевдоэлементы для создания отступов */
+.productSection::-webkit-scrollbar-track:before,
+.productSection::-webkit-scrollbar-track:after {
+  content: "";
+  display: block;
+  height: 20px; /* Высота отступа */
+  background: transparent;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 275px;
+}
+
+.actions button {
+  background-color: #444;
+  max-width: 175px;
+  min-width: 90px;
+  height: 40px;
+  padding: 8px 20px 10px 20px;
+  border: 1px solid #fff;
+  border-radius: 35px;
+  color: white;
+  cursor: pointer;
+}
+
+.actions button:hover {
+  background-color: #555;
+}
+
+.actionsWithSkins {
+  height: 275px;
+  width: 278px;
+  display: flex;
+  flex-direction: column;
+  font-size: 25px;
+}
+
+.actionInventory {
+  height: 70px;
+  width: 100%;
+  border-radius: 0px 10px 0px 10px;
+  border: 1px solid #42b5ff;
+  margin-bottom: 20px;
+}
+
+.actionsSellSkins {
+  height: 70px;
+  width: 100%;
+}
+
+@media (max-width: 720px) {
+  .container {
+    padding: 5px;
+  }
+
+  .profilesAndBalance {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .profileInfo,
+  .otherProfile,
+  .userProfile,
+  .productSection {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .productCards {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .balance,
+  .actions,
+  .actionsWithSkins {
+    width: 100%;
+    max-width: 100%;
+  }
+}
diff --git a/app/components/UserProfile/UserProfile.tsx b/app/components/UserProfile/UserProfile.tsx
new file mode 100644
index 0000000..8615951
--- /dev/null
+++ b/app/components/UserProfile/UserProfile.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { fetchUserProfile, fetchUserBalance, fetchProducts } from './actions';
+import styles from './UserProfile.module.css';
+import { Metadata } from 'next';
+
+interface UserProfile {
+    avatarUrl: string;
+    name: string;
+    status: string;
+    info: string;
+    rating: number;
+}
+
+interface UserBalance {
+    amount: number;
+}
+
+interface Product {
+    id: number;
+    imageUrl: string;
+    title: string;
+}
+
+const UserProfile: React.FC = () => {
+    const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+    const [userBalance, setUserBalance] = useState<UserBalance | null>(null);
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        async function loadData() {
+            try {
+                const profile = await fetchUserProfile();
+                setUserProfile(profile);
+
+                const balance = await fetchUserBalance();
+                setUserBalance(balance);
+
+                const productsList = await fetchProducts();
+                setProducts(productsList);
+            } catch (error) {
+                console.error('Failed to load data', error);
+            }
+        }
+
+        loadData();
+    }, []);
+
+    if (!userProfile || !userBalance) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div className={styles.container}>
+            <main className={styles.mainContent}>
+                <div className={styles.profilesAndBalance}>
+                    <div className={styles.otherProfile}>
+                        <div className={styles.userProfile}>USER PROFILE</div>
+                        <div className={styles.profileInfo}>
+                            <div className={styles.profileInfoLeft}>
+                                <img src={userProfile.avatarUrl} alt="User Avatar" className={styles.avatar} />
+                                <div className={styles.profileStatus}>
+                                    <div className={styles.userName}>{userProfile.name}</div>
+                                    <div className={styles.status}>{userProfile.status}</div>
+                                    <div className={styles.info}>{userProfile.info || "Information is absent."}</div>
+                                </div>
+                            </div>
+                            <div className={styles.profileInfoRight}>
+                                <div className={styles.icons}>
+                                    <div className={styles.steamIcon}><img src="../../steam-icon.svg" alt="Steam Icon" className={styles.avatar} /></div>
+                                </div>
+                                <div className={styles.actions}>
+                                    <button className={styles.writeButton}>Write</button>
+                                    <button className={styles.addButton}>Add as Friend</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.rating}>{userProfile.rating}</div>
+                    </div>
+                    <div className={styles.balance}>
+                        <div className={styles.balanceInfo}>
+                            <div className={styles.balanceText}>BALANCE</div>
+                            <div className={styles.amount}>{userBalance.amount} ₽</div>
+                        </div>
+                        <div className={styles.cartContainer}>
+                            <div className={styles.cartIcon}>
+                                <svg width="24" height="24" viewBox="0 0 24 24">
+                                    <path d="M7 4h-2l-1 2h16l-1-2h-2v-2h-8v2zm-2.05 3l-2.928 12h16.156l-2.928-12h-10.3zm10.932 2l1.297 5h-9.948l1.297-5h7.354z" />
+                                </svg>
+                            </div>
+                            <div className={styles.cartCount}>3</div>
+                        </div>
+                    </div>
+                </div>
+                <div className={styles.sidebarAndContent}>
+                    <div className={styles.contentAndActions}>
+                        <div className={`${styles.productSection} overflow-auto`}>
+                            <div className={styles.productCards}>
+                                {products.map((product) => (
+                                    <div className={styles.productCard} key={product.id}>
+                                        <img src={product.imageUrl} alt="Product" />
+                                        <p className={styles.productTitle}>{product.title}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                        <div className={styles.actionsWithSkins}>
+                            <button className={styles.actionInventory}>Инвентарь</button>
+                            <button className={styles.actionsSellSkins}>Скины на продаже</button>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default UserProfile;
\ No newline at end of file
diff --git a/app/components/UserProfile/actions.ts b/app/components/UserProfile/actions.ts
new file mode 100644
index 0000000..21f71ad
--- /dev/null
+++ b/app/components/UserProfile/actions.ts
@@ -0,0 +1,33 @@
+"use server";
+
+import { mockUserProfile, mockUserBalance, mockProducts } from './mockData';
+
+export async function fetchUserProfile() {
+    try {
+        // Заглушка данных
+        return mockUserProfile;
+    } catch (error) {
+        console.error('Error fetching user profile:', error);
+        throw error;
+    }
+}
+
+export async function fetchUserBalance() {
+    try {
+        // Заглушка данных
+        return mockUserBalance;
+    } catch (error) {
+        console.error('Error fetching user balance:', error);
+        throw error;
+    }
+}
+
+export async function fetchProducts() {
+    try {
+        // Заглушка данных
+        return mockProducts;
+    } catch (error) {
+        console.error('Error fetching products:', error);
+        throw error;
+    }
+}
diff --git a/app/components/UserProfile/mockData.ts b/app/components/UserProfile/mockData.ts
new file mode 100644
index 0000000..9177c73
--- /dev/null
+++ b/app/components/UserProfile/mockData.ts
@@ -0,0 +1,23 @@
+export const mockUserProfile = {
+    avatarUrl: '/user-pic.png', // Убедитесь, что этот файл существует в папке public
+    name: 'Jovani Josterro',
+    status: 'Active',
+    info: 'This is a test user profile.',
+    rating: 8.7,
+};
+
+export const mockUserBalance = {
+    amount: 14256.00,
+};
+
+export const mockProducts = [
+    { id: 1, imageUrl: '/ak-47.png', title: 'AK-47' }, // Убедитесь, что этот файл существует в папке public
+    { id: 2, imageUrl: '/ak-47.png', title: 'AK-47' },
+    { id: 3, imageUrl: '/ak-47.png', title: 'AK-47' },
+    { id: 4, imageUrl: '/ak-47.png', title: 'AK-47' },
+    { id: 5, imageUrl: '/ak-47.png', title: 'AK-47' },
+    { id: 6, imageUrl: '/ak-47.png', title: 'AK-47' },
+    { id: 7, imageUrl: '/ak-47.png', title: 'AK-47' },
+    { id: 8, imageUrl: '/ak-47.png', title: 'AK-47' },
+    { id: 9, imageUrl: '/ak-47.png', title: 'AK-47' },
+];