diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index c1f01e8..4d149bb 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -15,6 +15,7 @@ import {
   Tooltip
 } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { Link } from 'react-router-dom';
 import api from '../api';
 import { useTitle } from '../hooks/useTitle';
@@ -70,6 +71,16 @@ const Dashboard: React.FC = () => {
 
   return (
     <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
+      <Button 
+        variant="outlined" 
+        component={Link} 
+        to="/" 
+        startIcon={<ArrowBackIcon />}
+        sx={{ mb: 4, textTransform: 'none', borderRadius: 2 }}
+      >
+        Back to Home
+      </Button>
+
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 6, flexWrap: 'wrap', gap: 2 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
               <Avatar src={data.user.avatar || undefined} sx={{ width: 64, height: 64, border: '3px solid', borderColor: 'primary.main' }}>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 49acf7a..3753dfc 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { Typography, TextField, Button, Box, Paper, Tab, Tabs, Alert, Container } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Link } from 'react-router-dom';
 import api from '../api';
 import { useTitle } from '../hooks/useTitle';
 
@@ -220,7 +222,20 @@ const Login: React.FC<LoginProps> = () => {
 
   return (
     <Container maxWidth="xs" sx={{ py: 8 }}>
-      <Paper sx={{ p: 3 }}>
+      <Button 
+        variant="outlined" 
+        component={Link} 
+        to="/" 
+        startIcon={<ArrowBackIcon />}
+        sx={{ mb: 4, textTransform: 'none', borderRadius: 2 }}
+      >
+        Back to Home
+      </Button>
+
+      <Paper sx={{ 
+          p: 3,
+          '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 }
+      }}>
         {message && <Alert severity={message.type} sx={{ mb: 2 }}>{message.text}</Alert>}
         {renderContent()}
       </Paper>
diff --git a/frontend/src/pages/PublicProfile.tsx b/frontend/src/pages/PublicProfile.tsx
index b337c01..b99e1bc 100644
--- a/frontend/src/pages/PublicProfile.tsx
+++ b/frontend/src/pages/PublicProfile.tsx
@@ -12,8 +12,10 @@ import {
   Tabs,
   Tab,
   Paper,
-  Divider
+  Divider,
+  Button
 } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { Link } from 'react-router-dom';
 import api from '../api';
 import { useTitle } from '../hooks/useTitle';
@@ -91,6 +93,16 @@ const PublicProfile: React.FC = () => {
 
   return (
     <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
+      <Button 
+        variant="outlined" 
+        component={Link} 
+        to="/" 
+        startIcon={<ArrowBackIcon />}
+        sx={{ mb: 4, textTransform: 'none', borderRadius: 2 }}
+      >
+        Back to Home
+      </Button>
+
       {/* Profile Header */}
       <Box sx={{ display: 'flex', alignItems: 'center', mb: 6, gap: 3 }}>
         <Avatar src={data.avatar || undefined} sx={{ width: 100, height: 100, border: '4px solid', borderColor: 'primary.main', fontSize: '2.5rem' }}>
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 5bc2345..d99fc53 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -15,6 +15,8 @@ import {
   ListSubheader,
   Divider
 } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Link } from 'react-router-dom';
 import api from '../api';
 import { useTitle } from '../hooks/useTitle';
 import type { CatppuccinTheme } from '../theme';
@@ -117,6 +119,16 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
 
   return (
     <Container maxWidth="sm" sx={{ py: 4 }}>
+      <Button 
+        variant="outlined" 
+        component={Link} 
+        to="/" 
+        startIcon={<ArrowBackIcon />}
+        sx={{ mb: 4, textTransform: 'none', borderRadius: 2 }}
+      >
+        Back to Home
+      </Button>
+
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 4, mt: 4 }}>
           <Avatar src={avatar || undefined} sx={{ width: 80, height: 80, border: '3px solid', borderColor: 'primary.main' }}>
               {!avatar && username.charAt(0).toUpperCase()}
@@ -133,7 +145,10 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
         </Alert>
       )}
 
-      <Paper sx={{ p: 3, mb: 4 }}>
+      <Paper sx={{ 
+          p: 3, mb: 4,
+          '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 }
+      }}>
         <Typography variant="h6" gutterBottom>Appearance</Typography>
         <FormControl fullWidth margin="normal">
             <InputLabel>Theme</InputLabel>
@@ -165,7 +180,10 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
         </FormControl>
       </Paper>
 
-      <Paper sx={{ p: 3, mb: 4 }}>
+      <Paper sx={{ 
+          p: 3, mb: 4,
+          '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 }
+      }}>
         <Typography variant="h6" gutterBottom>Profile Picture</Typography>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 2 }}>
             <Avatar src={avatar || undefined} sx={{ width: 100, height: 100 }}>
