diff --git a/app/routes/expenses/index.tsx b/app/routes/expenses/index.tsx
index f4cebd9..677c0d6 100644
--- a/app/routes/expenses/index.tsx
+++ b/app/routes/expenses/index.tsx
@@ -16,7 +16,7 @@ export const loader: LoaderFunction = async ({ request }) => {
     include: {
       user: true,
     },
-    take: 25,
+    take: 6,
     orderBy: { createdAt: "desc" },
     where: { teamId: user.teamId },
   });
@@ -30,44 +30,57 @@ export default function JokesIndexRoute() {
 
   return (
     <div className="grid grid-cols-2 gap-4 p-4">
-      <div className="card shadow-lg compact side bg-base-100">
-        <div className="flex-column items-center card-body">
+      <div className="col-span-2 md:col-span-1 card shadow-lg compact side bg-base-100 order-last md:order-none">
+        <div className="flex-column items-center card-body !py-6">
           <h2 className="card-title">Last expenses</h2>
-          {data.lastExpenses?.map((exp) => (
-            <div className="flex w-full items-center mb-2" key={exp.id}>
-              <div className="rounded-full w-10 h-10 inline-flex justify-center items-center bg-white text-3xl">
-                {exp.user.icon ?? exp.user.username[0]}
-              </div>
-              <div className="font-bold w-16 ml-2 text-right">
-                <span
-                  className={`${
-                    exp.amount > 0 ? "text-error" : "text-success"
-                  }`}
-                >
-                  {-exp.amount} €
-                </span>
-              </div>
-              <div className="grow ml-3">{exp.description}</div>
-            </div>
-          ))}
+          <ul className="list-none shadow-inner w-full rounded-lg p-4 my-4 mx-0 max-h-48 overflow-x-scroll">
+            {data.lastExpenses?.map((exp) => (
+              <li className="flex w-full items-center mb-3" key={exp.id}>
+                <div className="rounded-full w-10 h-10 inline-flex justify-center items-center bg-white text-3xl">
+                  {exp.user.icon ?? exp.user.username[0]}
+                </div>
+                <div className="font-bold w-16 ml-2 text-right">
+                  <span
+                    className={`${
+                      exp.amount > 0 ? "text-error" : "text-success"
+                    }`}
+                  >
+                    {-exp.amount} €
+                  </span>
+                </div>
+                <div className="grow ml-3 flex flex-col justify-center items-start">
+                  <span className="text-xs opacity-50">
+                    {new Intl.DateTimeFormat("en", {
+                      dateStyle: "short",
+                      timeStyle: "short",
+                    }).format(new Date(exp.createdAt))}
+                  </span>
+                  <span className="font-bold">{exp.description}</span>
+                </div>
+              </li>
+            ))}
+          </ul>
           <Link to="list" className="btn">
             <span>See all</span>
           </Link>
         </div>
       </div>
-      <div className="card shadow-lg compact side bg-base-100">
+      <div className="col-span-2 md:col-span-1 card shadow-lg compact side bg-base-100">
         <div className="flex-row items-center space-x-4 card-body">
           <h2 className="card-title">Who needs to pay who</h2>
         </div>
       </div>
-      <div className="card shadow-lg compact side bg-base-100">
+      <div className="card shadow-lg compact side md:bg-base-100 order-first md:order-none">
         <div className="flex-row items-center justify-center space-x-4 card-body">
-          <Link to="new" className="btn btn-primary">
+          <Link
+            to="new"
+            className="btn btn-primary flex-wrap py-3 h-auto w-full"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
-              className="inline-block mr-2 w-6 h-6 stroke-current rotate-45"
+              className="inline-block lg:mr-2 w-6 h-6 stroke-current rotate-45"
             >
               <path
                 stroke-linecap="round"
@@ -76,15 +89,22 @@ export default function JokesIndexRoute() {
                 d="M6 18L18 6M6 6l12 12"
               ></path>
             </svg>
-            <span className="hidden lg:inline-block">Add an expense</span>
+            <span className="block w-full mt-2 lg:mt-0 lg:w-auto lg:inline-block">
+              New expense
+            </span>
           </Link>
         </div>
       </div>
-      <div className="card shadow-lg compact side bg-base-100">
+      <div className="card shadow-lg compact side md:bg-base-100 order-first md:order-none">
         <div className="flex-row items-center justify-center space-x-4 card-body">
-          <Link to="new" className="btn btn-primary">
-            <Group className="inline-block mr-2 w-6 h-6 stroke-current" />
-            <span className="hidden lg:inline-block">Trasfer</span>
+          <Link
+            to="new"
+            className="btn btn-primary flex-wrap py-3 h-auto w-full"
+          >
+            <Group className="inline-block lg:mr-2 w-6 h-6 stroke-current" />
+            <span className="block w-full mt-2 lg:mt-0 lg:w-auto lg:inline-block">
+              Trasfer
+            </span>
           </Link>
         </div>
       </div>