diff --git a/docs/boards/mcu/mcu-overview.mdx b/docs/boards/mcu/mcu-overview.mdx
index a1193fd..2340d5b 100644
--- a/docs/boards/mcu/mcu-overview.mdx
+++ b/docs/boards/mcu/mcu-overview.mdx
@@ -6,10 +6,10 @@ hide_title: true
 import mcus2top from "@site/static/img/mcus2/mcus2top.png";
 import AlertBox from "@site/src/components/AlertBox/AlertBox";
 import mcuPorts from "@site/static/img/mcu/sensebox-mcu-ports.png";
+import ButtonWithText from "@site/src/components/ButtonWithText/ButtonWithText";
 import {
   Popover,
   PopoverContent,
-  PopoverTrigger,
 } from "@site/src/components/ui/popover";
 import lightSensor from "@site/static/img/hardware-bilder/helligkeit-uv/sensor_helligkeit_uv.png";
 import display from "@site/static/img/hardware-bilder/oled/display.png";
@@ -46,9 +46,7 @@ Klicke auf die unten stehenden Anschlüsse um zu sehen welcher Sensor dort anges
 
 <div className="flex flex-row justify-evenly">
 	<Popover>
-		<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-			I2C/Wire Anschlüsse
-		</PopoverTrigger>
+		 <ButtonWithText title="I2C/Wire Ports" />
 		<PopoverContent>
 			<div>
 				<h2>Sensoren und Zubehör an den I2C/Wire Anschlüssen</h2>
@@ -114,9 +112,7 @@ Klicke auf die unten stehenden Anschlüsse um zu sehen welcher Sensor dort anges
 		</PopoverContent>
 	</Popover>
 	<Popover>
-		<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-			UART/Serielle Anschlüsse
-		</PopoverTrigger>
+	 <ButtonWithText title="UART/Serielle Anschlüsse" />	
 		<PopoverContent>
 			<div className="flex flex-col lg:flex-row">
 				<div className="flex flex-col items-center">
@@ -139,9 +135,7 @@ Klicke auf die unten stehenden Anschlüsse um zu sehen welcher Sensor dort anges
 		</PopoverContent>
 	</Popover>
 	<Popover>
-		<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-			Digitale/Analoge Anschlüsse
-		</PopoverTrigger>
+			 <ButtonWithText title="Digitale/Analoge Anschlüsse" />	
 		<PopoverContent>
 			<div className="flex flex-col lg:flex-row">
 				<div className="flex flex-col items-center">
@@ -172,9 +166,7 @@ Klicke auf die unten stehenden Anschlüsse um zu sehen welcher Sensor dort anges
 		</PopoverContent>
 	</Popover>
 	<Popover>
-		<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-			XBEE
-		</PopoverTrigger>
+			<ButtonWithText title="XBEE" />	
 		<PopoverContent>
 			<div className="flex flex-col lg:flex-row">
 				<div className="flex flex-col items-center">
diff --git a/docs/boards/mcus2/mcu-s2-overview.mdx b/docs/boards/mcus2/mcu-s2-overview.mdx
index e071ad7..9578bf4 100644
--- a/docs/boards/mcus2/mcu-s2-overview.mdx
+++ b/docs/boards/mcus2/mcu-s2-overview.mdx
@@ -7,6 +7,7 @@ import Admonition from "@theme/Admonition";
 import React, { useState } from "react";
 import { motion } from "framer-motion";
 import image from "@site/static/img/mcus2/mcus2top.png";
