diff --git a/i18n/de/code.json b/i18n/de/code.json
index c1a290a0dc..14b7e7760a 100644
--- a/i18n/de/code.json
+++ b/i18n/de/code.json
@@ -353,5 +353,14 @@
 	},
 	"custom.docs-version-hint": {
 		"message": "Diese Dokumentation behandelt KoliBri - Public UI {version}. Für die aktuellste Version, siehe {link}."
+	},
+	"email.send": {
+		"message": "E-Mail senden"
+	},
+	"feedback.header": {
+		"message": "Feedback geben"
+	},
+	"feedback.information": {
+		"message": "Ihre Meinung zählt! Helfen Sie uns, KoliBri noch besser zu machen. Mit nur wenigen Klicks senden Sie uns Ihre Ideen, Anmerkungen oder Probleme."
 	}
 }
diff --git a/i18n/en/code.json b/i18n/en/code.json
index 216aca2021..59307d0175 100644
--- a/i18n/en/code.json
+++ b/i18n/en/code.json
@@ -353,5 +353,14 @@
 	},
 	"custom.docs-version-hint": {
 		"message": "This documentation covers KoliBri - Public UI {version}. For the latest version, see {link}."
+	},
+	"email.send": {
+		"message": "Send email"
+	},
+	"feedback.header": {
+		"message": "Give Feedback"
+	},
+	"feedback.information": {
+		"message": "Your opinion counts! Help us make KoliBri even better. Send us your ideas, comments, or problems in just a few clicks."
 	}
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index 89caf1bfd7..7704c9f59d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -125,6 +125,22 @@ kol-link-button {
 	display: block;
 }
 
+.popover-container {
+	width: 300px;
+	padding: 1rem;
+}
+
+.popover-paragraph {
+	margin-top: 10px;
+	font-size: 0.9rem;
+}
+
+.popover-link-button {
+	display: inline-block; 
+	border-radius: 9999px; 
+	text-decoration: none;
+}
+
 .used-by-gallery ul {
 	list-style: none;
 	display: flex;
diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx
index 64817040df..793d82d647 100644
--- a/src/theme/Navbar/index.tsx
+++ b/src/theme/Navbar/index.tsx
@@ -1,4 +1,4 @@
-import { KolLinkButton } from '@public-ui/react';
+import { KolHeading, KolLinkButton, KolPopoverButton } from '@public-ui/react';
 import type { FunctionComponent, PropsWithChildren } from 'react';
 import React from 'react';
 // import { getDarkMode, setDarkMode } from '../../shares/store';
@@ -93,6 +93,41 @@ export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
 								_variant="ghost"
 							/>
 						</div>
+						<div>
+							<KolPopoverButton
+								aria-label="Feedback geben"
+								_label="Feedback"
+								_hideLabel
+								_tooltipAlign="left"
+								_icons={"codicon codicon-feedback"}
+								_popoverAlign="bottom"
+								_variant="ghost"
+							>
+								<div className="popover-container">
+									<KolHeading
+										_label={translate({
+											id: 'feedback.header',
+										})}
+										_level={3}
+									>
+									</KolHeading>
+									<p className="p popover-paragraph">
+										{translate({
+											id: 'feedback.information',
+										})}
+									</p>
+									<KolLinkButton
+										className="popover-link-button"
+										_label={translate({
+											id: 'email.send',
+										})}
+										_variant="primary"
+										_href="mailto:kolibri@itzbund.de?subject=Feedback%20zu%20KoliBri-Webcomponents&body=Hallo%20KoliBri-Team,%0A%0Ahier%20ist%20mein%20Feedback%20zur%20Dokumentation%20oder%20den%20Webcomponents:%0A%0A%5BEinfach%20hier%20Ihr%20Feedback%20einfügen%5D%0A%0AVielen%20Dank!"
+									>
+									</KolLinkButton>
+								</div>
+							</KolPopoverButton>
+						</div>
 						{/* <div>
 						<KolLinkButton
 							_href="https://discord.com/invite/7ntYFPns6b"