diff --git a/frontend/package.json b/frontend/package.json
index 2224d5a..390a1d5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0",
     "react-swipeable": "^7.0.1",
     "swiper": "^11.1.4"
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index cd16f48..cee963e 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,12 +8,18 @@ importers:
 
   .:
     dependencies:
+      '@react-icons/all-files':
+        specifier: ^4.1.0
+        version: 4.1.0(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-icons:
+        specifier: ^5.2.1
+        version: 5.2.1(react@18.3.1)
       react-router-dom:
         specifier: ^6.24.0
         version: 6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -286,6 +292,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@react-icons/all-files@4.1.0':
+    resolution: {integrity: sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==}
+    peerDependencies:
+      react: '*'
+
   '@remix-run/router@1.17.0':
     resolution: {integrity: sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==}
     engines: {node: '>=14.0.0'}
@@ -1391,6 +1402,11 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-icons@5.2.1:
+    resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==}
+    peerDependencies:
+      react: '*'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -1857,6 +1873,10 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@react-icons/all-files@4.1.0(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
   '@remix-run/router@1.17.0': {}
 
   '@rollup/rollup-android-arm-eabi@4.18.0':
@@ -3065,6 +3085,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-icons@5.2.1(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-router-dom@6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 8000d6b..e69de29 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,50 +0,0 @@
-/* index.css */
-
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.swipeable-cards-container {
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.swipeable-card {
-    width: 300px;
-    height: 400px;
-    margin: 10px;
-    background-color: #f2f2f2;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.5em;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.6s ease;
-    transform-style: preserve-3d;
-}
-
-.swipeable-card.flipped {
-    transform: rotateY(180deg);
-}
-
-.swipeable-card:active {
-    transform: scale(0.95);
-}
-
-.swipeable-card-content {
-    backface-visibility: hidden;
-}
-
-.swipeable-card-back {
-    position: absolute;
-    transform: rotateY(180deg);
-    backface-visibility: hidden;
-}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 72ced54..b8df678 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,23 +1,13 @@
 import React from 'react';
-import {Link, Route, Routes} from 'react-router-dom';
-import Home from './pages/Home';
-import About from './pages/About';
-import './App.css'
+import './App.css';
+import TopMenu from './components/TopMenu';
+import Menu from './components/Menu';
 
 function App() {
     return (
         <>
-            <h1 className="text-3xl font-bold underline">Top</h1>
-            <nav>
-                <ul>
-                    <li><Link to="/">Home</Link></li>
-                    <li><Link to="/about">About</Link></li>
-                </ul>
-            </nav>
-            <Routes>
-                <Route path="/" element={<Home/>}/>
-                <Route path="/about" element={<About/>}/>
-            </Routes>
+            <TopMenu />
+            <Menu/>
         </>
     )
 }
diff --git a/frontend/src/components/Menu.css b/frontend/src/components/Menu.css
new file mode 100644
index 0000000..15d473b
--- /dev/null
+++ b/frontend/src/components/Menu.css
@@ -0,0 +1,23 @@
+/* Menu.css */
+
+.menu {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #333;
+    display: flex;
+    justify-content: space-around;
+    padding: 22px 0;
+}
+
+.menu-button {
+    color: white;
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    cursor: pointer;
+}
+
+.menu-button:hover {
+    color: #aaa;
+}
diff --git a/frontend/src/components/Menu.tsx b/frontend/src/components/Menu.tsx
new file mode 100644
index 0000000..ededbd2
--- /dev/null
+++ b/frontend/src/components/Menu.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {Link, Route, Routes} from 'react-router-dom';
+import Home from '../pages/Home';
+import About from '../pages/About';
+import { IoIosHome } from "react-icons/io";
+import './Menu.css';
+
+function Menu() {
+    return (
+        <>
+            <div className="menu">
+                <button className="menu-button"><Link to="/"><span className="icon-[mdi-light--home] text-4xl"> <IoIosHome /></span></Link></button>
+                <button className="menu-button"><Link to="/about">About</Link></button>
+            </div>
+            <Routes>
+                <Route path="/" element={<Home/>}/>
+                <Route path="/about" element={<About/>}/>
+            </Routes>
+
+        </>
+    );
+}
+
+export default Menu;
\ No newline at end of file
diff --git a/frontend/src/components/SwipeableCard.css b/frontend/src/components/SwipeableCard.css
new file mode 100644
index 0000000..1606308
--- /dev/null
+++ b/frontend/src/components/SwipeableCard.css
@@ -0,0 +1,32 @@
+.swipeable-card {
+    width: 300px;
+    height: 400px;
+    margin: 10px;
+    background-color: #f2f2f2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.6s ease;
+    transform-style: preserve-3d;
+}
+
+.swipeable-card.flipped {
+    transform: rotateY(180deg);
+}
+
+.swipeable-card:active {
+    transform: scale(0.95);
+}
+
+.swipeable-card-content {
+    backface-visibility: hidden;
+}
+
+.swipeable-card-back {
+    position: absolute;
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+}
\ No newline at end of file
diff --git a/frontend/src/components/SwipeableCard.tsx b/frontend/src/components/SwipeableCard.tsx
index c34335a..11664a4 100644
--- a/frontend/src/components/SwipeableCard.tsx
+++ b/frontend/src/components/SwipeableCard.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
+import './SwipeableCard.css'
 
 interface SwipeableCardProps {
     content: string;
diff --git a/frontend/src/components/TopMenu.css b/frontend/src/components/TopMenu.css
new file mode 100644
index 0000000..85ee7c6
--- /dev/null
+++ b/frontend/src/components/TopMenu.css
@@ -0,0 +1,24 @@
+/* TopMenu.css */
+
+.top-menu {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background-color: #333;
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0;
+    z-index: 1000; /* Ensures the menu stays on top */
+}
+
+.menu-button {
+    color: white;
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    cursor: pointer;
+}
+
+.menu-button:hover {
+    color: #aaa;
+}
diff --git a/frontend/src/components/TopMenu.tsx b/frontend/src/components/TopMenu.tsx
new file mode 100644
index 0000000..d3e3afa
--- /dev/null
+++ b/frontend/src/components/TopMenu.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import './TopMenu.css';
+import {IoIosSettings} from "react-icons/io";
+
+function TopMenu() {
+    return (
+        <div className="top-menu">
+            <button className="menu-button">
+                <span className="icon-[mdi-light--home] text-2xl"> <IoIosSettings/></span>
+            </button>
+        </div>
+    );
+}
+
+export default TopMenu;
diff --git a/frontend/src/pages/Home.css b/frontend/src/pages/Home.css
new file mode 100644
index 0000000..ef72bb2
--- /dev/null
+++ b/frontend/src/pages/Home.css
@@ -0,0 +1,8 @@
+.swipeable-cards-container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 711ae73..fe22af0 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,14 +1,7 @@
 import React, {useState} from 'react';
 
-// Import Swiper styles
-import "swiper/css";
-import "swiper/css/effect-coverflow";
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
 import SwipeableCard from "../components/SwipeableCard.tsx";
-
-// Initialize Swiper modules
-// SwiperCore.use([Navigation, Pagination]);
+import './Home.css'
 
 function Home() {
     const [cards] = useState([