diff --git a/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit.tsx b/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit.tsx
index 00af55e..769c3e2 100644
--- a/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit.tsx
+++ b/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit.tsx
@@ -107,7 +107,7 @@ export const MultiBillEdit: FC<MultiBillEditProps> = ({ locations, year, month }
             </div>
             <div className="p-[16px] pt-0">
                 {locations.map(location => (
-                    <div key={location._id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral mb-2">
+                    <div key={location._id} className="card card-compact card-bordered max-w-[35em] bg-base-100 border-1 border-neutral mb-2">
                         <div className="card-body">
                             <h2 className="card-title text-[1rem]">
                                 {formatYearMonth(yearMonth)} {location.name}
diff --git a/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditButton.tsx b/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditButton.tsx
index de8f248..a0de2c8 100644
--- a/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditButton.tsx
+++ b/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditButton.tsx
@@ -7,18 +7,19 @@ import Link from 'next/link';
 
 export interface MultiBillEditButtonProps {
   yearMonth: YearMonth;
+    className?: string;
 }
 
-export const MultiBillEditButton: React.FC<MultiBillEditButtonProps> = ({ yearMonth }) => {
+export const MultiBillEditButton: React.FC<MultiBillEditButtonProps> = ({ yearMonth, className }) => {
   
   const t = useTranslations("home-page.multi-bill-edit-button");
 
   return (
-    <div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
+    <div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
       <Link href={`/home/multi-bill-edit/${yearMonth.year}/${yearMonth.month}`} className="card-body tooltip self-center" data-tip={t("tooltip")} data-umami-event="add-new-location">
         <span className='flex self-center'>
           <Square3Stack3DIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
-          <span className="ml-1 self-center text-xs text-left leading-[1.2em] w-[5.5em]">{t("tooltip")}</span>
+          <span className="ml-1 self-center text-sm sm:text-xs text-left w-[5.5em] leading-[1.3em]">{t("tooltip")}</span>
         </span>
       </Link>
     </div>
diff --git a/app/ui/AddLocationButton.tsx b/app/ui/AddLocationButton.tsx
index fd7a1a6..2952693 100644
--- a/app/ui/AddLocationButton.tsx
+++ b/app/ui/AddLocationButton.tsx
@@ -8,20 +8,21 @@ import { useTranslations } from 'next-intl';
 
 export interface AddLocationButtonProps {
     /** year and month at which the new billing location should be addes */
-    yearMonth: YearMonth
+    yearMonth: YearMonth;
+    className?: string;
 }
 
-export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth}) => {
+export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth, className}) => {
 
     const t = useTranslations("home-page.add-location-button");
 
     return(
-        <div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
+        <div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
             <Link href={`/home/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip={t("tooltip")} data-umami-event="add-new-location">
                 <span className='flex self-center'>
-                    <HomeIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
-                    <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.6em] mt-[-.4em]"  />
-                    <span className="ml-1 self-center text-xs text-left leading-[1.2em] w-[5.5em]">{t("tooltip")}</span>
+                    <HomeIcon className="h-[1em] w-[1em] cursor-pointer text-4xl mt-[.1rem]" />
+                    <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.6em] mt-[-.3em]"  />
+                    <span className="ml-1 self-center text-sm sm:text-xs text-left w-[5.5em] leading-[1.3em]">{t("tooltip")}</span>
                 </span>
             </Link>
         </div>
diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index 3ef6355..3657ae8 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -147,7 +147,7 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
                             : null
                     }
                     <div className="flex">
-                        <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered grow file-input-s my-2 block max-w-[17em] md:max-w-[80em] break-words" onChange={billAttachment_handleChange} />
+                        <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered grow file-input-s my-2 block w-full break-words" onChange={billAttachment_handleChange} />
                     </div>
                     {
                         isScanningPDF &&
diff --git a/app/ui/InfoBox.tsx b/app/ui/InfoBox.tsx
index 5898093..6dc95f7 100644
--- a/app/ui/InfoBox.tsx
+++ b/app/ui/InfoBox.tsx
@@ -11,7 +11,7 @@ export const InfoBox: FC<{
     const t = useTranslations("info-box");
 
   return (
-    <details className="group border border-gray-800 rounded-lg p-2 mb-1 w-full max-w-md">
+    <details className="group border border-gray-800 rounded-lg p-2 mb-1 w-full">
       <summary className="flex cursor-pointer items-center justify-between">
         <span className="font-bold"><QuestionMarkCircleIcon className="w-5 h-5 inline mr-1 mt-[-.3em]" /> {title ?? t("default-title")}</span>
         <span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>
diff --git a/app/ui/LocationCard.tsx b/app/ui/LocationCard.tsx
index 0adf88d..f175f20 100644
--- a/app/ui/LocationCard.tsx
+++ b/app/ui/LocationCard.tsx
@@ -48,7 +48,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
     }
 
     return (
-        <div data-key={_id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
+        <div data-key={_id} className="card card-compact card-bordered sm:max-w-[35em] bg-base-100 border-1 border-neutral my-1">
             <div className="card-body">
                 <Link href={`/home/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
                     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-[-.2rem] right-0 text-2xl" />
diff --git a/app/ui/MonthLocationList.tsx b/app/ui/MonthLocationList.tsx
index 10ff494..86bce23 100644
--- a/app/ui/MonthLocationList.tsx
+++ b/app/ui/MonthLocationList.tsx
@@ -132,10 +132,10 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
                                 locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} currency={userSettings?.currency} />)
                                 : null
                         }
-                        <div className="flex gap-2 justify-center">
-                        <AddLocationButton yearMonth={yearMonth} />
-                        <PrintButton yearMonth={yearMonth} />
-                        <MultiBillEditButton yearMonth={yearMonth} />
+                        <div className="flex flex-col sm:flex-row sm:gap-2 justify-center">
+                            <AddLocationButton yearMonth={yearMonth} />
+                            <PrintButton yearMonth={yearMonth} />
+                            <MultiBillEditButton yearMonth={yearMonth} />
                         </div>
                     </MonthCard>
                 )
diff --git a/app/ui/PrintButton.tsx b/app/ui/PrintButton.tsx
index 5ea4b2d..06a1a56 100644
--- a/app/ui/PrintButton.tsx
+++ b/app/ui/PrintButton.tsx
@@ -6,9 +6,10 @@ import { YearMonth } from '../lib/db-types';
 
 export interface PrintButtonProps {
   yearMonth: YearMonth;
+    className?: string;
 }
 
-export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
+export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth, className }) => {
   const t = useTranslations("home-page.month-card");
 
   const handlePrintClick = () => {
@@ -16,7 +17,7 @@ export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
   };
 
   return (
-    <div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
+    <div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
       <button 
         className="card-body tooltip self-center cursor-pointer" 
         onClick={handlePrintClick}
@@ -24,7 +25,7 @@ export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
       >
         <span className='flex self-center'>
           <PrinterIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
-          <span className="ml-1 self-center text-xs text-left leading-[1.2em] w-[4em]">{t("print-codes-label")}</span>
+          <span className="ml-1 self-center text-sm sm:text-xs text-left sm:w-[5.5em] leading-[1.3em]">{t("print-codes-label")}</span>
         </span>
       </button>
     </div>