diff --git a/.gitignore b/.gitignore
index 438657a..a195864 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+
 node_modules
 dist
 dist-ssr
diff --git a/src/components/icons/ChartIcon.tsx b/src/components/icons/ChartIcon.tsx
new file mode 100644
index 0000000..0ad054c
--- /dev/null
+++ b/src/components/icons/ChartIcon.tsx
@@ -0,0 +1,19 @@
+function ChartIcon() {
+  return (
+    <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 19v-7m5 7V4m5 15V8"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+    />
+     </svg>
+  )
+}
+  
+ 
+export default ChartIcon;
\ No newline at end of file
diff --git a/src/pages/FavouritesPage.tsx b/src/pages/FavouritesPage.tsx
index 1c9e248..f047c92 100644
--- a/src/pages/FavouritesPage.tsx
+++ b/src/pages/FavouritesPage.tsx
@@ -1,5 +1,49 @@
+import clsx from 'clsx';
+import ProjectSelect from '../components/ProjectSelect';
+import { projects } from '../data/projects';
+import Select from '../components/ui/Select';
+import Button from '../components/ui/Button';
+import ChartIcon from '../components/icons/ChartIcon';
+
 function FavouritesPage() {
-  return <div>FavouritesPage</div>;
+  return (
+    <div className='flex flex-col gap-6'>
+      <div
+        className={clsx(
+          '2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4',
+          '2xl:px-[2.222vw] md:max-2xl:px-6 px-4'
+        )}
+      >
+        <div className='2xl:space-y-[1.111vw] space-y-4'>
+          <p className='2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]'>
+            Favorites
+          </p>
+          <ProjectSelect
+            projects={projects}
+            onSelect={() => {}}
+            defaultProject={projects[0]}
+          />
+        </div>
+      </div>
+      <div className='px-8'>
+      <div className='flex gap-4'>
+        <Select
+          options={['All', 'Favorites']}
+          onSelect={() => {}}
+          defaultOption='All'
+          className='w-[22.778vw]'
+        />
+        <Button variant='secondary' size='large' className='text-black'>
+          <div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6'>
+            <ChartIcon />
+          </div>
+          <p className='text-m leading-0'>Compare</p>
+        </Button>
+      </div>
+      </div>
+      
+    </div>
+  );
 }
 
 export default FavouritesPage;
diff --git a/src/stores/useFavorites.ts b/src/stores/useFavorites.ts
new file mode 100644
index 0000000..d7ca4c6
--- /dev/null
+++ b/src/stores/useFavorites.ts
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+import { IUnit } from '../types/IUnit';
+import { persist } from 'zustand/middleware';
+
+export interface FavoriteStore {
+  units: IUnit[];
+  setUnits: (units: IUnit[]) => void;
+}
+
+export const useFavorites = create<FavoriteStore>()(
+  persist(
+    (set) => ({
+      units: [],
+      setUnits: (units: IUnit[]) => set({ units }),
+    }),
+    { name: 'favorites' }
+  )
+);