diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90852a7..dcb7858 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## Version 0.2.13
+
+### Fixed
+
+* fix responsive design on mobile (#134)
+* fix translation (#132)
+* fix latest docker tag auto build (#131)
+
 ## Version 0.2.12
 
 ### Added
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 73c1bb7..4c1754b 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -33,7 +33,7 @@ export default function SettingsPage() {
 
   return (
     <>
-      <div className="container mx-auto px-4 py-8">
+      <div>
         <h1 className="text-3xl font-bold mb-6">{t('title')}</h1>
         <Card className="mb-6">
           <CardHeader>
@@ -102,7 +102,7 @@ export default function SettingsPage() {
                       system: { ...settings.system, timezone: e.target.value }
                     })
                   }
-                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
+                  className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
                 >
                   {Intl.supportedValuesOf('timeZone').map((tz) => (
                     <option key={tz} value={tz}>
@@ -130,7 +130,7 @@ export default function SettingsPage() {
                       system: { ...settings.system, weekStartDay: Number(e.target.value) as WeekDay }
                     })
                   }
-                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2"
+                  className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2"
                 >
                   {([
                     ['sunday', 0],
@@ -213,7 +213,7 @@ export default function SettingsPage() {
                     variant: 'default',
                   });
                 }}
-                className={`w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
+                className={`w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
               >
                 {/* Add more languages as needed */}
                 <option value="en">English</option>
diff --git a/components/CoinsManager.tsx b/components/CoinsManager.tsx
index f21d246..13aff11 100644
--- a/components/CoinsManager.tsx
+++ b/components/CoinsManager.tsx
@@ -102,9 +102,9 @@ export default function CoinsManager() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-3xl font-bold mr-6">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold mr-6">{t('title')}</h1>
         {currentUser?.isAdmin && (
           <select
             className="border rounded p-2"
diff --git a/components/Dashboard.tsx b/components/Dashboard.tsx
index 0684f64..2016dc3 100644
--- a/components/Dashboard.tsx
+++ b/components/Dashboard.tsx
@@ -17,9 +17,9 @@ export default function Dashboard() {
   const wishlistItems = wishlist.items
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <CoinBalance coinBalance={balance} />
diff --git a/components/HabitCalendar.tsx b/components/HabitCalendar.tsx
index 5c55805..770a976 100644
--- a/components/HabitCalendar.tsx
+++ b/components/HabitCalendar.tsx
@@ -42,8 +42,8 @@ export default function HabitCalendar() {
   }, [completedHabitsMap, settings.system.timezone])
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">{t('title')}</h1>
+    <div>
+      <h1 className="text-xl xs:text-3xl font-bold mb-6">{t('title')}</h1>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
           <CardHeader>
@@ -156,49 +156,49 @@ export default function HabitCalendar() {
                         date: selectedDateTime
                       }))
                       .map((habit) => {
-                    const completions = getCompletionsForDate({ habit, date: selectedDateTime, timezone: settings.system.timezone })
-                    const isCompleted = completions >= (habit.targetCompletions || 1)
-                    return (
-                      <li key={habit.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors">
-                        <span className="flex items-center gap-2">
-                          <Linkify>{habit.name}</Linkify>
-                        </span>
-                        <div className="flex items-center gap-2">
-                          <div className="flex items-center gap-2">
-                            {habit.targetCompletions && (
-                              <span className="text-sm text-muted-foreground">
-                                {completions}/{habit.targetCompletions}
-                              </span>
-                            )}
-                            <button
-                              onClick={() => handleCompletePastHabit(habit, selectedDateTime)}
-                              disabled={isCompleted}
-                              className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100"
-                            >
-                              {isCompleted ? (
-                                <CircleCheck className="h-4 w-4 text-green-500" />
-                              ) : (
-                                <div className="relative h-4 w-4">
-                                  <Circle className="absolute h-4 w-4 text-muted-foreground" />
-                                  <div
-                                    className="absolute h-4 w-4 rounded-full overflow-hidden"
-                                    style={{
-                                      background: `conic-gradient(
+                        const completions = getCompletionsForDate({ habit, date: selectedDateTime, timezone: settings.system.timezone })
+                        const isCompleted = completions >= (habit.targetCompletions || 1)
+                        return (
+                          <li key={habit.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors">
+                            <span className="flex items-center gap-2">
+                              <Linkify>{habit.name}</Linkify>
+                            </span>
+                            <div className="flex items-center gap-2">
+                              <div className="flex items-center gap-2">
+                                {habit.targetCompletions && (
+                                  <span className="text-sm text-muted-foreground">
+                                    {completions}/{habit.targetCompletions}
+                                  </span>
+                                )}
+                                <button
+                                  onClick={() => handleCompletePastHabit(habit, selectedDateTime)}
+                                  disabled={isCompleted}
+                                  className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100"
+                                >
+                                  {isCompleted ? (
+                                    <CircleCheck className="h-4 w-4 text-green-500" />
+                                  ) : (
+                                    <div className="relative h-4 w-4">
+                                      <Circle className="absolute h-4 w-4 text-muted-foreground" />
+                                      <div
+                                        className="absolute h-4 w-4 rounded-full overflow-hidden"
+                                        style={{
+                                          background: `conic-gradient(
                                         currentColor ${(completions / (habit.targetCompletions ?? 1)) * 360}deg,
                                         transparent ${(completions / (habit.targetCompletions ?? 1)) * 360}deg 360deg
                                       )`,
-                                      mask: 'radial-gradient(transparent 50%, black 51%)',
-                                      WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
-                                    }}
-                                  />
-                                </div>
-                              )}
-                            </button>
-                          </div>
-                        </div>
-                      </li>
-                    )
-                    })}
+                                          mask: 'radial-gradient(transparent 50%, black 51%)',
+                                          WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
+                                        }}
+                                      />
+                                    </div>
+                                  )}
+                                </button>
+                              </div>
+                            </div>
+                          </li>
+                        )
+                      })}
                   </ul>
                 </div>
               </div>
diff --git a/components/HabitList.tsx b/components/HabitList.tsx
index 6357caf..68684cf 100644
--- a/components/HabitList.tsx
+++ b/components/HabitList.tsx
@@ -120,9 +120,11 @@ export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
 
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">{t(isTasksView ? "myTasks" : "myHabits")}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold">
+          {t(isTasksView ? 'myTasks' : 'myHabits')}
+        </h1>
         <span>
           <Button onClick={() => setModalConfig({ isOpen: true, isTask: isTasksView })}>
             <Plus className='mr-2 h-4 w-4' />{isTasksView ? t("addTaskButton") : t("addHabitButton")}
@@ -178,18 +180,18 @@ export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
             />
           </div>
         ) : (
-            activeHabits.map((habit: Habit) => (
-              <HabitItem
-                key={habit.id}
-                habit={habit}
-                onEdit={() => {
-                  setEditingHabit(habit)
-                  setModalConfig({ isOpen: true, isTask: isTasksView })
-                }}
-                onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
-              />
-            ))
-          )}
+          activeHabits.map((habit: Habit) => (
+            <HabitItem
+              key={habit.id}
+              habit={habit}
+              onEdit={() => {
+                setEditingHabit(habit)
+                setModalConfig({ isOpen: true, isTask: isTasksView })
+              }}
+              onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
+            />
+          ))
+        )}
 
         {archivedHabits.length > 0 && (
           <>
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 9a6ed91..9c60494 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,3 +1,4 @@
+import { ResponsiveContainer } from 'recharts'
 import ClientWrapper from './ClientWrapper'
 import Header from './Header'
 import Navigation from './Navigation'
@@ -10,9 +11,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <Navigation viewPort='main' />
         <div className="flex-1 flex flex-col">
           <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900 relative">
-            <ClientWrapper>
-              {children}
-            </ClientWrapper>
+            {/* responsive container (optimized for mobile) */}
+            <div className="mx-auto px-2 xs:px-4 py-8 max-w-sm xs:max-w-full">
+              <ClientWrapper>
+                {children}
+              </ClientWrapper>
+            </div>
           </main>
           <Navigation viewPort='mobile' />
         </div>
diff --git a/components/WishlistManager.tsx b/components/WishlistManager.tsx
index a3a9b0c..48ac19b 100644
--- a/components/WishlistManager.tsx
+++ b/components/WishlistManager.tsx
@@ -66,7 +66,7 @@ export default function WishlistManager() {
       setTimeout(() => {
         setRecentlyRedeemedId(null)
       }, 3000)
-      
+
       if (item.link) {
         setTimeout(() => {
           const opened = openWindow(item.link!)
@@ -83,9 +83,9 @@ export default function WishlistManager() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
         <Button onClick={() => setIsModalOpen(true)}>
           <Plus className="mr-2 h-4 w-4" /> {t('addRewardButton')}
         </Button>
@@ -126,7 +126,7 @@ export default function WishlistManager() {
             </div>
           ))
         )}
-        
+
         {archivedItems.length > 0 && (
           <>
             <div className="col-span-1 lg:col-span-2 relative flex items-center my-6">
diff --git a/package.json b/package.json
index aa5899b..0f9f235 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 85299de..29fb343 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,6 +8,17 @@ export default {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
+    screens: {
+      '3xs': '320px',
+      '2xs': '375px',
+      'xs': '480px',
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+      '3xl': '1920px'
+    },
     extend: {
       keyframes: {
         celebrate: {