diff --git a/client/package.json b/client/package.json
index faf000846..5bb26d981 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
     "@react-oauth/google": "^0.11.1",
     "@storybook/addon-styling": "^1.3.6",
     "@tanstack/react-query": "beta",
+    "@teameights/types": "^1.1.14",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",
@@ -46,7 +47,6 @@
     "react-tooltip": "^5.21.3",
     "sass": "^1.64.2",
     "sonner": "^1.0.3",
-    "teameights-types": "^1.0.4",
     "tsparticles": "^2.12.0",
     "typescript": "5.1.6",
     "yarn": "^1.22.19"
@@ -54,6 +54,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
+    "@faker-js/faker": "^8.2.0",
     "@storybook/addon-a11y": "^7.4.5",
     "@storybook/addon-essentials": "7.2.1",
     "@storybook/addon-interactions": "7.2.1",
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index db4dcef43..f78e6a781 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -3,7 +3,7 @@
 import { Flex, Typography, Skeleton, Button, Drawer } from '@/shared/ui';
 import { useGetScreenWidth } from '@/shared/lib';
 import { Crown } from '@/shared/assets';
-import { IUserRequest } from 'teameights-types';
+import { IUserRequest } from '@teameights/types';
 import { NewtonsCradle, RaceBy, Ring } from '@uiball/loaders';
 import { toast } from 'sonner';
 import { useState } from 'react';