+import ButtonWithText from "@site/src/components/ButtonWithText/ButtonWithText";
 import {
 	Tooltip,
 	TooltipContent,
@@ -16,7 +17,6 @@ import {
 import {
 	Popover,
 	PopoverContent,
-	PopoverTrigger,
 } from "@site/src/components/ui/popover";
 import { Button } from "@site/src/components/ui/button";
 import mcus2ports from "@site/static/img/mcus2/mcus2-ports.png";
@@ -45,9 +45,7 @@ import mcus2top from "@site/static/img/mcus2/mcus2top.png";
 			<h1 className="text-left"> Anschlüsse </h1>
 			<div className="flex flex-row justify-evenly">
 				<Popover>
-					<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-						I2C/Wire Ports
-					</PopoverTrigger>
+					 <ButtonWithText title="I2C/Wire Ports" />
 					<PopoverContent>
 						<div>
 							<h2>Sensoren und Accessoire an den I2C/Wire Ports</h2>
@@ -97,9 +95,7 @@ import mcus2top from "@site/static/img/mcus2/mcus2top.png";
 					</PopoverContent>
 				</Popover>
 				<Popover>
-					<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-						Digital/Analog Ports
-					</PopoverTrigger>
+				 <ButtonWithText title="Digital/Analog Ports" />	
 					<PopoverContent>
 						<div>
 							<h2>Sensoren und Accessoire an den Digital/Analog Ports</h2>
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/boards/mcu/mcu-overview.mdx b/i18n/en/docusaurus-plugin-content-docs/current/boards/mcu/mcu-overview.mdx
index 69cff99..207df47 100644
--- a/i18n/en/docusaurus-plugin-content-docs/current/boards/mcu/mcu-overview.mdx
+++ b/i18n/en/docusaurus-plugin-content-docs/current/boards/mcu/mcu-overview.mdx
@@ -5,11 +5,11 @@ hide_title: true
 
 import mcus2top from "@site/static/img/mcus2/mcus2top.png";
 import AlertBox from "@site/src/components/AlertBox/AlertBox";
+import ButtonWithText from "@site/src/components/ButtonWithText/ButtonWithText";
 import mcuPorts from "@site/static/img/en/mcu/sensebox-mcu-ports.jpg";
 import {
   Popover,
   PopoverContent,
-  PopoverTrigger,
 } from "@site/src/components/ui/popover";
 import lightSensor from "@site/static/img/hardware-bilder/helligkeit-uv/sensor_helligkeit_uv.png";
 import display from "@site/static/img/hardware-bilder/oled/display.png";
@@ -48,10 +48,8 @@ import Admonition from '@theme/Admonition';
 Click on the ports below to see which sensor is connected there.
 <div className="flex flex-row justify-evenly">
 	<Popover>
-		<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-			I2C/Wire Ports
-		</PopoverTrigger>
-		<PopoverContent>
+	  <ButtonWithText title="I2C/Wire Ports" />
+		<PopoverContent> 
 			<div>
 				<h2>Sensoren und Accessoire an den I2C/Wire Ports</h2>
 				<div className="flex flex-col lg:flex-row">
@@ -116,9 +114,7 @@ Click on the ports below to see which sensor is connected there.
 		</PopoverContent>
 	</Popover>
 	<Popover>
-		<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-			UART/Serial port
-		</PopoverTrigger>
+		 <ButtonWithText title="UART/Serielle Anschlüsse" />	
 		<PopoverContent>
 			<div className="flex flex-col lg:flex-row">
 				<div className="flex flex-col items-center">
@@ -141,9 +137,7 @@ Click on the ports below to see which sensor is connected there.
 		</PopoverContent>
 	</Popover>
 	<Popover>
-		<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-			Digital/Analogue ports
-		</PopoverTrigger>
+		 <ButtonWithText title="Digitale/Analoge Anschlüsse" />	
 		<PopoverContent>
 			<div className="flex flex-col lg:flex-row">
 				<div className="flex flex-col items-center">
@@ -174,9 +168,7 @@ Click on the ports below to see which sensor is connected there.
 		</PopoverContent>
 	</Popover>
 	<Popover>
-		<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
-			XBEE
-		</PopoverTrigger>
+			<ButtonWithText title="XBEE" />	
 		<PopoverContent>
 			<div className="flex flex-col lg:flex-row">
 				<div className="flex flex-col items-center">
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/boards/mcus2/mcu-s2-overview.mdx b/i18n/en/docusaurus-plugin-content-docs/current/boards/mcus2/mcu-s2-overview.mdx
index 74bfeaa..cb6e166 100644
--- a/i18n/en/docusaurus-plugin-content-docs/current/boards/mcus2/mcu-s2-overview.mdx
+++ b/i18n/en/docusaurus-plugin-content-docs/current/boards/mcus2/mcu-s2-overview.mdx
@@ -7,6 +7,7 @@ import Admonition from "@theme/Admonition";
 import React, { useState } from "react";
 import { motion } from "framer-motion";
 import image from "@site/static/img/mcus2/mcus2top.png";
+import ButtonWithText from "@site/src/components/ButtonWithText/ButtonWithText";
 import {
 	Tooltip,
 	TooltipContent,
@@ -16,7 +17,6 @@ import {
 import {
 	Popover,
 	PopoverContent,
-	PopoverTrigger,
 } from "@site/src/components/ui/popover";
 import { Button } from "@site/src/components/ui/button";
 import mcus2ports from "@site/static/img/en/mcus2/mcus2-ports.png";
@@ -43,9 +43,7 @@ import mcus2top from "@site/static/img/mcus2/mcus2top.png";
 			<h1 className="text-left"> Ports </h1>
 			<div className="flex flex-row justify-evenly">
 				<Popover>
-					<PopoverTrigger className="flex cursor-pointer bg-white border-solid border-1 rounded-md w-[10rem] p-2 hover:bg-gray-100">
-						I2C/Wire ports
-					</PopoverTrigger>
+					 <ButtonWithText title="I2C/Wire ports" />
 					<PopoverContent>
 						<div>
 							<h2>Sensors and accessories on the I2C/Wire ports</h2>
@@ -95,9 +93,7 @@ import mcus2top from "@site/static/img/mcus2/mcus2top.png";
 					</PopoverContent>
 				</Popover>
 				<Popover>
-					<PopoverTrigger className="cursor-pointer bg-white border-solid border-1 rounded-md w-[10rem] p-2 hover:bg-gray-100">
-						Digital/Analogue ports
-					</PopoverTrigger>
+					 <ButtonWithText title="Digital/Analogue ports" />	
 					<PopoverContent>
 						<div>
 							<h2>Sensors and accessories on the digital/analogue ports</h2>
diff --git a/src/components/ButtonWithText/ButtonWithText.jsx b/src/components/ButtonWithText/ButtonWithText.jsx
new file mode 100644
index 0000000..ac021e9
--- /dev/null
+++ b/src/components/ButtonWithText/ButtonWithText.jsx
@@ -0,0 +1,15 @@
+import { PopoverTrigger } from "@radix-ui/react-popover";
+
+const ButtonWithText = ({ title, ...props }) => (
+  <PopoverTrigger asChild>
+    <button 
+      type="button" 
+      className="bg-gradient-to-r  from-green to-green hover:from-green-2 hover:to-green-2 text-white font-medium py-3 px-6 rounded-xl shadow-lg transition-all duration-300 ease-in-out"
+      {...props}
+    >
+      {title}
+    </button>
+  </PopoverTrigger>
+);
+
+export default ButtonWithText;
\ No newline at end of file