diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..a7c6cef
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { RefreshCcw, Home } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center px-4">
+      <div className="text-center">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          className="text-9xl font-extrabold text-slate-200 mb-8"
+        >
+          500
+        </motion.div>
+        
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+        >
+          <h1 className="text-4xl font-bold text-primary mb-4">Etwas ist schiefgelaufen</h1>
+          <p className="text-slate-600 text-lg mb-12 max-w-md mx-auto">
+            Es gab ein technisches Problem. Wir arbeiten bereits an der Lösung.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button
+              onClick={() => reset()}
+              className="btn-accent flex items-center gap-2"
+            >
+              <RefreshCcw size={18} />
+              Erneut versuchen
+            </button>
+            <Link href="/" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200 flex items-center gap-2">
+              <Home size={18} />
+              Zur Startseite
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..80e1adc
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { Home, ArrowLeft } from 'lucide-react';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center px-4">
+      <div className="text-center">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          className="text-9xl font-extrabold text-slate-200 mb-8"
+        >
+          404
+        </motion.div>
+        
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+        >
+          <h1 className="text-4xl font-bold text-primary mb-4">Seite nicht gefunden</h1>
+          <p className="text-slate-600 text-lg mb-12 max-w-md mx-auto">
+            Die von Ihnen gesuchte Seite scheint nicht zu existieren oder wurde verschoben.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Link href="/" className="btn-primary flex items-center gap-2">
+              <Home size={18} />
+              Zur Startseite
+            </Link>
+            <button 
+              onClick={() => window.history.back()}
+              className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200 flex items-center gap-2"
+            >
+              <ArrowLeft size={18} />
+              Zurück
+            </button>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index b270fdb..0bee457 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -32,11 +32,11 @@ export default function Home() {
         </div>
 
         <div className="container-custom relative z-10">
-          <motion.div 
+          <motion.div
             initial="initial"
             animate="animate"
             variants={stagger}
-            className="max-w-3xl"
+            className="text-left"
           >
             <motion.span 
               variants={fadeInUp}
@@ -82,14 +82,14 @@ export default function Home() {
       {/* Portfolio Section */}
       <section className="bg-slate-50">
         <div className="container-custom">
-          <motion.div 
+          <motion.div
             initial="initial"
             whileInView="animate"
             viewport={{ once: true }}
             variants={fadeInUp}
             className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16"
           >
-            <div className="max-w-2xl">
+            <div>
               <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Portfolio</span>
               <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unsere Leistungen</h2>
               <p className="text-slate-600 text-lg md:text-xl">
@@ -125,11 +125,10 @@ export default function Home() {
                 desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.' 
               }
             ].map((item, i) => (
-              <motion.div 
+              <motion.div
                 key={i}
                 variants={fadeInUp}
-                whileHover={{ y: -8 }}
-                className="card-modern group motion-fix"
+                className="card-modern group motion-fix hover:-translate-y-2 transition-transform duration-300"
               >
                 <div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors">
                   {item.icon}
@@ -214,12 +213,12 @@ export default function Home() {
         </div>
         
         <div className="container-custom relative z-10">
-          <motion.div 
+          <motion.div
             initial="initial"
             whileInView="animate"
             viewport={{ once: true }}
             variants={fadeInUp}
-            className="text-center max-w-3xl mx-auto mb-20"
+            className="mb-20"
           >
             <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span>
             <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2>
@@ -275,7 +274,7 @@ export default function Home() {
               </svg>
             </div>
             
-            <div className="relative z-10 max-w-2xl">
+            <div className="relative z-10">
               <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
                 Bereit für Ihr nächstes Projekt?
               </h2>
diff --git a/app/ueber-uns/page.tsx b/app/ueber-uns/page.tsx
index be82551..30b96f7 100644
--- a/app/ueber-uns/page.tsx
+++ b/app/ueber-uns/page.tsx
@@ -33,11 +33,11 @@ export default function About() {
         </div>
 
         <div className="container-custom relative z-10">
-          <motion.div 
+          <motion.div
             initial="initial"
             animate="animate"
             variants={stagger}
-            className="max-w-3xl"
+            className="text-left"
           >
             <motion.span 
               variants={fadeInUp}
@@ -108,12 +108,12 @@ export default function About() {
       {/* Manifest Section */}
       <section className="bg-slate-50">
         <div className="container-custom">
-          <motion.div 
+          <motion.div
             initial="initial"
             whileInView="animate"
             viewport={{ once: true }}
             variants={fadeInUp}
-            className="text-center max-w-3xl mx-auto mb-20"
+            className="mb-20"
           >
             <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Werte</span>
             <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unser Manifest</h2>
@@ -135,11 +135,10 @@ export default function About() {
               { icon: MessageSquare, title: 'Offenheit', desc: 'Wir hören zu und passen unsere Prozesse kontinuierlich an Ihren Erfolg an.' },
               { icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
             ].map((item, i) => (
-              <motion.div 
+              <motion.div
                 key={i}
                 variants={fadeInUp}
-                whileHover={{ y: -5 }}
-                className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all motion-fix"
+                className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all motion-fix"
               >
                 <div className="text-accent mb-6">
                   <item.icon size={32} />
@@ -155,14 +154,14 @@ export default function About() {
       {/* CTA Section */}
       <section className="bg-white">
         <div className="container-custom">
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, scale: 0.95 }}
             whileInView={{ opacity: 1, scale: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8 }}
-            className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden text-center"
+            className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden"
           >
-            <div className="relative z-10 max-w-2xl mx-auto">
+            <div className="relative z-10">
               <h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
                 Bereit für Ihr nächstes Projekt?
               </h2>
diff --git a/components/Layout.tsx b/components/Layout.tsx
index a6289d7..32fe4cb 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -35,7 +35,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   const navLinks = [
     { href: '/', label: 'Startseite', icon: Home },
     { href: '/ueber-uns', label: 'Über uns', icon: Info },
-    { href: '/kontakt', label: 'Kontakt', icon: Mail },
   ];
 
   return (
@@ -45,12 +44,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         animate={{ opacity: 1 }}
         transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
         className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${
-          isScrolled
-            ? 'bg-white/80 backdrop-blur-lg border-b border-slate-200'
-            : 'bg-gradient-to-b from-white/50 to-transparent'
+          isScrolled 
+            ? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm' 
+            : 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
         }`}
       >
-        <div className="container-custom flex justify-between items-center w-full">
+        <div className="container-custom flex justify-between items-center w-full relative z-10">
           <Link
             href="/"
             className="relative z-10 flex items-center group"
@@ -65,18 +64,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           </Link>
 
           {/* Desktop Navigation */}
-          <nav className="hidden md:flex items-center gap-1" aria-label="Hauptnavigation">
+          <nav className="hidden md:flex items-center gap-8" aria-label="Hauptnavigation">
             {navLinks.map((link) => (
               <Link 
                 key={link.href}
                 href={link.href} 
-                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                className={`relative px-2 py-1 text-sm font-bold tracking-tight transition-all group ${
                   isActive(link.href) 
-                    ? 'text-accent bg-accent/5'
-                    : `${isScrolled ? 'text-slate-600' : 'text-slate-900'} hover:text-primary hover:bg-slate-50`
+                    ? 'text-primary' 
+                    : `${isScrolled ? 'text-slate-600' : 'text-slate-900'} hover:text-primary`
                 }`}
               >
                 {link.label}
+                <span className={`absolute -bottom-1 left-0 w-full h-0.5 bg-accent transition-transform duration-300 origin-left ${isActive(link.href) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'}`} />
               </Link>
             ))}
             <Link 
@@ -105,7 +105,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             initial={{ opacity: 0, y: -20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
-            className="fixed inset-0 z-[90] bg-white pt-24 px-6 md:hidden"
+            className="fixed inset-0 z-[90] bg-white pt-32 px-6 md:hidden"
           >
             <nav className="flex flex-col gap-4">
               {navLinks.map((link) => (
@@ -147,7 +147,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         <ArrowUp size={20} strokeWidth={2.5} />
       </button>
 
-      <motion.footer
+      <motion.footer 
         initial={{ opacity: 0 }}
         whileInView={{ opacity: 1 }}
         viewport={{ once: true }}
@@ -179,6 +179,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                     {link.label}
                   </Link>
                 ))}
+                <Link href="/kontakt" className="hover:text-accent transition-colors">Kontakt</Link>
               </nav>
             </div>