diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index 1b9392e7d8..29a66fe62a 100644
--- a/pages/[user]/[type].tsx
+++ b/pages/[user]/[type].tsx
@@ -67,11 +67,21 @@ export default function Type(props) {
         days.push(i);
     }
 
-    const calendar = days.map((day) =>
+    
+    // Create placeholder elements for empty days in first week
+    const weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
+    const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) => 
+        <div key={`e-${i}`} className={"text-center w-10 h-10 rounded-full mx-auto"}>
+            {null}
+        </div>
+    );
+
+    // Combine placeholder days with actual days
+    const calendar = [...emptyDays, ...days.map((day) =>
         <button key={day} onClick={(e) => setSelectedDate(dayjs().tz(dayjs.tz.guess()).month(selectedMonth).date(day))} disabled={selectedMonth < dayjs().format('MM') && dayjs().month(selectedMonth).format("D") > day} className={"text-center w-10 h-10 rounded-full mx-auto " + (dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth)) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-400 font-light') + (dayjs(selectedDate).month(selectedMonth).format("D") == day ? ' bg-blue-600 text-white-important' : '')}>
             {day}
         </button>
-    );
+    )];
 
     // Handle date change
     useEffect(async () => {
@@ -132,7 +142,7 @@ export default function Type(props) {
 
             <main className={"mx-auto my-24 transition-max-width ease-in-out duration-500 " + (selectedDate ? 'max-w-6xl' : 'max-w-3xl')}>
                 <div className="bg-white overflow-hidden shadow rounded-lg md:max-h-96">
-                    <div className="sm:flex px-4 py-5 sm:p-6">
+                    <div className="sm:flex px-4 py-5 sm:p-4">
                         <div className={"pr-8 sm:border-r " + (selectedDate ? 'sm:w-1/3' : 'sm:w-1/2')}>
                             {props.user.avatar && <img src={props.user.avatar} alt="Avatar" className="w-16 h-16 rounded-full mb-4"/>}
                             <h2 className="font-medium text-gray-500">{props.user.name}</h2>