diff --git a/packages/frontend/src/pages/AddEvent.tsx b/packages/frontend/src/pages/AddEvent.tsx
index c43a556..702b594 100644
--- a/packages/frontend/src/pages/AddEvent.tsx
+++ b/packages/frontend/src/pages/AddEvent.tsx
@@ -205,9 +205,20 @@ export default function AddEvent() {
       {/* Header */}
       <div className="relative flex items-center justify-center px-6 pt-8 pb-4">
         <button
-          className="absolute left-6 w-9 h-9 bg-white rounded-xl shadow flex items-center justify-center text-lg text-[#222b45]"
           onClick={() => navigate(`/modules/${moduleId}/calendar`)}
-        >‹</button>
+          style={{
+            position: 'absolute', left: '24px',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
+          }}
+        >
+          <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
+            <path d="M8.5 1L1.5 8L8.5 15" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
         <h1 className="text-4xl font-normal text-black">Add Event</h1>
       </div>
 
@@ -410,7 +421,8 @@ export default function AddEvent() {
         <div className="flex justify-center gap-4 pt-2 pb-8">
           <button
             onClick={() => navigate(`/modules/${moduleId}/calendar`)}
-            className="w-[116px] h-[45px] bg-white rounded-[20px] shadow flex items-center justify-center text-[#222b45] text-xl"
+            className="w-[116px] h-[45px] bg-white rounded-[999px] flex items-center justify-center text-[#222b45] text-sm"
+            style={{ border: '1px solid #DFE5F0' }}
           >
             Cancel
           </button>
@@ -418,7 +430,7 @@ export default function AddEvent() {
             onClick={() => {
               if (!validateDate(date)) return;
               if (!allDay && !validateTime(startHours, startMinutes, startAmpm, endHours, endMinutes, endAmpm)) return;
-              
+
               api('/events', {
                 method: 'POST',
                 token: token ?? undefined,
@@ -435,7 +447,8 @@ export default function AddEvent() {
               .then(() => navigate(`/modules/${moduleId}/calendar`))
               .catch(() => {});
             }}
-            className="w-[116px] h-[45px] bg-[#b8e366] rounded-[20px] flex items-center justify-center text-white text-xl"
+            className="w-[116px] h-[45px] bg-[#B8E466] rounded-[999px] flex items-center justify-center text-white text-sm"
+            style={{ boxShadow: '0 6px 14px rgba(183,222,88,0.28)' }}
           >
             Post
           </button>
diff --git a/packages/frontend/src/pages/AgendaDetail.tsx b/packages/frontend/src/pages/AgendaDetail.tsx
index 5c25405..51a953a 100644
--- a/packages/frontend/src/pages/AgendaDetail.tsx
+++ b/packages/frontend/src/pages/AgendaDetail.tsx
@@ -103,11 +103,11 @@ export default function AgendaDetail() {
           onClick={() => navigate(`/modules/${moduleId}`)}
           style={{
             position: 'absolute', left: '28px', top: '74px',
-            width: '38px', height: '42px',
-            background: 'transparent', border: '1px solid #CED3DE',
-            borderRadius: '12px', cursor: 'pointer',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.5,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}
         >
           <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -174,7 +174,7 @@ export default function AgendaDetail() {
                 <button
                   onClick={() => navigate(`/modules/${moduleId}/agendas/${agendaId}/edit`)}
                   style={{
-                    height: '36px', padding: '0 18px', borderRadius: '20px',
+                    height: '36px', padding: '0 18px', borderRadius: '999px',
                     background: '#B8E466', border: 'none', cursor: 'pointer',
                     fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
                     boxShadow: '0px 2px 4px rgba(0,0,0,0.15)',
@@ -186,7 +186,7 @@ export default function AgendaDetail() {
                   onClick={handleDelete}
                   disabled={deleting}
                   style={{
-                    height: '36px', padding: '0 18px', borderRadius: '20px',
+                    height: '36px', padding: '0 18px', borderRadius: '999px',
                     background: '#E53935', border: 'none', cursor: 'pointer',
                     fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
                     boxShadow: '0px 2px 4px rgba(0,0,0,0.15)',
diff --git a/packages/frontend/src/pages/AnnouncementDetail.tsx b/packages/frontend/src/pages/AnnouncementDetail.tsx
index 39ec790..0e0aec3 100644
--- a/packages/frontend/src/pages/AnnouncementDetail.tsx
+++ b/packages/frontend/src/pages/AnnouncementDetail.tsx
@@ -103,11 +103,11 @@ export default function AnnouncementDetail() {
           onClick={() => navigate(`/modules/${moduleId}`)}
           style={{
             position: 'absolute', left: '28px', top: '74px',
-            width: '38px', height: '42px',
-            background: 'transparent', border: '1px solid #CED3DE',
-            borderRadius: '12px', cursor: 'pointer',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.5,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}
         >
           <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -174,7 +174,7 @@ export default function AnnouncementDetail() {
                 <button
                   onClick={() => navigate(`/modules/${moduleId}/announcements/${announcementId}/edit`)}
                   style={{
-                    height: '36px', padding: '0 18px', borderRadius: '20px',
+                    height: '36px', padding: '0 18px', borderRadius: '999px',
                     background: '#B8E466', border: 'none', cursor: 'pointer',
                     fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
                     boxShadow: '0px 2px 4px rgba(0,0,0,0.15)',
@@ -186,7 +186,7 @@ export default function AnnouncementDetail() {
                   onClick={handleDelete}
                   disabled={deleting}
                   style={{
-                    height: '36px', padding: '0 18px', borderRadius: '20px',
+                    height: '36px', padding: '0 18px', borderRadius: '999px',
                     background: '#E53935', border: 'none', cursor: 'pointer',
                     fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
                     boxShadow: '0px 2px 4px rgba(0,0,0,0.15)',
diff --git a/packages/frontend/src/pages/CalendarScreenCoach.tsx b/packages/frontend/src/pages/CalendarScreenCoach.tsx
index 237c29c..d7efd15 100644
--- a/packages/frontend/src/pages/CalendarScreenCoach.tsx
+++ b/packages/frontend/src/pages/CalendarScreenCoach.tsx
@@ -151,7 +151,7 @@ export default function CalendarScreenCoach() {
             <path d="M8.5 1L1.5 8L8.5 15" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
           </svg>
         </motion.button>
-        <h1 className="text-4xl font-bold text-[#222b45]">Calendar</h1>
+        <h1 className="text-4xl font-normal text-[#222b45]">Calendar</h1>
       </div>
 
       {/* Month Navigation */}
@@ -226,7 +226,7 @@ export default function CalendarScreenCoach() {
                 <span className="text-[#735bf2] text-[10px] mt-1">●</span>
                 <div>
                   <div className="text-xs text-[#8f9bb3] mb-0.5 tracking-wide">{ev.startTime}-{ev.endTime}</div>
-                  <div className="text-[#222b45] font-semibold text-base tracking-wide">{ev.title}</div>
+                  <div className="text-[#222b45] text-base tracking-wide">{ev.title}</div>
                 </div>
               </div>
               <button 
@@ -242,9 +242,18 @@ export default function CalendarScreenCoach() {
         <div className="w-full max-w-[440px] mx-auto relative">
           <button
             onClick={() => navigate(`/modules/${moduleId}/calendar/add-event`)}
-            className="absolute bottom-28 right-6 w-14 h-14 bg-[#b8e366] rounded-full text-white text-3xl shadow-lg flex items-center justify-center"
+            style={{
+              position: 'absolute', bottom: '112px', right: '24px',
+              width: '54px', height: '54px', borderRadius: '50%',
+              background: '#B8E466', border: 'none', cursor: 'pointer',
+              boxShadow: '0px 4px 4px rgba(0,0,0,0.25)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}
           >
-            +
+            <div style={{ position: 'relative', width: '16px', height: '16px' }}>
+              <div style={{ position: 'absolute', left: '7px', top: 0, width: '2px', height: '16px', background: '#FFFFFF' }} />
+              <div style={{ position: 'absolute', top: '7px', left: 0, width: '16px', height: '2px', background: '#FFFFFF' }} />
+            </div>
           </button>
         </div>
       )}
diff --git a/packages/frontend/src/pages/CalendarScreenUser.tsx b/packages/frontend/src/pages/CalendarScreenUser.tsx
index edba0f8..a4c3206 100644
--- a/packages/frontend/src/pages/CalendarScreenUser.tsx
+++ b/packages/frontend/src/pages/CalendarScreenUser.tsx
@@ -149,7 +149,7 @@ export default function CalendarScreenUser() {
             <path d="M8.5 1L1.5 8L8.5 15" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
           </svg>
         </motion.button>
-        <h1 className="text-4xl font-bold text-[#222b45]">Calendar</h1>
+        <h1 className="text-4xl font-normal text-[#222b45]">Calendar</h1>
       </div>
 
       {/* Month Navigation */}
@@ -226,7 +226,7 @@ export default function CalendarScreenUser() {
                   <div className="text-xs text-[#8f9bb3] mb-0.5 tracking-wide">
                     {ev.allDay ? "All Day" : `${ev.startTime ?? ""} - ${ev.endTime ?? ""}`}
                   </div>
-                  <div className="text-[#222b45] font-semibold text-base tracking-wide">{ev.title}</div>
+                  <div className="text-[#222b45] text-base tracking-wide">{ev.title}</div>
                 </div>
               </div>
               <div className="flex gap-0.5">
diff --git a/packages/frontend/src/pages/CreateAgenda.tsx b/packages/frontend/src/pages/CreateAgenda.tsx
index 3cf9db0..8699688 100644
--- a/packages/frontend/src/pages/CreateAgenda.tsx
+++ b/packages/frontend/src/pages/CreateAgenda.tsx
@@ -43,11 +43,11 @@ export default function CreateAgenda() {
           onClick={() => navigate(`/modules/${moduleId}`)}
           style={{
             position: 'absolute', left: '28px', top: '74px',
-            width: '38px', height: '42px',
-            background: 'transparent', border: '1px solid #CED3DE',
-            borderRadius: '12px', cursor: 'pointer',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.5,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}
         >
           <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -169,9 +169,9 @@ export default function CreateAgenda() {
             position: 'absolute', left: '156px', top: '788px',
             width: '116px', height: '45px',
             background: '#FFFFFF',
-            boxShadow: '0px 1px 4px rgba(0,0,0,0.25)',
-            borderRadius: '20px', border: 'none', cursor: 'pointer',
-            fontFamily: 'Amiko', fontSize: '20px', color: '#222B45',
+            border: '1px solid #DFE5F0',
+            borderRadius: '999px', cursor: 'pointer',
+            fontFamily: 'Amiko', fontSize: '14px', color: '#222B45',
           }}
         >
           Cancel
@@ -185,8 +185,9 @@ export default function CreateAgenda() {
             position: 'absolute', left: '284px', top: '789px',
             width: '116px', height: '45px',
             background: '#B8E466',
-            borderRadius: '20px', border: 'none', cursor: 'pointer',
-            fontFamily: 'Amiko', fontSize: '20px', color: '#FFFFFF',
+            borderRadius: '999px', border: 'none', cursor: 'pointer',
+            fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
+            boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
             opacity: submitting || !title.trim() || !description.trim() || !date ? 0.5 : 1,
           }}
         >
diff --git a/packages/frontend/src/pages/CreateAnnouncement.tsx b/packages/frontend/src/pages/CreateAnnouncement.tsx
index 69260fb..f24f61c 100644
--- a/packages/frontend/src/pages/CreateAnnouncement.tsx
+++ b/packages/frontend/src/pages/CreateAnnouncement.tsx
@@ -42,11 +42,11 @@ export default function CreateAnnouncement() {
           onClick={() => navigate(`/modules/${moduleId}`)}
           style={{
             position: 'absolute', left: '28px', top: '74px',
-            width: '38px', height: '42px',
-            background: 'transparent', border: '1px solid #CED3DE',
-            borderRadius: '12px', cursor: 'pointer',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.5,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}
         >
           <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -139,9 +139,9 @@ export default function CreateAnnouncement() {
             position: 'absolute', left: '156px', top: '788px',
             width: '116px', height: '45px',
             background: '#FFFFFF',
-            boxShadow: '0px 1px 4px rgba(0,0,0,0.25)',
-            borderRadius: '20px', border: 'none', cursor: 'pointer',
-            fontFamily: 'Amiko', fontSize: '20px', color: '#222B45',
+            border: '1px solid #DFE5F0',
+            borderRadius: '999px', cursor: 'pointer',
+            fontFamily: 'Amiko', fontSize: '14px', color: '#222B45',
           }}
         >
           Cancel
@@ -155,8 +155,9 @@ export default function CreateAnnouncement() {
             position: 'absolute', left: '284px', top: '789px',
             width: '116px', height: '45px',
             background: '#B8E466',
-            borderRadius: '20px', border: 'none', cursor: 'pointer',
-            fontFamily: 'Amiko', fontSize: '20px', color: '#FFFFFF',
+            borderRadius: '999px', border: 'none', cursor: 'pointer',
+            fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
+            boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
             opacity: submitting || !title.trim() || !body.trim() ? 0.5 : 1,
           }}
         >
diff --git a/packages/frontend/src/pages/CreateModule.tsx b/packages/frontend/src/pages/CreateModule.tsx
index 43752d5..c3f648f 100644
--- a/packages/frontend/src/pages/CreateModule.tsx
+++ b/packages/frontend/src/pages/CreateModule.tsx
@@ -72,12 +72,12 @@ export default function CreateModule() {
           transition={{ ...spring, delay: 0 }}
           onClick={() => navigate('/module-homepage')}
           style={{
-            position: 'absolute', left: '38px', top: '71px',
-            width: '38px', height: '42px',
-            background: 'white', border: '1px solid #CED3DE',
-            borderRadius: '10px', cursor: 'pointer',
+            position: 'absolute', left: '28px', top: '74px',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.8,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}>
           <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
             <path d="M9 2L4 7.5L9 13" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -88,7 +88,7 @@ export default function CreateModule() {
         <motion.p
           initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}
           transition={{ ...spring, delay: 0.05 }}
-          style={{ position: 'absolute', left: '72px', top: '119px', fontFamily: 'Amiko', fontWeight: 700, fontSize: '40px', lineHeight: '53px', color: '#000000', margin: 0 }}>
+          style={{ position: 'absolute', left: '72px', top: '119px', fontFamily: 'Amiko', fontWeight: 400, fontSize: '40px', lineHeight: '53px', color: '#000000', margin: 0 }}>
           Create Module
         </motion.p>
 
@@ -166,38 +166,40 @@ export default function CreateModule() {
             </p>
           )}
 
-          {/* Create button */}
+          {/* Cancel button */}
           <motion.button
-            type="submit"
-            disabled={loading}
+            type="button"
             initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
             transition={{ ...spring, delay: 0.2 }}
+            onClick={() => navigate('/module-homepage')}
             style={{
-              position: 'absolute', left: '56px', top: '740px',
-              width: '317px', height: '41px',
-              background: '#B8E466', boxShadow: '0px 8px 20px rgba(0,0,0,0.1)',
-              borderRadius: '40px', border: 'none',
-              fontFamily: 'Amiko', fontWeight: 600, fontSize: '24px',
-              color: '#FFFFFF', cursor: 'pointer',
+              position: 'absolute', left: '60px', top: '760px',
+              width: '150px', height: '52px',
+              background: '#FF6B6B', border: 'none',
+              borderRadius: '999px', cursor: 'pointer',
+              fontFamily: 'Amiko', fontWeight: 400, fontSize: '16px',
+              color: '#FFFFFF',
+              boxShadow: '0 6px 14px rgba(255,107,107,0.28)',
             }}>
-            {loading ? 'Creating...' : 'Create'}
+            Cancel
           </motion.button>
 
-          {/* Cancel button */}
+          {/* Create button */}
           <motion.button
-            type="button"
+            type="submit"
+            disabled={loading}
             initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
             transition={{ ...spring, delay: 0.25 }}
-            onClick={() => navigate('/module-homepage')}
             style={{
-              position: 'absolute', left: '63px', top: '795px',
-              width: '304px', height: '41px',
-              background: '#FFFFFF', boxShadow: '0px 8px 20px rgba(0,0,0,0.1)',
-              borderRadius: '40px', border: 'none',
-              fontFamily: 'Amiko', fontWeight: 600, fontSize: '24px',
-              color: '#C8C8C8', cursor: 'pointer',
+              position: 'absolute', left: '230px', top: '760px',
+              width: '150px', height: '52px',
+              background: '#B8E466', border: 'none',
+              borderRadius: '999px', cursor: 'pointer',
+              fontFamily: 'Amiko', fontWeight: 400, fontSize: '16px',
+              color: '#FFFFFF',
+              boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
             }}>
-            Cancel
+            {loading ? 'Creating...' : 'Create'}
           </motion.button>
 
         </form>
diff --git a/packages/frontend/src/pages/EditAgenda.tsx b/packages/frontend/src/pages/EditAgenda.tsx
index a4ea016..277adf6 100644
--- a/packages/frontend/src/pages/EditAgenda.tsx
+++ b/packages/frontend/src/pages/EditAgenda.tsx
@@ -65,11 +65,11 @@ export default function EditAgenda() {
           onClick={() => navigate(`/modules/${moduleId}/agendas/${agendaId}`)}
           style={{
             position: 'absolute', left: '28px', top: '74px',
-            width: '38px', height: '42px',
-            background: 'transparent', border: '1px solid #CED3DE',
-            borderRadius: '12px', cursor: 'pointer',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.5,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}
         >
           <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -189,9 +189,9 @@ export default function EditAgenda() {
             position: 'absolute', left: '156px', top: '788px',
             width: '116px', height: '45px',
             background: '#FFFFFF',
-            boxShadow: '0px 1px 4px rgba(0,0,0,0.25)',
-            borderRadius: '20px', border: 'none', cursor: 'pointer',
-            fontFamily: 'Amiko', fontSize: '20px', color: '#222B45',
+            border: '1px solid #DFE5F0',
+            borderRadius: '999px', cursor: 'pointer',
+            fontFamily: 'Amiko', fontSize: '14px', color: '#222B45',
           }}
         >
           Cancel
@@ -205,8 +205,9 @@ export default function EditAgenda() {
             position: 'absolute', left: '284px', top: '789px',
             width: '116px', height: '45px',
             background: '#B8E466',
-            borderRadius: '20px', border: 'none', cursor: 'pointer',
-            fontFamily: 'Amiko', fontSize: '20px', color: '#FFFFFF',
+            borderRadius: '999px', border: 'none', cursor: 'pointer',
+            fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
+            boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
             opacity: submitting || !title.trim() || !description.trim() || !date ? 0.5 : 1,
           }}
         >
diff --git a/packages/frontend/src/pages/EditAnnouncement.tsx b/packages/frontend/src/pages/EditAnnouncement.tsx
index a91590d..9603ce5 100644
--- a/packages/frontend/src/pages/EditAnnouncement.tsx
+++ b/packages/frontend/src/pages/EditAnnouncement.tsx
@@ -63,11 +63,11 @@ export default function EditAnnouncement() {
           onClick={() => navigate(`/modules/${moduleId}/announcements/${announcementId}`)}
           style={{
             position: 'absolute', left: '28px', top: '74px',
-            width: '38px', height: '42px',
-            background: 'transparent', border: '1px solid #CED3DE',
-            borderRadius: '12px', cursor: 'pointer',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.5,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}
         >
           <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -160,9 +160,9 @@ export default function EditAnnouncement() {
             position: 'absolute', left: '156px', top: '788px',
             width: '116px', height: '45px',
             background: '#FFFFFF',
-            boxShadow: '0px 1px 4px rgba(0,0,0,0.25)',
-            borderRadius: '20px', border: 'none', cursor: 'pointer',
-            fontFamily: 'Amiko', fontSize: '20px', color: '#222B45',
+            border: '1px solid #DFE5F0',
+            borderRadius: '999px', cursor: 'pointer',
+            fontFamily: 'Amiko', fontSize: '14px', color: '#222B45',
           }}
         >
           Cancel
@@ -176,8 +176,9 @@ export default function EditAnnouncement() {
             position: 'absolute', left: '284px', top: '789px',
             width: '116px', height: '45px',
             background: '#B8E466',
-            borderRadius: '20px', border: 'none', cursor: 'pointer',
-            fontFamily: 'Amiko', fontSize: '20px', color: '#FFFFFF',
+            borderRadius: '999px', border: 'none', cursor: 'pointer',
+            fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
+            boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
             opacity: submitting || !title.trim() || !body.trim() ? 0.5 : 1,
           }}
         >
diff --git a/packages/frontend/src/pages/EditEvent.tsx b/packages/frontend/src/pages/EditEvent.tsx
index 74ac9fe..372c427 100644
--- a/packages/frontend/src/pages/EditEvent.tsx
+++ b/packages/frontend/src/pages/EditEvent.tsx
@@ -240,9 +240,20 @@ export default function EditEvent() {
       {/* Header */}
       <div className="relative flex items-center justify-center px-6 pt-8 pb-4">
         <button
-          className="absolute left-6 w-9 h-9 bg-white rounded-xl shadow flex items-center justify-center text-lg text-[#222b45]"
           onClick={() => navigate(`/modules/${moduleId}/calendar/${eventId}`)}
-        >‹</button>
+          style={{
+            position: 'absolute', left: '24px',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
+          }}
+        >
+          <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
+            <path d="M8.5 1L1.5 8L8.5 15" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
         <h1 className="text-4xl font-normal text-black">Edit Event</h1>
       </div>
  
@@ -365,13 +376,15 @@ export default function EditEvent() {
         <div className="flex justify-center gap-4 pt-2 pb-8">
           <button
             onClick={() => navigate(`/modules/${moduleId}/calendar/${eventId}`)}
-            className="w-[116px] h-[45px] bg-white rounded-[20px] shadow flex items-center justify-center text-[#222b45] text-xl"
+            className="w-[116px] h-[45px] bg-white rounded-[999px] flex items-center justify-center text-[#222b45] text-sm"
+            style={{ border: '1px solid #DFE5F0' }}
           >
             Cancel
           </button>
           <button
             onClick={handleSave}
-            className="w-[116px] h-[45px] bg-[#b8e366] rounded-[20px] flex items-center justify-center text-white text-xl"
+            className="w-[116px] h-[45px] bg-[#B8E466] rounded-[999px] flex items-center justify-center text-white text-sm"
+            style={{ boxShadow: '0 6px 14px rgba(183,222,88,0.28)' }}
           >
             Save
           </button>
diff --git a/packages/frontend/src/pages/Inbox.tsx b/packages/frontend/src/pages/Inbox.tsx
index 2683316..40ce477 100644
--- a/packages/frontend/src/pages/Inbox.tsx
+++ b/packages/frontend/src/pages/Inbox.tsx
@@ -176,7 +176,7 @@ export default function Messaging() {
           <button
             onClick={() => navigate(`/modules/${moduleId}/messages/new`)}
             style={{
-                width: '36px', height: '36px', borderRadius: '50%',
+                width: '54px', height: '54px', borderRadius: '50%',
                 background: '#B8E466', border: 'none', cursor: 'pointer',
                 boxShadow: '0px 4px 4px rgba(0,0,0,0.25)',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -226,7 +226,7 @@ export default function Messaging() {
               {/* Content */}
               <div className="flex-1">
                 <div className="flex items-center gap-2">
-                  <span className="text-base font-bold text-[#222b45]">
+                  <span className="text-base text-[#222b45]">
                     {getConversationName(conv)}
                   </span>
                   {conv.latestMessageTime && (
diff --git a/packages/frontend/src/pages/JoinModule.tsx b/packages/frontend/src/pages/JoinModule.tsx
index 2e905a1..0f57129 100644
--- a/packages/frontend/src/pages/JoinModule.tsx
+++ b/packages/frontend/src/pages/JoinModule.tsx
@@ -42,12 +42,12 @@ export default function JoinModule() {
           transition={{ ...spring, delay: 0 }}
           onClick={() => navigate('/module-homepage')}
           style={{
-            position: 'absolute', left: '48px', top: '70px',
-            width: '38px', height: '42px',
-            background: 'white', border: '1px solid #CED3DE',
-            borderRadius: '10px', cursor: 'pointer',
+            position: 'absolute', left: '28px', top: '74px',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.8,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}>
           <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
             <path d="M9 2L4 7.5L9 13" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -58,7 +58,7 @@ export default function JoinModule() {
         <motion.p
           initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}
           transition={{ ...spring, delay: 0.05 }}
-          style={{ position: 'absolute', left: '81px', top: '121px', fontFamily: 'Amiko', fontWeight: 700, fontSize: '40px', lineHeight: '53px', color: '#000000', margin: 0 }}>
+          style={{ position: 'absolute', left: '81px', top: '121px', fontFamily: 'Amiko', fontWeight: 400, fontSize: '40px', lineHeight: '53px', color: '#000000', margin: 0 }}>
           Join a Module
         </motion.p>
 
@@ -111,38 +111,40 @@ export default function JoinModule() {
             </p>
           )}
 
-          {/* Join button */}
+          {/* Cancel button */}
           <motion.button
-            type="submit"
-            disabled={loading}
+            type="button"
             initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
             transition={{ ...spring, delay: 0.2 }}
+            onClick={() => navigate('/module-homepage')}
             style={{
-              position: 'absolute', left: '92px', top: '712px',
-              width: '255px', height: '41px',
-              background: '#B8E466', boxShadow: '0px 8px 20px rgba(0,0,0,0.1)',
-              borderRadius: '40px', border: 'none',
-              fontFamily: 'Amiko', fontWeight: 600, fontSize: '24px',
-              color: '#FFFFFF', cursor: 'pointer',
+              position: 'absolute', left: '60px', top: '750px',
+              width: '150px', height: '52px',
+              background: '#FF6B6B', border: 'none',
+              borderRadius: '999px', cursor: 'pointer',
+              fontFamily: 'Amiko', fontWeight: 400, fontSize: '16px',
+              color: '#FFFFFF',
+              boxShadow: '0 6px 14px rgba(255,107,107,0.28)',
             }}>
-            {loading ? 'Joining...' : 'Join'}
+            Cancel
           </motion.button>
 
-          {/* Cancel button */}
+          {/* Join button */}
           <motion.button
-            type="button"
+            type="submit"
+            disabled={loading}
             initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
             transition={{ ...spring, delay: 0.25 }}
-            onClick={() => navigate('/module-homepage')}
             style={{
-              position: 'absolute', left: '91px', top: '771px',
-              width: '255px', height: '41px',
-              background: '#FFFFFF', boxShadow: '0px 8px 20px rgba(0,0,0,0.1)',
-              borderRadius: '40px', border: 'none',
-              fontFamily: 'Amiko', fontWeight: 600, fontSize: '24px',
-              color: '#C8C8C8', cursor: 'pointer',
+              position: 'absolute', left: '230px', top: '750px',
+              width: '150px', height: '52px',
+              background: '#B8E466', border: 'none',
+              borderRadius: '999px', cursor: 'pointer',
+              fontFamily: 'Amiko', fontWeight: 400, fontSize: '16px',
+              color: '#FFFFFF',
+              boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
             }}>
-            Cancel
+            {loading ? 'Joining...' : 'Join'}
           </motion.button>
 
         </form>
diff --git a/packages/frontend/src/pages/ModuleAttendanceScreen.tsx b/packages/frontend/src/pages/ModuleAttendanceScreen.tsx
index 5003474..fccef14 100644
--- a/packages/frontend/src/pages/ModuleAttendanceScreen.tsx
+++ b/packages/frontend/src/pages/ModuleAttendanceScreen.tsx
@@ -134,23 +134,11 @@ function StatusButton({
   active: boolean
   onClick: () => void
 }) {
-  const bg =
-    kind === 'present'
-      ? active
-        ? '#B8E466'
-        : '#EEF6DB'
-      : active
-        ? '#FF6B6B'
-        : '#FFE8E8'
-
-  const color =
-    kind === 'present'
-      ? active
-        ? '#FFFFFF'
-        : '#82AD35'
-      : active
-        ? '#FFFFFF'
-        : '#E05252'
+  const bg = active
+    ? kind === 'present' ? '#B8E466' : '#FF6B6B'
+    : '#E2E2E2'
+
+  const color = active ? '#FFFFFF' : '#AAAAAA'
 
   return (
     <motion.button
@@ -368,7 +356,6 @@ export default function ModuleAttendanceScreen() {
   const [selectedDate, setSelectedDate] = useState(ymd(new Date()))
   const [attendanceMembers, setAttendanceMembers] = useState<AttendanceMember[]>([])
   const [attendanceLoading, setAttendanceLoading] = useState(false)
-  const [saving, setSaving] = useState(false)
   const [calendarOpen, setCalendarOpen] = useState(false)
 
   const [selectedHistoryMemberId, setSelectedHistoryMemberId] = useState<string | null>(null)
@@ -376,7 +363,6 @@ export default function ModuleAttendanceScreen() {
   const [historyLoadingMemberId, setHistoryLoadingMemberId] = useState<string | null>(null)
 
   const [error, setError] = useState<string | null>(null)
-  const [success, setSuccess] = useState<string | null>(null)
 
   useEffect(() => {
     if (!moduleId || !token) return
@@ -468,45 +454,29 @@ export default function ModuleAttendanceScreen() {
     await loadMemberHistory(memberId)
   }
 
-  function setStatus(memberId: string, status: AttendanceStatus) {
+  async function autoSaveStatus(memberId: string, status: AttendanceStatus) {
     setAttendanceMembers((prev) =>
       prev.map((member) =>
         member.memberId === memberId ? { ...member, status } : member
       )
     )
-    setSuccess(null)
-  }
-
-  async function saveAttendance() {
-    if (!moduleId || !token) return
+    if (!status || !moduleId || !token) return
 
+    setError(null)
     try {
-      setSaving(true)
-      setError(null)
-      setSuccess(null)
-
-      const records = attendanceMembers
-        .filter((member) => member.status === 'PRESENT' || member.status === 'ABSENT')
-        .map((member) => ({
-          memberId: member.memberId,
-          status: member.status as 'PRESENT' | 'ABSENT',
-        }))
-
       await api(`/modules/${moduleId}/attendance`, {
         method: 'PUT',
         token: token ?? undefined,
-        body: {
-          date: selectedDate,
-          records,
-        },
+        body: { date: selectedDate, records: [{ memberId, status }] },
       })
-
-      setSuccess('Attendance saved.')
       setMemberHistoryMap({})
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save attendance')
-    } finally {
-      setSaving(false)
+      setAttendanceMembers((prev) =>
+        prev.map((member) =>
+          member.memberId === memberId ? { ...member, status: null } : member
+        )
+      )
+      setError(err instanceof Error ? err.message : 'Failed to save')
     }
   }
 
@@ -576,7 +546,7 @@ export default function ModuleAttendanceScreen() {
             color: '#000000',
           }}
         >
-          {view === 'roster' ? 'Roster' : 'Attendance'}
+          Attendance
         </p>
 
         <div
@@ -592,56 +562,63 @@ export default function ModuleAttendanceScreen() {
         >
           <div
             style={{
-              width: '220px',
-              height: '38px',
-              background: '#F3F1FB',
-              borderRadius: '999px',
-              padding: '4px',
-              display: 'grid',
-              gridTemplateColumns: canManageAttendance ? '1fr 1fr' : '1fr',
-              gap: '4px',
-              margin: '0 auto 16px',
+              position: 'sticky',
+              top: 0,
+              zIndex: 3,
+              background: 'linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 80%, rgba(255,255,255,0) 100%)',
+              paddingBottom: '14px',
+              marginBottom: '14px',
             }}
           >
-            <motion.button
-              type="button"
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              transition={hoverTransition}
-              onClick={() => setView('roster')}
-              style={{
-                border: 'none',
-                borderRadius: '999px',
-                background: view === 'roster' ? '#6166DB' : 'transparent',
-                color: view === 'roster' ? '#FFFFFF' : '#6F73B7',
-                fontFamily: 'Amiko',
-                fontSize: '11px',
-                cursor: 'pointer',
-              }}
-            >
-              Roster
-            </motion.button>
-
-            {canManageAttendance && (
-              <motion.button
-                type="button"
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-                transition={hoverTransition}
-                onClick={() => setView('attendance')}
+            <div style={{ display: 'flex', gap: '12px', paddingTop: '4px' }}>
+              <button
+                onClick={() => setView('roster')}
                 style={{
-                  border: 'none',
+                  flex: 1,
+                  height: '44px',
+                  padding: '0 20px',
                   borderRadius: '999px',
-                  background: view === 'attendance' ? '#6166DB' : 'transparent',
-                  color: view === 'attendance' ? '#FFFFFF' : '#6F73B7',
+                  border: view === 'roster' ? 'none' : '1px solid #E2E6F0',
+                  background: view === 'roster' ? '#6166DB' : '#FFFFFF',
+                  color: view === 'roster' ? '#FFFFFF' : '#2B3140',
                   fontFamily: 'Amiko',
-                  fontSize: '11px',
+                  fontSize: '13px',
+                  fontWeight: 400,
                   cursor: 'pointer',
+                  boxShadow: view === 'roster'
+                    ? '0 10px 24px rgba(97, 102, 219, 0.22)'
+                    : '0 6px 16px rgba(34, 43, 69, 0.05)',
+                  transition: 'all 0.2s ease',
                 }}
               >
-                Attendance
-              </motion.button>
-            )}
+                Roster
+              </button>
+
+              {canManageAttendance && (
+                <button
+                  onClick={() => setView('attendance')}
+                  style={{
+                    flex: 1,
+                    height: '44px',
+                    padding: '0 20px',
+                    borderRadius: '999px',
+                    border: view === 'attendance' ? 'none' : '1px solid #E2E6F0',
+                    background: view === 'attendance' ? '#6166DB' : '#FFFFFF',
+                    color: view === 'attendance' ? '#FFFFFF' : '#2B3140',
+                    fontFamily: 'Amiko',
+                    fontSize: '13px',
+                    fontWeight: 400,
+                    cursor: 'pointer',
+                    boxShadow: view === 'attendance'
+                      ? '0 10px 24px rgba(97, 102, 219, 0.22)'
+                      : '0 6px 16px rgba(34, 43, 69, 0.05)',
+                    transition: 'all 0.2s ease',
+                  }}
+                >
+                  Attendance
+                </button>
+              )}
+            </div>
           </div>
 
           {error && (
@@ -660,23 +637,7 @@ export default function ModuleAttendanceScreen() {
             </div>
           )}
 
-          {success && (
-            <div
-              style={{
-                marginBottom: '12px',
-                background: '#EEF7DB',
-                color: '#719B2D',
-                borderRadius: '14px',
-                padding: '10px 12px',
-                fontFamily: 'Amiko',
-                fontSize: '12px',
-              }}
-            >
-              {success}
-            </div>
-          )}
-
-          {view === 'roster' && (
+{view === 'roster' && (
             <>
               {rosterLoading ? (
                 <p style={{ textAlign: 'center', color: '#A1A3BC', fontFamily: 'Amiko' }}>Loading...</p>
@@ -711,16 +672,17 @@ export default function ModuleAttendanceScreen() {
                         }}
                         style={{
                           width: '100%',
-                          border: 'none',
-                          background: '#F6F5FB',
+                          border: '1px solid #EAECF4',
+                          background: '#FFFFFF',
                           borderRadius: '18px',
-                          minHeight: '42px',
+                          minHeight: '48px',
                           padding: '10px 14px',
                           display: 'flex',
                           alignItems: 'center',
                           gap: '10px',
                           cursor: isCoachRow ? 'default' : 'pointer',
                           opacity: isCoachRow ? 0.92 : 1,
+                          boxShadow: '0 4px 12px rgba(34, 43, 69, 0.07)',
                         }}
                       >
                         <div
@@ -1025,31 +987,6 @@ export default function ModuleAttendanceScreen() {
                 )}
               </div>
 
-              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '10px' }}>
-                <motion.button
-                  type="button"
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.97 }}
-                  transition={hoverTransition}
-                  onClick={saveAttendance}
-                  disabled={saving}
-                  style={{
-                    border: 'none',
-                    background: '#B8E466',
-                    color: '#FFFFFF',
-                    borderRadius: '999px',
-                    height: '38px',
-                    padding: '0 18px',
-                    fontFamily: 'Amiko',
-                    fontSize: '12px',
-                    cursor: saving ? 'default' : 'pointer',
-                    opacity: saving ? 0.7 : 1,
-                  }}
-                >
-                  {saving ? 'Saving...' : 'Save'}
-                </motion.button>
-              </div>
-
               {attendanceLoading ? (
                 <p style={{ textAlign: 'center', color: '#A1A3BC', fontFamily: 'Amiko' }}>Loading...</p>
               ) : attendanceMembers.length === 0 ? (
@@ -1066,20 +1003,22 @@ export default function ModuleAttendanceScreen() {
                         whileHover={{ y: -2, boxShadow: '0 8px 18px rgba(56, 60, 109, 0.10)' }}
                         transition={hoverTransition}
                         style={{
-                          background: '#F6F5FB',
+                          background: '#FFFFFF',
+                          border: '1px solid #EAECF4',
                           borderRadius: '18px',
-                          minHeight: '42px',
+                          minHeight: '48px',
                           padding: '10px 12px',
                           display: 'flex',
                           alignItems: 'center',
                           gap: '8px',
+                          boxShadow: '0 4px 12px rgba(34, 43, 69, 0.07)',
                         }}
                       >
                         <StatusButton
                           kind="present"
                           active={member.status === 'PRESENT'}
                           onClick={() =>
-                            setStatus(
+                            autoSaveStatus(
                               member.memberId,
                               member.status === 'PRESENT' ? null : 'PRESENT'
                             )
@@ -1090,7 +1029,7 @@ export default function ModuleAttendanceScreen() {
                           kind="absent"
                           active={member.status === 'ABSENT'}
                           onClick={() =>
-                            setStatus(
+                            autoSaveStatus(
                               member.memberId,
                               member.status === 'ABSENT' ? null : 'ABSENT'
                             )
@@ -1218,6 +1157,7 @@ export default function ModuleAttendanceScreen() {
                   )
                 })
               )}
+
             </>
           )}
         </div>
diff --git a/packages/frontend/src/pages/ModuleDashboard.tsx b/packages/frontend/src/pages/ModuleDashboard.tsx
index c666999..156dd5b 100644
--- a/packages/frontend/src/pages/ModuleDashboard.tsx
+++ b/packages/frontend/src/pages/ModuleDashboard.tsx
@@ -5,9 +5,10 @@ import { api } from '../utils/api'
 import { useAuth } from '../context/AuthContext'
 import { useModule } from '../context/ModuleContext'
 import BottomNav from '../components/BottomNav'
-import React from 'react'
 
 const spring = { type: 'spring' as const, stiffness: 100, damping: 14 }
+const accent = '#6166DB'
+const fontFamily = 'Amiko, sans-serif'
 
 interface ModuleInfo {
   id: string
@@ -39,6 +40,34 @@ interface AgendaItem {
   author: { firstName: string; lastName: string }
 }
 
+function TopTab({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        height: '44px',
+        flex: 1,
+        padding: '0 20px',
+        borderRadius: '999px',
+        border: active ? 'none' : '1px solid #E2E6F0',
+        background: active ? accent : '#FFFFFF',
+        color: active ? '#FFFFFF' : '#2B3140',
+        fontFamily,
+        fontSize: '13px',
+        fontWeight: 400,
+        cursor: 'pointer',
+        boxShadow: active
+          ? '0 10px 24px rgba(97, 102, 219, 0.22)'
+          : '0 6px 16px rgba(34, 43, 69, 0.05)',
+        transition: 'all 0.2s ease',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {label}
+    </button>
+  )
+}
+
 export default function ModuleDashboard() {
   const { id: moduleId } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -51,6 +80,7 @@ export default function ModuleDashboard() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [showJoinCode, setShowJoinCode] = useState(false)
+  const [activeTab, setActiveTab] = useState<'announcements' | 'agenda'>('announcements')
 
   const isAdmin = moduleInfo?.memberRole === 'MODULE_ADMIN'
 
@@ -76,7 +106,7 @@ export default function ModuleDashboard() {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-100">
         <div className="relative bg-white" style={{ width: '440px', height: '956px', borderRadius: '55px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <p style={{ fontFamily: 'Amiko', fontSize: '16px', color: '#BEBEBE' }}>Loading...</p>
+          <p style={{ fontFamily, fontSize: '16px', color: '#BEBEBE' }}>Loading...</p>
         </div>
       </div>
     )
@@ -86,7 +116,7 @@ export default function ModuleDashboard() {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-100">
         <div className="relative bg-white" style={{ width: '440px', height: '956px', borderRadius: '55px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <p style={{ fontFamily: 'Amiko', fontSize: '16px', color: '#FF6B6B' }}>{error}</p>
+          <p style={{ fontFamily, fontSize: '16px', color: '#FF6B6B' }}>{error}</p>
         </div>
       </div>
     )
@@ -106,11 +136,11 @@ export default function ModuleDashboard() {
           onClick={(e) => { e.stopPropagation(); navigate('/module-homepage') }}
           style={{
             position: 'absolute', left: '28px', top: '74px',
-            width: '38px', height: '42px',
-            background: 'transparent', border: '1px solid #CED3DE',
-            borderRadius: '12px', cursor: 'pointer',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.5,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}
         >
           <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
@@ -124,7 +154,7 @@ export default function ModuleDashboard() {
           transition={{ ...spring, delay: 0.05 }}
           style={{
             position: 'absolute', left: 0, right: 0, top: '69px',
-            fontFamily: 'Amiko', fontWeight: 400, fontSize: '40px',
+            fontFamily, fontWeight: 400, fontSize: '40px',
             lineHeight: '53px', color: '#000000', margin: 0,
             textAlign: 'center', pointerEvents: 'none',
           }}
@@ -160,7 +190,7 @@ export default function ModuleDashboard() {
               background: '#FFFFFF', borderRadius: '12px',
               padding: '10px 16px',
               boxShadow: '0px 4px 16px rgba(0,0,0,0.15)',
-              fontFamily: 'Amiko', fontSize: '14px', fontWeight: 400,
+              fontFamily, fontSize: '14px', fontWeight: 400,
               color: '#000000', zIndex: 10,
               border: '2px solid #707070',
             }}
@@ -174,104 +204,96 @@ export default function ModuleDashboard() {
           initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
           transition={{ ...spring, delay: 0.1 }}
           style={{
-           position: 'absolute', top: '155px', left: '20px', right: '20px',
-           bottom: '110px', overflowY: 'auto', padding: '0 10px 20px',
+            position: 'absolute', top: '145px', left: '20px', right: '20px',
+            bottom: '110px', overflowY: 'auto', padding: '0 10px 20px',
           }}
         >
-          {/* Announcements section */}
-          <Section
-            title="Announcements"
-            isAdmin={isAdmin}
-            onAdd={() => navigate(`/modules/${moduleId}/announcements/create`)}
+          {/* Tab row — sticky */}
+          <div
+            style={{
+              position: 'sticky',
+              top: 0,
+              zIndex: 3,
+              background: 'linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 80%, rgba(255,255,255,0) 100%)',
+              paddingBottom: '14px',
+              marginBottom: '14px',
+            }}
           >
-            {announcements.length === 0 ? (
-              <EmptyState text="No announcements yet." />
-            ) : (
-              announcements.map(a => (
-                <AnnouncementCard
-                  key={a.id}
-                  announcement={a}
-                  onClick={() => navigate(`/modules/${moduleId}/announcements/${a.id}`)}
-                />
-              ))
-            )}
-          </Section>
+            <div style={{ display: 'flex', justifyContent: 'center', gap: '12px', paddingTop: '4px' }}>
+              <TopTab
+                label="Announcements"
+                active={activeTab === 'announcements'}
+                onClick={() => setActiveTab('announcements')}
+              />
+              <TopTab
+                label="Agenda"
+                active={activeTab === 'agenda'}
+                onClick={() => setActiveTab('agenda')}
+              />
+            </div>
+          </div>
 
-          {/* Agenda section */}
-          <Section
-            title="Agenda"
-            isAdmin={isAdmin}
-            onAdd={() => navigate(`/modules/${moduleId}/agendas/create`)}
-          >
-            {agendas.length === 0 ? (
-              <EmptyState text="No agenda items yet." />
-            ) : (
-              agendas.map(a => (
-                <AgendaCard
-                  key={a.id}
-                  agenda={a}
-                  onClick={() => navigate(`/modules/${moduleId}/agendas/${a.id}`)}
-                />
-              ))
-            )}
-          </Section>
+          {/* Tab content */}
+          {activeTab === 'announcements' ? (
+            <>
+              {announcements.length === 0 ? (
+                <EmptyState text="No announcements yet." />
+              ) : (
+                announcements.map(a => (
+                  <AnnouncementCard
+                    key={a.id}
+                    announcement={a}
+                    onClick={() => navigate(`/modules/${moduleId}/announcements/${a.id}`)}
+                  />
+                ))
+              )}
+              {isAdmin && (
+                <AddButton onClick={() => navigate(`/modules/${moduleId}/announcements/create`)} />
+              )}
+            </>
+          ) : (
+            <>
+              {agendas.length === 0 ? (
+                <EmptyState text="No agenda items yet." />
+              ) : (
+                agendas.map(a => (
+                  <AgendaCard
+                    key={a.id}
+                    agenda={a}
+                    onClick={() => navigate(`/modules/${moduleId}/agendas/${a.id}`)}
+                  />
+                ))
+              )}
+              {isAdmin && (
+                <AddButton onClick={() => navigate(`/modules/${moduleId}/agendas/create`)} />
+              )}
+            </>
+          )}
         </motion.div>
+
         <BottomNav />
       </div>
     </div>
   )
 }
 
-function Section({ title, isAdmin, onAdd, children }: {
-  title: string
-  isAdmin: boolean
-  onAdd: () => void
-  children: React.ReactNode
-}) {
+function AddButton({ onClick }: { onClick: () => void }) {
   return (
-    <div style={{ marginBottom: '32px' }}>
-      {/* Header bar */}
-      <div style={{
-        background: '#6166DB',
-        boxShadow: '0px 4px 4px rgba(0,0,0,0.25)',
-        borderRadius: '20px',
-        height: '47px',
-        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-        padding: '0 20px',
-        marginBottom: '18px',
-      }}>
-        <span style={{ fontFamily: 'Amiko', fontWeight: 400, fontSize: '20px', color: '#FFFFFF' }}>
-          {title}
-        </span>
-      </div>
-
-      {/* Cards — scrollable window ~3 tall */}
-      <div className="section-scroll" style={{
-        maxHeight: '220px', overflowY: 'scroll',
-        paddingLeft: '4px', paddingRight: '20px',
-      }}>
-        {children}
-      </div>
-
-      {/* + button (admin only) */}
-      {isAdmin && (
-        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '8px' }}>
-          <button
-            onClick={onAdd}
-            style={{
-              width: '54px', height: '54px', borderRadius: '50%',
-              background: '#B8E466', border: 'none', cursor: 'pointer',
-              boxShadow: '0px 4px 4px rgba(0,0,0,0.25)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}
-          >
-            <div style={{ position: 'relative', width: '23px', height: '23px' }}>
-              <div style={{ position: 'absolute', left: '10px', top: 0, width: '3px', height: '23px', background: '#FFFFFF' }} />
-              <div style={{ position: 'absolute', top: '10px', left: 0, width: '23px', height: '3px', background: '#FFFFFF' }} />
-            </div>
-          </button>
+    <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
+      <button
+        onClick={onClick}
+        style={{
+          width: '54px', height: '54px', borderRadius: '50%',
+          background: '#B8E466', border: 'none', cursor: 'pointer',
+          boxShadow: '0px 4px 4px rgba(0,0,0,0.25)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}
+      >
+        <div style={{ position: 'relative', width: '23px', height: '23px' }}>
+          <div style={{ position: 'absolute', left: '10px', top: 0, width: '3px', height: '23px', background: '#FFFFFF' }} />
+          <div style={{ position: 'absolute', top: '10px', left: 0, width: '23px', height: '3px', background: '#FFFFFF' }} />
         </div>
-      )}
+      </button>
     </div>
   )
 }
@@ -287,7 +309,6 @@ function AnnouncementCard({ announcement: a, onClick }: { announcement: Announce
         marginBottom: '10px', cursor: 'pointer',
       }}
     >
-      {/* Avatar */}
       <div style={{
         width: '45px', height: '45px', borderRadius: '100px', flexShrink: 0,
         background: 'rgba(97,102,219,0.2)',
@@ -299,37 +320,32 @@ function AnnouncementCard({ announcement: a, onClick }: { announcement: Announce
         </svg>
       </div>
 
-      {/* Content */}
       <div style={{ flex: 1, minWidth: 0 }}>
-        {/* Purple bubble — capped width so it doesn't stretch full row */}
         <div style={{
           background: '#55337B', borderRadius: '20px',
-          padding: '4px 14px', marginBottom: '4px',
+          padding: '4px 14px', marginBottom: '10px',
           display: 'block', overflow: 'hidden', marginRight: '8px',
         }}>
           <span style={{
-            fontFamily: 'Amiko', fontWeight: 700, fontSize: '12px', color: '#FFFFFF',
+            fontFamily, fontWeight: 700, fontSize: '12px', color: '#FFFFFF',
             overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
             display: 'block',
           }}>
             {a.title}
           </span>
         </div>
-        {/* Body */}
         <p style={{
-          fontFamily: 'Amiko', fontSize: '11px', color: '#000000',
+          fontFamily, fontSize: '11px', color: '#000000',
           margin: '0 0 2px 4px', lineHeight: '15px',
           overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
         }}>
           {a.body}
         </p>
-        {/* Date + author */}
-        <span style={{ fontFamily: 'Amiko', fontSize: '10px', color: '#000000', paddingLeft: '4px' }}>
+        <span style={{ fontFamily, fontSize: '10px', color: '#000000', paddingLeft: '4px' }}>
           {date} · {a.author.firstName} {a.author.lastName}
         </span>
       </div>
 
-      {/* Big black right arrow */}
       <svg width="16" height="28" viewBox="0 0 16 28" fill="none" style={{ flexShrink: 0 }}>
         <path d="M2 2L13 14L2 26" stroke="#222B45" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>
@@ -348,7 +364,6 @@ function AgendaCard({ agenda: a, onClick }: { agenda: AgendaItem; onClick: () =>
         marginBottom: '10px', cursor: 'pointer',
       }}
     >
-      {/* Avatar */}
       <div style={{
         width: '45px', height: '45px', borderRadius: '100px', flexShrink: 0,
         background: 'rgba(97,102,219,0.2)',
@@ -360,15 +375,14 @@ function AgendaCard({ agenda: a, onClick }: { agenda: AgendaItem; onClick: () =>
         </svg>
       </div>
 
-      {/* Content */}
       <div style={{ flex: 1, minWidth: 0 }}>
         <div style={{
           background: '#55337B', borderRadius: '20px',
-          padding: '4px 14px', marginBottom: '4px',
+          padding: '4px 14px', marginBottom: '10px',
           display: 'block', overflow: 'hidden', marginRight: '8px',
         }}>
           <span style={{
-            fontFamily: 'Amiko', fontWeight: 700, fontSize: '12px', color: '#FFFFFF',
+            fontFamily, fontWeight: 700, fontSize: '12px', color: '#FFFFFF',
             overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
             display: 'block',
           }}>
@@ -376,29 +390,27 @@ function AgendaCard({ agenda: a, onClick }: { agenda: AgendaItem; onClick: () =>
           </span>
         </div>
         <p style={{
-          fontFamily: 'Amiko', fontSize: '11px', color: '#000000',
+          fontFamily, fontSize: '11px', color: '#000000',
           margin: '0 0 2px 4px', lineHeight: '15px',
           overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
         }}>
           {a.description ?? ''}
         </p>
-        <span style={{ fontFamily: 'Amiko', fontSize: '10px', color: '#000000', paddingLeft: '4px' }}>
+        <span style={{ fontFamily, fontSize: '10px', color: '#000000', paddingLeft: '4px' }}>
           {date} · {a.author.firstName} {a.author.lastName}
         </span>
       </div>
 
-      {/* Big black right arrow */}
       <svg width="16" height="28" viewBox="0 0 16 28" fill="none" style={{ flexShrink: 0 }}>
         <path d="M2 2L13 14L2 26" stroke="#222B45" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>
     </div>
-    
   )
 }
 
 function EmptyState({ text }: { text: string }) {
   return (
-    <p style={{ fontFamily: 'Amiko', fontSize: '13px', color: '#BEBEBE', textAlign: 'center', margin: '12px 0' }}>
+    <p style={{ fontFamily, fontSize: '13px', color: '#BEBEBE', textAlign: 'center', margin: '24px 0' }}>
       {text}
     </p>
   )
diff --git a/packages/frontend/src/pages/ModuleHomepage.tsx b/packages/frontend/src/pages/ModuleHomepage.tsx
index d3bdc32..a6d205d 100644
--- a/packages/frontend/src/pages/ModuleHomepage.tsx
+++ b/packages/frontend/src/pages/ModuleHomepage.tsx
@@ -102,7 +102,7 @@ export default function ModuleHomepage() {
         <motion.p
           initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}
           transition={{ ...spring, delay: 0 }}
-          style={{ position: 'absolute', left: '134px', top: '83px', fontFamily: 'Amiko', fontWeight: 700, fontSize: '40px', lineHeight: '53px', color: '#000000', margin: 0 }}>
+          style={{ position: 'absolute', left: '134px', top: '83px', fontFamily: 'Amiko', fontWeight: 400, fontSize: '40px', lineHeight: '53px', color: '#000000', margin: 0 }}>
           Modules
         </motion.p>
 
@@ -277,14 +277,13 @@ export default function ModuleHomepage() {
               top: '777px',
               width: '109px',
               height: '41px',
-              background: '#B8E466',
-              boxShadow: '0px 8px 20px rgba(0,0,0,0.1)',
-              borderRadius: '40px',
-              border: 'none',
+              background: '#FFFFFF',
+              border: '1px solid #DFE5F0',
+              borderRadius: '999px',
               fontFamily: 'Amiko',
-              fontWeight: 600,
-              fontSize: '24px',
-              color: '#FFFFFF',
+              fontWeight: 400,
+              fontSize: '14px',
+              color: '#222B45',
               cursor: 'pointer',
               zIndex: 20,
             }}
diff --git a/packages/frontend/src/pages/ProgressPage.tsx b/packages/frontend/src/pages/ProgressPage.tsx
index d61d599..68617cd 100644
--- a/packages/frontend/src/pages/ProgressPage.tsx
+++ b/packages/frontend/src/pages/ProgressPage.tsx
@@ -182,11 +182,11 @@ export default function ProgressPage() {
           onClick={() => navigate(`/modules/${moduleId}`)}
           style={{
             position: 'absolute', left: '28px', top: '74px',
-            width: '38px', height: '42px',
-            background: 'transparent', border: '1px solid #CED3DE',
-            borderRadius: '12px', cursor: 'pointer',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            opacity: 0.5,
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
           }}
         >
           <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
diff --git a/packages/frontend/src/pages/RoutineDetailPage.tsx b/packages/frontend/src/pages/RoutineDetailPage.tsx
index 4319005..6c86fd0 100644
--- a/packages/frontend/src/pages/RoutineDetailPage.tsx
+++ b/packages/frontend/src/pages/RoutineDetailPage.tsx
@@ -18,19 +18,13 @@ const cardShadow = '0 18px 36px rgba(34, 43, 69, 0.08)'
 
 // United Scoring deduction categories (v10.15.25)
 const DEDUCTION_CATEGORIES = [
-  { key: 'AF',    label: 'Athlete Fall',                  pointsEach: 0.15 },
-  { key: 'MAF',   label: 'Major Athlete Fall',            pointsEach: 0.25 },
-  { key: 'BB',    label: 'Building Bobble',               pointsEach: 0.25 },
-  { key: 'BF',    label: 'Building Fall',                 pointsEach: 0.75 },
-  { key: 'MBF',   label: 'Major Building Fall',           pointsEach: 1.25 },
-  { key: 'OOB',   label: 'Boundary Violation',            pointsEach: 0.05 },
-  { key: 'TLV',   label: 'Time Limit Violation',          pointsEach: 0.05 },
-  { key: 'DV',    label: 'Division Violation',            pointsEach: 5.00 },
-  { key: 'UNI',   label: 'Uniform Violation',             pointsEach: 0.01 },
-  { key: 'APS',   label: 'APS / Excessive Celebration',  pointsEach: 0.25 },
-  { key: 'OOL-T', label: 'Out of Level Tumbling',        pointsEach: 0.05 },
-  { key: 'OOL-B', label: 'Building Out of Level',        pointsEach: 0.10 },
-  { key: 'SRD',   label: 'Skill Restriction / Division', pointsEach: 0.50 },
+  { key: 'AF',    label: 'Athlete Fall',       pointsEach: 0.15 },
+  { key: 'MAF',   label: 'Major Athlete Fall', pointsEach: 0.25 },
+  { key: 'BB',    label: 'Building Bobble',    pointsEach: 0.25 },
+  { key: 'BF',    label: 'Building Fall',      pointsEach: 0.75 },
+  { key: 'MBF',   label: 'Major Building Fall',pointsEach: 1.25 },
+  { key: 'OOB',   label: 'Boundary Violation', pointsEach: 0.05 },
+  { key: 'ILL',   label: 'Illegality',         pointsEach: 2.00 },
 ] as const
 
 interface StoredDeduction {
@@ -283,7 +277,7 @@ export default function RoutineDetailPage() {
             <SectionHeader title="Deductions" />
 
             <div style={{ display: 'grid', gap: '10px' }}>
-              {DEDUCTION_CATEGORIES.map(cat => {
+              {DEDUCTION_CATEGORIES.filter(cat => isCoach || getCount(cat.key) > 0).map(cat => {
                 const count = getCount(cat.key)
                 const pts = count * cat.pointsEach
                 return (
diff --git a/packages/frontend/src/pages/StatsPage.tsx b/packages/frontend/src/pages/StatsPage.tsx
index 547995e..f81c1af 100644
--- a/packages/frontend/src/pages/StatsPage.tsx
+++ b/packages/frontend/src/pages/StatsPage.tsx
@@ -18,19 +18,13 @@ const cardBorder = '#EAEFF8'
 const cardShadow = '0 18px 36px rgba(34, 43, 69, 0.08)'
 
 const DEDUCTION_CATEGORIES = [
-  { key: 'AF',    label: 'Athlete Fall',                  pointsEach: 0.15 },
-  { key: 'MAF',   label: 'Major Athlete Fall',            pointsEach: 0.25 },
-  { key: 'BB',    label: 'Building Bobble',               pointsEach: 0.25 },
-  { key: 'BF',    label: 'Building Fall',                 pointsEach: 0.75 },
-  { key: 'MBF',   label: 'Major Building Fall',           pointsEach: 1.25 },
-  { key: 'OOB',   label: 'Boundary Violation',            pointsEach: 0.05 },
-  { key: 'TLV',   label: 'Time Limit Violation',          pointsEach: 0.05 },
-  { key: 'DV',    label: 'Division Violation',            pointsEach: 5.00 },
-  { key: 'UNI',   label: 'Uniform Violation',             pointsEach: 0.01 },
-  { key: 'APS',   label: 'APS / Excessive Celebration',  pointsEach: 0.25 },
-  { key: 'OOL-T', label: 'Out of Level Tumbling',        pointsEach: 0.05 },
-  { key: 'OOL-B', label: 'Building Out of Level',        pointsEach: 0.10 },
-  { key: 'SRD',   label: 'Skill Restriction / Division', pointsEach: 0.50 },
+  { key: 'AF',    label: 'Athlete Fall',        pointsEach: 0.15 },
+  { key: 'MAF',   label: 'Major Athlete Fall',  pointsEach: 0.25 },
+  { key: 'BB',    label: 'Building Bobble',     pointsEach: 0.25 },
+  { key: 'BF',    label: 'Building Fall',       pointsEach: 0.75 },
+  { key: 'MBF',   label: 'Major Building Fall', pointsEach: 1.25 },
+  { key: 'OOB',   label: 'Boundary Violation',  pointsEach: 0.05 },
+  { key: 'ILL',   label: 'Illegality',          pointsEach: 2.00 },
 ] as const
 
 interface Deduction {
diff --git a/packages/frontend/src/pages/ViewEvent.tsx b/packages/frontend/src/pages/ViewEvent.tsx
index dced92a..06d520a 100644
--- a/packages/frontend/src/pages/ViewEvent.tsx
+++ b/packages/frontend/src/pages/ViewEvent.tsx
@@ -51,10 +51,21 @@ export default function ViewEvent() {
       {/* Header */}
       <div className="relative flex items-center justify-center px-6 pt-8 pb-4">
         <button
-          className="absolute left-6 w-9 h-9 bg-gray-100 rounded-xl flex items-center justify-center text-lg text-[#222b45]"
           onClick={() => navigate(`/modules/${moduleId}/calendar`)}
-        >‹</button>
-        <h1 className="text-4xl font-bold text-[#222b45]">Event</h1>
+          style={{
+            position: 'absolute', left: '24px',
+            width: '42px', height: '42px',
+            background: '#F5F6FA', border: '1px solid #D9DEEA',
+            borderRadius: '14px', cursor: 'pointer',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
+          }}
+        >
+          <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
+            <path d="M8.5 1L1.5 8L8.5 15" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
+        <h1 className="text-4xl font-normal text-[#222b45]">Event</h1>
       </div>
 
       {loading ? (
@@ -68,7 +79,7 @@ export default function ViewEvent() {
           <div className="flex flex-col gap-2">
             <span className="bg-[#6166db] text-white text-xs px-4 py-1 rounded-xl inline-flex w-fit">Title</span>
             <div className="bg-white rounded-2xl shadow px-4 py-4">
-              <p className="text-[#222b45] font-semibold text-base tracking-wide">{event.title}</p>
+              <p className="text-[#222b45] text-base tracking-wide">{event.title}</p>
             </div>
           </div>
 
@@ -112,13 +123,14 @@ export default function ViewEvent() {
             <div className="flex justify-center gap-4 pt-2 pb-8">
               <button
                 onClick={() => setShowDeleteConfirm(true)}
-                className="w-[116px] h-[45px] bg-red-400 rounded-[20px] flex items-center justify-center text-white text-xl"
+                className="w-[116px] h-[45px] bg-red-400 rounded-[999px] flex items-center justify-center text-white text-sm"
               >
                 Delete
               </button>
               <button
                 onClick={() => navigate(`/modules/${moduleId}/calendar/${eventId}/edit`)}
-                className="w-[116px] h-[45px] bg-white rounded-[20px] shadow flex items-center justify-center text-[#222b45] text-xl"
+                className="w-[116px] h-[45px] bg-[#B8E466] rounded-[999px] flex items-center justify-center text-white text-sm"
+                style={{ boxShadow: '0 6px 14px rgba(183,222,88,0.28)' }}
               >
                 Edit
               </button>
@@ -136,13 +148,14 @@ export default function ViewEvent() {
             <div className="flex gap-3 justify-center">
               <button
                 onClick={() => setShowDeleteConfirm(false)}
-                className="w-[110px] h-[40px] bg-gray-100 rounded-[20px] text-[#222b45] font-semibold"
+                className="w-[110px] h-[40px] rounded-[999px] text-[#222b45] text-sm"
+                style={{ background: '#FFFFFF', border: '1px solid #DFE5F0' }}
               >
                 Cancel
               </button>
               <button
                 onClick={handleDelete}
-                className="w-[110px] h-[40px] bg-red-400 rounded-[20px] text-white font-semibold"
+                className="w-[110px] h-[40px] bg-red-400 rounded-[999px] text-white text-sm"
               >
                 Delete
               </button>