diff --git a/server/test.db b/server/test.db
index 3b02c90..24ada2b 100644
Binary files a/server/test.db and b/server/test.db differ
diff --git a/src/components/ExerciseModal.tsx b/src/components/ExerciseModal.tsx
index d6c59a3..19bb0f3 100644
--- a/src/components/ExerciseModal.tsx
+++ b/src/components/ExerciseModal.tsx
@@ -7,6 +7,7 @@ import { generateId } from '../utils/uuid';
 import FilledInput from './FilledInput';
 import { SideSheet } from './ui/SideSheet';
 import { Button } from './ui/Button';
+import { Checkbox } from './ui/Checkbox';
 
 interface ExerciseModalProps {
     isOpen: boolean;
@@ -76,7 +77,7 @@ const ExerciseModal: React.FC<ExerciseModalProps> = ({ isOpen, onClose, onSave,
             {console.log('ExerciseModal Rendering. isOpen:', isOpen)}
             <div className="space-y-6">
                 <div>
-                    <GymFilledInput
+                    <FilledInput
                         label={t('ex_name', lang)}
                         value={newName}
                         onChange={(e: any) => {
@@ -120,7 +121,7 @@ const ExerciseModal: React.FC<ExerciseModalProps> = ({ isOpen, onClose, onSave,
                 </div>
 
                 {newType === ExerciseType.BODYWEIGHT && (
-                    <GymFilledInput
+                    <FilledInput
                         label={t('body_weight_percent', lang)}
                         value={newBwPercentage}
                         onChange={(e: any) => setNewBwPercentage(e.target.value)}
@@ -128,17 +129,12 @@ const ExerciseModal: React.FC<ExerciseModalProps> = ({ isOpen, onClose, onSave,
                     />
                 )}
 
-                <div className="flex items-center gap-3 px-1">
-                    <input
-                        type="checkbox"
-                        id="isUnilateral"
+                <div className="flex items-center gap-3 px-1 pt-2">
+                    <Checkbox
                         checked={isUnilateral}
                         onChange={(e) => setIsUnilateral(e.target.checked)}
-                        className="w-5 h-5 rounded border-2 border-outline bg-surface-container-high checked:bg-primary checked:border-primary cursor-pointer"
+                        label={t('unilateral_exercise', lang) || 'Unilateral exercise'}
                     />
-                    <label htmlFor="isUnilateral" className="text-sm text-on-surface cursor-pointer">
-                        {t('unilateral_exercise', lang) || 'Unilateral exercise (separate left/right tracking)'}
-                    </label>
                 </div>
 
                 <div className="flex justify-end mt-4 pt-4">
diff --git a/src/components/FilledInput.tsx b/src/components/FilledInput.tsx
index ffa6a8a..94179db 100644
--- a/src/components/FilledInput.tsx
+++ b/src/components/FilledInput.tsx
@@ -16,9 +16,15 @@ interface FilledInputProps {
     autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
     autoComplete?: string;
     rightElement?: React.ReactNode;
+    multiline?: boolean;
+    rows?: number;
 }
 
-const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onClear, onFocus, onBlur, type = "number", icon, autoFocus, step, inputMode, autocapitalize, autoComplete, rightElement }) => {
+const FilledInput: React.FC<FilledInputProps> = ({
+    label, value, onChange, onClear, onFocus, onBlur, type = "number", icon,
+    autoFocus, step, inputMode, autocapitalize, autoComplete, rightElement,
+    multiline = false, rows = 3
+}) => {
     const id = useId();
 
     const handleClear = () => {
@@ -30,25 +36,41 @@ const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onCle
     };
 
     return (
-        <div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
-            <label htmlFor={id} className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
+        <div className="relative group bg-surface-container-high rounded-t-[4px] border-b border-on-surface-variant hover:bg-on-surface/10 focus-within:border-primary focus-within:border-b-2 transition-colors min-h-[56px]">
+            <label htmlFor={id} className="absolute top-2 left-4 text-label-sm font-medium text-on-surface-variant flex items-center gap-1 group-focus-within:text-primary">
                 {icon ? <>{icon} {label}</> : label}
             </label>
-            <input
-                id={id}
-                type={type}
-                step={step}
-                inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
-                autoFocus={autoFocus}
-                className={`w-full pt-6 pb-2 pl-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent ${rightElement ? 'pr-20' : 'pr-10'}`}
-                placeholder="0"
-                value={value}
-                onChange={onChange}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                autoCapitalize={autocapitalize}
-                autoComplete={autoComplete}
-            />
+
+            {!multiline ? (
+                <input
+                    id={id}
+                    type={type}
+                    step={step}
+                    inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
+                    autoFocus={autoFocus}
+                    className={`w-full h-[56px] pt-5 pb-1 pl-4 bg-transparent text-body-lg text-on-surface focus:outline-none placeholder-transparent ${rightElement ? 'pr-20' : 'pr-10'}`}
+                    placeholder=" "
+                    value={value}
+                    onChange={onChange}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    autoCapitalize={autocapitalize}
+                    autoComplete={autoComplete}
+                />
+            ) : (
+                <textarea
+                    id={id}
+                    rows={rows}
+                    className={`w-full pt-6 pb-2 pl-4 bg-transparent text-body-lg text-on-surface focus:outline-none placeholder-transparent resize-none ${rightElement ? 'pr-20' : 'pr-10'}`}
+                    placeholder=" "
+                    value={value}
+                    onChange={onChange as any}
+                    onFocus={onFocus as any}
+                    onBlur={onBlur as any}
+                    autoCapitalize={autocapitalize}
+                />
+            )}
+
             {value !== '' && value !== 0 && (
                 <button
                     type="button"
diff --git a/src/components/History.tsx b/src/components/History.tsx
index bfcd6a5..f235883 100644
--- a/src/components/History.tsx
+++ b/src/components/History.tsx
@@ -232,7 +232,7 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
                                             size="icon"
                                             className="text-on-surface-variant hover:text-primary"
                                         >
-                                            <Pencil size={20} />
+                                            <Pencil size={24} />
                                         </Button>
                                         <Button
                                             onClick={(e) => {
@@ -243,7 +243,7 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
                                             size="icon"
                                             className="text-on-surface-variant hover:text-error"
                                         >
-                                            <Trash2 size={20} />
+                                            <Trash2 size={24} />
                                         </Button>
                                     </div>
                                 </div>
@@ -300,9 +300,9 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
                                                                 }}
                                                                 variant="ghost"
                                                                 size="icon"
-                                                                className="h-8 w-8"
+                                                                className="text-on-surface-variant hover:text-primary"
                                                             >
-                                                                <Pencil size={16} />
+                                                                <Pencil size={24} />
                                                             </Button>
                                                             <Button
                                                                 onClick={() => {
@@ -314,9 +314,9 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
                                                                 }}
                                                                 variant="ghost"
                                                                 size="icon"
-                                                                className="h-8 w-8 text-error hover:text-error"
+                                                                className="text-error hover:text-error"
                                                             >
-                                                                <Trash2 size={16} />
+                                                                <Trash2 size={24} />
                                                             </Button>
                                                         </div>
                                                     </Card>
@@ -372,38 +372,37 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
                     onClose={() => setEditingSession(null)}
                     title={t('edit', lang)}
                     width="lg"
+                    footer={
+                        <div className="flex justify-end">
+                            <Button onClick={handleSaveEdit}>
+                                <Save size={16} className="mr-2" />
+                                {t('save', lang)}
+                            </Button>
+                        </div>
+                    }
                 >
                     <div className="space-y-6">
                         {/* Meta Info */}
                         <div className="grid grid-cols-2 gap-4">
-                            <div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
-                                <label className="text-[10px] text-on-surface-variant font-bold block">{t('start_time', lang)}</label>
-                                <input
-                                    type="datetime-local"
-                                    value={formatDateForInput(editingSession.startTime)}
-                                    onChange={(e) => setEditingSession({ ...editingSession, startTime: parseDateFromInput(e.target.value) })}
-                                    className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
-                                />
-                            </div>
-                            <div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
-                                <label className="text-[10px] text-on-surface-variant font-bold block">{t('end_time', lang)}</label>
-                                <input
-                                    type="datetime-local"
-                                    value={editingSession.endTime ? formatDateForInput(editingSession.endTime) : ''}
-                                    onChange={(e) => setEditingSession({ ...editingSession, endTime: parseDateFromInput(e.target.value) })}
-                                    className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
-                                />
-                            </div>
-                        </div>
-                        <div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
-                            <label className="text-[10px] text-on-surface-variant font-bold block">{t('weight_kg', lang)}</label>
-                            <input
-                                type="number"
-                                value={editingSession.userBodyWeight || ''}
-                                onChange={(e) => setEditingSession({ ...editingSession, userBodyWeight: parseFloat(e.target.value) })}
-                                className="w-full bg-transparent text-on-surface focus:outline-none text-lg mt-1"
+                            <FilledInput
+                                label={t('start_time', lang)}
+                                type="datetime-local"
+                                value={formatDateForInput(editingSession.startTime)}
+                                onChange={(e: any) => setEditingSession({ ...editingSession, startTime: parseDateFromInput(e.target.value) })}
+                            />
+                            <FilledInput
+                                label={t('end_time', lang)}
+                                type="datetime-local"
+                                value={editingSession.endTime ? formatDateForInput(editingSession.endTime) : ''}
+                                onChange={(e: any) => setEditingSession({ ...editingSession, endTime: parseDateFromInput(e.target.value) })}
                             />
                         </div>
+                        <FilledInput
+                            label={t('weight_kg', lang)}
+                            type="number"
+                            value={editingSession.userBodyWeight || ''}
+                            onChange={(e: any) => setEditingSession({ ...editingSession, userBodyWeight: parseFloat(e.target.value) })}
+                        />
 
                         <div className="space-y-3">
                             <h3 className="text-sm font-medium text-primary ml-1">{t('sets_count', lang)} ({editingSession.sets.length})</h3>
@@ -443,12 +442,8 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
                             ))}
                         </div>
 
-                        <div className="flex justify-end pt-4 border-t border-outline-variant">
-                            <Button onClick={handleSaveEdit}>
-                                <Save size={16} className="mr-2" />
-                                {t('save', lang)}
-                            </Button>
-                        </div>
+
+
                     </div>
                 </SideSheet>
             )
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d207979..b214e4e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -36,11 +36,15 @@ const Navbar: React.FC<NavbarProps> = ({ lang }) => {
                 onClick={() => navigate(item.path)}
                 className="flex flex-col items-center justify-center w-full h-full gap-1 group min-w-0"
               >
-                <div className={`px-4 py-1 rounded-full transition-all duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
+                <div className={`w-[64px] h-[32px] rounded-full flex items-center justify-center transition-all duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
                   }`}>
-                  <item.icon size={22} strokeWidth={isActive ? 2.5 : 2} />
+                  <item.icon
+                    size={24}
+                    strokeWidth={isActive ? 2.5 : 2}
+                    fill="none"
+                  />
                 </div>
-                <span className={`text-[10px] font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
+                <span className={`text-label-md font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
                   }`}>
                   {item.label}
                 </span>
@@ -61,11 +65,15 @@ const Navbar: React.FC<NavbarProps> = ({ lang }) => {
                 onClick={() => navigate(item.path)}
                 className="flex flex-col items-center gap-1 group w-full"
               >
-                <div className={`w-14 h-8 rounded-full flex items-center justify-center transition-colors duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
+                <div className={`w-[56px] h-[32px] rounded-full flex items-center justify-center transition-colors duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
                   }`}>
-                  <item.icon size={24} />
+                  <item.icon
+                    size={24}
+                    strokeWidth={isActive ? 2.5 : 2}
+                    fill="none"
+                  />
                 </div>
-                <span className={`text-[11px] font-medium text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
+                <span className={`text-label-md font-medium text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
                   }`}>
                   {item.label}
                 </span>
diff --git a/src/components/Plans.tsx b/src/components/Plans.tsx
index 43d50b4..3b4b7f7 100644
--- a/src/components/Plans.tsx
+++ b/src/components/Plans.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Trash2, PlayCircle, Dumbbell, Save, X, ChevronRight, List, ArrowUp, ArrowDown, Edit2, User, Flame, Timer as TimerIcon, Ruler, Footprints, Activity, Percent, CheckCircle, GripVertical, Scale, Search } from 'lucide-react';
+import { Plus, Trash2, PlayCircle, Dumbbell, Save, X, ChevronRight, List, ArrowUp, ArrowDown, Pencil, User, Flame, Timer as TimerIcon, Ruler, Footprints, Activity, Percent, CheckCircle, GripVertical, Scale, Search } from 'lucide-react';
 import { WorkoutPlan, ExerciseDef, PlannedSet, Language, ExerciseType } from '../types';
 import { getExercises, saveExercise } from '../services/storage';
 import { t } from '../services/i18n';
@@ -14,6 +14,7 @@ import { Button } from './ui/Button';
 import { Card } from './ui/Card';
 import { Modal } from './ui/Modal';
 import { SideSheet } from './ui/SideSheet';
+import { Checkbox } from './ui/Checkbox';
 
 interface PlansProps {
   lang: Language;
@@ -213,15 +214,14 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
             onBlur={() => setName(toTitleCase(name))}
           />
 
-          <div className="bg-surface-container-high rounded-t-lg border-b border-outline-variant px-4 py-2">
-            <label className="text-[10px] text-on-surface-variant font-medium">{t('prep_title', lang)}</label>
-            <textarea
-              className="w-full bg-transparent text-base text-on-surface focus:outline-none pt-1 pb-2 min-h-[80px]"
-              placeholder={t('plan_desc_ph', lang)}
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-            />
-          </div>
+          <FilledInput
+            label={t('prep_title', lang)}
+            value={description}
+            onChange={(e: any) => setDescription(e.target.value)}
+            multiline
+            rows={3}
+            type="text"
+          />
 
           <div className="space-y-3">
             <div className="flex justify-between items-center px-2">
@@ -404,57 +404,59 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
         <h2 className="text-2xl font-normal text-on-surface">{t('my_plans', lang)}</h2>
       </div>
 
-      <div className="flex-1 p-4 overflow-y-auto space-y-4 pb-24">
+      <div className="flex-1 p-4 overflow-y-auto pb-24">
         {plans.length === 0 ? (
           <div className="text-center text-on-surface-variant mt-20 flex flex-col items-center">
             <div className="w-16 h-16 bg-surface-container-high rounded-full flex items-center justify-center mb-4">
               <List size={32} />
             </div>
-            <p className="text-lg">{t('plans_empty', lang)}</p>
+            <p className="text-headline-sm">{t('plans_empty', lang)}</p>
           </div>
         ) : (
-          plans.map(plan => (
-            <Card key={plan.id} className="relative overflow-hidden">
-              <div className="flex justify-between items-start mb-2">
-                <h3 className="text-xl font-normal text-on-surface">{plan.name}</h3>
-                <Button
-                  onClick={(e) => handleDelete(plan.id, e)}
-                  variant="ghost"
-                  size="icon"
-                  aria-label="Delete Plan"
-                  className="text-on-surface-variant hover:text-error hover:bg-white/5"
-                >
-                  <Trash2 size={20} />
-                </Button>
-              </div>
-              <div className="absolute top-4 right-14">
-                <Button
-                  onClick={(e) => { e.stopPropagation(); handleEdit(plan); }}
-                  variant="ghost"
-                  size="icon"
-                  aria-label="Edit Plan"
-                  className="text-on-surface-variant hover:text-primary hover:bg-white/5"
-                >
-                  <Edit2 size={20} />
-                </Button>
-              </div>
-              <p className="text-on-surface-variant text-sm line-clamp-2 mb-4 min-h-[1.25rem]">
-                {plan.description || t('prep_no_instructions', lang)}
-              </p>
-              <div className="flex items-center justify-between">
-                <div className="text-xs font-medium text-primary bg-primary-container/20 px-3 py-1 rounded-full">
-                  {plan.steps.length} {t('exercises_count', lang)}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {plans.map(plan => (
+              <Card key={plan.id} className="relative overflow-hidden group">
+                <div className="flex justify-between items-start mb-2">
+                  <h3 className="text-title-lg font-normal text-on-surface">{plan.name}</h3>
+                  <div className="flex gap-1">
+                    <Button
+                      onClick={(e) => { e.stopPropagation(); handleEdit(plan); }}
+                      variant="ghost"
+                      size="icon"
+                      aria-label="Edit Plan"
+                      className="text-on-surface-variant hover:text-primary hover:bg-surface-container-high"
+                    >
+                      <Pencil size={20} />
+                    </Button>
+                    <Button
+                      onClick={(e) => handleDelete(plan.id, e)}
+                      variant="ghost"
+                      size="icon"
+                      aria-label="Delete Plan"
+                      className="text-on-surface-variant hover:text-error hover:bg-error-container/10"
+                    >
+                      <Trash2 size={20} />
+                    </Button>
+                  </div>
                 </div>
-                <Button
-                  onClick={() => handleStart(plan)}
-                  className="flex items-center gap-2"
-                >
-                  <PlayCircle size={18} />
-                  {t('start', lang)}
-                </Button>
-              </div>
-            </Card>
-          ))
+                <p className="text-on-surface-variant text-body-md line-clamp-2 mb-4 min-h-[1.5rem]">
+                  {plan.description || t('prep_no_instructions', lang)}
+                </p>
+                <div className="flex items-center justify-between">
+                  <div className="text-label-md font-medium text-primary bg-primary-container/20 px-3 py-1 rounded-full">
+                    {plan.steps.length} {t('exercises_count', lang)}
+                  </div>
+                  <Button
+                    onClick={() => handleStart(plan)}
+                    className="flex items-center gap-2"
+                  >
+                    <PlayCircle size={18} />
+                    {t('start', lang)}
+                  </Button>
+                </div>
+              </Card>
+            ))}
+          </div>
         )}
       </div>
 
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 2678834..c4a35b9 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -427,7 +427,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
                                                 </div>
                                                 <div className="flex items-center gap-1 shrink-0">
                                                     <button onClick={() => setEditingExercise(ex)} className="p-2 text-on-surface-variant hover:text-primary hover:bg-white/5 rounded-full" role="button" aria-label="Edit Exercise">
-                                                        <Pencil size={16} />
+                                                        <Pencil size={18} />
                                                     </button>
                                                     <button
                                                         onClick={() => handleArchiveExercise(ex, !ex.isArchived)}
@@ -436,7 +436,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
                                                         role="button"
                                                         aria-label={ex.isArchived ? 'Unarchive Exercise' : 'Archive Exercise'}
                                                     >
-                                                        {ex.isArchived ? <ArchiveRestore size={16} /> : <Archive size={16} />}
+                                                        {ex.isArchived ? <ArchiveRestore size={18} /> : <Archive size={18} />}
                                                     </button>
                                                 </div>
                                             </div>
@@ -556,7 +556,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
                                                                     title={u.isBlocked ? t('unblock', lang) : t('block', lang)}
                                                                     aria-label={u.isBlocked ? t('unblock', lang) : t('block', lang)}
                                                                 >
-                                                                    <Ban size={16} />
+                                                                    <Ban size={18} />
                                                                 </button>
                                                                 <button
                                                                     onClick={() => handleAdminDeleteUser(u.id)}
@@ -564,7 +564,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
                                                                     title={t('delete', lang)}
                                                                     aria-label={t('delete', lang)}
                                                                 >
-                                                                    <Trash2 size={16} />
+                                                                    <Trash2 size={18} />
                                                                 </button>
                                                             </>
                                                         )}
@@ -607,6 +607,12 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
                             onClose={() => setEditingExercise(null)}
                             title={t('edit', lang)}
                             width="md"
+                            footer={
+                                <div className="flex justify-end gap-2">
+                                    <Button onClick={() => setEditingExercise(null)} variant="ghost">{t('cancel', lang)}</Button>
+                                    <Button onClick={handleSaveExerciseEdit}>{t('save', lang)}</Button>
+                                </div>
+                            }
                         >
                             <div className="space-y-4">
                                 <div className="bg-surface-container-high rounded-t-lg border-b border-outline-variant px-3 py-2">
@@ -628,10 +634,6 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
                                         />
                                     </div>
                                 )}
-                                <div className="flex justify-end gap-2 pt-2">
-                                    <Button onClick={() => setEditingExercise(null)} variant="ghost">{t('cancel', lang)}</Button>
-                                    <Button onClick={handleSaveExerciseEdit}>{t('save', lang)}</Button>
-                                </div>
                             </div>
                         </SideSheet>
                     )}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 7c96daf..371215a 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,6 +1,7 @@
 
 import React from 'react';
 import { Loader2 } from 'lucide-react';
+import { Ripple } from './Ripple';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
@@ -35,10 +36,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         return (
             <button
                 ref={ref}
-                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className}`}
+                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className} relative overflow-hidden`}
                 disabled={disabled || loading}
                 {...props}
             >
+                <Ripple color={variant === 'primary' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)'} />
                 {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 {children}
             </button>
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index 723b5c7..50982b7 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -1,17 +1,34 @@
 import React from 'react';
 
+
+import { Ripple } from './Ripple';
+
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
     noPadding?: boolean;
+    variant?: 'elevated' | 'outlined' | 'filled';
 }
 
-export const Card: React.FC<CardProps> = ({ className = '', children, noPadding = false, ...props }) => {
+export const Card: React.FC<CardProps> = ({ className = '', children, noPadding = false, variant = 'elevated', ...props }) => {
+
+    // M3 Card Variants
+    // Elevated: Surface Container Low + Shadow + No Border (Default)
+    // Outlined: Surface + Border + No Shadow
+    // Filled: Surface Container Highest + No Shadow + No Border
+
+    const variants = {
+        elevated: "bg-surface-container-low border-none shadow-elevation-1",
+        outlined: "bg-surface border border-outline-variant shadow-none",
+        filled: "bg-surface-container-high border-none shadow-none"
+    };
+
     return (
         <div
-            className={`bg-surface-container rounded-xl border border-outline-variant/20 shadow-elevation-1 overflow-hidden ${!noPadding ? 'p-4' : ''} ${className}`}
+            className={`rounded-xl overflow-hidden relative ${variants[variant]} ${!noPadding ? 'p-4' : ''} ${className}`}
             {...props}
         >
+            {props.onClick && <Ripple />}
             {children}
         </div>
     );
diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
new file mode 100644
index 0000000..d47f013
--- /dev/null
+++ b/src/components/ui/Checkbox.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Check } from 'lucide-react';
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string; // Optional label text
+    checked: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({ label, checked, onChange, className = '', ...props }) => {
+    return (
+        <label className={`flex items-center gap-2 cursor-pointer group ${className}`}>
+            <div className="relative flex items-center justify-center w-[48px] h-[48px] shrink-0">
+                {/* Real hidden input */}
+                <input
+                    type="checkbox"
+                    className="appearance-none peer absolute inset-0 w-full h-full cursor-pointer z-10 opacity-0"
+                    checked={checked}
+                    onChange={onChange}
+                    {...props}
+                />
+
+                {/* Visual Box */}
+                <div className="
+                    w-[18px] h-[18px] 
+                    rounded-[2px] 
+                    border-2 border-on-surface-variant 
+                    peer-checked:bg-primary peer-checked:border-primary 
+                    peer-checked:text-on-primary
+                    group-hover:bg-on-surface-variant/10
+                    transition-all duration-200
+                    flex items-center justify-center
+                ">
+                    <Check size={14} className={`opacity-0 peer-checked:opacity-100 transition-opacity duration-200 text-on-primary ${checked ? 'opacity-100' : ''}`} strokeWidth={3} />
+                </div>
+
+                {/* State Layer (Hover/Focus Halo) - handled by hover on parent usually, but M3 has a dedicated circle */}
+                <div className="absolute inset-0 rounded-full scale-0 group-hover:scale-100 bg-on-surface/10 transition-transform duration-200 -z-0 pointer-events-none" />
+            </div>
+
+            {label && <span className="text-body-md text-on-surface select-none">{label}</span>}
+        </label>
+    );
+};
diff --git a/src/components/ui/Ripple.tsx b/src/components/ui/Ripple.tsx
new file mode 100644
index 0000000..9a39f96
--- /dev/null
+++ b/src/components/ui/Ripple.tsx
@@ -0,0 +1,108 @@
+import React, { useState, useLayoutEffect, useCallback } from 'react';
+
+interface RippleProps {
+    color?: string;
+    duration?: number;
+}
+
+interface RippleState {
+    x: number;
+    y: number;
+    size: number;
+    key: number;
+}
+
+/**
+ * A Material 3 Ripple effect component.
+ * Usage: Place it inside a relatively positioned container.
+ * The parent container needs to handle the click event or you need to
+ * pass a ref to trigger it?
+ * 
+ * Actually, to keep it simple and non-intrusive:
+ * This component just renders the ripples. The PARENT component (Button/Card)
+ * must call `addRipple(e)` which is exposed via Ref?
+ * 
+ * OR easier:
+ * <Ripple /> automatically attaches a click listener to its parentNode?
+ * That's a bit "magical" but works well for drop-in.
+ */
+export const Ripple: React.FC<RippleProps> = ({ color = 'rgba(255, 255, 255, 0.3)', duration = 600 }) => {
+    const [ripples, setRipples] = useState<RippleState[]>([]);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        const container = containerRef.current?.parentElement;
+        if (!container) return;
+
+        const handleMouseDown = (e: MouseEvent | TouchEvent) => {
+            // Get coordinates
+            const rect = container.getBoundingClientRect();
+            let clientX, clientY;
+
+            if ('touches' in e) {
+                // Touch
+                clientX = e.touches[0].clientX;
+                clientY = e.touches[0].clientY;
+            } else {
+                // Mouse
+                clientX = (e as MouseEvent).clientX;
+                clientY = (e as MouseEvent).clientY;
+            }
+
+            const size = Math.max(container.offsetWidth, container.offsetHeight);
+            const x = clientX - rect.left;
+            const y = clientY - rect.top;
+
+            const newRipple = {
+                x,
+                y,
+                size,
+                key: Date.now()
+            };
+
+            setRipples(prev => [...prev, newRipple]);
+        };
+
+        // Attach listeners to parent
+        // 'mousedown' covers desktop. 'touchstart' might be needed for mobile/instant feedback but often conflicts with scrolling.
+        // Let's stick to mousedown for now, or click? Mousedown feels snappier.
+        container.addEventListener('mousedown', handleMouseDown);
+
+        // Ensure parent is relative and overflow hidden if possible? 
+        // We shouldn't force styles that break layout, but user must know.
+        const style = window.getComputedStyle(container);
+        if (style.position === 'static') {
+            container.style.position = 'relative';
+        }
+        if (style.overflow !== 'hidden') {
+            container.style.overflow = 'hidden';
+        }
+
+        return () => {
+            container.removeEventListener('mousedown', handleMouseDown);
+        };
+    }, []);
+
+    return (
+        <div
+            ref={containerRef}
+            className="absolute inset-0 pointer-events-none z-0 rounded-[inherit]"
+        >
+            {ripples.map((ripple) => (
+                <span
+                    key={ripple.key}
+                    style={{
+                        top: ripple.y,
+                        left: ripple.x,
+                        width: ripple.size,
+                        height: ripple.size,
+                        backgroundColor: color,
+                        animationDuration: `${duration}ms`
+                    }}
+                    className="absolute rounded-full animate-ripple transform -translate-x-1/2 -translate-y-1/2 opacity-30"
+                    onAnimationEnd={() => setRipples(prev => prev.filter(i => i.key !== ripple.key))}
+                />
+            ))}
+        </div>
+    );
+};
diff --git a/src/components/ui/SideSheet.tsx b/src/components/ui/SideSheet.tsx
index 1981031..2b254f0 100644
--- a/src/components/ui/SideSheet.tsx
+++ b/src/components/ui/SideSheet.tsx
@@ -9,9 +9,10 @@ interface SideSheetProps {
     title?: string;
     children: React.ReactNode;
     width?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    footer?: React.ReactNode;
 }
 
-export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, children, width = 'md' }) => {
+export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, children, width = 'md', footer }) => {
     const [isMounted, setIsMounted] = useState(false);
     const [isVisible, setIsVisible] = useState(false);
 
@@ -24,7 +25,7 @@ export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, ch
             setIsVisible(true);
             document.body.style.overflow = 'hidden';
         } else {
-            const timer = setTimeout(() => setIsVisible(false), 300); // Allow exit animation
+            const timer = setTimeout(() => setIsVisible(false), 500); // Allow exit animation
             document.body.style.overflow = 'unset';
             return () => clearTimeout(timer);
         }
