diff --git a/public/README.md b/public/README.md
new file mode 100644
index 0000000..17776db
--- /dev/null
+++ b/public/README.md
@@ -0,0 +1,11 @@
+Der Default-Theme-Modus wird durch zwei Faktoren bestimmt:
+
+Wenn ein Theme bereits im localStorage gespeichert wurde (unter dem Key 'theme'), wird dieses verwendet
+Ansonsten wird das System-Theme des Betriebssystems verwendet:
+Wenn das System auf "Dark Mode" eingestellt ist, wird Dark Mode aktiviert
+Wenn das System auf "Light Mode" eingestellt ist, wird Light Mode aktiviert
+Um den Default-Modus zu ändern, gibt es zwei Möglichkeiten:
+
+Direkt im Code: In der Konstante DEFAULT_THEME in theme.js kann der Wert von 'light' auf 'dark' geändert werden
+Im Browser: Den localStorage-Eintrag 'theme' auf 'dark' oder 'light' setzen
+Das Theme wird beim Laden der Seite sofort initialisiert (durch initThemeEarly()), um ein Flackern zu vermeiden. Danach wird ein Event-Listener eingerichtet, der auf Systemänderungen reagiert und das Theme automatisch anpasst, falls kein benutzerdefiniertes Theme gesetzt wurde.
\ No newline at end of file
diff --git a/public/components/footer.html b/public/components/footer.html
index aa29293..7d7567a 100644
--- a/public/components/footer.html
+++ b/public/components/footer.html
@@ -14,10 +14,10 @@
         </div>
     </div>
     <div class="social-links">
-        <a href="https://github.com/7sys" target="_blank" rel="noopener noreferrer">
+        <a href="https://github.com/ben7sys" target="_blank" rel="noopener noreferrer">
             <i class="fab fa-github"></i>
         </a>
-        <a href="https://twitter.com/7sys" target="_blank" rel="noopener noreferrer">
+        <a href="https://twitter.com/ben7sys" target="_blank" rel="noopener noreferrer">
             <i class="fab fa-twitter"></i>
         </a>
         <a href="https://linkedin.com/company/7sys" target="_blank" rel="noopener noreferrer">
diff --git a/public/css/components.css b/public/css/components.css
index 6db0782..1ada947 100644
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -20,12 +20,21 @@
     margin: var(--spacing-xl) 0;
 }
 
-.mission-vision div {
+.mission-vision .tooltip-container {
     background: var(--bg-card);
     padding: var(--spacing-xl);
     border-radius: var(--border-radius);
     border: 1px solid var(--border-color);
     text-align: center;
+    position: relative;
+    cursor: pointer;
+    transition: transform var(--transition-speed) ease, 
+                border-color var(--transition-speed) ease;
+}
+
+.mission-vision .tooltip-container:hover {
+    transform: translateY(-5px);
+    border-color: var(--primary);
 }
 
 .mission-vision h3 {
@@ -33,6 +42,49 @@
     margin-bottom: var(--spacing-md);
 }
 
+/* Tooltip Styles */
+.tooltip-container {
+    position: relative;
+}
+
+.tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    bottom: 120%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-card);
+    color: var(--text);
+    padding: var(--spacing-lg);
+    border-radius: var(--border-radius);
+    width: 300px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    text-align: left;
+    z-index: 100;
+    transition: opacity var(--transition-speed) ease,
+                visibility var(--transition-speed) ease;
+}
+
+.tooltip::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 10px 10px 0;
+    border-style: solid;
+    border-color: var(--bg-card) transparent transparent transparent;
+}
+
+.tooltip-container:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
 /* Service Cards */
 .service-card {
     background: var(--bg-card);
@@ -45,8 +97,9 @@
 }
 
 .service-card:hover {
-    transform: translateY(-5px);
     border-color: var(--primary);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
 }
 
 .service-card h3 {
@@ -63,6 +116,12 @@
     margin: var(--spacing-xl) 0;
 }
 
+.contact-info:hover {
+    border-color: var(--primary);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+}
+
 .contact-info a {
     color: var(--primary);
     text-decoration: none;
diff --git a/public/index.html b/public/index.html
index a711139..22d898b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,13 +27,19 @@
                 <p class="welcome-quote">Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.</p>
                 <span class="logo-sub">Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better.</span>
                 <div class="mission-vision">
-                    <div>
+                    <div class="tooltip-container">
                         <h3>Vision</h3>
                         <p>Digitale Souveränität</p>
+                        <div class="tooltip">
+                            Wir streben eine Zukunft an, in der Unternehmen die volle Kontrolle über ihre digitalen Ressourcen haben. Digitale Souveränität bedeutet für uns, dass Sie selbstbestimmt und unabhängig über Ihre IT-Infrastruktur entscheiden können, während Sie gleichzeitig von modernsten Technologien profitieren.
+                        </div>
                     </div>
-                    <div>
+                    <div class="tooltip-container">
                         <h3>Mission</h3>
                         <p>Sichere und nachhaltige IT-Lösungen</p>
+                        <div class="tooltip">
+                            Durch maßgeschneiderte IT-Lösungen ermöglichen wir es unseren Kunden, ihre digitale Infrastruktur sicher und zukunftsfähig zu gestalten. Wir setzen dabei auf nachhaltige Technologien, die sowohl ressourceneffizient als auch langfristig wartbar sind. Unser Ziel ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten.
+                        </div>
                     </div>
                 </div>
             </section>