@@ -183,7 +201,10 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
         </Box>
       </Paper>
 
-      <Paper sx={{ p: 3, mb: 4 }}>
+      <Paper sx={{ 
+          p: 3, mb: 4,
+          '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 }
+      }}>
         <Typography variant="h6" gutterBottom>Profile Information</Typography>
         <form onSubmit={handleUpdateProfile}>
           <TextField
@@ -226,7 +247,10 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
         )}
       </Paper>
 
-      <Paper sx={{ p: 3 }}>
+      <Paper sx={{ 
+          p: 3,
+          '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 }
+      }}>
         <Typography variant="h6" gutterBottom>Change Password</Typography>
         <form onSubmit={handleChangePassword}>
           <TextField
diff --git a/frontend/src/pages/categories/CategoryFlavors.tsx b/frontend/src/pages/categories/CategoryFlavors.tsx
index 2b6ab17..8a33a82 100644
--- a/frontend/src/pages/categories/CategoryFlavors.tsx
+++ b/frontend/src/pages/categories/CategoryFlavors.tsx
@@ -7,8 +7,10 @@ import {
   CardContent, 
   Rating as MuiRating,
   CircularProgress,
-  Container
+  Container,
+  Button
 } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import api from '../../api';
 import { useTitle } from '../../hooks/useTitle';
 
@@ -67,9 +69,15 @@ const CategoryFlavors: React.FC = () => {
     <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
       <Box sx={{ mb: 4 }}>
           <Typography variant="h4" gutterBottom>{categoryName || 'Flavors'}</Typography>
-          <Link to="/" style={{ textDecoration: 'none' }}>
-              <Typography color="primary" sx={{ '&:hover': { textDecoration: 'underline' } }}>&larr; Back to all categories</Typography>
-          </Link>
+          <Button 
+            variant="outlined" 
+            component={Link} 
+            to="/" 
+            startIcon={<ArrowBackIcon />}
+            sx={{ textTransform: 'none', borderRadius: 2 }}
+          >
+            Back to all categories
+          </Button>
       </Box>
 
       <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
diff --git a/frontend/src/pages/flavors/FlavorDetail.tsx b/frontend/src/pages/flavors/FlavorDetail.tsx
index 877a737..f948d5e 100644
--- a/frontend/src/pages/flavors/FlavorDetail.tsx
+++ b/frontend/src/pages/flavors/FlavorDetail.tsx
@@ -16,6 +16,7 @@ import {
 } from '@mui/material';
 import api from '../../api';
 import { useTitle } from '../../hooks/useTitle';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 interface Reply {
     id: number;
@@ -148,8 +149,14 @@ const FlavorDetail: React.FC = () => {
 
   return (
     <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
-      <Button component={Link} to={`/category/${flavor.category_slug}`} sx={{ mb: 2, textTransform: 'none' }}>
-        &larr; Back to {flavor.category_name}
+      <Button 
+        variant="outlined" 
+        component={Link} 
+        to={`/category/${flavor.category_slug}`} 
+        startIcon={<ArrowBackIcon />}
+        sx={{ mb: 2, textTransform: 'none', borderRadius: 2 }}
+      >
+        Back to {flavor.category_name}
       </Button>
 
       <Card sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, mb: 4, overflow: 'hidden', borderRadius: { xs: 2, md: 4 } }}>