@@ -71,7 +72,7 @@ export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, ch
                     shadow-elevation-3
                     
                     /* Animations */
-                    transition-transform duration-300 ease-out
+                    transition-transform duration-500 ease-[cubic-bezier(0.2,0.0,0,1.0)]
                     ${isOpen
                         ? 'translate-y-0 sm:translate-y-0 sm:translate-x-0'
                         : 'translate-y-full sm:translate-y-0 sm:translate-x-full'
@@ -100,6 +101,13 @@ export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, ch
                 <div className="flex-1 overflow-y-auto px-6 pb-6 pt-0">
                     {children}
                 </div>
+
+                {/* Footer */}
+                {footer && (
+                    <div className="px-6 py-4 border-t border-outline-variant shrink-0 bg-surface-container">
+                        {footer}
+                    </div>
+                )}
             </div>
         </div>,
         document.body
diff --git a/tailwind.config.js b/tailwind.config.js
index 837e95f..292cab5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,23 @@ export default {
             fontFamily: {
                 sans: ['Roboto', 'sans-serif'],
             },
+            fontSize: {
+                'display-lg': ['57px', '64px'],
+                'display-md': ['45px', '52px'],
+                'display-sm': ['36px', '44px'],
+                'headline-lg': ['32px', '40px'],
+                'headline-md': ['28px', '36px'],
+                'headline-sm': ['24px', '32px'],
+                'title-lg': ['22px', '28px'],
+                'title-md': ['16px', '24px'],
+                'title-sm': ['14px', '20px'],
+                'label-lg': ['14px', '20px'],
+                'label-md': ['12px', '16px'],
+                'label-sm': ['11px', '16px'],
+                'body-lg': ['16px', '24px'],
+                'body-md': ['14px', '20px'],
+                'body-sm': ['12px', '16px'],
+            },
             colors: {
                 // Material 3 Dark Theme approximation
                 'surface': '#141218', // Very dark background
@@ -40,9 +57,20 @@ export default {
                 'outline-variant': '#49454F'
             },
             boxShadow: {
-                'elevation-1': '0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
-                'elevation-2': '0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
-                'elevation-3': '0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30)',
+                'elevation-1': '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
+                'elevation-2': '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)',
+                'elevation-3': '0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)',
+                'elevation-4': '0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)',
+                'elevation-5': '0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)',
+            },
+            keyframes: {
+                ripple: {
+                    '0%': { transform: 'scale(0)', opacity: '0.4' },
+                    '100%': { transform: 'scale(4)', opacity: '0' },
+                }
+            },
+            animation: {
+                ripple: 'ripple 600ms linear',
             }
         },
     },