diff --git a/client/src/shared/fixtures/team.ts b/client/src/shared/fixtures/team.ts
new file mode 100644
index 000000000..2a4293dc5
--- /dev/null
+++ b/client/src/shared/fixtures/team.ts
@@ -0,0 +1,22 @@
+import { ITeam } from '@teameights/types';
+import userResponseFixture, { generateRandomUserResponseFixture } from './user';
+
+const users = generateRandomUserResponseFixture(7);
+export const teamFixture: ITeam = {
+  id: '1',
+  name: 'Sample Team',
+  description: 'This is a sample team',
+  leader: userResponseFixture,
+  members: users,
+  country: 'United States',
+  tag: 'SampleTag',
+  type: 'open',
+  wins: 10,
+  points: 100,
+  image: 'https://picsum.photos/3000/3000',
+  createdAt: new Date('2023-10-19T12:00:00Z'),
+  updatedAt: new Date('2023-10-19T12:30:00Z'),
+  deletedAt: new Date('2023-10-19T13:00:00Z'),
+};
+
+export default teamFixture;
diff --git a/client/src/shared/fixtures/user.ts b/client/src/shared/fixtures/user.ts
new file mode 100644
index 000000000..51a19af82
--- /dev/null
+++ b/client/src/shared/fixtures/user.ts
@@ -0,0 +1,129 @@
+import { IUserResponse } from '@teameights/types';
+import { faker } from '@faker-js/faker';
+
+export const generateRandomUserResponseFixture = (amount: number): IUserResponse[] => {
+  const users = [];
+  faker.seed(123); // You can use a specific seed for consistent random data
+  for (let i = 0; i < amount; i++) {
+    const user: IUserResponse = {
+      id: faker.number.int(),
+      username: faker.internet.userName(),
+      fullName: faker.person.fullName(),
+      photo: {
+        id: faker.number.int(),
+        path: 'https://picsum.photos/3000/3000',
+      },
+      role: { id: faker.number.int(), name: 'USER' },
+      status: { id: faker.number.int(), name: 'Active' },
+      isLeader: faker.datatype.boolean(),
+      country: faker.location.country(),
+      dateOfBirth: faker.date.past(),
+      concentration: faker.lorem.word(),
+      description: faker.lorem.sentence(),
+      experience: `2 years`,
+      programmingLanguages: ['JS', 'C++', 'GO'],
+      frameworks: ['NestJS', 'NextJS'],
+      universities: [
+        {
+          id: faker.number.int(),
+          name: faker.company.name(),
+          degree: faker.lorem.word(),
+          major: faker.lorem.word(),
+          admissionDate: faker.date.past(),
+          graduationDate: faker.date.past(),
+        },
+      ],
+      jobs: [
+        {
+          id: faker.number.int(),
+          title: faker.person.jobTitle(),
+          company: faker.company.name(),
+          startDate: faker.date.past(),
+          endDate: faker.date.past(),
+        },
+      ],
+      projects: [
+        {
+          id: faker.number.int(),
+          title: 'Lanselon loh',
+          link: faker.internet.url(),
+        },
+      ],
+      links: {
+        id: faker.number.int(),
+        github: faker.internet.url(),
+        linkedIn: faker.internet.url(),
+        behance: null,
+        telegram: faker.internet.url(),
+      },
+      notifications: [],
+      team: null,
+      createdAt: faker.date.past(),
+      updatedAt: faker.date.past(),
+      deletedAt: null,
+    };
+    users.push(user);
+  }
+
+  return users;
+};
+
+export const userResponseFixture: IUserResponse = {
+  id: 1,
+  username: 'sample_username',
+  fullName: 'John Doe',
+  photo: {
+    id: 1,
+    path: 'https://picsum.photos/3000/3000',
+  }, // Replace with actual photo data if available
+  role: { id: 1, name: 'Sample Role' }, // Replace with actual role data
+  status: { id: 1, name: 'Active' }, // Replace with actual status data
+  isLeader: true,
+  country: 'United States',
+  dateOfBirth: new Date('1990-01-15'),
+  concentration: 'Computer Science',
+  description: 'Sample user description',
+  experience: '2 years',
+  programmingLanguages: ['JavaScript', 'Python'],
+  frameworks: ['React', 'Node.js'],
+  universities: [
+    {
+      id: 1,
+      name: 'Sample University',
+      degree: 'Bachelor of Science',
+      major: 'Computer Science',
+      admissionDate: new Date('2008-09-01'),
+      graduationDate: new Date('2012-05-15'),
+    },
+  ],
+  jobs: [
+    {
+      id: 1,
+      title: 'Software Engineer',
+      company: 'TechCo',
+      startDate: new Date('2012-06-01'),
+      endDate: new Date('2015-12-31'),
+    },
+  ],
+  projects: [
+    {
+      id: 1,
+      title: 'Project A',
+      link: 'https://projecta.example.com',
+    },
+  ],
+  links: {
+    id: 1,
+    github: 'https://github.com/sampleuser',
+    linkedIn: 'https://www.linkedin.com/in/sampleuser',
+    behance: null, // Replace with actual Behance link if available
+    telegram: 'https://t.me/sampleuser',
+  },
+  notifications: [], // Replace with actual notification data
+  team: null, // Replace with actual team data if the user is part of a team
+  createdAt: new Date('2022-01-01'), // Replace with actual creation date
+  updatedAt: new Date('2022-02-15'), // Replace with actual update date
+  deletedAt: null,
+};
+
+export default userResponseFixture;
diff --git a/client/yarn.lock b/client/yarn.lock
index 3e56efcf5..fe566f228 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2167,6 +2167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@faker-js/faker@npm:^8.2.0":
+  version: 8.2.0
+  resolution: "@faker-js/faker@npm:8.2.0"
+  checksum: febc17018acfb841a348591bfe415e815ea981bf7fa0a12670ac2b449479ad7e9e7b130c42878ec30210da964c13a620a3303dc00d63cb13ded00c6fc701e2be
+  languageName: node
+  linkType: hard
+
 "@fal-works/esbuild-plugin-global-externals@npm:^2.1.2":
   version: 2.1.2
   resolution: "@fal-works/esbuild-plugin-global-externals@npm:2.1.2"
@@ -5130,6 +5137,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@teameights/types@npm:^1.1.14":
+  version: 1.1.14
+  resolution: "@teameights/types@npm:1.1.14"
+  dependencies:
+    esno: ^0.17.0
+  checksum: 30a6994dd840a1409a05a40a3009c705e34206a9cb4714c1468e0525d8132b02a8c616468a0c3dd260915edea8d57a03bd82e36bcf59fd5bae88d3d29aac4a67
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^9.0.0":
   version: 9.3.1
   resolution: "@testing-library/dom@npm:9.3.1"
@@ -7621,6 +7637,7 @@ __metadata:
   dependencies:
     "@commitlint/cli": ^17.6.7
     "@commitlint/config-conventional": ^17.6.7
