diff --git a/src/components/header/ButtonGroup.js b/src/components/header/ButtonGroup.js
index f6659b4..c395cd5 100644
--- a/src/components/header/ButtonGroup.js
+++ b/src/components/header/ButtonGroup.js
@@ -142,7 +142,7 @@ class ButtonGroup extends Component {
           onClose={this.toggleCart}
           disableScrollLock={true}
         >
-          <Box sx={{ width: 420, p: 2 }}>
+          <Box sx={{ width: { xs: '100vw', sm: 420 }, p: { xs: 1, sm: 2 } }}>
             <Box 
               sx={{ 
                 display: 'flex', 
diff --git a/src/components/profile/CartTab.js b/src/components/profile/CartTab.js
index e44d42e..4cc6f0e 100644
--- a/src/components/profile/CartTab.js
+++ b/src/components/profile/CartTab.js
@@ -409,7 +409,7 @@ class CartTab extends Component {
     const displayError = completionError || preSubmitError;
 
     return (
-      <Box sx={{ p: 3 }}>
+              <Box sx={{ p: { xs: 1, sm: 3 } }}>
         {/* Payment Confirmation */}
         {showPaymentConfirmation && (
           <PaymentConfirmationDialog
diff --git a/src/components/profile/OrdersTab.js b/src/components/profile/OrdersTab.js
index ad7029f..ed9608a 100644
--- a/src/components/profile/OrdersTab.js
+++ b/src/components/profile/OrdersTab.js
@@ -139,7 +139,7 @@ const OrdersTab = ({ orderIdFromHash }) => {
 
   if (loading) {
     return (
-      <Box sx={{ p: 3, display: "flex", justifyContent: "center" }}>
+              <Box sx={{ p: { xs: 1, sm: 3 }, display: "flex", justifyContent: "center" }}>
         <CircularProgress />
       </Box>
     );
@@ -147,14 +147,14 @@ const OrdersTab = ({ orderIdFromHash }) => {
 
   if (error) {
     return (
-      <Box sx={{ p: 3 }}>
+      <Box sx={{ p: { xs: 1, sm: 3 } }}>
         <Alert severity="error">{error}</Alert>
       </Box>
     );
   }
 
   return (
-    <Box sx={{ p: 3 }}>
+            <Box sx={{ p: { xs: 1, sm: 3 } }}>
       {orders.length > 0 ? (
         <TableContainer component={Paper}>
           <Table>
diff --git a/src/components/profile/SettingsTab.js b/src/components/profile/SettingsTab.js
index 52b853d..44679fa 100644
--- a/src/components/profile/SettingsTab.js
+++ b/src/components/profile/SettingsTab.js
@@ -235,8 +235,8 @@ class SettingsTab extends Component {
   
   render() {
     return (
-      <Box sx={{ p: 3 }}>
-        <Paper sx={{ p: 3}}>
+      <Box sx={{ p: { xs: 1, sm: 3 } }}>
+        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
           <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
             Passwort ändern
           </Typography>
@@ -289,7 +289,7 @@ class SettingsTab extends Component {
         
         <Divider sx={{ my: 4 }} />
         
-        <Paper sx={{ p: 3 }}>
+        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
           <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
             E-Mail-Adresse ändern
           </Typography>
@@ -332,7 +332,7 @@ class SettingsTab extends Component {
         
         <Divider sx={{ my: 4 }} />
         
-        <Paper sx={{ p: 3 }}>
+        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
           <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
             API-Schlüssel
           </Typography>
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index fe6db8f..720a68d 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -167,11 +167,16 @@ const ProfilePage = (props) => {
   }
 
   return (
-    <Container maxWidth="md" sx={{ py: 4 }}>
-      <Paper elevation={2} sx={{ borderRadius: 2, overflow: 'hidden' }}>
-        <Box sx={{ bgcolor: '#2e7d32', p: 3, color: 'white' }}>
+    <Container maxWidth="md" sx={{ py: { xs: 0, sm: 4 }, px: { xs: 0, sm: 3 } }}>
+      <Paper elevation={{ xs: 0, sm: 2 }} sx={{ borderRadius: { xs: 0, sm: 2 }, overflow: 'hidden' }}>
+        <Box sx={{ bgcolor: '#2e7d32', p: { xs: 2, sm: 3 }, color: 'white' }}>
           <Typography variant="h5" fontWeight="bold">
-            Mein Profil
+            {window.innerWidth < 600 ? 
+              (tabValue === 0 ? 'Bestellabschluss' : 
+               tabValue === 1 ? 'Bestellungen' : 
+               tabValue === 2 ? 'Einstellungen' : 'Mein Profil') 
+              : 'Mein Profil'
+            }
           </Typography>
           {user && (
             <Typography variant="body1" sx={{ mt: 1 }}>
@@ -185,7 +190,11 @@ const ProfilePage = (props) => {
             value={tabValue}
             onChange={handleTabChange}
             variant="fullWidth"
-            sx={{ borderBottom: 1, borderColor: 'divider' }}
+            sx={{ 
+              borderBottom: 1, 
+              borderColor: 'divider',
+              display: { xs: 'none', sm: 'flex' }
+            }}
             TabIndicatorProps={{
               style: { backgroundColor: '#2e7d32' }
             }}