diff --git a/src/pages/ChangeCalculatorPage.tsx b/src/pages/ChangeCalculatorPage.tsx
index 52c7bcf..1f3b6c0 100644
--- a/src/pages/ChangeCalculatorPage.tsx
+++ b/src/pages/ChangeCalculatorPage.tsx
@@ -11,7 +11,7 @@ interface MoneyItem {
 
 const ChangeCalculatorPage: React.FC = () => {
   const navigate = useNavigate();
-  const { getTotalPrice } = useCart();
+  const { getTotalPrice, clearCart } = useCart();
   const cartTotal = getTotalPrice();
 
   const initialDenominations: MoneyItem[] = [
@@ -61,6 +61,11 @@ const ChangeCalculatorPage: React.FC = () => {
     setMoneyItems(initialDenominations.map(item => ({ ...item, count: 0 })));
   };
 
+  const handleDoneClick = () => {
+    clearCart();
+    navigate('/');
+  };
+
   return (
     <div className="change-calculator-page">
       <header className="details-header">
@@ -68,6 +73,9 @@ const ChangeCalculatorPage: React.FC = () => {
           &larr; Zurück
         </button>
         <h1>Restgeld</h1>
+        <button className="done-button" onClick={handleDoneClick}>
+          Fertig
+        </button>
       </header>
 
       <div className="calculator-container">
diff --git a/src/pages/ProductDetailsPage.css b/src/pages/ProductDetailsPage.css
index 3ad1a5a..e0912b7 100644
--- a/src/pages/ProductDetailsPage.css
+++ b/src/pages/ProductDetailsPage.css
@@ -25,6 +25,16 @@
   left: 15px;
 }
 
+.done-button {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0;
+  position: absolute;
+  right: 15px;
+}
 .details-header h1 {
   flex: 1;
   text-align: center;