+    "@faker-js/faker": ^8.2.0
     "@react-oauth/google": ^0.11.1
     "@storybook/addon-a11y": ^7.4.5
     "@storybook/addon-essentials": 7.2.1
@@ -7634,6 +7651,7 @@ __metadata:
     "@storybook/react": 7.2.1
     "@storybook/testing-library": 0.2.0
     "@tanstack/react-query": beta
+    "@teameights/types": ^1.1.14
     "@testing-library/jest-dom": ^6.1.3
     "@testing-library/react": ^14.0.0
     "@types/jest": ^29.5.5
@@ -7667,7 +7685,6 @@ __metadata:
     sass: ^1.64.2
     sonner: ^1.0.3
     storybook: 7.2.1
-    teameights-types: ^1.0.4
     tsparticles: ^2.12.0
     typescript: 5.1.6
     yarn: ^1.22.19
@@ -9020,7 +9037,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.18.0":
+"esbuild@npm:^0.18.0, esbuild@npm:~0.18.20":
   version: 0.18.20
   resolution: "esbuild@npm:0.18.20"
   dependencies:
@@ -9397,6 +9414,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esno@npm:^0.17.0":
+  version: 0.17.0
+  resolution: "esno@npm:0.17.0"
+  dependencies:
+    tsx: ^3.12.7
+  bin:
+    esno: esno.js
+  checksum: f0d452a66b54fe64258c6354519321791496291e814563cf87f20ec9eef2d1390c435a2db9cf250a52aca74137350eed4a83268e4c12390d3fce2e8376d5e25f
+  languageName: node
+  linkType: hard
+
 "espree@npm:^9.6.0, espree@npm:^9.6.1":
   version: 9.6.1
   resolution: "espree@npm:9.6.1"
@@ -9997,7 +10025,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
   dependencies:
@@ -10007,7 +10035,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
+"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.3#~builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
   dependencies:
@@ -10138,6 +10166,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-tsconfig@npm:^4.7.2":
+  version: 4.7.2
+  resolution: "get-tsconfig@npm:4.7.2"
+  dependencies:
+    resolve-pkg-maps: ^1.0.0
+  checksum: 172358903250eff0103943f816e8a4e51d29b8e5449058bdf7266714a908a48239f6884308bd3a6ff28b09f692b9533dbebfd183ab63e4e14f073cda91f1bca9
+  languageName: node
+  linkType: hard
+
 "giget@npm:^1.0.0":
   version: 1.1.2
   resolution: "giget@npm:1.1.2"
@@ -15791,7 +15828,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:^0.5.16, source-map-support@npm:~0.5.20":
+"source-map-support@npm:^0.5.16, source-map-support@npm:^0.5.21, source-map-support@npm:~0.5.20":
   version: 0.5.21
   resolution: "source-map-support@npm:0.5.21"
   dependencies:
@@ -16265,13 +16302,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"teameights-types@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "teameights-types@npm:1.0.4"
-  checksum: 12ab411130ec51576eb25ba24258a4ce95ed5f7599080a03fcb447b568184255ef8322a8f917e6d1837d1e644b8dc6aaf06a0e8616b1e1b9ff372165ee5bb18d
-  languageName: node
-  linkType: hard
-
 "telejson@npm:^7.0.3, telejson@npm:^7.2.0":
   version: 7.2.0
   resolution: "telejson@npm:7.2.0"
@@ -17047,6 +17077,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsx@npm:^3.12.7":
+  version: 3.14.0
+  resolution: "tsx@npm:3.14.0"
+  dependencies:
+    esbuild: ~0.18.20
+    fsevents: ~2.3.3
+    get-tsconfig: ^4.7.2
+    source-map-support: ^0.5.21
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    tsx: dist/cli.mjs
+  checksum: afcef5d9b90b5800cf1ffb749e943f63042d78a4c0d9eef6e13e43f4ecab465d45e2c9812a2c515cbdc2ee913ff1cd01bf5c606a48013dd3ce2214a631b45557
+  languageName: node
+  linkType: hard
+
 "tty-browserify@npm:^0.0.1":
   version: 0.0.1
   resolution: "tty-browserify@npm:0.0.1"