diff --git a/app/App.css b/app/App.css
deleted file mode 100644
index cc0b3e2..0000000
--- a/app/App.css
+++ /dev/null
@@ -1,458 +0,0 @@
-/* app.css */
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-/* Basic body styling */
-body {
-    background-color: #f4f4f4;
-    color: #333;
-    line-height: 1.6;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    margin-top: 10em;
-    background-image: url(/img/image.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-}
-
-/* Header styling */
-.header {
-    background-color: #333;
-    color: #fff;
-    padding: 20px;
-    text-align: center;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    position: fixed;
-    top: 0;
-}
-
-.header h1 {
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-
-.header nav {
-    margin-top: 10px;
-}
-
-.header button {
-    margin: 0 10px;
-    padding: 10px 20px;
-    border-radius: 4px;
-    background-color: #4a90e2;
-    color: #fff;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    border: none;
-}
-
-.header button:hover {
-    background-color: #357ab8;
-}
-
-/* Content container */
-.content {
-    padding: 20px;
-    flex: 1;
-    text-align: center;
-    max-width: 1200px;
-    margin: 0 auto;
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Card styles */
-section .cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 20px;
-    margin-top: 50px;
-}
-
-section .card {
-    text-align: center;
-    list-style: none;
-    background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
-    border: 1px solid #3a4971; /* Slightly lighter border for card edges */
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-section .card:hover {
-    transform: translateY(-5px); /* Slight lift effect */
-    box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
-}
-
-section .card img {
-  height: 80px; /* Image size */
-  width: 80px;
-  object-fit: cover;
-  border-radius: 50%; /* Circular image */
-  margin: 0 auto 15px;
-  box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
-}
-
-section .card h3 {
-  margin: 10px 0;
-  font-size: 1.2em;
-  font-weight: bold;
-  color: #ffdd55; /* Star yellow for card titles */
-  text-shadow: 0 0 10px #ffdd55; /* Glow effect */
-}
-
-section .card p {
-  flex-grow: 1;
-  color: #c7d5e0; /* Light gray-blue for card content */
-  margin-bottom: 10px;
-}
-
-/* Responsive layout */
-@media (max-width: 768px) {
-  .header h1 {
-    font-size: 20px;
-  }
-
-  .header button {
-    margin: 5px 0;
-    padding: 10px;
-    font-size: 14px;
-  }
-
-  .content {
-    padding: 15px;
-    margin-top: 15px;
-  }
-
-   section .card {
-    padding: 12px; /* Adjusted padding */
-  }
-
-  section .card img {
-    height: 60px; /* Adjusted height */
-    width: 60px; /* Adjusted width */
-    border-radius: 8px; /* Adjusted border-radius */
-  }
-}
-/* app.css */
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* Basic body styling */
-body {
-  background-color: #f4f4f4;
-  color: #333;
-  line-height: 1.6;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-/* Header styling */
-.header {
-  background-color: #333;
-  color: #fff;
-  padding: 20px;
-  text-align: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  width: 100%;
-}
-
-.header h1 {
-  font-size: 24px;
-  margin-bottom: 10px;
-}
-
-.header nav {
-  margin-top: 10px;
-}
-
-.header button {
-  margin: 0 10px;
-  padding: 10px 20px;
-  border-radius: 4px;
-  background-color: #4a90e2;
-  color: #fff;
-  font-size: 16px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  border: none;
-}
-
-.header button:hover {
-  background-color: #357ab8;
-}
-
-/* Content container */
-.content {
-  padding: 20px;
-  flex: 1;
-  text-align: center;
-  max-width: 1200px;
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
-}
-
-/* Card styles */
-section.cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
-  margin-top: 50px;
-}
-
-section.card {
-  text-align: center;
-  list-style: none;
-  background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
-  border: 1px solid #3a4971; /* Slightly lighter border for card edges */
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-section.card:hover {
-  transform: translateY(-5px); /* Slight lift effect */
-  box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
-}
-
-section.card img {
-  height: 80px; /* Image size */
-  width: 80px;
-  object-fit: cover;
-  border-radius: 50%; /* Circular image */
-  margin: 0 auto 15px;
-  box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
-}
-
-section.card h3 {
-  margin: 10px 0;
-  font-size: 1.2em;
-  font-weight: bold;
-  color: #ffdd55; /* Star yellow for card titles */
-  text-shadow: 0 0 10px #ffdd55; /* Glow effect */
-}
-
-section.card p {
-  flex-grow: 1;
-  color: #c7d5e0; /* Light gray-blue for card content */
-  margin-bottom: 10px;
-}
-
-/* Responsive layout */
-@media (max-width: 768px) {
-  .header h1 {
-    font-size: 20px;
-  }
-
-  .header button {
-    margin: 5px 0;
-    padding: 10px;
-    font-size: 14px;
-  }
-
-  .content {
-    padding: 15px;
-    margin-top: 15px;
-  }
-
-  section.cards {/* app.css */
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-/* Basic body styling */
-body {
-    background-color: #f4f4f4;
-    color: #333;
-    line-height: 1.6;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    background-image: url(/img/image.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-}
-
-/* Header styling */
-.header {
-    background-color: #333;
-    color: #fff;
-    padding: 20px;
-    text-align: center;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    position: fixed;
-    top: 0;
-    z-index: 1000; /* Ensure header stays above other content */
-}
-
-.header h1 {
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-
-.header nav {
-    margin-top: 10px;
-}
-
-.header button {
-    margin: 0 10px;
-    padding: 10px 20px;
-    border-radius: 4px;
-    background-color: #4a90e2;
-    color: #fff;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    border: none;
-}
-
-.header button:hover {
-    background-color: #357ab8;
-}
-
-/* Content container */
-.content {
-    padding: 20px;
-    flex: 1;
-    text-align: center;
-    max-width: 1200px;
-    margin: 80px auto 0; /* Adjusted for fixed header height */
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Card styles */
-section.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 20px;
-    margin-top: 50px;
-}
-
-section.card {
-    text-align: center;
-    list-style: none;
-    background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
-    border: 1px solid #3a4971; /* Slightly lighter border for card edges */
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-section.card:hover {
-    transform: translateY(-5px); /* Slight lift effect */
-    box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
-}
-
-section.card img {
-    height: 80px; /* Image size */
-    width: 80px;
-    object-fit: cover;
-    border-radius: 50%; /* Circular image */
-    margin: 0 auto 15px;
-    box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
-}
-
-section.card h3 {
-    margin: 10px 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    color: #ffdd55; /* Star yellow for card titles */
-    text-shadow: 0 0 10px #ffdd55; /* Glow effect */
-}
-
-section.card p {
-    flex-grow: 1;
-    color: #c7d5e0; /* Light gray-blue for card content */
-    margin-bottom: 10px;
-}
-
-/* Responsive layout */
-@media (max-width: 768px) {
-    .header h1 {
-        font-size: 20px;
-    }
-
-    .header button {
-        margin: 5px 0;
-        padding: 10px;
-        font-size: 14px;
-    }
-
-    .content {
-        padding: 15px;
-        margin-top: 15px; /* Adjusted for smaller screen size */
-    }
-
-    section.cards {
-        grid-template-columns: 1fr; /* One card per row on mobile */
-    }
-
-    section.card {
-        padding: 12px; /* Adjusted padding */
-    }
-
-    section.card img {
-        height: 60px; /* Adjusted height */
-        width: 60px; /* Adjusted width */
-        border-radius: 8px; /* Adjusted border-radius */
-    }
-}
-
-    grid-template-columns: 1fr; /* One card per row on mobile */
-  }
-
-  section.card {
-    padding: 12px; /* Adjusted padding */
-  }
-
-  section.card img {
-    height: 60px; /* Adjusted height */
-    width: 60px; /* Adjusted width */
-    border-radius: 8px; /* Adjusted border-radius */
-  }
-}
-
diff --git a/app/LandingPage.tsx b/app/LandingPage.tsx
deleted file mode 100644
index ae6c9f0..0000000
--- a/app/LandingPage.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-import React from 'react';
-import './App.css'; // Import specific styles for the Home page
-
-const Home = () => {
-  return (
-    <>
-      <div className="home-container">
-        <h2>About Us</h2>
-        <p>
-          We are a group of informatics students from IMS (Informatik Schule Sargans), currently learning React to prepare for an upcoming project. This project will be part of our traineeship at a company, where we'll apply our skills in a real-world setting. Our coursework in React is equipping us with the knowledge and experience needed to excel in this practical opportunity.
-        </p>
-
-        <section className="cards">
-          <div className="card">
-            <a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/img/Patrick.png" alt="Patrick" />
-                <h3>Patrick</h3>
-                <p>
-                    Patrick is a highly skilled programmer with expertise in Java, GDScript, Bash, C, C++, and C#. He excels in developing scalable applications, automating tasks, and crafting interactive games. Additionally, Patrick is proficient in system administration, adeptly managing and optimizing IT infrastructures for smooth and secure operations.
-                </p>
-            </a>
-          </div>
-
-          <div className="card">
-            <a href="https://interstellardevelopment.org/code/sageTheDm" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/img/sage.png" alt="Sage" />
-                <h3>Luca</h3>
-                <p>
-                    Luca, Patrick's co-programmer, is skilled in Java, GDScript, Bash, and Basic Typewriter. His expertise in Java and GDScript supports robust application and game development, while his Bash scripting skills streamline automation. His knowledge of Basic Typewriter adds a classic touch to his versatile programming capabilities.
-                </p>
-            </a>
-          </div>
-
-          <div className="card">
-            <a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/img/yasin.png" alt="Norway" />
-                <h3>Yasin</h3>
-                <p>
-                    Yasin is a proficient programmer with expertise in Java, where he has even developed games, as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and automation to web design and database management, making him a versatile asset in any tech project.
-                </p>
-            </a>
-          </div>
-        </section>
-      </div>
-    </>
-  );
-};
-
-export default Home;
diff --git a/app/layout.tsx b/app/layout.tsx
index 6200084..a14e64f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,6 @@
 export const metadata = {
-  title: 'React test v1',
-  description: 'Generated by Us.js',
+  title: 'Next.js',
+  description: 'Generated by Next.js',
 }
 
 export default function RootLayout({
@@ -13,4 +13,4 @@ export default function RootLayout({
       <body>{children}</body>
     </html>
   )
-} 
+}
diff --git a/app/luca/Luca.css b/app/luca/Luca.css
deleted file mode 100644
index 3e6bd4c..0000000
--- a/app/luca/Luca.css
+++ /dev/null
@@ -1,31 +0,0 @@
-/* Luca.css */
-.programmer-space {
-  padding: 20px;
-  margin: 10px;
-  border-radius: 8px;
-  color: #fff;
-}
-
-.luca {
-  background-color: #4a90e2; /* Blue */
-}
-
-.click-button {
-  padding: 10px 20px;
-  margin-top: 10px;
-  border: none;
-  border-radius: 4px;
-  background-color: #fff;
-  color: #4a90e2;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-.click-button:hover {
-  background-color: #e3e3e3;
-}
-
-.lorem-ipsum {
-  margin-top: 20px;
-  font-size: 14px;
-}
diff --git a/app/luca/Luca.tsx b/app/luca/Luca.tsx
deleted file mode 100644
index 3c5c8a9..0000000
--- a/app/luca/Luca.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Luca.tsx
-"use client";
-
-import React, { useState } from 'react';
-import './Luca.css'; // Import specific styles for Luca
-
-const Luca = () => {
-  // State to keep track of the number of clicks
-  const [clickCount, setClickCount] = useState(0);
-
-  // Function to handle button click
-  const handleClick = () => {
-    setClickCount(clickCount + 1);
-  };
-
-  return (
-    <div className="programmer-space luca">
-      <h2>Luca's Space</h2>
-      <p>Welcome, Luca! This is your programming space.</p>
-
-      {/* Button to count clicks */}
-      <button onClick={handleClick} className="click-button">
-        Click me
-      </button>
-      <p>You've clicked the button {clickCount} times!</p>
-
-      {/* Lorem Ipsum text */}
-      <div className="lorem-ipsum">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default Luca;
diff --git a/app/page.tsx b/app/page.tsx
index 7951a58..464f71b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,42 +1,14 @@
-"use client";
-import React, { useState } from 'react';
-import Luca from './luca/Luca';
-import Patrick from './patrick/Patrick';
-import Yasin from './yasin/Yasin';
-import Home from './LandingPage';
-import './App.css'; // Import main styles
-
-function MyApp() {
-  // State to track the current view
-  const [currentView, setCurrentView] = useState('landing');
-
-  // Function to handle navigation
-  const handleNavigation = (view: string) => {
-    setCurrentView(view);
-  };
-
-  return (
-    <div>
-      {/* Header with navigation buttons */}
-      <header className="header">
-        <h1>Welcome to the Programmer Space</h1>
-        <nav>
-          <button onClick={() => handleNavigation('landing')}>Home</button>
-          <button onClick={() => handleNavigation('luca')}>Luca</button>
-          <button onClick={() => handleNavigation('patrick')}>Patrick</button>
-          <button onClick={() => handleNavigation('yasin')}>Yasin</button>
-        </nav>
-      </header>
-
-      <div className="content">
-        {/* Conditionally render the selected component */}
-        {currentView === 'landing' && <Home />}
-        {currentView === 'luca' && <Luca />}
-        {currentView === 'patrick' && <Patrick />}
-        {currentView === 'yasin' && <Yasin />}
-      </div>
-    </div>
-  );
+function MyButton({ title }: { title: string }) {
+    return (
+        <button>{title}</button>
+    );
 }
 
-export default MyApp;
+export default function MyApp() {
+    return (
+        <div>
+        <h1>Welcome to my app</h1>
+        <MyButton title="I'm a button" />
+        </div>
+    );
+}
diff --git a/app/patrick/Patrick.css b/app/patrick/Patrick.css
deleted file mode 100644
index 101f408..0000000
--- a/app/patrick/Patrick.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Patrick.css */
-.programmer-space {
-  padding: 20px;
-  margin: 10px;
-  border-radius: 8px;
-  color: #fff;
-}
-
-.patrick {
-  background-color: #e94e77; /* Pink */
-}
diff --git a/app/patrick/Patrick.tsx b/app/patrick/Patrick.tsx
deleted file mode 100644
index e1f02aa..0000000
--- a/app/patrick/Patrick.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// Patrick.tsx
-"use client";
-import React from 'react';
-import './Patrick.css'; // Import specific styles for Patrick
-
-const Patrick = () => (
-  <div className="programmer-space patrick">
-    <h2>Patrick's Space</h2>
-    <p>Welcome, Patrick! This is your programming space.</p>
-  </div>
-);
-
-export default Patrick;
diff --git a/app/yasin/Yasin.css b/app/yasin/Yasin.css
deleted file mode 100644
index f6d48df..0000000
--- a/app/yasin/Yasin.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Yasin.css */
-.programmer-space {
-  padding: 20px;
-  margin: 10px;
-  border-radius: 8px;
-  color: #fff;
-}
-
-.yasin {
-  background-color: #50e3c2; /* Teal */
-}
diff --git a/app/yasin/Yasin.tsx b/app/yasin/Yasin.tsx
deleted file mode 100644
index 979f2d3..0000000
--- a/app/yasin/Yasin.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// Yasin.tsx
-"use client";
-import React from 'react';
-import './Yasin.css'; // Import specific styles for Yasin
-
-const Yasin = () => (
-  <div className="programmer-space yasin">
-    <h2>Yasin's Space</h2>
-    <p>Welcome, Yasin! This is your programming space.</p>
-  </div>
-);
-
-export default Yasin;
diff --git a/public/img/Patrick.png b/public/img/Patrick.png
deleted file mode 100644
index 6aa6377..0000000
Binary files a/public/img/Patrick.png and /dev/null differ
diff --git a/public/img/image.png b/public/img/image.png
deleted file mode 100644
index 3924352..0000000
Binary files a/public/img/image.png and /dev/null differ
diff --git a/public/img/sage.png b/public/img/sage.png
deleted file mode 100644
index 3bc7bd8..0000000
Binary files a/public/img/sage.png and /dev/null differ
diff --git a/public/img/yasin.png b/public/img/yasin.png
deleted file mode 100644
index 06e814f..0000000
Binary files a/public/img/yasin.png and /dev/null differ