diff --git a/.gitignore b/.gitignore
index 507cfe3..db3d9fd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -145,4 +145,8 @@ node_modules/
 
 # Temporary files
 *.tmp
-*.temp
\ No newline at end of file
+*.temp
+
+# User uploaded content
+static/uploads/avatars/*
+!static/uploads/avatars/.gitkeep
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 4087404..3a1427f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -17,6 +17,9 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
 
+ENV LANG=en_US.UTF-8
+ENV TZ=Europe/Berlin
+
 # Create www-data user and log directory
 RUN groupadd -r www-data && useradd -r -g www-data www-data || true
 RUN mkdir -p /var/log/uwsgi && chown -R www-data:www-data /var/log/uwsgi
@@ -35,6 +38,9 @@ COPY . .
 # Create the SQLite database directory with proper permissions
 RUN mkdir -p /app/instance && chmod 777 /app/instance
 
+# Create uploads directory with proper permissions
+RUN mkdir -p /app/static/uploads/avatars && chmod -R 777 /app/static/uploads
+
 VOLUME /data
 RUN mkdir /data && chmod 777 /data
 
diff --git a/app.py b/app.py
index 0b5bde5..cbb5013 100644
--- a/app.py
+++ b/app.py
@@ -1,8 +1,8 @@
-from flask import Flask, render_template, request, redirect, url_for, jsonify, flash, session, g, Response, send_file
-from models import db, TimeEntry, WorkConfig, User, SystemSettings, Team, Role, Project, Company, CompanyWorkConfig, UserPreferences, WorkRegion, AccountType, ProjectCategory, Task, SubTask, TaskStatus, TaskPriority, Announcement, SystemEvent
+from flask import Flask, render_template, request, redirect, url_for, jsonify, flash, session, g, Response, send_file, abort
+from models import db, TimeEntry, WorkConfig, User, SystemSettings, Team, Role, Project, Company, CompanyWorkConfig, CompanySettings, UserPreferences, WorkRegion, AccountType, ProjectCategory, Task, SubTask, TaskStatus, TaskPriority, TaskDependency, Sprint, SprintStatus, Announcement, SystemEvent, WidgetType, UserDashboard, DashboardWidget, WidgetTemplate, Comment, CommentVisibility, BrandingSettings
 from data_formatting import (
     format_duration, prepare_export_data, prepare_team_hours_export_data,
-    format_table_data, format_graph_data, format_team_data
+    format_table_data, format_graph_data, format_team_data, format_burndown_data
 )
 from data_export import (
     export_to_csv, export_to_excel, export_team_hours_to_csv, export_team_hours_to_excel,
@@ -19,6 +19,7 @@
 from functools import wraps
 from flask_mail import Mail, Message
 from dotenv import load_dotenv
+from password_utils import PasswordValidator
 from werkzeug.security import check_password_hash
 
 # Load environment variables from .env file
@@ -40,7 +41,7 @@
 app.config['MAIL_USE_TLS'] = os.environ.get('MAIL_USE_TLS', 'true').lower() in ['true', 'on', '1']
 app.config['MAIL_USERNAME'] = os.environ.get('MAIL_USERNAME', 'your-email@example.com')
 app.config['MAIL_PASSWORD'] = os.environ.get('MAIL_PASSWORD', 'your-password')
-app.config['MAIL_DEFAULT_SENDER'] = os.environ.get('MAIL_DEFAULT_SENDER', 'TimeTrack <noreply@timetrack.com>')
+app.config['MAIL_DEFAULT_SENDER'] = os.environ.get('MAIL_DEFAULT_SENDER', 'TimeTrack <noreply@timetrack.com>')  # Will be overridden by branding in mail sending functions
 
 # Log mail configuration (without password)
 logger.info(f"Mail server: {app.config['MAIL_SERVER']}")
@@ -60,15 +61,24 @@ def run_migrations():
     # Check if we're using PostgreSQL or SQLite
     database_url = app.config['SQLALCHEMY_DATABASE_URI']
     print(f"DEBUG: Database URL: {database_url}")
-    
+
     is_postgresql = 'postgresql://' in database_url or 'postgres://' in database_url
     print(f"DEBUG: Is PostgreSQL: {is_postgresql}")
-    
+
     if is_postgresql:
         print("Using PostgreSQL - skipping SQLite migrations, ensuring tables exist...")
         with app.app_context():
             db.create_all()
             init_system_settings()
+            
+            # Run PostgreSQL-specific migrations
+            try:
+                from migrate_db import migrate_postgresql_schema
+                migrate_postgresql_schema()
+            except ImportError:
+                print("PostgreSQL migration function not available")
+            except Exception as e:
+                print(f"Warning: PostgreSQL migration failed: {e}")
         print("PostgreSQL setup completed successfully!")
     else:
         print("Using SQLite - running SQLite migrations...")
@@ -171,16 +181,16 @@ def inject_globals():
     active_announcements = []
     if g.user:
         active_announcements = Announcement.get_active_announcements_for_user(g.user)
-    
+
     # Get tracking script settings
     tracking_script_enabled = False
     tracking_script_code = ''
-    
+
     try:
         tracking_enabled_setting = SystemSettings.query.filter_by(key='tracking_script_enabled').first()
         if tracking_enabled_setting:
             tracking_script_enabled = tracking_enabled_setting.value == 'true'
-        
+
         tracking_code_setting = SystemSettings.query.filter_by(key='tracking_script_code').first()
         if tracking_code_setting:
             tracking_script_code = tracking_code_setting.value
@@ -387,15 +397,23 @@ def load_logged_in_user():
             else:
                 g.company = None
 
-            # Check if user is verified
-            if not g.user.is_verified and request.endpoint not in ['verify_email', 'static', 'logout', 'setup_company']:
-                # Allow unverified users to access only verification and static resources
-                if request.endpoint not in ['login', 'register']:
-                    flash('Please verify your email address before accessing this page.', 'warning')
-                    session.clear()
-                    return redirect(url_for('login'))
+            # Check if user has email but not verified
+            if g.user and not g.user.is_verified and g.user.email:
+                # Add a flag for templates to show email verification nag
+                g.show_email_verification_nag = True
+            else:
+                g.show_email_verification_nag = False
+                
+            # Check if user has no email at all
+            if g.user and not g.user.email:
+                g.show_email_nag = True
+            else:
+                g.show_email_nag = False
         else:
             g.company = None
+    
+    # Load branding settings
+    g.branding = BrandingSettings.get_current()
 
 @app.route('/')
 def home():
@@ -431,7 +449,7 @@ def home():
                              history=history,
                              available_projects=available_projects)
     else:
-        return render_template('about.html', title='Home')
+        return render_template('index.html', title='Home')
 
 @app.route('/login', methods=['GET', 'POST'])
 def login():
@@ -505,7 +523,7 @@ def login():
             ip_address=request.remote_addr,
             user_agent=request.headers.get('User-Agent')
         )
-        
+
         flash('Invalid username or password', 'error')
 
     return render_template('login.html', title='Login')
@@ -526,7 +544,7 @@ def logout():
                 ip_address=request.remote_addr,
                 user_agent=request.headers.get('User-Agent')
             )
-    
+
     session.clear()
     flash('You have been logged out.', 'info')
     return redirect(url_for('login'))
@@ -556,14 +574,19 @@ def register():
         error = None
         if not username:
             error = 'Username is required'
-        elif not email:
-            error = 'Email is required'
         elif not password:
             error = 'Password is required'
         elif password != confirm_password:
             error = 'Passwords do not match'
         elif not company_code:
             error = 'Company code is required'
+        
+        # Validate password strength
+        if not error:
+            validator = PasswordValidator()
+            is_valid, password_errors = validator.validate(password)
+            if not is_valid:
+                error = password_errors[0]  # Show first error
 
         # Find company by code
         company = None
@@ -576,7 +599,7 @@ def register():
         if company and not error:
             if User.query.filter_by(username=username, company_id=company.id).first():
                 error = 'Username already exists in this company'
-            elif User.query.filter_by(email=email, company_id=company.id).first():
+            elif email and User.query.filter_by(email=email, company_id=company.id).first():
                 error = 'Email already registered in this company'
 
         if error is None and company:
@@ -621,19 +644,19 @@ def register():
                 else:
                     # Send verification email for regular users when verification is required
                     verification_url = url_for('verify_email', token=token, _external=True)
-                    msg = Message('Verify your TimeTrack account', recipients=[email])
+                    msg = Message(f'Verify your {g.branding.app_name} account', recipients=[email])
                     msg.body = f'''Hello {username},
 
-Thank you for registering with TimeTrack. To complete your registration, please click on the link below:
+Thank you for registering with {g.branding.app_name}. To complete your registration, please click on the link below:
 
 {verification_url}
 
 This link will expire in 24 hours.
 
-If you did not register for TimeTrack, please ignore this email.
+If you did not register for {g.branding.app_name}, please ignore this email.
 
 Best regards,
-The TimeTrack Team
+The {g.branding.app_name} Team
 '''
                     mail.send(msg)
                     logger.info(f"Verification email sent to {email}")
@@ -670,18 +693,23 @@ def register_freelancer():
         error = None
         if not username:
             error = 'Username is required'
-        elif not email:
-            error = 'Email is required'
         elif not password:
             error = 'Password is required'
         elif password != confirm_password:
             error = 'Passwords do not match'
+        
+        # Validate password strength
+        if not error:
+            validator = PasswordValidator()
+            is_valid, password_errors = validator.validate(password)
+            if not is_valid:
+                error = password_errors[0]  # Show first error
 
         # Check for existing users globally (freelancers get unique usernames/emails)
         if not error:
             if User.query.filter_by(username=username).first():
                 error = 'Username already exists'
-            elif User.query.filter_by(email=email).first():
+            elif email and User.query.filter_by(email=email).first():
                 error = 'Email already registered'
 
         if error is None:
@@ -879,62 +907,11 @@ def verify_email(token):
     return redirect(url_for('login'))
 
 @app.route('/dashboard')
-@role_required(Role.TEAM_LEADER)
+@role_required(Role.TEAM_MEMBER)
+@company_required
 def dashboard():
-    # Get dashboard data based on user role
-    dashboard_data = {}
-
-    if g.user.role == Role.ADMIN and g.user.company_id:
-        # Admin sees everything within their company
-
-        dashboard_data.update({
-            'total_users': User.query.filter_by(company_id=g.user.company_id).count(),
-            'total_teams': Team.query.filter_by(company_id=g.user.company_id).count(),
-            'blocked_users': User.query.filter_by(company_id=g.user.company_id, is_blocked=True).count(),
-            'unverified_users': User.query.filter_by(company_id=g.user.company_id, is_verified=False).count(),
-            'recent_registrations': User.query.filter_by(company_id=g.user.company_id).order_by(User.id.desc()).limit(5).all()
-        })
-
-    if g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR, Role.ADMIN]:
-
-        # Team leaders and supervisors see team-related data
-        if g.user.team_id or g.user.role == Role.ADMIN:
-            if g.user.role == Role.ADMIN and g.user.company_id:
-                # Admin can see all teams in their company
-                teams = Team.query.filter_by(company_id=g.user.company_id).all()
-                team_members = User.query.filter(
-                    User.team_id.isnot(None),
-                    User.company_id == g.user.company_id
-                ).all()
-            else:
-                # Team leaders/supervisors see their own team
-                teams = [Team.query.get(g.user.team_id)] if g.user.team_id else []
-
-                team_members = User.query.filter_by(
-                    team_id=g.user.team_id,
-                    company_id=g.user.company_id
-                ).all() if g.user.team_id else []
-
-            dashboard_data.update({
-                'teams': teams,
-                'team_members': team_members,
-                'team_member_count': len(team_members)
-            })
-
-    # Get recent time entries for the user's oversight
-    if g.user.role == Role.ADMIN:
-        # Admin sees all recent entries
-        recent_entries = TimeEntry.query.order_by(TimeEntry.arrival_time.desc()).limit(10).all()
-    elif g.user.team_id:
-        # Team leaders see their team's entries
-        team_user_ids = [user.id for user in User.query.filter_by(team_id=g.user.team_id).all()]
-        recent_entries = TimeEntry.query.filter(TimeEntry.user_id.in_(team_user_ids)).order_by(TimeEntry.arrival_time.desc()).limit(10).all()
-    else:
-        recent_entries = []
-
-    dashboard_data['recent_entries'] = recent_entries
-
-    return render_template('dashboard.html', title='Dashboard', **dashboard_data)
+    """User dashboard with configurable widgets."""
+    return render_template('dashboard.html', title='Dashboard')
 
 # Redirect old admin dashboard URL to new dashboard
 
@@ -994,17 +971,17 @@ def create_user():
                 # Generate verification token and send email
                 token = new_user.generate_verification_token()
                 verification_url = url_for('verify_email', token=token, _external=True)
-                msg = Message('Verify your TimeTrack account', recipients=[email])
+                msg = Message(f'Verify your {g.branding.app_name} account', recipients=[email])
                 msg.body = f'''Hello {username},
 
-An administrator has created an account for you on TimeTrack. To activate your account, please click on the link below:
+An administrator has created an account for you on {g.branding.app_name}. To activate your account, please click on the link below:
 
 {verification_url}
 
 This link will expire in 24 hours.
 
 Best regards,
-The TimeTrack Team
+The {g.branding.app_name} Team
 '''
                 mail.send(msg)
 
@@ -1090,12 +1067,218 @@ def delete_user(user_id):
         return redirect(url_for('admin_users'))
 
     username = user.username
-    db.session.delete(user)
-    db.session.commit()
-
-    flash(f'User {username} deleted successfully', 'success')
+    
+    try:
+        # Handle dependent records before deleting user
+        # Find an alternative admin/supervisor to transfer ownership to
+        alternative_admin = User.query.filter(
+            User.company_id == g.user.company_id,
+            User.role.in_([Role.ADMIN, Role.SUPERVISOR]),
+            User.id != user_id
+        ).first()
+        
+        if alternative_admin:
+            # Transfer ownership of projects to alternative admin
+            Project.query.filter_by(created_by_id=user_id).update({'created_by_id': alternative_admin.id})
+            
+            # Transfer ownership of tasks to alternative admin
+            Task.query.filter_by(created_by_id=user_id).update({'created_by_id': alternative_admin.id})
+            
+            # Transfer ownership of subtasks to alternative admin
+            SubTask.query.filter_by(created_by_id=user_id).update({'created_by_id': alternative_admin.id})
+            
+            # Transfer ownership of project categories to alternative admin
+            ProjectCategory.query.filter_by(created_by_id=user_id).update({'created_by_id': alternative_admin.id})
+        else:
+            # No alternative admin found - redirect to company deletion confirmation
+            flash('No other administrator or supervisor found. Company deletion required.', 'warning')
+            return redirect(url_for('confirm_company_deletion', user_id=user_id))
+        
+        # Delete user-specific records that can be safely removed
+        TimeEntry.query.filter_by(user_id=user_id).delete()
+        WorkConfig.query.filter_by(user_id=user_id).delete()
+        UserPreferences.query.filter_by(user_id=user_id).delete()
+        
+        # Delete user dashboards (cascades to widgets)
+        UserDashboard.query.filter_by(user_id=user_id).delete()
+        
+        # Clear task and subtask assignments
+        Task.query.filter_by(assigned_to_id=user_id).update({'assigned_to_id': None})
+        SubTask.query.filter_by(assigned_to_id=user_id).update({'assigned_to_id': None})
+        
+        # Now safe to delete the user
+        db.session.delete(user)
+        db.session.commit()
+        
+        flash(f'User {username} deleted successfully. Projects and tasks transferred to {alternative_admin.username}', 'success')
+        
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error deleting user {user_id}: {str(e)}")
+        flash(f'Error deleting user: {str(e)}', 'error')
+    
     return redirect(url_for('admin_users'))
 
+@app.route('/confirm-company-deletion/<int:user_id>', methods=['GET', 'POST'])
+@login_required
+def confirm_company_deletion(user_id):
+    """Show confirmation page for company deletion when no alternative admin exists"""
+    
+    # Only allow admin or system admin access
+    if g.user.role not in [Role.ADMIN, Role.SYSTEM_ADMIN]:
+        flash('Access denied: Admin privileges required', 'error')
+        return redirect(url_for('index'))
+    
+    user = User.query.get_or_404(user_id)
+    
+    # For admin users, ensure they're in the same company
+    if g.user.role == Role.ADMIN and user.company_id != g.user.company_id:
+        flash('Access denied: You can only delete users in your company', 'error')
+        return redirect(url_for('admin_users'))
+    
+    # Prevent deleting yourself
+    if user.id == g.user.id:
+        flash('You cannot delete your own account', 'error')
+        return redirect(url_for('admin_users') if g.user.role != Role.SYSTEM_ADMIN else url_for('system_admin_users'))
+    
+    company = user.company
+    
+    # Verify no alternative admin exists
+    alternative_admin = User.query.filter(
+        User.company_id == company.id,
+        User.role.in_([Role.ADMIN, Role.SUPERVISOR]),
+        User.id != user_id
+    ).first()
+    
+    if alternative_admin:
+        flash('Alternative admin found. Regular user deletion should be used instead.', 'error')
+        return redirect(url_for('admin_users') if g.user.role != Role.SYSTEM_ADMIN else url_for('system_admin_users'))
+    
+    if request.method == 'POST':
+        # Verify company name confirmation
+        company_name_confirm = request.form.get('company_name_confirm', '').strip()
+        understand_deletion = request.form.get('understand_deletion')
+        
+        if company_name_confirm != company.name:
+            flash('Company name confirmation does not match', 'error')
+            return redirect(url_for('confirm_company_deletion', user_id=user_id))
+        
+        if not understand_deletion:
+            flash('You must confirm that you understand the consequences', 'error')
+            return redirect(url_for('confirm_company_deletion', user_id=user_id))
+        
+        try:
+            # Perform cascade deletion
+            company_name = company.name
+            
+            # Delete all company-related data in the correct order
+            # First, clear foreign key references that could cause constraint violations
+            
+            # 1. Delete time entries (they reference tasks and users)
+            TimeEntry.query.filter(TimeEntry.user_id.in_(
+                db.session.query(User.id).filter(User.company_id == company.id)
+            )).delete(synchronize_session=False)
+            
+            # 2. Delete user preferences and dashboards
+            UserPreferences.query.filter(UserPreferences.user_id.in_(
+                db.session.query(User.id).filter(User.company_id == company.id)
+            )).delete(synchronize_session=False)
+            
+            UserDashboard.query.filter(UserDashboard.user_id.in_(
+                db.session.query(User.id).filter(User.company_id == company.id)
+            )).delete(synchronize_session=False)
+            
+            # 3. Delete work configs
+            WorkConfig.query.filter(WorkConfig.user_id.in_(
+                db.session.query(User.id).filter(User.company_id == company.id)
+            )).delete(synchronize_session=False)
+            
+            # 4. Delete subtasks (they depend on tasks)
+            SubTask.query.filter(SubTask.task_id.in_(
+                db.session.query(Task.id).filter(Task.project_id.in_(
+                    db.session.query(Project.id).filter(Project.company_id == company.id)
+                ))
+            )).delete(synchronize_session=False)
+            
+            # 5. Delete tasks (now safe since subtasks are deleted)
+            Task.query.filter(Task.project_id.in_(
+                db.session.query(Project.id).filter(Project.company_id == company.id)
+            )).delete(synchronize_session=False)
+            
+            # 6. Delete projects
+            Project.query.filter_by(company_id=company.id).delete()
+            
+            # 7. Delete project categories
+            ProjectCategory.query.filter_by(company_id=company.id).delete()
+            
+            # 8. Delete company work config
+            CompanyWorkConfig.query.filter_by(company_id=company.id).delete()
+            
+            # 9. Delete teams
+            Team.query.filter_by(company_id=company.id).delete()
+            
+            # 10. Delete users
+            User.query.filter_by(company_id=company.id).delete()
+            
+            # 11. Delete system events for this company
+            SystemEvent.query.filter_by(company_id=company.id).delete()
+            
+            # 12. Finally, delete the company itself
+            db.session.delete(company)
+            
+            db.session.commit()
+            
+            flash(f'Company "{company_name}" and all associated data has been permanently deleted', 'success')
+            
+            # Log the deletion
+            SystemEvent.log_event(
+                event_type='company_deleted',
+                description=f'Company "{company_name}" was deleted by {g.user.username} due to no alternative admin for user deletion',
+                event_category='admin_action',
+                severity='warning',
+                user_id=g.user.id
+            )
+            
+            return redirect(url_for('system_admin_companies') if g.user.role == Role.SYSTEM_ADMIN else url_for('index'))
+            
+        except Exception as e:
+            db.session.rollback()
+            logger.error(f"Error deleting company {company.id}: {str(e)}")
+            flash(f'Error deleting company: {str(e)}', 'error')
+            return redirect(url_for('confirm_company_deletion', user_id=user_id))
+    
+    # GET request - show confirmation page
+    # Gather all data that will be deleted
+    users = User.query.filter_by(company_id=company.id).all()
+    teams = Team.query.filter_by(company_id=company.id).all()
+    projects = Project.query.filter_by(company_id=company.id).all()
+    categories = ProjectCategory.query.filter_by(company_id=company.id).all()
+    
+    # Get tasks for all projects in the company
+    project_ids = [p.id for p in projects]
+    tasks = Task.query.filter(Task.project_id.in_(project_ids)).all() if project_ids else []
+    
+    # Count time entries
+    user_ids = [u.id for u in users]
+    time_entries_count = TimeEntry.query.filter(TimeEntry.user_id.in_(user_ids)).count() if user_ids else 0
+    
+    # Calculate total hours
+    total_duration = db.session.query(func.sum(TimeEntry.duration)).filter(
+        TimeEntry.user_id.in_(user_ids)
+    ).scalar() or 0
+    total_hours_tracked = round(total_duration / 3600, 2) if total_duration else 0
+    
+    return render_template('confirm_company_deletion.html',
+                         user=user,
+                         company=company,
+                         users=users,
+                         teams=teams,
+                         projects=projects,
+                         categories=categories,
+                         tasks=tasks,
+                         time_entries_count=time_entries_count,
+                         total_hours_tracked=total_hours_tracked)
+
 @app.route('/profile', methods=['GET', 'POST'])
 @login_required
 def profile():
@@ -1122,6 +1305,12 @@ def profile():
                 error = 'Current password is incorrect'
             elif new_password != confirm_password:
                 error = 'New passwords do not match'
+            else:
+                # Validate password strength
+                validator = PasswordValidator()
+                is_valid, password_errors = validator.validate(new_password)
+                if not is_valid:
+                    error = password_errors[0]  # Show first error
 
         if error is None:
             user.email = email
@@ -1137,6 +1326,134 @@ def profile():
 
     return render_template('profile.html', title='My Profile', user=user)
 
+@app.route('/update-avatar', methods=['POST'])
+@login_required
+def update_avatar():
+    """Update user avatar URL"""
+    user = User.query.get(session['user_id'])
+    avatar_url = request.form.get('avatar_url', '').strip()
+    
+    # Validate URL if provided
+    if avatar_url:
+        # Basic URL validation
+        import re
+        url_pattern = re.compile(
+            r'^https?://'  # http:// or https://
+            r'(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+[A-Z]{2,6}\.?|'  # domain...
+            r'localhost|'  # localhost...
+            r'\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})'  # ...or ip
+            r'(?::\d+)?'  # optional port
+            r'(?:/?|[/?]\S+)$', re.IGNORECASE)
+        
+        if not url_pattern.match(avatar_url):
+            flash('Please provide a valid URL for your avatar.', 'error')
+            return redirect(url_for('profile'))
+        
+        # Additional validation for image URLs
+        allowed_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg']
+        if not any(avatar_url.lower().endswith(ext) for ext in allowed_extensions):
+            # Check if it's a service that doesn't use extensions (like gravatar)
+            allowed_services = ['gravatar.com', 'dicebear.com', 'ui-avatars.com', 'avatars.githubusercontent.com']
+            if not any(service in avatar_url.lower() for service in allowed_services):
+                flash('Avatar URL should point to an image file (JPG, PNG, GIF, WebP, or SVG).', 'error')
+                return redirect(url_for('profile'))
+    
+    # Update avatar URL (empty string removes custom avatar)
+    user.avatar_url = avatar_url if avatar_url else None
+    db.session.commit()
+    
+    if avatar_url:
+        flash('Avatar updated successfully!', 'success')
+    else:
+        flash('Avatar reset to default.', 'success')
+    
+    # Log the avatar change
+    SystemEvent.log_event(
+        event_type='profile_avatar_updated',
+        event_category='user',
+        description=f'User {user.username} updated their avatar',
+        user_id=user.id,
+        company_id=user.company_id
+    )
+    
+    return redirect(url_for('profile'))
+
+@app.route('/upload-avatar', methods=['POST'])
+@login_required
+def upload_avatar():
+    """Handle avatar file upload"""
+    import os
+    from werkzeug.utils import secure_filename
+    import uuid
+    
+    user = User.query.get(session['user_id'])
+    
+    # Check if file was uploaded
+    if 'avatar_file' not in request.files:
+        flash('No file selected.', 'error')
+        return redirect(url_for('profile'))
+    
+    file = request.files['avatar_file']
+    
+    # Check if file is empty
+    if file.filename == '':
+        flash('No file selected.', 'error')
+        return redirect(url_for('profile'))
+    
+    # Validate file extension
+    allowed_extensions = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
+    file_ext = file.filename.rsplit('.', 1)[1].lower() if '.' in file.filename else ''
+    
+    if file_ext not in allowed_extensions:
+        flash('Invalid file type. Please upload a PNG, JPG, GIF, or WebP image.', 'error')
+        return redirect(url_for('profile'))
+    
+    # Validate file size (5MB max)
+    file.seek(0, os.SEEK_END)
+    file_size = file.tell()
+    file.seek(0)  # Reset file pointer
+    
+    if file_size > 5 * 1024 * 1024:  # 5MB
+        flash('File size must be less than 5MB.', 'error')
+        return redirect(url_for('profile'))
+    
+    # Generate unique filename
+    unique_filename = f"{user.id}_{uuid.uuid4().hex}.{file_ext}"
+    
+    # Create user avatar directory if it doesn't exist
+    avatar_dir = os.path.join(app.static_folder, 'uploads', 'avatars')
+    os.makedirs(avatar_dir, exist_ok=True)
+    
+    # Save the file
+    file_path = os.path.join(avatar_dir, unique_filename)
+    file.save(file_path)
+    
+    # Delete old avatar file if it exists and is a local upload
+    if user.avatar_url and user.avatar_url.startswith('/static/uploads/avatars/'):
+        old_file_path = os.path.join(app.root_path, user.avatar_url.lstrip('/'))
+        if os.path.exists(old_file_path):
+            try:
+                os.remove(old_file_path)
+            except Exception as e:
+                logger.warning(f"Failed to delete old avatar: {e}")
+    
+    # Update user's avatar URL
+    user.avatar_url = f"/static/uploads/avatars/{unique_filename}"
+    db.session.commit()
+    
+    flash('Avatar uploaded successfully!', 'success')
+    
+    # Log the avatar upload
+    SystemEvent.log_event(
+        event_type='profile_avatar_uploaded',
+        event_category='user',
+        description=f'User {user.username} uploaded a new avatar',
+        user_id=user.id,
+        company_id=user.company_id
+    )
+    
+    return redirect(url_for('profile'))
+
 @app.route('/2fa/setup', methods=['GET', 'POST'])
 @login_required
 def setup_2fa():
@@ -1177,7 +1494,7 @@ def setup_2fa():
     import io
     import base64
 
-    qr_uri = g.user.get_2fa_uri()
+    qr_uri = g.user.get_2fa_uri(issuer_name=g.branding.app_name)
     qr = qrcode.QRCode(version=1, box_size=10, border=5)
     qr.add_data(qr_uri)
     qr.make(fit=True)
@@ -1258,7 +1575,7 @@ def verify_2fa():
                 ip_address=request.remote_addr,
                 user_agent=request.headers.get('User-Agent')
             )
-            
+
             flash('Invalid verification code. Please try again.', 'error')
 
     return render_template('verify_2fa.html', title='Two-Factor Authentication')
@@ -1267,6 +1584,22 @@ def verify_2fa():
 def about():
     return render_template('about.html', title='About')
 
+@app.route('/imprint')
+def imprint():
+    """Display the imprint/legal page if enabled"""
+    branding = BrandingSettings.get_current()
+    
+    # Check if imprint is enabled
+    if not branding or not branding.imprint_enabled:
+        abort(404)
+    
+    title = branding.imprint_title or 'Imprint'
+    content = branding.imprint_content or ''
+    
+    return render_template('imprint.html', 
+                         title=title,
+                         content=content)
+
 @app.route('/contact', methods=['GET', 'POST'])
 @login_required
 def contact():
@@ -1448,7 +1781,7 @@ def delete_entry(entry_id):
 def update_entry(entry_id):
     entry = TimeEntry.query.filter_by(id=entry_id, user_id=session['user_id']).first_or_404()
     data = request.json
-    
+
     if not data:
         return jsonify({'success': False, 'message': 'No JSON data provided'}), 400
 
@@ -1465,7 +1798,7 @@ def update_entry(entry_id):
             # Accept only ISO 8601 format
             departure_time_str = data['departure_time']
             entry.departure_time = datetime.fromisoformat(departure_time_str.replace('Z', '+00:00'))
-            
+
             # Recalculate duration if both times are present
             if entry.arrival_time and entry.departure_time:
                 # Calculate work duration considering breaks
@@ -1921,15 +2254,55 @@ def system_admin_delete_user(user_id):
     username = user.username
     company_name = user.company.name if user.company else 'Unknown'
 
-    # Delete related data first
-    TimeEntry.query.filter_by(user_id=user.id).delete()
-    WorkConfig.query.filter_by(user_id=user.id).delete()
-
-    # Delete the user
-    db.session.delete(user)
-    db.session.commit()
-
-    flash(f'User "{username}" from company "{company_name}" has been deleted.', 'success')
+    try:
+        # Handle dependent records before deleting user
+        # Find an alternative admin/supervisor in the same company to transfer ownership to
+        alternative_admin = User.query.filter(
+            User.company_id == user.company_id,
+            User.role.in_([Role.ADMIN, Role.SUPERVISOR]),
+            User.id != user_id
+        ).first()
+        
+        if alternative_admin:
+            # Transfer ownership of projects to alternative admin
+            Project.query.filter_by(created_by_id=user_id).update({'created_by_id': alternative_admin.id})
+            
+            # Transfer ownership of tasks to alternative admin
+            Task.query.filter_by(created_by_id=user_id).update({'created_by_id': alternative_admin.id})
+            
+            # Transfer ownership of subtasks to alternative admin
+            SubTask.query.filter_by(created_by_id=user_id).update({'created_by_id': alternative_admin.id})
+            
+            # Transfer ownership of project categories to alternative admin
+            ProjectCategory.query.filter_by(created_by_id=user_id).update({'created_by_id': alternative_admin.id})
+        else:
+            # No alternative admin found - redirect to company deletion confirmation
+            flash('No other administrator or supervisor found in the same company. Company deletion required.', 'warning')
+            return redirect(url_for('confirm_company_deletion', user_id=user_id))
+        
+        # Delete user-specific records that can be safely removed
+        TimeEntry.query.filter_by(user_id=user_id).delete()
+        WorkConfig.query.filter_by(user_id=user_id).delete()
+        UserPreferences.query.filter_by(user_id=user_id).delete()
+        
+        # Delete user dashboards (cascades to widgets)
+        UserDashboard.query.filter_by(user_id=user_id).delete()
+        
+        # Clear task and subtask assignments
+        Task.query.filter_by(assigned_to_id=user_id).update({'assigned_to_id': None})
+        SubTask.query.filter_by(assigned_to_id=user_id).update({'assigned_to_id': None})
+        
+        # Now safe to delete the user
+        db.session.delete(user)
+        db.session.commit()
+        
+        flash(f'User "{username}" from company "{company_name}" has been deleted. Projects and tasks transferred to {alternative_admin.username}', 'success')
+        
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error deleting user {user_id}: {str(e)}")
+        flash(f'Error deleting user: {str(e)}', 'error')
+    
     return redirect(url_for('system_admin_users'))
 
 @app.route('/system-admin/companies')
@@ -2116,24 +2489,84 @@ def system_admin_settings():
                          total_users=total_users,
                          total_system_admins=total_system_admins)
 
+@app.route('/system-admin/branding', methods=['GET', 'POST'])
+@system_admin_required
+def system_admin_branding():
+    """System Admin: Branding settings"""
+    if request.method == 'POST':
+        branding = BrandingSettings.get_current()
+        
+        # Handle form data
+        branding.app_name = request.form.get('app_name', g.branding.app_name).strip()
+        branding.logo_alt_text = request.form.get('logo_alt_text', '').strip()
+        branding.primary_color = request.form.get('primary_color', '#007bff').strip()
+        
+        # Handle imprint settings
+        branding.imprint_enabled = 'imprint_enabled' in request.form
+        branding.imprint_title = request.form.get('imprint_title', 'Imprint').strip()
+        branding.imprint_content = request.form.get('imprint_content', '').strip()
+        
+        branding.updated_by_id = g.user.id
+        
+        # Handle logo upload
+        if 'logo_file' in request.files:
+            logo_file = request.files['logo_file']
+            if logo_file and logo_file.filename:
+                # Create uploads directory if it doesn't exist
+                upload_dir = os.path.join(app.static_folder, 'uploads', 'branding')
+                os.makedirs(upload_dir, exist_ok=True)
+                
+                # Save the file with a timestamp to avoid conflicts
+                import time
+                filename = f"logo_{int(time.time())}_{logo_file.filename}"
+                logo_path = os.path.join(upload_dir, filename)
+                logo_file.save(logo_path)
+                branding.logo_filename = filename
+        
+        # Handle favicon upload
+        if 'favicon_file' in request.files:
+            favicon_file = request.files['favicon_file']
+            if favicon_file and favicon_file.filename:
+                # Create uploads directory if it doesn't exist
+                upload_dir = os.path.join(app.static_folder, 'uploads', 'branding')
+                os.makedirs(upload_dir, exist_ok=True)
+                
+                # Save the file with a timestamp to avoid conflicts
+                import time
+                filename = f"favicon_{int(time.time())}_{favicon_file.filename}"
+                favicon_path = os.path.join(upload_dir, filename)
+                favicon_file.save(favicon_path)
+                branding.favicon_filename = filename
+        
+        db.session.commit()
+        flash('Branding settings updated successfully.', 'success')
+        return redirect(url_for('system_admin_branding'))
+    
+    # Get current branding settings
+    branding = BrandingSettings.get_current()
+    
+    return render_template('system_admin_branding.html',
+                         title='System Administrator - Branding Settings',
+                         branding=branding)
+
 @app.route('/system-admin/health')
-@system_admin_required  
+@system_admin_required
 def system_admin_health():
     """System Admin: System health check and event log"""
     # Get system health summary
     health_summary = SystemEvent.get_system_health_summary()
-    
+
     # Get recent events (last 7 days)
     recent_events = SystemEvent.get_recent_events(days=7, limit=100)
-    
+
     # Get events by severity for quick stats
     errors = SystemEvent.get_events_by_severity('error', days=7, limit=20)
     warnings = SystemEvent.get_events_by_severity('warning', days=7, limit=20)
-    
+
     # System metrics
     from datetime import datetime, timedelta
     now = datetime.now()
-    
+
     # Database connection test
     db_healthy = True
     db_error = None
@@ -2148,18 +2581,18 @@ def system_admin_health():
             'system',
             'error'
         )
-    
+
     # Application uptime (approximate based on first event)
     first_event = SystemEvent.query.order_by(SystemEvent.timestamp.asc()).first()
     uptime_start = first_event.timestamp if first_event else now
     uptime_duration = now - uptime_start
-    
+
     # Recent activity stats
     today = now.date()
     today_events = SystemEvent.query.filter(
         func.date(SystemEvent.timestamp) == today
     ).count()
-    
+
     # Log the health check
     SystemEvent.log_event(
         'system_health_check',
@@ -2170,7 +2603,7 @@ def system_admin_health():
         ip_address=request.remote_addr,
         user_agent=request.headers.get('User-Agent')
     )
-    
+
     return render_template('system_admin_health.html',
                          title='System Health Check',
                          health_summary=health_summary,
@@ -2188,10 +2621,10 @@ def system_admin_announcements():
     """System Admin: Manage announcements"""
     page = request.args.get('page', 1, type=int)
     per_page = 20
-    
+
     announcements = Announcement.query.order_by(Announcement.created_at.desc()).paginate(
         page=page, per_page=per_page, error_out=False)
-    
+
     return render_template('system_admin_announcements.html',
                          title='System Admin - Announcements',
                          announcements=announcements)
@@ -2206,43 +2639,43 @@ def system_admin_announcement_new():
         announcement_type = request.form.get('announcement_type', 'info')
         is_urgent = request.form.get('is_urgent') == 'on'
         is_active = request.form.get('is_active') == 'on'
-        
+
         # Handle date fields
         start_date = request.form.get('start_date')
         end_date = request.form.get('end_date')
-        
+
         start_datetime = None
         end_datetime = None
-        
+
         if start_date:
             try:
                 start_datetime = datetime.strptime(start_date, '%Y-%m-%dT%H:%M')
             except ValueError:
                 pass
-        
+
         if end_date:
             try:
                 end_datetime = datetime.strptime(end_date, '%Y-%m-%dT%H:%M')
             except ValueError:
                 pass
-        
+
         # Handle targeting
         target_all_users = request.form.get('target_all_users') == 'on'
         target_roles = None
         target_companies = None
-        
+
         if not target_all_users:
             selected_roles = request.form.getlist('target_roles')
             selected_companies = request.form.getlist('target_companies')
-            
+
             if selected_roles:
                 import json
                 target_roles = json.dumps(selected_roles)
-            
+
             if selected_companies:
                 import json
                 target_companies = json.dumps([int(c) for c in selected_companies])
-        
+
         announcement = Announcement(
             title=title,
             content=content,
@@ -2256,17 +2689,17 @@ def system_admin_announcement_new():
             target_companies=target_companies,
             created_by_id=g.user.id
         )
-        
+
         db.session.add(announcement)
         db.session.commit()
-        
+
         flash('Announcement created successfully.', 'success')
         return redirect(url_for('system_admin_announcements'))
-    
+
     # Get roles and companies for targeting options
     roles = [role.value for role in Role]
     companies = Company.query.order_by(Company.name).all()
-    
+
     return render_template('system_admin_announcement_form.html',
                          title='Create Announcement',
                          announcement=None,
@@ -2278,18 +2711,18 @@ def system_admin_announcement_new():
 def system_admin_announcement_edit(id):
     """System Admin: Edit announcement"""
     announcement = Announcement.query.get_or_404(id)
-    
+
     if request.method == 'POST':
         announcement.title = request.form.get('title')
         announcement.content = request.form.get('content')
         announcement.announcement_type = request.form.get('announcement_type', 'info')
         announcement.is_urgent = request.form.get('is_urgent') == 'on'
         announcement.is_active = request.form.get('is_active') == 'on'
-        
+
         # Handle date fields
         start_date = request.form.get('start_date')
         end_date = request.form.get('end_date')
-        
+
         if start_date:
             try:
                 announcement.start_date = datetime.strptime(start_date, '%Y-%m-%dT%H:%M')
@@ -2297,7 +2730,7 @@ def system_admin_announcement_edit(id):
                 announcement.start_date = None
         else:
             announcement.start_date = None
-        
+
         if end_date:
             try:
                 announcement.end_date = datetime.strptime(end_date, '%Y-%m-%dT%H:%M')
@@ -2305,20 +2738,20 @@ def system_admin_announcement_edit(id):
                 announcement.end_date = None
         else:
             announcement.end_date = None
-        
+
         # Handle targeting
         announcement.target_all_users = request.form.get('target_all_users') == 'on'
-        
+
         if not announcement.target_all_users:
             selected_roles = request.form.getlist('target_roles')
             selected_companies = request.form.getlist('target_companies')
-            
+
             if selected_roles:
                 import json
                 announcement.target_roles = json.dumps(selected_roles)
             else:
                 announcement.target_roles = None
-            
+
             if selected_companies:
                 import json
                 announcement.target_companies = json.dumps([int(c) for c in selected_companies])
@@ -2327,18 +2760,18 @@ def system_admin_announcement_edit(id):
         else:
             announcement.target_roles = None
             announcement.target_companies = None
-        
+
         announcement.updated_at = datetime.now()
-        
+
         db.session.commit()
-        
+
         flash('Announcement updated successfully.', 'success')
         return redirect(url_for('system_admin_announcements'))
-    
+
     # Get roles and companies for targeting options
     roles = [role.value for role in Role]
     companies = Company.query.order_by(Company.name).all()
-    
+
     return render_template('system_admin_announcement_form.html',
                          title='Edit Announcement',
                          announcement=announcement,
@@ -2350,10 +2783,10 @@ def system_admin_announcement_edit(id):
 def system_admin_announcement_delete(id):
     """System Admin: Delete announcement"""
     announcement = Announcement.query.get_or_404(id)
-    
+
     db.session.delete(announcement)
     db.session.commit()
-    
+
     flash('Announcement deleted successfully.', 'success')
     return redirect(url_for('system_admin_announcements'))
 
@@ -3098,6 +3531,13 @@ def analytics_data():
         # Format data based on view type
         if view_type == 'graph':
             formatted_data = format_graph_data(data, granularity)
+            # For burndown chart, we need task data instead of time entries
+            chart_type = request.args.get('chart_type', 'timeSeries')
+            if chart_type == 'burndown':
+                # Get tasks for burndown chart
+                tasks = get_filtered_tasks_for_burndown(g.user, mode, start_date, end_date, project_filter)
+                burndown_data = format_burndown_data(tasks, start_date, end_date)
+                formatted_data.update(burndown_data)
         elif view_type == 'team':
             formatted_data = format_team_data(data, granularity)
         else:
@@ -3141,6 +3581,48 @@ def get_filtered_analytics_data(user, mode, start_date=None, end_date=None, proj
     return query.order_by(TimeEntry.arrival_time.desc()).all()
 
 
+def get_filtered_tasks_for_burndown(user, mode, start_date=None, end_date=None, project_filter=None):
+    """Get filtered tasks for burndown chart"""
+    # Base query - get tasks from user's company
+    query = Task.query.join(Project).filter(Project.company_id == user.company_id)
+    
+    # Apply user/team filter
+    if mode == 'personal':
+        # For personal mode, get tasks assigned to the user or created by them
+        query = query.filter(
+            (Task.assigned_to_id == user.id) | 
+            (Task.created_by_id == user.id)
+        )
+    elif mode == 'team' and user.team_id:
+        # For team mode, get tasks from projects assigned to the team
+        query = query.filter(Project.team_id == user.team_id)
+    
+    # Apply project filter
+    if project_filter:
+        if project_filter == 'none':
+            # No project filter for tasks - they must belong to a project
+            return []
+        else:
+            try:
+                project_id = int(project_filter)
+                query = query.filter(Task.project_id == project_id)
+            except ValueError:
+                pass
+    
+    # Apply date filters - use task creation date and completion date
+    if start_date:
+        query = query.filter(
+            (Task.created_at >= datetime.combine(start_date, time.min)) |
+            (Task.completed_date >= start_date)
+        )
+    if end_date:
+        query = query.filter(
+            Task.created_at <= datetime.combine(end_date, time.max)
+        )
+    
+    return query.order_by(Task.created_at.desc()).all()
+
+
 @app.route('/api/companies/<int:company_id>/teams')
 @system_admin_required
 def api_company_teams(company_id):
@@ -3392,6 +3874,115 @@ def manage_project_tasks(project_id):
                          tasks=tasks,
                          team_members=team_members)
 
+
+
+# Unified Task Management Route
+@app.route('/tasks')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def unified_task_management():
+    """Unified task management interface"""
+    
+    # Get all projects the user has access to (for filtering and task creation)
+    if g.user.role in [Role.ADMIN, Role.SUPERVISOR]:
+        # Admins and Supervisors can see all company projects
+        available_projects = Project.query.filter_by(
+            company_id=g.user.company_id, 
+            is_active=True
+        ).order_by(Project.name).all()
+    elif g.user.team_id:
+        # Team members see team projects + unassigned projects
+        available_projects = Project.query.filter(
+            Project.company_id == g.user.company_id,
+            Project.is_active == True,
+            db.or_(Project.team_id == g.user.team_id, Project.team_id == None)
+        ).order_by(Project.name).all()
+        # Filter by actual access permissions
+        available_projects = [p for p in available_projects if p.is_user_allowed(g.user)]
+    else:
+        # Unassigned users see only unassigned projects
+        available_projects = Project.query.filter_by(
+            company_id=g.user.company_id,
+            team_id=None,
+            is_active=True
+        ).order_by(Project.name).all()
+        available_projects = [p for p in available_projects if p.is_user_allowed(g.user)]
+    
+    # Get team members for task assignment (company-scoped)
+    if g.user.role in [Role.ADMIN, Role.SUPERVISOR]:
+        # Admins can assign to anyone in the company
+        team_members = User.query.filter_by(
+            company_id=g.user.company_id,
+            is_blocked=False
+        ).order_by(User.username).all()
+    elif g.user.team_id:
+        # Team members can assign to team members + supervisors/admins
+        team_members = User.query.filter(
+            User.company_id == g.user.company_id,
+            User.is_blocked == False,
+            db.or_(
+                User.team_id == g.user.team_id,
+                User.role.in_([Role.ADMIN, Role.SUPERVISOR])
+            )
+        ).order_by(User.username).all()
+    else:
+        # Unassigned users can assign to supervisors/admins only
+        team_members = User.query.filter(
+            User.company_id == g.user.company_id,
+            User.is_blocked == False,
+            User.role.in_([Role.ADMIN, Role.SUPERVISOR])
+        ).order_by(User.username).all()
+    
+    # Convert team members to JSON-serializable format
+    team_members_data = [{
+        'id': member.id,
+        'username': member.username,
+        'email': member.email,
+        'role': member.role.value if member.role else 'Team Member',
+        'avatar_url': member.get_avatar_url(32)
+    } for member in team_members]
+    
+    return render_template('unified_task_management.html',
+                         title='Task Management',
+                         available_projects=available_projects,
+                         team_members=team_members_data)
+
+# Sprint Management Route
+@app.route('/sprints')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def sprint_management():
+    """Sprint management interface"""
+    
+    # Get all projects the user has access to (for sprint assignment)
+    if g.user.role in [Role.ADMIN, Role.SUPERVISOR]:
+        # Admins and Supervisors can see all company projects
+        available_projects = Project.query.filter_by(
+            company_id=g.user.company_id, 
+            is_active=True
+        ).order_by(Project.name).all()
+    elif g.user.team_id:
+        # Team members see team projects + unassigned projects
+        available_projects = Project.query.filter(
+            Project.company_id == g.user.company_id,
+            Project.is_active == True,
+            db.or_(Project.team_id == g.user.team_id, Project.team_id == None)
+        ).order_by(Project.name).all()
+        # Filter by actual access permissions
+        available_projects = [p for p in available_projects if p.is_user_allowed(g.user)]
+    else:
+        # Unassigned users see only unassigned projects
+        available_projects = Project.query.filter_by(
+            company_id=g.user.company_id,
+            team_id=None,
+            is_active=True
+        ).order_by(Project.name).all()
+        available_projects = [p for p in available_projects if p.is_user_allowed(g.user)]
+    
+    return render_template('sprint_management.html',
+                         title='Sprint Management',
+                         available_projects=available_projects)
+
 # Task API Routes
 @app.route('/api/tasks', methods=['POST'])
 @role_required(Role.TEAM_MEMBER)
@@ -3419,15 +4010,20 @@ def create_task():
         if data.get('due_date'):
             due_date = datetime.strptime(data.get('due_date'), '%Y-%m-%d').date()
 
+        # Generate task number
+        task_number = Task.generate_task_number(g.user.company_id)
+        
         # Create task
         task = Task(
+            task_number=task_number,
             name=name,
             description=data.get('description', ''),
-            status=TaskStatus(data.get('status', 'Not Started')),
-            priority=TaskPriority(data.get('priority', 'Medium')),
+            status=TaskStatus[data.get('status', 'NOT_STARTED')],
+            priority=TaskPriority[data.get('priority', 'MEDIUM')],
             estimated_hours=float(data.get('estimated_hours')) if data.get('estimated_hours') else None,
             project_id=project_id,
             assigned_to_id=int(data.get('assigned_to_id')) if data.get('assigned_to_id') else None,
+            sprint_id=int(data.get('sprint_id')) if data.get('sprint_id') else None,
             start_date=start_date,
             due_date=due_date,
             created_by_id=g.user.id
@@ -3436,7 +4032,14 @@ def create_task():
         db.session.add(task)
         db.session.commit()
 
-        return jsonify({'success': True, 'message': 'Task created successfully'})
+        return jsonify({
+            'success': True, 
+            'message': 'Task created successfully',
+            'task': {
+                'id': task.id,
+                'task_number': task.task_number
+            }
+        })
 
     except Exception as e:
         db.session.rollback()
@@ -3457,17 +4060,33 @@ def get_task(task_id):
 
         task_data = {
             'id': task.id,
+            'task_number': getattr(task, 'task_number', f'TSK-{task.id:03d}'),
             'name': task.name,
             'description': task.description,
-            'status': task.status.value,
-            'priority': task.priority.value,
+            'status': task.status.name,
+            'priority': task.priority.name,
             'estimated_hours': task.estimated_hours,
             'assigned_to_id': task.assigned_to_id,
+            'assigned_to_name': task.assigned_to.username if task.assigned_to else None,
+            'project_id': task.project_id,
+            'project_name': task.project.name if task.project else None,
+            'project_code': task.project.code if task.project else None,
             'start_date': task.start_date.isoformat() if task.start_date else None,
-            'due_date': task.due_date.isoformat() if task.due_date else None
+            'due_date': task.due_date.isoformat() if task.due_date else None,
+            'completed_date': task.completed_date.isoformat() if task.completed_date else None,
+            'archived_date': task.archived_date.isoformat() if task.archived_date else None,
+            'sprint_id': task.sprint_id,
+            'subtasks': [{
+                'id': subtask.id,
+                'name': subtask.name,
+                'status': subtask.status.name,
+                'priority': subtask.priority.name,
+                'assigned_to_id': subtask.assigned_to_id,
+                'assigned_to_name': subtask.assigned_to.username if subtask.assigned_to else None
+            } for subtask in task.subtasks] if task.subtasks else []
         }
 
-        return jsonify({'success': True, 'task': task_data})
+        return jsonify(task_data)
 
     except Exception as e:
         return jsonify({'success': False, 'message': str(e)})
@@ -3493,17 +4112,19 @@ def update_task(task_id):
         if 'description' in data:
             task.description = data['description']
         if 'status' in data:
-            task.status = TaskStatus(data['status'])
-            if data['status'] == 'Completed':
+            task.status = TaskStatus[data['status']]
+            if data['status'] == 'COMPLETED':
                 task.completed_date = datetime.now().date()
             else:
                 task.completed_date = None
         if 'priority' in data:
-            task.priority = TaskPriority(data['priority'])
+            task.priority = TaskPriority[data['priority']]
         if 'estimated_hours' in data:
             task.estimated_hours = float(data['estimated_hours']) if data['estimated_hours'] else None
         if 'assigned_to_id' in data:
             task.assigned_to_id = int(data['assigned_to_id']) if data['assigned_to_id'] else None
+        if 'sprint_id' in data:
+            task.sprint_id = int(data['sprint_id']) if data['sprint_id'] else None
         if 'start_date' in data:
             task.start_date = datetime.strptime(data['start_date'], '%Y-%m-%d').date() if data['start_date'] else None
         if 'due_date' in data:
@@ -3539,16 +4160,89 @@ def delete_task(task_id):
         db.session.rollback()
         return jsonify({'success': False, 'message': str(e)})
 
-# Subtask API Routes
-@app.route('/api/subtasks', methods=['POST'])
+# Unified Task Management APIs
+@app.route('/api/tasks/unified')
 @role_required(Role.TEAM_MEMBER)
 @company_required
-def create_subtask():
+def get_unified_tasks():
+    """Get all tasks for unified task view"""
     try:
-        data = request.get_json()
-        task_id = data.get('task_id')
+        # Base query for tasks in user's company
+        query = Task.query.join(Project).filter(Project.company_id == g.user.company_id)
+        
+        # Apply access restrictions based on user role and team
+        if g.user.role not in [Role.ADMIN, Role.SUPERVISOR]:
+            # Regular users can only see tasks from projects they have access to
+            accessible_project_ids = []
+            projects = Project.query.filter_by(company_id=g.user.company_id).all()
+            for project in projects:
+                if project.is_user_allowed(g.user):
+                    accessible_project_ids.append(project.id)
+            
+            if accessible_project_ids:
+                query = query.filter(Task.project_id.in_(accessible_project_ids))
+            else:
+                # No accessible projects, return empty list
+                return jsonify({'success': True, 'tasks': []})
+        
+        tasks = query.order_by(Task.created_at.desc()).all()
+        
+        task_list = []
+        for task in tasks:
+            # Determine if this is a team task
+            is_team_task = (
+                g.user.team_id and 
+                task.project and 
+                task.project.team_id == g.user.team_id
+            )
+            
+            task_data = {
+                'id': task.id,
+                'task_number': getattr(task, 'task_number', f'TSK-{task.id:03d}'),  # Fallback for existing tasks
+                'name': task.name,
+                'description': task.description,
+                'status': task.status.name,
+                'priority': task.priority.name,
+                'estimated_hours': task.estimated_hours,
+                'project_id': task.project_id,
+                'project_name': task.project.name if task.project else None,
+                'project_code': task.project.code if task.project else None,
+                'assigned_to_id': task.assigned_to_id,
+                'assigned_to_name': task.assigned_to.username if task.assigned_to else None,
+                'created_by_id': task.created_by_id,
+                'created_by_name': task.created_by.username if task.created_by else None,
+                'start_date': task.start_date.isoformat() if task.start_date else None,
+                'due_date': task.due_date.isoformat() if task.due_date else None,
+                'completed_date': task.completed_date.isoformat() if task.completed_date else None,
+                'created_at': task.created_at.isoformat(),
+                'is_team_task': is_team_task,
+                'subtask_count': len(task.subtasks) if task.subtasks else 0,
+                'subtasks': [{
+                    'id': subtask.id,
+                    'name': subtask.name,
+                    'status': subtask.status.name,
+                    'priority': subtask.priority.name,
+                    'assigned_to_id': subtask.assigned_to_id,
+                    'assigned_to_name': subtask.assigned_to.username if subtask.assigned_to else None
+                } for subtask in task.subtasks] if task.subtasks else [],
+                'sprint_id': task.sprint_id,
+                'sprint_name': task.sprint.name if task.sprint else None,
+                'is_current_sprint': task.sprint.is_current if task.sprint else False
+            }
+            task_list.append(task_data)
+        
+        return jsonify({'success': True, 'tasks': task_list})
+        
+    except Exception as e:
+        logger.error(f"Error in get_unified_tasks: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
 
-        # Verify task access
+@app.route('/api/tasks/<int:task_id>/status', methods=['PUT'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def update_task_status(task_id):
+    """Update task status"""
+    try:
         task = Task.query.join(Project).filter(
             Task.id == task_id,
             Project.company_id == g.user.company_id
@@ -3557,135 +4251,898 @@ def create_subtask():
         if not task or not task.can_user_access(g.user):
             return jsonify({'success': False, 'message': 'Task not found or access denied'})
 
-        # Validate required fields
-        name = data.get('name')
-        if not name:
-            return jsonify({'success': False, 'message': 'Subtask name is required'})
-
-        # Parse dates
-        start_date = None
-        due_date = None
-        if data.get('start_date'):
-            start_date = datetime.strptime(data.get('start_date'), '%Y-%m-%d').date()
-        if data.get('due_date'):
-            due_date = datetime.strptime(data.get('due_date'), '%Y-%m-%d').date()
-
-        # Create subtask
-        subtask = SubTask(
-            name=name,
-            description=data.get('description', ''),
-            status=TaskStatus(data.get('status', 'Not Started')),
-            priority=TaskPriority(data.get('priority', 'Medium')),
-            estimated_hours=float(data.get('estimated_hours')) if data.get('estimated_hours') else None,
-            task_id=task_id,
-            assigned_to_id=int(data.get('assigned_to_id')) if data.get('assigned_to_id') else None,
-            start_date=start_date,
-            due_date=due_date,
-            created_by_id=g.user.id
-        )
-
-        db.session.add(subtask)
+        data = request.get_json()
+        new_status = data.get('status')
+        
+        if not new_status:
+            return jsonify({'success': False, 'message': 'Status is required'})
+        
+        # Validate status value - convert from enum name to enum object
+        try:
+            task_status = TaskStatus[new_status]
+        except KeyError:
+            return jsonify({'success': False, 'message': 'Invalid status value'})
+        
+        # Update task status
+        old_status = task.status
+        task.status = task_status
+        
+        # Set completion date if status is COMPLETED
+        if task_status == TaskStatus.COMPLETED:
+            task.completed_date = datetime.now().date()
+        elif old_status == TaskStatus.COMPLETED:
+            # Clear completion date if moving away from completed
+            task.completed_date = None
+        
+        # Set archived date if status is ARCHIVED
+        if task_status == TaskStatus.ARCHIVED:
+            task.archived_date = datetime.now().date()
+        elif old_status == TaskStatus.ARCHIVED:
+            # Clear archived date if moving away from archived
+            task.archived_date = None
+        
         db.session.commit()
-
-        return jsonify({'success': True, 'message': 'Subtask created successfully'})
-
+        
+        return jsonify({
+            'success': True, 
+            'message': 'Task status updated successfully',
+            'old_status': old_status.name,
+            'new_status': task_status.name
+        })
+        
     except Exception as e:
         db.session.rollback()
+        logger.error(f"Error updating task status: {str(e)}")
         return jsonify({'success': False, 'message': str(e)})
 
-@app.route('/api/subtasks/<int:subtask_id>', methods=['GET'])
+
+# Task Dependencies APIs
+@app.route('/api/tasks/<int:task_id>/dependencies')
 @role_required(Role.TEAM_MEMBER)
 @company_required
-def get_subtask(subtask_id):
+def get_task_dependencies(task_id):
+    """Get dependencies for a specific task"""
     try:
-        subtask = SubTask.query.join(Task).join(Project).filter(
-            SubTask.id == subtask_id,
-            Project.company_id == g.user.company_id
-        ).first()
-
-        if not subtask or not subtask.can_user_access(g.user):
-            return jsonify({'success': False, 'message': 'Subtask not found or access denied'})
-
-        subtask_data = {
-            'id': subtask.id,
-            'name': subtask.name,
-            'description': subtask.description,
-            'status': subtask.status.value,
-            'priority': subtask.priority.value,
-            'estimated_hours': subtask.estimated_hours,
-            'assigned_to_id': subtask.assigned_to_id,
-            'start_date': subtask.start_date.isoformat() if subtask.start_date else None,
-            'due_date': subtask.due_date.isoformat() if subtask.due_date else None
-        }
-
-        return jsonify({'success': True, 'subtask': subtask_data})
-
+        # Get the task and verify ownership
+        task = Task.query.filter_by(id=task_id, company_id=g.user.company_id).first()
+        if not task:
+            return jsonify({'success': False, 'message': 'Task not found'})
+        
+        # Get blocked by dependencies (tasks that block this one)
+        blocked_by_query = db.session.query(Task).join(
+            TaskDependency, Task.id == TaskDependency.blocking_task_id
+        ).filter(TaskDependency.blocked_task_id == task_id)
+        
+        # Get blocks dependencies (tasks that this one blocks)
+        blocks_query = db.session.query(Task).join(
+            TaskDependency, Task.id == TaskDependency.blocked_task_id
+        ).filter(TaskDependency.blocking_task_id == task_id)
+        
+        blocked_by_tasks = blocked_by_query.all()
+        blocks_tasks = blocks_query.all()
+        
+        def task_to_dict(t):
+            return {
+                'id': t.id,
+                'name': t.name,
+                'task_number': t.task_number
+            }
+        
+        return jsonify({
+            'success': True,
+            'dependencies': {
+                'blocked_by': [task_to_dict(t) for t in blocked_by_tasks],
+                'blocks': [task_to_dict(t) for t in blocks_tasks]
+            }
+        })
+        
     except Exception as e:
+        logger.error(f"Error getting task dependencies: {str(e)}")
         return jsonify({'success': False, 'message': str(e)})
 
-@app.route('/api/subtasks/<int:subtask_id>', methods=['PUT'])
+
+@app.route('/api/tasks/<int:task_id>/dependencies', methods=['POST'])
 @role_required(Role.TEAM_MEMBER)
 @company_required
-def update_subtask(subtask_id):
+def add_task_dependency(task_id):
+    """Add a dependency for a task"""
     try:
-        subtask = SubTask.query.join(Task).join(Project).filter(
-            SubTask.id == subtask_id,
-            Project.company_id == g.user.company_id
+        data = request.get_json()
+        task_number = data.get('task_number')
+        dependency_type = data.get('type')  # 'blocked_by' or 'blocks'
+        
+        if not task_number or not dependency_type:
+            return jsonify({'success': False, 'message': 'Task number and type are required'})
+        
+        # Get the main task
+        task = Task.query.filter_by(id=task_id, company_id=g.user.company_id).first()
+        if not task:
+            return jsonify({'success': False, 'message': 'Task not found'})
+        
+        # Find the dependency task by task number
+        dependency_task = Task.query.filter_by(
+            task_number=task_number, 
+            company_id=g.user.company_id
+        ).first()
+        
+        if not dependency_task:
+            return jsonify({'success': False, 'message': f'Task {task_number} not found'})
+        
+        # Prevent self-dependency
+        if dependency_task.id == task_id:
+            return jsonify({'success': False, 'message': 'A task cannot depend on itself'})
+        
+        # Create the dependency based on type
+        if dependency_type == 'blocked_by':
+            # Current task is blocked by the dependency task
+            blocked_task_id = task_id
+            blocking_task_id = dependency_task.id
+        elif dependency_type == 'blocks':
+            # Current task blocks the dependency task
+            blocked_task_id = dependency_task.id
+            blocking_task_id = task_id
+        else:
+            return jsonify({'success': False, 'message': 'Invalid dependency type'})
+        
+        # Check if dependency already exists
+        existing_dep = TaskDependency.query.filter_by(
+            blocked_task_id=blocked_task_id,
+            blocking_task_id=blocking_task_id
         ).first()
+        
+        if existing_dep:
+            return jsonify({'success': False, 'message': 'This dependency already exists'})
+        
+        # Check for circular dependencies
+        def would_create_cycle(blocked_id, blocking_id):
+            # Use a simple DFS to check if adding this dependency would create a cycle
+            visited = set()
+            
+            def dfs(current_blocked_id):
+                if current_blocked_id in visited:
+                    return False
+                visited.add(current_blocked_id)
+                
+                # If we reach the original blocking task, we have a cycle
+                if current_blocked_id == blocking_id:
+                    return True
+                
+                # Check all tasks that block the current task
+                dependencies = TaskDependency.query.filter_by(blocked_task_id=current_blocked_id).all()
+                for dep in dependencies:
+                    if dfs(dep.blocking_task_id):
+                        return True
+                
+                return False
+            
+            return dfs(blocked_id)
+        
+        if would_create_cycle(blocked_task_id, blocking_task_id):
+            return jsonify({'success': False, 'message': 'This dependency would create a circular dependency'})
+        
+        # Create the new dependency
+        new_dependency = TaskDependency(
+            blocked_task_id=blocked_task_id,
+            blocking_task_id=blocking_task_id
+        )
+        
+        db.session.add(new_dependency)
+        db.session.commit()
+        
+        return jsonify({'success': True, 'message': 'Dependency added successfully'})
+        
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error adding task dependency: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
 
-        if not subtask or not subtask.can_user_access(g.user):
-            return jsonify({'success': False, 'message': 'Subtask not found or access denied'})
 
+@app.route('/api/tasks/<int:task_id>/dependencies/<int:dependency_task_id>', methods=['DELETE'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def remove_task_dependency(task_id, dependency_task_id):
+    """Remove a dependency for a task"""
+    try:
         data = request.get_json()
-
-        # Update subtask fields
-        if 'name' in data:
-            subtask.name = data['name']
-        if 'description' in data:
-            subtask.description = data['description']
-        if 'status' in data:
-            subtask.status = TaskStatus(data['status'])
-            if data['status'] == 'Completed':
-                subtask.completed_date = datetime.now().date()
-            else:
-                subtask.completed_date = None
-        if 'priority' in data:
-            subtask.priority = TaskPriority(data['priority'])
-        if 'estimated_hours' in data:
-            subtask.estimated_hours = float(data['estimated_hours']) if data['estimated_hours'] else None
-        if 'assigned_to_id' in data:
-            subtask.assigned_to_id = int(data['assigned_to_id']) if data['assigned_to_id'] else None
-        if 'start_date' in data:
-            subtask.start_date = datetime.strptime(data['start_date'], '%Y-%m-%d').date() if data['start_date'] else None
-        if 'due_date' in data:
-            subtask.due_date = datetime.strptime(data['due_date'], '%Y-%m-%d').date() if data['due_date'] else None
-
+        dependency_type = data.get('type')  # 'blocked_by' or 'blocks'
+        
+        if not dependency_type:
+            return jsonify({'success': False, 'message': 'Dependency type is required'})
+        
+        # Get the main task
+        task = Task.query.filter_by(id=task_id, company_id=g.user.company_id).first()
+        if not task:
+            return jsonify({'success': False, 'message': 'Task not found'})
+        
+        # Determine which dependency to remove based on type
+        if dependency_type == 'blocked_by':
+            # Remove dependency where current task is blocked by dependency_task_id
+            dependency = TaskDependency.query.filter_by(
+                blocked_task_id=task_id,
+                blocking_task_id=dependency_task_id
+            ).first()
+        elif dependency_type == 'blocks':
+            # Remove dependency where current task blocks dependency_task_id
+            dependency = TaskDependency.query.filter_by(
+                blocked_task_id=dependency_task_id,
+                blocking_task_id=task_id
+            ).first()
+        else:
+            return jsonify({'success': False, 'message': 'Invalid dependency type'})
+        
+        if not dependency:
+            return jsonify({'success': False, 'message': 'Dependency not found'})
+        
+        db.session.delete(dependency)
         db.session.commit()
-
-        return jsonify({'success': True, 'message': 'Subtask updated successfully'})
-
+        
+        return jsonify({'success': True, 'message': 'Dependency removed successfully'})
+        
     except Exception as e:
         db.session.rollback()
+        logger.error(f"Error removing task dependency: {str(e)}")
         return jsonify({'success': False, 'message': str(e)})
 
-@app.route('/api/subtasks/<int:subtask_id>', methods=['DELETE'])
-@role_required(Role.TEAM_LEADER)  # Only team leaders and above can delete subtasks
+
+# Task Archive/Restore APIs
+@app.route('/api/tasks/<int:task_id>/archive', methods=['POST'])
+@role_required(Role.TEAM_MEMBER)
 @company_required
-def delete_subtask(subtask_id):
+def archive_task(task_id):
+    """Archive a completed task"""
     try:
-        subtask = SubTask.query.join(Task).join(Project).filter(
-            SubTask.id == subtask_id,
+        # Get the task and verify ownership through project
+        task = Task.query.join(Project).filter(
+            Task.id == task_id,
+            Project.company_id == g.user.company_id
+        ).first()
+        if not task:
+            return jsonify({'success': False, 'message': 'Task not found'})
+        
+        # Only allow archiving completed tasks
+        if task.status != TaskStatus.COMPLETED:
+            return jsonify({'success': False, 'message': 'Only completed tasks can be archived'})
+        
+        # Archive the task
+        task.status = TaskStatus.ARCHIVED
+        task.archived_date = datetime.now().date()
+        
+        db.session.commit()
+        
+        return jsonify({
+            'success': True, 
+            'message': 'Task archived successfully',
+            'archived_date': task.archived_date.isoformat()
+        })
+        
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error archiving task: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
+
+@app.route('/api/tasks/<int:task_id>/restore', methods=['POST'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def restore_task(task_id):
+    """Restore an archived task to completed status"""
+    try:
+        # Get the task and verify ownership through project
+        task = Task.query.join(Project).filter(
+            Task.id == task_id,
+            Project.company_id == g.user.company_id
+        ).first()
+        if not task:
+            return jsonify({'success': False, 'message': 'Task not found'})
+        
+        # Only allow restoring archived tasks
+        if task.status != TaskStatus.ARCHIVED:
+            return jsonify({'success': False, 'message': 'Only archived tasks can be restored'})
+        
+        # Restore the task to completed status
+        task.status = TaskStatus.COMPLETED
+        task.archived_date = None
+        
+        db.session.commit()
+        
+        return jsonify({
+            'success': True, 
+            'message': 'Task restored successfully'
+        })
+        
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error restoring task: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
+
+# Sprint Management APIs
+@app.route('/api/sprints')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def get_sprints():
+    """Get all sprints for the user's company"""
+    try:
+        # Base query for sprints in user's company
+        query = Sprint.query.filter(Sprint.company_id == g.user.company_id)
+        
+        # Apply access restrictions based on user role and team
+        if g.user.role not in [Role.ADMIN, Role.SUPERVISOR]:
+            # Regular users can only see sprints they have access to
+            accessible_sprint_ids = []
+            sprints = query.all()
+            for sprint in sprints:
+                if sprint.can_user_access(g.user):
+                    accessible_sprint_ids.append(sprint.id)
+            
+            if accessible_sprint_ids:
+                query = query.filter(Sprint.id.in_(accessible_sprint_ids))
+            else:
+                # No accessible sprints, return empty list
+                return jsonify({'success': True, 'sprints': []})
+        
+        sprints = query.order_by(Sprint.created_at.desc()).all()
+        
+        sprint_list = []
+        for sprint in sprints:
+            task_summary = sprint.get_task_summary()
+            
+            sprint_data = {
+                'id': sprint.id,
+                'name': sprint.name,
+                'description': sprint.description,
+                'status': sprint.status.name,
+                'company_id': sprint.company_id,
+                'project_id': sprint.project_id,
+                'project_name': sprint.project.name if sprint.project else None,
+                'project_code': sprint.project.code if sprint.project else None,
+                'start_date': sprint.start_date.isoformat(),
+                'end_date': sprint.end_date.isoformat(),
+                'goal': sprint.goal,
+                'capacity_hours': sprint.capacity_hours,
+                'created_by_id': sprint.created_by_id,
+                'created_by_name': sprint.created_by.username if sprint.created_by else None,
+                'created_at': sprint.created_at.isoformat(),
+                'is_current': sprint.is_current,
+                'duration_days': sprint.duration_days,
+                'days_remaining': sprint.days_remaining,
+                'progress_percentage': sprint.progress_percentage,
+                'task_summary': task_summary
+            }
+            sprint_list.append(sprint_data)
+        
+        return jsonify({'success': True, 'sprints': sprint_list})
+        
+    except Exception as e:
+        logger.error(f"Error in get_sprints: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/sprints', methods=['POST'])
+@role_required(Role.TEAM_LEADER)  # Team leaders and above can create sprints
+@company_required
+def create_sprint():
+    """Create a new sprint"""
+    try:
+        data = request.get_json()
+        
+        # Validate required fields
+        name = data.get('name')
+        start_date = data.get('start_date')
+        end_date = data.get('end_date')
+        
+        if not name:
+            return jsonify({'success': False, 'message': 'Sprint name is required'})
+        if not start_date:
+            return jsonify({'success': False, 'message': 'Start date is required'})
+        if not end_date:
+            return jsonify({'success': False, 'message': 'End date is required'})
+        
+        # Parse dates
+        try:
+            start_date = datetime.strptime(start_date, '%Y-%m-%d').date()
+            end_date = datetime.strptime(end_date, '%Y-%m-%d').date()
+        except ValueError:
+            return jsonify({'success': False, 'message': 'Invalid date format'})
+        
+        if start_date >= end_date:
+            return jsonify({'success': False, 'message': 'End date must be after start date'})
+        
+        # Verify project access if project is specified
+        project_id = data.get('project_id')
+        if project_id:
+            project = Project.query.filter_by(id=project_id, company_id=g.user.company_id).first()
+            if not project or not project.is_user_allowed(g.user):
+                return jsonify({'success': False, 'message': 'Project not found or access denied'})
+        
+        # Create sprint
+        sprint = Sprint(
+            name=name,
+            description=data.get('description', ''),
+            status=SprintStatus[data.get('status', 'PLANNING')],
+            company_id=g.user.company_id,
+            project_id=int(project_id) if project_id else None,
+            start_date=start_date,
+            end_date=end_date,
+            goal=data.get('goal'),
+            capacity_hours=int(data.get('capacity_hours')) if data.get('capacity_hours') else None,
+            created_by_id=g.user.id
+        )
+        
+        db.session.add(sprint)
+        db.session.commit()
+        
+        return jsonify({'success': True, 'message': 'Sprint created successfully'})
+        
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error creating sprint: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/sprints/<int:sprint_id>', methods=['PUT'])
+@role_required(Role.TEAM_LEADER)
+@company_required
+def update_sprint(sprint_id):
+    """Update an existing sprint"""
+    try:
+        sprint = Sprint.query.filter_by(id=sprint_id, company_id=g.user.company_id).first()
+        
+        if not sprint or not sprint.can_user_access(g.user):
+            return jsonify({'success': False, 'message': 'Sprint not found or access denied'})
+        
+        data = request.get_json()
+        
+        # Update sprint fields
+        if 'name' in data:
+            sprint.name = data['name']
+        if 'description' in data:
+            sprint.description = data['description']
+        if 'status' in data:
+            sprint.status = SprintStatus[data['status']]
+        if 'goal' in data:
+            sprint.goal = data['goal']
+        if 'capacity_hours' in data:
+            sprint.capacity_hours = int(data['capacity_hours']) if data['capacity_hours'] else None
+        if 'project_id' in data:
+            project_id = data['project_id']
+            if project_id:
+                project = Project.query.filter_by(id=project_id, company_id=g.user.company_id).first()
+                if not project or not project.is_user_allowed(g.user):
+                    return jsonify({'success': False, 'message': 'Project not found or access denied'})
+                sprint.project_id = int(project_id)
+            else:
+                sprint.project_id = None
+        
+        # Update dates if provided
+        if 'start_date' in data:
+            try:
+                sprint.start_date = datetime.strptime(data['start_date'], '%Y-%m-%d').date()
+            except ValueError:
+                return jsonify({'success': False, 'message': 'Invalid start date format'})
+        
+        if 'end_date' in data:
+            try:
+                sprint.end_date = datetime.strptime(data['end_date'], '%Y-%m-%d').date()
+            except ValueError:
+                return jsonify({'success': False, 'message': 'Invalid end date format'})
+        
+        # Validate date order
+        if sprint.start_date >= sprint.end_date:
+            return jsonify({'success': False, 'message': 'End date must be after start date'})
+        
+        db.session.commit()
+        
+        return jsonify({'success': True, 'message': 'Sprint updated successfully'})
+        
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error updating sprint: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/sprints/<int:sprint_id>', methods=['DELETE'])
+@role_required(Role.TEAM_LEADER)
+@company_required
+def delete_sprint(sprint_id):
+    """Delete a sprint and remove it from all associated tasks"""
+    try:
+        sprint = Sprint.query.filter_by(id=sprint_id, company_id=g.user.company_id).first()
+        
+        if not sprint or not sprint.can_user_access(g.user):
+            return jsonify({'success': False, 'message': 'Sprint not found or access denied'})
+        
+        # Remove sprint assignment from all tasks
+        Task.query.filter_by(sprint_id=sprint_id).update({'sprint_id': None})
+        
+        # Delete the sprint
+        db.session.delete(sprint)
+        db.session.commit()
+        
+        return jsonify({'success': True, 'message': 'Sprint deleted successfully'})
+        
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error deleting sprint: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
+# Subtask API Routes
+@app.route('/api/subtasks', methods=['POST'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def create_subtask():
+    try:
+        data = request.get_json()
+        task_id = data.get('task_id')
+
+        # Verify task access
+        task = Task.query.join(Project).filter(
+            Task.id == task_id,
+            Project.company_id == g.user.company_id
+        ).first()
+
+        if not task or not task.can_user_access(g.user):
+            return jsonify({'success': False, 'message': 'Task not found or access denied'})
+
+        # Validate required fields
+        name = data.get('name')
+        if not name:
+            return jsonify({'success': False, 'message': 'Subtask name is required'})
+
+        # Parse dates
+        start_date = None
+        due_date = None
+        if data.get('start_date'):
+            start_date = datetime.strptime(data.get('start_date'), '%Y-%m-%d').date()
+        if data.get('due_date'):
+            due_date = datetime.strptime(data.get('due_date'), '%Y-%m-%d').date()
+
+        # Create subtask
+        subtask = SubTask(
+            name=name,
+            description=data.get('description', ''),
+            status=TaskStatus[data.get('status', 'NOT_STARTED')],
+            priority=TaskPriority[data.get('priority', 'MEDIUM')],
+            estimated_hours=float(data.get('estimated_hours')) if data.get('estimated_hours') else None,
+            task_id=task_id,
+            assigned_to_id=int(data.get('assigned_to_id')) if data.get('assigned_to_id') else None,
+            start_date=start_date,
+            due_date=due_date,
+            created_by_id=g.user.id
+        )
+
+        db.session.add(subtask)
+        db.session.commit()
+
+        return jsonify({'success': True, 'message': 'Subtask created successfully'})
+
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/subtasks/<int:subtask_id>', methods=['GET'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def get_subtask(subtask_id):
+    try:
+        subtask = SubTask.query.join(Task).join(Project).filter(
+            SubTask.id == subtask_id,
+            Project.company_id == g.user.company_id
+        ).first()
+
+        if not subtask or not subtask.can_user_access(g.user):
+            return jsonify({'success': False, 'message': 'Subtask not found or access denied'})
+
+        subtask_data = {
+            'id': subtask.id,
+            'name': subtask.name,
+            'description': subtask.description,
+            'status': subtask.status.name,
+            'priority': subtask.priority.name,
+            'estimated_hours': subtask.estimated_hours,
+            'assigned_to_id': subtask.assigned_to_id,
+            'start_date': subtask.start_date.isoformat() if subtask.start_date else None,
+            'due_date': subtask.due_date.isoformat() if subtask.due_date else None
+        }
+
+        return jsonify({'success': True, 'subtask': subtask_data})
+
+    except Exception as e:
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/subtasks/<int:subtask_id>', methods=['PUT'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def update_subtask(subtask_id):
+    try:
+        subtask = SubTask.query.join(Task).join(Project).filter(
+            SubTask.id == subtask_id,
+            Project.company_id == g.user.company_id
+        ).first()
+
+        if not subtask or not subtask.can_user_access(g.user):
+            return jsonify({'success': False, 'message': 'Subtask not found or access denied'})
+
+        data = request.get_json()
+
+        # Update subtask fields
+        if 'name' in data:
+            subtask.name = data['name']
+        if 'description' in data:
+            subtask.description = data['description']
+        if 'status' in data:
+            subtask.status = TaskStatus[data['status']]
+            if data['status'] == 'COMPLETED':
+                subtask.completed_date = datetime.now().date()
+            else:
+                subtask.completed_date = None
+        if 'priority' in data:
+            subtask.priority = TaskPriority[data['priority']]
+        if 'estimated_hours' in data:
+            subtask.estimated_hours = float(data['estimated_hours']) if data['estimated_hours'] else None
+        if 'assigned_to_id' in data:
+            subtask.assigned_to_id = int(data['assigned_to_id']) if data['assigned_to_id'] else None
+        if 'start_date' in data:
+            subtask.start_date = datetime.strptime(data['start_date'], '%Y-%m-%d').date() if data['start_date'] else None
+        if 'due_date' in data:
+            subtask.due_date = datetime.strptime(data['due_date'], '%Y-%m-%d').date() if data['due_date'] else None
+
+        db.session.commit()
+
+        return jsonify({'success': True, 'message': 'Subtask updated successfully'})
+
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/subtasks/<int:subtask_id>', methods=['DELETE'])
+@role_required(Role.TEAM_LEADER)  # Only team leaders and above can delete subtasks
+@company_required
+def delete_subtask(subtask_id):
+    try:
+        subtask = SubTask.query.join(Task).join(Project).filter(
+            SubTask.id == subtask_id,
             Project.company_id == g.user.company_id
         ).first()
 
         if not subtask or not subtask.can_user_access(g.user):
             return jsonify({'success': False, 'message': 'Subtask not found or access denied'})
 
-        db.session.delete(subtask)
+        db.session.delete(subtask)
+        db.session.commit()
+
+        return jsonify({'success': True, 'message': 'Subtask deleted successfully'})
+
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'message': str(e)})
+
+# Comment API Routes
+@app.route('/api/tasks/<int:task_id>/comments')
+@login_required
+@company_required
+def get_task_comments(task_id):
+    """Get all comments for a task that the user can view"""
+    try:
+        task = Task.query.join(Project).filter(
+            Task.id == task_id,
+            Project.company_id == g.user.company_id
+        ).first()
+        
+        if not task or not task.can_user_access(g.user):
+            return jsonify({'success': False, 'message': 'Task not found or access denied'})
+        
+        # Get all comments for the task
+        comments = []
+        for comment in task.comments.order_by(Comment.created_at.desc()):
+            if comment.can_user_view(g.user):
+                comment_data = {
+                    'id': comment.id,
+                    'content': comment.content,
+                    'visibility': comment.visibility.value,
+                    'is_edited': comment.is_edited,
+                    'edited_at': comment.edited_at.isoformat() if comment.edited_at else None,
+                    'created_at': comment.created_at.isoformat(),
+                    'author': {
+                        'id': comment.created_by.id,
+                        'username': comment.created_by.username,
+                        'avatar_url': comment.created_by.get_avatar_url(40)
+                    },
+                    'can_edit': comment.can_user_edit(g.user),
+                    'can_delete': comment.can_user_delete(g.user),
+                    'replies': []
+                }
+                
+                # Add replies if any
+                for reply in comment.replies:
+                    if reply.can_user_view(g.user):
+                        reply_data = {
+                            'id': reply.id,
+                            'content': reply.content,
+                            'is_edited': reply.is_edited,
+                            'edited_at': reply.edited_at.isoformat() if reply.edited_at else None,
+                            'created_at': reply.created_at.isoformat(),
+                            'author': {
+                                'id': reply.created_by.id,
+                                'username': reply.created_by.username,
+                                'avatar_url': reply.created_by.get_avatar_url(40)
+                            },
+                            'can_edit': reply.can_user_edit(g.user),
+                            'can_delete': reply.can_user_delete(g.user)
+                        }
+                        comment_data['replies'].append(reply_data)
+                
+                comments.append(comment_data)
+        
+        # Check if user can use team visibility
+        company_settings = CompanySettings.query.filter_by(company_id=g.user.company_id).first()
+        allow_team_visibility = company_settings.allow_team_visibility_comments if company_settings else True
+        
+        return jsonify({
+            'success': True,
+            'comments': comments,
+            'allow_team_visibility': allow_team_visibility
+        })
+        
+    except Exception as e:
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/tasks/<int:task_id>/comments', methods=['POST'])
+@login_required
+@company_required
+def create_task_comment(task_id):
+    """Create a new comment on a task"""
+    try:
+        task = Task.query.join(Project).filter(
+            Task.id == task_id,
+            Project.company_id == g.user.company_id
+        ).first()
+        
+        if not task or not task.can_user_access(g.user):
+            return jsonify({'success': False, 'message': 'Task not found or access denied'})
+        
+        data = request.get_json()
+        content = data.get('content', '').strip()
+        visibility = data.get('visibility', 'COMPANY')
+        parent_comment_id = data.get('parent_comment_id')
+        
+        if not content:
+            return jsonify({'success': False, 'message': 'Comment content is required'})
+        
+        # Check visibility settings
+        company_settings = CompanySettings.query.filter_by(company_id=g.user.company_id).first()
+        if visibility == 'TEAM' and company_settings and not company_settings.allow_team_visibility_comments:
+            visibility = 'COMPANY'
+        
+        # Validate parent comment if provided
+        if parent_comment_id:
+            parent_comment = Comment.query.filter_by(
+                id=parent_comment_id,
+                task_id=task_id
+            ).first()
+            
+            if not parent_comment or not parent_comment.can_user_view(g.user):
+                return jsonify({'success': False, 'message': 'Parent comment not found or access denied'})
+        
+        # Create comment
+        comment = Comment(
+            content=content,
+            task_id=task_id,
+            parent_comment_id=parent_comment_id,
+            visibility=CommentVisibility[visibility],
+            created_by_id=g.user.id
+        )
+        
+        db.session.add(comment)
         db.session.commit()
+        
+        # Log system event
+        SystemEvent.log_event(
+            event_type='comment_created',
+            event_category='task',
+            description=f'Comment added to task {task.task_number}',
+            user_id=g.user.id,
+            company_id=g.user.company_id,
+            event_metadata={'task_id': task_id, 'comment_id': comment.id}
+        )
+        
+        # Return the created comment
+        comment_data = {
+            'id': comment.id,
+            'content': comment.content,
+            'visibility': comment.visibility.value,
+            'is_edited': comment.is_edited,
+            'created_at': comment.created_at.isoformat(),
+            'author': {
+                'id': comment.created_by.id,
+                'username': comment.created_by.username,
+                'avatar_url': comment.created_by.get_avatar_url(40)
+            },
+            'can_edit': True,
+            'can_delete': True
+        }
+        
+        return jsonify({
+            'success': True,
+            'message': 'Comment posted successfully',
+            'comment': comment_data
+        })
+        
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'message': str(e)})
 
-        return jsonify({'success': True, 'message': 'Subtask deleted successfully'})
+@app.route('/api/comments/<int:comment_id>', methods=['PUT'])
+@login_required
+@company_required
+def update_comment(comment_id):
+    """Update an existing comment"""
+    try:
+        comment = Comment.query.join(Task).join(Project).filter(
+            Comment.id == comment_id,
+            Project.company_id == g.user.company_id
+        ).first()
+        
+        if not comment:
+            return jsonify({'success': False, 'message': 'Comment not found'})
+        
+        if not comment.can_user_edit(g.user):
+            return jsonify({'success': False, 'message': 'You cannot edit this comment'})
+        
+        data = request.get_json()
+        content = data.get('content', '').strip()
+        
+        if not content:
+            return jsonify({'success': False, 'message': 'Comment content is required'})
+        
+        comment.content = content
+        comment.is_edited = True
+        comment.edited_at = datetime.now()
+        
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'message': 'Comment updated successfully',
+            'edited_at': comment.edited_at.isoformat()
+        })
+        
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'message': str(e)})
 
+@app.route('/api/comments/<int:comment_id>', methods=['DELETE'])
+@login_required
+@company_required
+def delete_comment(comment_id):
+    """Delete a comment"""
+    try:
+        comment = Comment.query.join(Task).join(Project).filter(
+            Comment.id == comment_id,
+            Project.company_id == g.user.company_id
+        ).first()
+        
+        if not comment:
+            return jsonify({'success': False, 'message': 'Comment not found'})
+        
+        if not comment.can_user_delete(g.user):
+            return jsonify({'success': False, 'message': 'You cannot delete this comment'})
+        
+        # Log system event before deletion
+        SystemEvent.log_event(
+            event_type='comment_deleted',
+            event_category='task',
+            description=f'Comment deleted from task {comment.task.task_number}',
+            user_id=g.user.id,
+            company_id=g.user.company_id,
+            event_metadata={'task_id': comment.task_id, 'comment_id': comment.id}
+        )
+        
+        db.session.delete(comment)
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'message': 'Comment deleted successfully'
+        })
+        
     except Exception as e:
         db.session.rollback()
         return jsonify({'success': False, 'message': str(e)})
@@ -3801,6 +5258,689 @@ def delete_category(category_id):
         db.session.rollback()
         return jsonify({'success': False, 'message': str(e)})
 
+# Dashboard API Endpoints
+@app.route('/api/dashboard')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def get_dashboard():
+    """Get user's dashboard configuration and widgets."""
+    try:
+        # Get or create user dashboard
+        dashboard = UserDashboard.query.filter_by(user_id=g.user.id).first()
+        if not dashboard:
+            dashboard = UserDashboard(user_id=g.user.id)
+            db.session.add(dashboard)
+            db.session.commit()
+            logger.info(f"Created new dashboard {dashboard.id} for user {g.user.id}")
+        else:
+            logger.info(f"Using existing dashboard {dashboard.id} for user {g.user.id}")
+
+        # Get user's widgets
+        widgets = DashboardWidget.query.filter_by(dashboard_id=dashboard.id).order_by(DashboardWidget.grid_y, DashboardWidget.grid_x).all()
+
+        logger.info(f"Found {len(widgets)} widgets for dashboard {dashboard.id}")
+
+        # Convert to JSON format
+        widget_data = []
+        for widget in widgets:
+            # Convert grid size to simple size names
+            if widget.grid_width == 1 and widget.grid_height == 1:
+                size = 'small'
+            elif widget.grid_width == 2 and widget.grid_height == 1:
+                size = 'medium'
+            elif widget.grid_width == 2 and widget.grid_height == 2:
+                size = 'large'
+            elif widget.grid_width == 3 and widget.grid_height == 1:
+                size = 'wide'
+            else:
+                size = 'small'
+
+            # Parse config JSON
+            try:
+                import json
+                config = json.loads(widget.config) if widget.config else {}
+            except (json.JSONDecodeError, TypeError):
+                config = {}
+
+            widget_data.append({
+                'id': widget.id,
+                'type': widget.widget_type.value,
+                'title': widget.title,
+                'size': size,
+                'grid_x': widget.grid_x,
+                'grid_y': widget.grid_y,
+                'grid_width': widget.grid_width,
+                'grid_height': widget.grid_height,
+                'config': config
+            })
+
+        return jsonify({
+            'success': True,
+            'dashboard': {
+                'id': dashboard.id,
+                'layout_config': dashboard.layout_config,
+                'grid_columns': dashboard.grid_columns,
+                'theme': dashboard.theme
+            },
+            'widgets': widget_data
+        })
+
+    except Exception as e:
+        logger.error(f"Error loading dashboard: {e}")
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/dashboard/widgets', methods=['POST'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def create_or_update_widget():
+    """Create or update a dashboard widget."""
+    try:
+        data = request.get_json()
+
+        # Get or create user dashboard
+        dashboard = UserDashboard.query.filter_by(user_id=g.user.id).first()
+        if not dashboard:
+            dashboard = UserDashboard(user_id=g.user.id)
+            db.session.add(dashboard)
+            db.session.flush()  # Get the ID
+            logger.info(f"Created new dashboard {dashboard.id} for user {g.user.id} in widget creation")
+        else:
+            logger.info(f"Using existing dashboard {dashboard.id} for user {g.user.id} in widget creation")
+
+        # Check if updating existing widget
+        widget_id = data.get('widget_id')
+        if widget_id:
+            widget = DashboardWidget.query.filter_by(
+                id=widget_id,
+                dashboard_id=dashboard.id
+            ).first()
+            if not widget:
+                return jsonify({'success': False, 'error': 'Widget not found'})
+        else:
+            # Create new widget
+            widget = DashboardWidget(dashboard_id=dashboard.id)
+            # Find next available position
+            max_y = db.session.query(func.max(DashboardWidget.grid_y)).filter_by(
+                dashboard_id=dashboard.id
+            ).scalar() or 0
+            widget.grid_y = max_y + 1
+            widget.grid_x = 0
+
+        # Update widget properties
+        widget.widget_type = WidgetType(data['type'])
+        widget.title = data['title']
+
+        # Convert size to grid dimensions
+        size = data.get('size', 'small')
+        if size == 'small':
+            widget.grid_width = 1
+            widget.grid_height = 1
+        elif size == 'medium':
+            widget.grid_width = 2
+            widget.grid_height = 1
+        elif size == 'large':
+            widget.grid_width = 2
+            widget.grid_height = 2
+        elif size == 'wide':
+            widget.grid_width = 3
+            widget.grid_height = 1
+
+        # Build config from form data
+        config = {}
+        for key, value in data.items():
+            if key not in ['type', 'title', 'size', 'widget_id']:
+                config[key] = value
+
+        # Store config as JSON string
+        if config:
+            import json
+            widget.config = json.dumps(config)
+        else:
+            widget.config = None
+
+        if not widget_id:
+            db.session.add(widget)
+            logger.info(f"Creating new widget: {widget.widget_type.value} for dashboard {dashboard.id}")
+        else:
+            logger.info(f"Updating existing widget {widget_id}")
+
+        db.session.commit()
+        logger.info(f"Widget saved successfully with ID: {widget.id}")
+
+        # Verify the widget was actually saved
+        saved_widget = DashboardWidget.query.filter_by(id=widget.id).first()
+        if saved_widget:
+            logger.info(f"Verification: Widget {widget.id} exists in database with dashboard_id: {saved_widget.dashboard_id}")
+        else:
+            logger.error(f"Verification failed: Widget {widget.id} not found in database")
+
+        # Convert grid size back to simple size name for response
+        if widget.grid_width == 1 and widget.grid_height == 1:
+            size_name = 'small'
+        elif widget.grid_width == 2 and widget.grid_height == 1:
+            size_name = 'medium'
+        elif widget.grid_width == 2 and widget.grid_height == 2:
+            size_name = 'large'
+        elif widget.grid_width == 3 and widget.grid_height == 1:
+            size_name = 'wide'
+        else:
+            size_name = 'small'
+
+        # Parse config for response
+        try:
+            import json
+            config_dict = json.loads(widget.config) if widget.config else {}
+        except (json.JSONDecodeError, TypeError):
+            config_dict = {}
+
+        return jsonify({
+            'success': True,
+            'message': 'Widget saved successfully',
+            'widget': {
+                'id': widget.id,
+                'type': widget.widget_type.value,
+                'title': widget.title,
+                'size': size_name,
+                'grid_x': widget.grid_x,
+                'grid_y': widget.grid_y,
+                'grid_width': widget.grid_width,
+                'grid_height': widget.grid_height,
+                'config': config_dict
+            }
+        })
+
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error saving widget: {e}")
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/dashboard/widgets/<int:widget_id>', methods=['DELETE'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def delete_widget(widget_id):
+    """Delete a dashboard widget."""
+    try:
+        # Get user dashboard
+        dashboard = UserDashboard.query.filter_by(user_id=g.user.id).first()
+        if not dashboard:
+            return jsonify({'success': False, 'error': 'Dashboard not found'})
+
+        # Find and delete widget
+        widget = DashboardWidget.query.filter_by(
+            id=widget_id,
+            dashboard_id=dashboard.id
+        ).first()
+
+        if not widget:
+            return jsonify({'success': False, 'error': 'Widget not found'})
+
+        # No need to update positions for grid-based layout
+
+        db.session.delete(widget)
+        db.session.commit()
+
+        return jsonify({'success': True, 'message': 'Widget deleted successfully'})
+
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error deleting widget: {e}")
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/dashboard/positions', methods=['POST'])
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def update_widget_positions():
+    """Update widget grid positions after drag and drop."""
+    try:
+        data = request.get_json()
+        positions = data.get('positions', [])
+
+        # Get user dashboard
+        dashboard = UserDashboard.query.filter_by(user_id=g.user.id).first()
+        if not dashboard:
+            return jsonify({'success': False, 'error': 'Dashboard not found'})
+
+        # Update grid positions
+        for pos_data in positions:
+            widget = DashboardWidget.query.filter_by(
+                id=pos_data['id'],
+                dashboard_id=dashboard.id
+            ).first()
+            if widget:
+                # For now, just assign sequential grid positions
+                # In a more advanced implementation, we'd calculate actual grid coordinates
+                widget.grid_x = pos_data.get('grid_x', 0)
+                widget.grid_y = pos_data.get('grid_y', pos_data.get('position', 0))
+
+        db.session.commit()
+
+        return jsonify({'success': True, 'message': 'Positions updated successfully'})
+
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Error updating positions: {e}")
+        return jsonify({'success': False, 'error': str(e)})
+
+# Widget data endpoints
+@app.route('/api/dashboard/widgets/<int:widget_id>/data')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def get_widget_data(widget_id):
+    """Get data for a specific widget."""
+    try:
+        # Get user dashboard
+        dashboard = UserDashboard.query.filter_by(user_id=g.user.id).first()
+        if not dashboard:
+            return jsonify({'success': False, 'error': 'Dashboard not found'})
+
+        # Find widget
+        widget = DashboardWidget.query.filter_by(
+            id=widget_id,
+            dashboard_id=dashboard.id
+        ).first()
+
+        if not widget:
+            return jsonify({'success': False, 'error': 'Widget not found'})
+
+        # Get widget-specific data based on type
+        widget_data = {}
+
+        if widget.widget_type == WidgetType.DAILY_SUMMARY:
+            from datetime import datetime, timedelta
+
+            config = widget.config or {}
+            period = config.get('summary_period', 'daily')
+
+            # Calculate time summaries
+            now = datetime.now()
+
+            # Today's summary
+            start_of_today = now.replace(hour=0, minute=0, second=0, microsecond=0)
+            today_entries = TimeEntry.query.filter(
+                TimeEntry.user_id == g.user.id,
+                TimeEntry.arrival_time >= start_of_today,
+                TimeEntry.departure_time.isnot(None)
+            ).all()
+            today_seconds = sum(entry.duration or 0 for entry in today_entries)
+
+            # This week's summary
+            start_of_week = start_of_today - timedelta(days=start_of_today.weekday())
+            week_entries = TimeEntry.query.filter(
+                TimeEntry.user_id == g.user.id,
+                TimeEntry.arrival_time >= start_of_week,
+                TimeEntry.departure_time.isnot(None)
+            ).all()
+            week_seconds = sum(entry.duration or 0 for entry in week_entries)
+
+            # This month's summary
+            start_of_month = start_of_today.replace(day=1)
+            month_entries = TimeEntry.query.filter(
+                TimeEntry.user_id == g.user.id,
+                TimeEntry.arrival_time >= start_of_month,
+                TimeEntry.departure_time.isnot(None)
+            ).all()
+            month_seconds = sum(entry.duration or 0 for entry in month_entries)
+
+            widget_data.update({
+                'today': f"{today_seconds // 3600}h {(today_seconds % 3600) // 60}m",
+                'week': f"{week_seconds // 3600}h {(week_seconds % 3600) // 60}m",
+                'month': f"{month_seconds // 3600}h {(month_seconds % 3600) // 60}m",
+                'entries_today': len(today_entries),
+                'entries_week': len(week_entries),
+                'entries_month': len(month_entries)
+            })
+
+        elif widget.widget_type == WidgetType.ACTIVE_PROJECTS:
+            config = widget.config or {}
+            project_filter = config.get('project_filter', 'all')
+            max_projects = int(config.get('max_projects', 5))
+
+            # Get user's projects
+            if g.user.role in [Role.ADMIN, Role.SUPERVISOR]:
+                projects = Project.query.filter_by(
+                    company_id=g.user.company_id,
+                    is_active=True
+                ).limit(max_projects).all()
+            elif g.user.team_id:
+                projects = Project.query.filter(
+                    Project.company_id == g.user.company_id,
+                    Project.is_active == True,
+                    db.or_(Project.team_id == g.user.team_id, Project.team_id == None)
+                ).limit(max_projects).all()
+            else:
+                projects = []
+
+            widget_data['projects'] = [{
+                'id': p.id,
+                'name': p.name,
+                'code': p.code,
+                'description': p.description
+            } for p in projects]
+
+        elif widget.widget_type == WidgetType.ASSIGNED_TASKS:
+            config = widget.config or {}
+            task_filter = config.get('task_filter', 'assigned')
+            task_status = config.get('task_status', 'active')
+
+            # Get user's tasks based on filter
+            if task_filter == 'assigned':
+                tasks = Task.query.filter_by(assigned_to_id=g.user.id)
+            elif task_filter == 'created':
+                tasks = Task.query.filter_by(created_by_id=g.user.id)
+            else:
+                # Get tasks from user's projects
+                if g.user.team_id:
+                    project_ids = [p.id for p in Project.query.filter(
+                        Project.company_id == g.user.company_id,
+                        db.or_(Project.team_id == g.user.team_id, Project.team_id == None)
+                    ).all()]
+                    tasks = Task.query.filter(Task.project_id.in_(project_ids))
+                else:
+                    tasks = Task.query.join(Project).filter(Project.company_id == g.user.company_id)
+
+            # Filter by status if specified
+            if task_status != 'all':
+                if task_status == 'active':
+                    tasks = tasks.filter(Task.status.in_([TaskStatus.PENDING, TaskStatus.IN_PROGRESS]))
+                elif task_status == 'pending':
+                    tasks = tasks.filter_by(status=TaskStatus.PENDING)
+                elif task_status == 'completed':
+                    tasks = tasks.filter_by(status=TaskStatus.COMPLETED)
+
+            tasks = tasks.limit(10).all()
+
+            widget_data['tasks'] = [{
+                'id': t.id,
+                'name': t.name,
+                'description': t.description,
+                'status': t.status.value if t.status else 'Pending',
+                'priority': t.priority.value if t.priority else 'Medium',
+                'project_name': t.project.name if t.project else 'No Project'
+            } for t in tasks]
+
+        elif widget.widget_type == WidgetType.WEEKLY_CHART:
+            from datetime import datetime, timedelta
+
+            # Get weekly data for chart
+            now = datetime.now()
+            start_of_week = now - timedelta(days=now.weekday())
+
+            weekly_data = []
+            for i in range(7):
+                day = start_of_week + timedelta(days=i)
+                day_start = day.replace(hour=0, minute=0, second=0, microsecond=0)
+                day_end = day_start + timedelta(days=1)
+
+                day_entries = TimeEntry.query.filter(
+                    TimeEntry.user_id == g.user.id,
+                    TimeEntry.arrival_time >= day_start,
+                    TimeEntry.arrival_time < day_end,
+                    TimeEntry.departure_time.isnot(None)
+                ).all()
+
+                total_seconds = sum(entry.duration or 0 for entry in day_entries)
+                weekly_data.append({
+                    'day': day.strftime('%A'),
+                    'date': day.strftime('%Y-%m-%d'),
+                    'hours': round(total_seconds / 3600, 2),
+                    'entries': len(day_entries)
+                })
+
+            widget_data['weekly_data'] = weekly_data
+
+        elif widget.widget_type == WidgetType.TASK_PRIORITY:
+            # Get tasks by priority
+            if g.user.team_id:
+                project_ids = [p.id for p in Project.query.filter(
+                    Project.company_id == g.user.company_id,
+                    db.or_(Project.team_id == g.user.team_id, Project.team_id == None)
+                ).all()]
+                tasks = Task.query.filter(
+                    Task.project_id.in_(project_ids),
+                    Task.assigned_to_id == g.user.id
+                ).order_by(Task.priority.desc(), Task.created_at.desc()).limit(10).all()
+            else:
+                tasks = Task.query.filter_by(assigned_to_id=g.user.id).order_by(
+                    Task.priority.desc(), Task.created_at.desc()
+                ).limit(10).all()
+
+            widget_data['priority_tasks'] = [{
+                'id': t.id,
+                'name': t.name,
+                'description': t.description,
+                'priority': t.priority.value if t.priority else 'Medium',
+                'status': t.status.value if t.status else 'Pending',
+                'project_name': t.project.name if t.project else 'No Project'
+            } for t in tasks]
+
+        elif widget.widget_type == WidgetType.PROJECT_PROGRESS:
+            # Get project progress data
+            if g.user.role in [Role.ADMIN, Role.SUPERVISOR]:
+                projects = Project.query.filter_by(
+                    company_id=g.user.company_id,
+                    is_active=True
+                ).limit(5).all()
+            elif g.user.team_id:
+                projects = Project.query.filter(
+                    Project.company_id == g.user.company_id,
+                    Project.is_active == True,
+                    db.or_(Project.team_id == g.user.team_id, Project.team_id == None)
+                ).limit(5).all()
+            else:
+                projects = []
+
+            project_progress = []
+            for project in projects:
+                total_tasks = Task.query.filter_by(project_id=project.id).count()
+                completed_tasks = Task.query.filter_by(
+                    project_id=project.id,
+                    status=TaskStatus.COMPLETED
+                ).count()
+
+                progress = (completed_tasks / total_tasks * 100) if total_tasks > 0 else 0
+
+                project_progress.append({
+                    'id': project.id,
+                    'name': project.name,
+                    'code': project.code,
+                    'progress': round(progress, 1),
+                    'completed_tasks': completed_tasks,
+                    'total_tasks': total_tasks
+                })
+
+            widget_data['project_progress'] = project_progress
+
+        elif widget.widget_type == WidgetType.PRODUCTIVITY_METRICS:
+            from datetime import datetime, timedelta
+
+            # Calculate productivity metrics
+            now = datetime.now()
+            today = now.replace(hour=0, minute=0, second=0, microsecond=0)
+            week_ago = today - timedelta(days=7)
+
+            # This week vs last week comparison
+            this_week_entries = TimeEntry.query.filter(
+                TimeEntry.user_id == g.user.id,
+                TimeEntry.arrival_time >= week_ago,
+                TimeEntry.departure_time.isnot(None)
+            ).all()
+
+            last_week_entries = TimeEntry.query.filter(
+                TimeEntry.user_id == g.user.id,
+                TimeEntry.arrival_time >= week_ago - timedelta(days=7),
+                TimeEntry.arrival_time < week_ago,
+                TimeEntry.departure_time.isnot(None)
+            ).all()
+
+            this_week_hours = sum(entry.duration or 0 for entry in this_week_entries) / 3600
+            last_week_hours = sum(entry.duration or 0 for entry in last_week_entries) / 3600
+
+            productivity_change = ((this_week_hours - last_week_hours) / last_week_hours * 100) if last_week_hours > 0 else 0
+
+            widget_data.update({
+                'this_week_hours': round(this_week_hours, 1),
+                'last_week_hours': round(last_week_hours, 1),
+                'productivity_change': round(productivity_change, 1),
+                'avg_daily_hours': round(this_week_hours / 7, 1),
+                'total_entries': len(this_week_entries)
+            })
+
+        return jsonify({
+            'success': True,
+            'data': widget_data
+        })
+
+    except Exception as e:
+        logger.error(f"Error getting widget data: {e}")
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/current-timer-status')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def get_current_timer_status():
+    """Get current timer status for dashboard widgets."""
+    try:
+        # Get the user's current active time entry
+        active_entry = TimeEntry.query.filter_by(
+            user_id=g.user.id,
+            departure_time=None
+        ).first()
+
+        if active_entry:
+            # Calculate current duration
+            now = datetime.now()
+            elapsed_seconds = int((now - active_entry.arrival_time).total_seconds())
+
+            return jsonify({
+                'success': True,
+                'isActive': True,
+                'startTime': active_entry.arrival_time.isoformat(),
+                'currentDuration': elapsed_seconds,
+                'entryId': active_entry.id
+            })
+        else:
+            return jsonify({
+                'success': True,
+                'isActive': False,
+                'message': 'No active timer'
+            })
+
+    except Exception as e:
+        logger.error(f"Error getting timer status: {e}")
+        return jsonify({'success': False, 'error': str(e)})
+
+# Smart Search API Endpoints
+@app.route('/api/search/users')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def search_users():
+    """Search for users for smart search auto-completion"""
+    try:
+        query = request.args.get('q', '').strip()
+        
+        if not query:
+            return jsonify({'success': True, 'users': []})
+        
+        # Search users in the same company
+        users = User.query.filter(
+            User.company_id == g.user.company_id,
+            User.username.ilike(f'%{query}%')
+        ).limit(10).all()
+        
+        user_list = [
+            {
+                'id': user.id,
+                'username': user.username,
+                'full_name': f"{user.first_name} {user.last_name}" if user.first_name and user.last_name else user.username
+            }
+            for user in users
+        ]
+        
+        return jsonify({'success': True, 'users': user_list})
+        
+    except Exception as e:
+        logger.error(f"Error in search_users: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/search/projects')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def search_projects():
+    """Search for projects for smart search auto-completion"""
+    try:
+        query = request.args.get('q', '').strip()
+        
+        if not query:
+            return jsonify({'success': True, 'projects': []})
+        
+        # Search projects the user has access to
+        projects = Project.query.filter(
+            Project.company_id == g.user.company_id,
+            db.or_(
+                Project.code.ilike(f'%{query}%'),
+                Project.name.ilike(f'%{query}%')
+            )
+        ).limit(10).all()
+        
+        # Filter projects user has access to
+        accessible_projects = [
+            project for project in projects 
+            if project.is_user_allowed(g.user)
+        ]
+        
+        project_list = [
+            {
+                'id': project.id,
+                'code': project.code,
+                'name': project.name
+            }
+            for project in accessible_projects
+        ]
+        
+        return jsonify({'success': True, 'projects': project_list})
+        
+    except Exception as e:
+        logger.error(f"Error in search_projects: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/api/search/sprints')
+@role_required(Role.TEAM_MEMBER)
+@company_required
+def search_sprints():
+    """Search for sprints for smart search auto-completion"""
+    try:
+        query = request.args.get('q', '').strip()
+        
+        if not query:
+            return jsonify({'success': True, 'sprints': []})
+        
+        # Search sprints in the same company
+        sprints = Sprint.query.filter(
+            Sprint.company_id == g.user.company_id,
+            Sprint.name.ilike(f'%{query}%')
+        ).limit(10).all()
+        
+        # Filter sprints user has access to
+        accessible_sprints = [
+            sprint for sprint in sprints 
+            if sprint.can_user_access(g.user)
+        ]
+        
+        sprint_list = [
+            {
+                'id': sprint.id,
+                'name': sprint.name,
+                'status': sprint.status.value
+            }
+            for sprint in accessible_sprints
+        ]
+        
+        return jsonify({'success': True, 'sprints': sprint_list})
+        
+    except Exception as e:
+        logger.error(f"Error in search_sprints: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)})
+
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 5000))
-    app.run(debug=False, host='0.0.0.0', port=port)
\ No newline at end of file
+    app.run(debug=True, host='0.0.0.0', port=port)
\ No newline at end of file
diff --git a/data_formatting.py b/data_formatting.py
index 8b43b4f..ab3b647 100644
--- a/data_formatting.py
+++ b/data_formatting.py
@@ -144,4 +144,65 @@ def format_team_data(entries, granularity='daily'):
             'total_hours': round(data['total_hours'], 2)
         })
     
-    return {'team_data': team_data}
\ No newline at end of file
+    return {'team_data': team_data}
+
+
+def format_burndown_data(tasks, start_date, end_date):
+    """Format data for burndown chart visualization."""
+    from datetime import datetime, timedelta
+    from models import Task, TaskStatus
+    
+    if not tasks:
+        return {'burndown': {'dates': [], 'remaining': [], 'ideal': []}}
+    
+    # Convert string dates to datetime objects if needed
+    if isinstance(start_date, str):
+        start_date = datetime.strptime(start_date, '%Y-%m-%d').date()
+    if isinstance(end_date, str):
+        end_date = datetime.strptime(end_date, '%Y-%m-%d').date()
+    
+    # Generate date range
+    current_date = start_date
+    dates = []
+    while current_date <= end_date:
+        dates.append(current_date.strftime('%Y-%m-%d'))
+        current_date += timedelta(days=1)
+    
+    total_tasks = len(tasks)
+    if total_tasks == 0:
+        return {'burndown': {'dates': dates, 'remaining': [0] * len(dates), 'ideal': [0] * len(dates)}}
+    
+    # Calculate ideal burndown (linear decrease from total to 0)
+    total_days = len(dates)
+    ideal_burndown = []
+    for i in range(total_days):
+        remaining_ideal = total_tasks - (total_tasks * i / (total_days - 1)) if total_days > 1 else 0
+        ideal_burndown.append(max(0, round(remaining_ideal, 1)))
+    
+    # Calculate actual remaining tasks for each date
+    actual_remaining = []
+    for date_str in dates:
+        date_obj = datetime.strptime(date_str, '%Y-%m-%d').date()
+        
+        # Count tasks not completed by this date
+        remaining_count = 0
+        for task in tasks:
+            # Task is remaining if:
+            # 1. It's not completed, OR
+            # 2. It was completed after this date
+            if task.status != TaskStatus.COMPLETED:
+                remaining_count += 1
+            elif task.completed_date and task.completed_date > date_obj:
+                remaining_count += 1
+        
+        actual_remaining.append(remaining_count)
+    
+    return {
+        'burndown': {
+            'dates': dates,
+            'remaining': actual_remaining,
+            'ideal': ideal_burndown,
+            'total_tasks': total_tasks,
+            'tasks_completed': total_tasks - (actual_remaining[-1] if actual_remaining else total_tasks)
+        }
+    }
\ No newline at end of file
diff --git a/migrate_db.py b/migrate_db.py
index 4c83313..b98cd2c 100644
--- a/migrate_db.py
+++ b/migrate_db.py
@@ -13,9 +13,11 @@
 # Try to import from Flask app context if available
 try:
     from app import app, db
-    from models import (User, TimeEntry, WorkConfig, SystemSettings, Team, Role, Project, 
-                       Company, CompanyWorkConfig, UserPreferences, WorkRegion, AccountType, 
-                       ProjectCategory, Task, SubTask, TaskStatus, TaskPriority, Announcement, SystemEvent)
+    from models import (User, TimeEntry, WorkConfig, SystemSettings, Team, Role, Project,
+                       Company, CompanyWorkConfig, CompanySettings, UserPreferences, WorkRegion, AccountType,
+                       ProjectCategory, Task, SubTask, TaskStatus, TaskPriority, Announcement, SystemEvent,
+                       WidgetType, UserDashboard, DashboardWidget, WidgetTemplate, Comment, CommentVisibility,
+                       BrandingSettings)
     from werkzeug.security import generate_password_hash
     FLASK_AVAILABLE = True
 except ImportError:
@@ -23,14 +25,14 @@
     FLASK_AVAILABLE = False
     # Define Role and AccountType enums for standalone mode
     import enum
-    
+
     class Role(enum.Enum):
         TEAM_MEMBER = "Team Member"
         TEAM_LEADER = "Team Leader"
         SUPERVISOR = "Supervisor"
         ADMIN = "Administrator"
         SYSTEM_ADMIN = "System Administrator"
-    
+
     class AccountType(enum.Enum):
         COMPANY_USER = "Company User"
         FREELANCER = "Freelancer"
@@ -40,11 +42,11 @@ def get_db_path(db_file=None):
     """Determine database path based on environment or provided file."""
     if db_file:
         return db_file
-    
+
     # Check for Docker environment
     if os.path.exists('/data'):
         return '/data/timetrack.db'
-    
+
     return 'timetrack.db'
 
 
@@ -52,7 +54,7 @@ def run_all_migrations(db_path=None):
     """Run all database migrations in sequence."""
     db_path = get_db_path(db_path)
     print(f"Running migrations on database: {db_path}")
-    
+
     # Check if database exists
     if not os.path.exists(db_path):
         print("Database doesn't exist. Creating new database.")
@@ -63,21 +65,27 @@ def run_all_migrations(db_path=None):
         else:
             create_new_database(db_path)
         return
-    
+
     print("Running database migrations...")
-    
+
     # Run migrations in sequence
     run_basic_migrations(db_path)
     migrate_to_company_model(db_path)
     migrate_work_config_data(db_path)
     migrate_task_system(db_path)
     migrate_system_events(db_path)
+    migrate_dashboard_system(db_path)
+    migrate_comment_system(db_path)
     
+    # Run PostgreSQL-specific migrations if applicable
+    if FLASK_AVAILABLE:
+        migrate_postgresql_schema()
+
     if FLASK_AVAILABLE:
         with app.app_context():
             # Handle company migration and admin user setup
             migrate_data()
-    
+
     print("Database migrations completed successfully!")
 
 
@@ -85,7 +93,7 @@ def run_basic_migrations(db_path):
     """Run basic table structure migrations."""
     conn = sqlite3.connect(db_path)
     cursor = conn.cursor()
-    
+
     try:
         # Check if time_entry table exists first
         cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='time_entry'")
@@ -141,7 +149,7 @@ def run_basic_migrations(db_path):
         else:
             cursor.execute("PRAGMA table_info(work_config)")
             work_config_columns = [column[1] for column in cursor.fetchall()]
-            
+
             work_config_migrations = [
                 ('additional_break_minutes', "ALTER TABLE work_config ADD COLUMN additional_break_minutes INTEGER DEFAULT 15"),
                 ('additional_break_threshold_hours', "ALTER TABLE work_config ADD COLUMN additional_break_threshold_hours FLOAT DEFAULT 9.0"),
@@ -168,7 +176,8 @@ def run_basic_migrations(db_path):
             ('business_name', "ALTER TABLE user ADD COLUMN business_name VARCHAR(100)"),
             ('company_id', "ALTER TABLE user ADD COLUMN company_id INTEGER"),
             ('two_factor_enabled', "ALTER TABLE user ADD COLUMN two_factor_enabled BOOLEAN DEFAULT 0"),
-            ('two_factor_secret', "ALTER TABLE user ADD COLUMN two_factor_secret VARCHAR(32)")
+            ('two_factor_secret', "ALTER TABLE user ADD COLUMN two_factor_secret VARCHAR(32)"),
+            ('avatar_url', "ALTER TABLE user ADD COLUMN avatar_url VARCHAR(255)")
         ]
 
         for column_name, sql_command in user_migrations:
@@ -186,7 +195,7 @@ def run_basic_migrations(db_path):
         create_missing_tables(cursor)
 
         conn.commit()
-        
+
     except Exception as e:
         print(f"Error during basic migrations: {e}")
         conn.rollback()
@@ -197,7 +206,7 @@ def run_basic_migrations(db_path):
 
 def create_missing_tables(cursor):
     """Create missing tables."""
-    
+
     # Team table
     cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='team'")
     if not cursor.fetchone():
@@ -228,7 +237,7 @@ def create_missing_tables(cursor):
         )
         """)
 
-    # Project table  
+    # Project table
     cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='project'")
     if not cursor.fetchone():
         print("Creating project table...")
@@ -272,7 +281,7 @@ def create_missing_tables(cursor):
             UNIQUE(name)
         )
         """)
-    
+
     # Announcement table
     cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='announcement'")
     if not cursor.fetchone():
@@ -297,6 +306,47 @@ def create_missing_tables(cursor):
         )
         """)
 
+    # Company Settings table
+    cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='company_settings'")
+    if not cursor.fetchone():
+        print("Creating company_settings table...")
+        cursor.execute("""
+        CREATE TABLE company_settings (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            company_id INTEGER NOT NULL,
+            default_comment_visibility VARCHAR(20) DEFAULT 'Company',
+            allow_team_visibility_comments BOOLEAN DEFAULT 1,
+            require_task_assignment BOOLEAN DEFAULT 0,
+            allow_task_creation_by_members BOOLEAN DEFAULT 1,
+            restrict_project_access_by_team BOOLEAN DEFAULT 0,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            created_by_id INTEGER,
+            FOREIGN KEY (company_id) REFERENCES company (id),
+            FOREIGN KEY (created_by_id) REFERENCES user (id),
+            UNIQUE(company_id)
+        )
+        """)
+
+    # Branding Settings table
+    cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='branding_settings'")
+    if not cursor.fetchone():
+        print("Creating branding_settings table...")
+        cursor.execute("""
+        CREATE TABLE branding_settings (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            app_name VARCHAR(100) NOT NULL DEFAULT 'Time Tracker',
+            logo_filename VARCHAR(255),
+            logo_alt_text VARCHAR(255) DEFAULT 'Logo',
+            favicon_filename VARCHAR(255),
+            primary_color VARCHAR(7) DEFAULT '#007bff',
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            updated_by_id INTEGER,
+            FOREIGN KEY (updated_by_id) REFERENCES user (id)
+        )
+        """)
+
 
 def migrate_to_company_model(db_path):
     """Migrate to company-based multi-tenancy model."""
@@ -340,13 +390,13 @@ def migrate_to_company_model(db_path):
 
 def add_company_id_to_tables(cursor):
     """Add company_id columns to tables that need multi-tenancy."""
-    
+
     tables_needing_company = ['project', 'team']
-    
+
     for table_name in tables_needing_company:
         cursor.execute(f"PRAGMA table_info({table_name})")
         columns = [column[1] for column in cursor.fetchall()]
-        
+
         if 'company_id' not in columns:
             print(f"Adding company_id column to {table_name}...")
             cursor.execute(f"ALTER TABLE {table_name} ADD COLUMN company_id INTEGER")
@@ -354,7 +404,7 @@ def add_company_id_to_tables(cursor):
 
 def migrate_user_roles(cursor):
     """Handle user role enum migration with constraint updates."""
-    
+
     cursor.execute("PRAGMA table_info(user)")
     user_columns = cursor.fetchall()
 
@@ -387,26 +437,26 @@ def migrate_user_roles(cursor):
                 print(f"Updated {updated_count} users from role '{old_role}' to '{new_role}'")
 
         # Set any NULL or invalid roles to defaults
-        cursor.execute("UPDATE user SET role = ? WHERE role IS NULL OR role NOT IN (?, ?, ?, ?, ?)", 
-                      (Role.TEAM_MEMBER.value, Role.TEAM_MEMBER.value, Role.TEAM_LEADER.value, 
+        cursor.execute("UPDATE user SET role = ? WHERE role IS NULL OR role NOT IN (?, ?, ?, ?, ?)",
+                      (Role.TEAM_MEMBER.value, Role.TEAM_MEMBER.value, Role.TEAM_LEADER.value,
                        Role.SUPERVISOR.value, Role.ADMIN.value, Role.SYSTEM_ADMIN.value))
         null_roles = cursor.rowcount
         if null_roles > 0:
             print(f"Set {null_roles} NULL/invalid roles to 'Team Member'")
-        
+
         # Ensure all users have a company_id before creating NOT NULL constraint
         print("Checking for users without company_id...")
         cursor.execute("SELECT COUNT(*) FROM user WHERE company_id IS NULL")
         null_company_count = cursor.fetchone()[0]
         print(f"Found {null_company_count} users without company_id")
-        
+
         if null_company_count > 0:
             print(f"Assigning {null_company_count} users to default company...")
-            
+
             # Get or create a default company
             cursor.execute("SELECT id FROM company ORDER BY id LIMIT 1")
             company_result = cursor.fetchone()
-            
+
             if company_result:
                 default_company_id = company_result[0]
                 print(f"Using existing company ID {default_company_id} as default")
@@ -419,12 +469,12 @@ def migrate_user_roles(cursor):
                 """, ("Default Company", "default-company", "Auto-created default company for migration"))
                 default_company_id = cursor.lastrowid
                 print(f"Created default company with ID {default_company_id}")
-            
+
             # Assign all users without company_id to the default company
             cursor.execute("UPDATE user SET company_id = ? WHERE company_id IS NULL", (default_company_id,))
             updated_users = cursor.rowcount
             print(f"Assigned {updated_users} users to default company")
-            
+
             # Verify the fix
             cursor.execute("SELECT COUNT(*) FROM user WHERE company_id IS NULL")
             remaining_null = cursor.fetchone()[0]
@@ -454,6 +504,7 @@ def migrate_user_roles(cursor):
             business_name VARCHAR(100),
             two_factor_enabled BOOLEAN DEFAULT 0,
             two_factor_secret VARCHAR(32),
+            avatar_url VARCHAR(255),
             FOREIGN KEY (company_id) REFERENCES company (id),
             FOREIGN KEY (team_id) REFERENCES team (id)
         )
@@ -463,27 +514,27 @@ def migrate_user_roles(cursor):
         cursor.execute("SELECT id FROM company ORDER BY id LIMIT 1")
         company_result = cursor.fetchone()
         default_company_id = company_result[0] if company_result else 1
-        
+
         # Copy all data from old table to new table with validation
         cursor.execute("""
-        INSERT INTO user_new 
-        SELECT id, username, email, password_hash, created_at, 
+        INSERT INTO user_new
+        SELECT id, username, email, password_hash, created_at,
                COALESCE(company_id, ?) as company_id,
                is_verified, verification_token, token_expiry, is_blocked,
-               CASE 
+               CASE
                    WHEN role IN (?, ?, ?, ?, ?) THEN role
                    ELSE ?
                END as role,
                team_id,
-               CASE 
+               CASE
                    WHEN account_type IN (?, ?) THEN account_type
                    ELSE ?
                END as account_type,
-               business_name, two_factor_enabled, two_factor_secret
+               business_name, two_factor_enabled, two_factor_secret, avatar_url
         FROM user
-        """, (default_company_id, Role.TEAM_MEMBER.value, Role.TEAM_LEADER.value, Role.SUPERVISOR.value, 
+        """, (default_company_id, Role.TEAM_MEMBER.value, Role.TEAM_LEADER.value, Role.SUPERVISOR.value,
               Role.ADMIN.value, Role.SYSTEM_ADMIN.value, Role.TEAM_MEMBER.value,
-              AccountType.COMPANY_USER.value, AccountType.FREELANCER.value, 
+              AccountType.COMPANY_USER.value, AccountType.FREELANCER.value,
               AccountType.COMPANY_USER.value))
 
         # Drop the old table and rename the new one
@@ -517,7 +568,7 @@ def migrate_work_config_data(db_path):
     if not FLASK_AVAILABLE:
         print("Skipping work config data migration - Flask not available")
         return
-        
+
     with app.app_context():
         try:
             # Create CompanyWorkConfig for all companies that don't have one
@@ -526,10 +577,10 @@ def migrate_work_config_data(db_path):
                 existing_config = CompanyWorkConfig.query.filter_by(company_id=company.id).first()
                 if not existing_config:
                     print(f"Creating CompanyWorkConfig for {company.name}")
-                    
+
                     # Use Germany defaults (existing system default)
                     preset = CompanyWorkConfig.get_regional_preset(WorkRegion.GERMANY)
-                    
+
                     company_config = CompanyWorkConfig(
                         company_id=company.id,
                         work_hours_per_day=preset['work_hours_per_day'],
@@ -541,7 +592,7 @@ def migrate_work_config_data(db_path):
                         region_name=preset['region_name']
                     )
                     db.session.add(company_config)
-            
+
             # Migrate existing WorkConfig user preferences to UserPreferences
             old_configs = WorkConfig.query.filter(WorkConfig.user_id.isnot(None)).all()
             for old_config in old_configs:
@@ -550,7 +601,7 @@ def migrate_work_config_data(db_path):
                     existing_prefs = UserPreferences.query.filter_by(user_id=user.id).first()
                     if not existing_prefs:
                         print(f"Migrating preferences for user {user.username}")
-                        
+
                         user_prefs = UserPreferences(
                             user_id=user.id,
                             time_format_24h=getattr(old_config, 'time_format_24h', True),
@@ -559,10 +610,10 @@ def migrate_work_config_data(db_path):
                             round_to_nearest=getattr(old_config, 'round_to_nearest', True)
                         )
                         db.session.add(user_prefs)
-            
+
             db.session.commit()
             print("Work config data migration completed successfully")
-            
+
         except Exception as e:
             print(f"Error during work config migration: {e}")
             db.session.rollback()
@@ -602,24 +653,61 @@ def migrate_task_system(db_path):
             cursor.execute("""
             CREATE TABLE task (
                 id INTEGER PRIMARY KEY AUTOINCREMENT,
+                task_number VARCHAR(20) NOT NULL UNIQUE,
                 name VARCHAR(200) NOT NULL,
                 description TEXT,
                 status VARCHAR(50) DEFAULT 'Not Started',
                 priority VARCHAR(50) DEFAULT 'Medium',
                 estimated_hours FLOAT,
                 project_id INTEGER NOT NULL,
+                sprint_id INTEGER,
                 assigned_to_id INTEGER,
                 start_date DATE,
                 due_date DATE,
                 completed_date DATE,
+                archived_date DATE,
                 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 created_by_id INTEGER NOT NULL,
                 FOREIGN KEY (project_id) REFERENCES project (id),
+                FOREIGN KEY (sprint_id) REFERENCES sprint (id),
                 FOREIGN KEY (assigned_to_id) REFERENCES user (id),
                 FOREIGN KEY (created_by_id) REFERENCES user (id)
             )
             """)
+        else:
+            # Add missing columns to existing task table
+            cursor.execute("PRAGMA table_info(task)")
+            task_columns = [column[1] for column in cursor.fetchall()]
+            
+            task_migrations = [
+                ('task_number', "ALTER TABLE task ADD COLUMN task_number VARCHAR(20)"),
+                ('sprint_id', "ALTER TABLE task ADD COLUMN sprint_id INTEGER"),
+                ('archived_date', "ALTER TABLE task ADD COLUMN archived_date DATE")
+            ]
+            
+            for column_name, sql_command in task_migrations:
+                if column_name not in task_columns:
+                    print(f"Adding {column_name} column to task table...")
+                    cursor.execute(sql_command)
+            
+            # Add unique constraint for task_number if it was just added
+            if 'task_number' not in task_columns:
+                print("Adding unique constraint for task_number...")
+                # For SQLite, we need to recreate the table to add unique constraint
+                cursor.execute("CREATE UNIQUE INDEX idx_task_number ON task(task_number)")
+                
+                # Generate task numbers for existing tasks that don't have them
+                print("Generating task numbers for existing tasks...")
+                cursor.execute("SELECT id FROM task WHERE task_number IS NULL ORDER BY id")
+                tasks_without_numbers = cursor.fetchall()
+                
+                for i, (task_id,) in enumerate(tasks_without_numbers, 1):
+                    task_number = f"TSK-{i:03d}"
+                    cursor.execute("UPDATE task SET task_number = ? WHERE id = ?", (task_number, task_id))
+                
+                if tasks_without_numbers:
+                    print(f"Generated {len(tasks_without_numbers)} task numbers")
 
         # Check if sub_task table exists
         cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='sub_task'")
@@ -641,11 +729,64 @@ def migrate_task_system(db_path):
                 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 created_by_id INTEGER NOT NULL,
-                FOREIGN KEY (task_id) REFERENCES task (id),
+                FOREIGN KEY (task_id) REFERENCES task (id) ON DELETE CASCADE,
                 FOREIGN KEY (assigned_to_id) REFERENCES user (id),
                 FOREIGN KEY (created_by_id) REFERENCES user (id)
             )
             """)
+            
+            # Create index for better performance
+            print("Creating index on sub_task.task_id...")
+            cursor.execute("CREATE INDEX idx_subtask_task_id ON sub_task(task_id)")
+        else:
+            # Check if the index exists
+            cursor.execute("SELECT name FROM sqlite_master WHERE type='index' AND name='idx_subtask_task_id'")
+            if not cursor.fetchone():
+                print("Creating missing index on sub_task.task_id...")
+                cursor.execute("CREATE INDEX idx_subtask_task_id ON sub_task(task_id)")
+
+        # Check if task_dependency table exists
+        cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='task_dependency'")
+        if not cursor.fetchone():
+            print("Creating task_dependency table...")
+            cursor.execute("""
+            CREATE TABLE task_dependency (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                blocked_task_id INTEGER NOT NULL,
+                blocking_task_id INTEGER NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (blocked_task_id) REFERENCES task (id),
+                FOREIGN KEY (blocking_task_id) REFERENCES task (id),
+                UNIQUE(blocked_task_id, blocking_task_id),
+                CHECK (blocked_task_id != blocking_task_id)
+            )
+            """)
+
+        # Check if sprint table exists
+        cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='sprint'")
+        if not cursor.fetchone():
+            print("Creating sprint table...")
+            cursor.execute("""
+            CREATE TABLE sprint (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                name VARCHAR(200) NOT NULL,
+                description TEXT,
+                status VARCHAR(50) DEFAULT 'PLANNING',
+                goal TEXT,
+                start_date DATE NOT NULL,
+                end_date DATE NOT NULL,
+                capacity_hours INTEGER,
+                project_id INTEGER,
+                company_id INTEGER NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                created_by_id INTEGER NOT NULL,
+                FOREIGN KEY (project_id) REFERENCES project (id),
+                FOREIGN KEY (company_id) REFERENCES company (id),
+                FOREIGN KEY (created_by_id) REFERENCES user (id),
+                UNIQUE(company_id, name)
+            )
+            """)
 
         # Add category_id to project table if it doesn't exist
         cursor.execute("PRAGMA table_info(project)")
@@ -706,7 +847,7 @@ def migrate_system_events(db_path):
                 FOREIGN KEY (company_id) REFERENCES company (id)
             )
             """)
-            
+
             # Add an initial system event if Flask is available
             if FLASK_AVAILABLE:
                 # We'll add the initial event after the table is created
@@ -732,7 +873,7 @@ def migrate_data():
     if not FLASK_AVAILABLE:
         print("Skipping data migration - Flask not available")
         return
-        
+
     try:
         # Update existing users with null/invalid data
         users = User.query.all()
@@ -741,7 +882,7 @@ def migrate_data():
                 user.role = Role.TEAM_MEMBER
             if user.two_factor_enabled is None:
                 user.two_factor_enabled = False
-        
+
         # Check if any system admin users exist
         system_admin_count = User.query.filter_by(role=Role.SYSTEM_ADMIN).count()
         if system_admin_count == 0:
@@ -749,10 +890,10 @@ def migrate_data():
             print(f"To promote a user: UPDATE user SET role = '{Role.SYSTEM_ADMIN.value}' WHERE username = 'your_username';")
         else:
             print(f"Found {system_admin_count} system administrator(s)")
-        
+
         db.session.commit()
         print("Data migration completed successfully")
-        
+
     except Exception as e:
         print(f"Error during data migration: {e}")
         db.session.rollback()
@@ -763,7 +904,7 @@ def init_system_settings():
     if not FLASK_AVAILABLE:
         print("Skipping system settings initialization - Flask not available")
         return
-        
+
     # Check if registration_enabled setting exists
     reg_setting = SystemSettings.query.filter_by(key='registration_enabled').first()
     if not reg_setting:
@@ -776,7 +917,7 @@ def init_system_settings():
         db.session.add(reg_setting)
         db.session.commit()
         print("Registration setting initialized to enabled")
-    
+
     # Check if email_verification_required setting exists
     email_verification_setting = SystemSettings.query.filter_by(key='email_verification_required').first()
     if not email_verification_setting:
@@ -789,7 +930,7 @@ def init_system_settings():
         db.session.add(email_verification_setting)
         db.session.commit()
         print("Email verification setting initialized to enabled")
-    
+
     # Check if tracking_script_enabled setting exists
     tracking_script_setting = SystemSettings.query.filter_by(key='tracking_script_enabled').first()
     if not tracking_script_setting:
@@ -802,7 +943,7 @@ def init_system_settings():
         db.session.add(tracking_script_setting)
         db.session.commit()
         print("Tracking script setting initialized to disabled")
-    
+
     # Check if tracking_script_code setting exists
     tracking_script_code_setting = SystemSettings.query.filter_by(key='tracking_script_code').first()
     if not tracking_script_code_setting:
@@ -820,10 +961,10 @@ def init_system_settings():
 def create_new_database(db_path):
     """Create a new database with all tables."""
     print(f"Creating new database at {db_path}")
-    
+
     conn = sqlite3.connect(db_path)
     cursor = conn.cursor()
-    
+
     try:
         create_all_tables(cursor)
         conn.commit()
@@ -840,7 +981,7 @@ def create_all_tables(cursor):
     """Create all tables from scratch."""
     # This would contain all CREATE TABLE statements
     # For brevity, showing key tables only
-    
+
     cursor.execute("""
     CREATE TABLE company (
         id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -854,7 +995,7 @@ def create_all_tables(cursor):
         UNIQUE(name)
     )
     """)
-    
+
     cursor.execute("""
     CREATE TABLE user (
         id INTEGER PRIMARY KEY,
@@ -873,22 +1014,481 @@ def create_all_tables(cursor):
         business_name VARCHAR(100),
         two_factor_enabled BOOLEAN DEFAULT 0,
         two_factor_secret VARCHAR(32),
+        avatar_url VARCHAR(255),
         FOREIGN KEY (company_id) REFERENCES company (id),
         FOREIGN KEY (team_id) REFERENCES team (id)
     )
     """)
-    
+
     # Add other table creation statements as needed
     print("All tables created")
 
 
+def migrate_postgresql_schema():
+    """Migrate PostgreSQL schema for archive functionality."""
+    if not FLASK_AVAILABLE:
+        print("Skipping PostgreSQL migration - Flask not available")
+        return
+    
+    try:
+        import psycopg2
+        from sqlalchemy import text
+        
+        with app.app_context():
+            # Check if we're using PostgreSQL
+            database_url = app.config['SQLALCHEMY_DATABASE_URI']
+            if not ('postgresql://' in database_url or 'postgres://' in database_url):
+                print("Not using PostgreSQL - skipping PostgreSQL migration")
+                return
+            
+            print("Running PostgreSQL schema migrations...")
+            
+            # Check if archived_date column exists
+            result = db.session.execute(text("""
+                SELECT column_name 
+                FROM information_schema.columns 
+                WHERE table_name = 'task' AND column_name = 'archived_date'
+            """))
+            
+            if not result.fetchone():
+                print("Adding archived_date column to task table...")
+                db.session.execute(text("ALTER TABLE task ADD COLUMN archived_date DATE"))
+                db.session.commit()
+            
+            # Check if ARCHIVED status exists in enum
+            result = db.session.execute(text("""
+                SELECT enumlabel 
+                FROM pg_enum 
+                WHERE enumtypid = (SELECT oid FROM pg_type WHERE typname = 'taskstatus') 
+                AND enumlabel = 'ARCHIVED'
+            """))
+            
+            if not result.fetchone():
+                print("Adding ARCHIVED status to TaskStatus enum...")
+                db.session.execute(text("ALTER TYPE taskstatus ADD VALUE 'ARCHIVED'"))
+                db.session.commit()
+            
+            # Check if task_number column exists  
+            result = db.session.execute(text("""
+                SELECT column_name 
+                FROM information_schema.columns 
+                WHERE table_name = 'task' AND column_name = 'task_number'
+            """))
+            
+            if not result.fetchone():
+                print("Adding task_number column to task table...")
+                db.session.execute(text("ALTER TABLE task ADD COLUMN task_number VARCHAR(20) UNIQUE"))
+                
+                # Generate task numbers for existing tasks
+                print("Generating task numbers for existing tasks...")
+                result = db.session.execute(text("SELECT id FROM task WHERE task_number IS NULL ORDER BY id"))
+                tasks_without_numbers = result.fetchall()
+                
+                for i, (task_id,) in enumerate(tasks_without_numbers, 1):
+                    task_number = f"TSK-{i:03d}"
+                    db.session.execute(text("UPDATE task SET task_number = :task_number WHERE id = :task_id"), 
+                                     {"task_number": task_number, "task_id": task_id})
+                
+                db.session.commit()
+                if tasks_without_numbers:
+                    print(f"Generated {len(tasks_without_numbers)} task numbers")
+            
+            # Check if sprint_id column exists
+            result = db.session.execute(text("""
+                SELECT column_name 
+                FROM information_schema.columns 
+                WHERE table_name = 'task' AND column_name = 'sprint_id'
+            """))
+            
+            if not result.fetchone():
+                print("Adding sprint_id column to task table...")
+                db.session.execute(text("ALTER TABLE task ADD COLUMN sprint_id INTEGER"))
+                db.session.execute(text("ALTER TABLE task ADD CONSTRAINT fk_task_sprint FOREIGN KEY (sprint_id) REFERENCES sprint (id)"))
+                db.session.commit()
+            
+            # Check if task_dependency table exists
+            result = db.session.execute(text("""
+                SELECT table_name 
+                FROM information_schema.tables 
+                WHERE table_name = 'task_dependency'
+            """))
+            
+            if not result.fetchone():
+                print("Creating task_dependency table...")
+                db.session.execute(text("""
+                    CREATE TABLE task_dependency (
+                        id SERIAL PRIMARY KEY,
+                        blocked_task_id INTEGER NOT NULL,
+                        blocking_task_id INTEGER NOT NULL,
+                        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        FOREIGN KEY (blocked_task_id) REFERENCES task (id),
+                        FOREIGN KEY (blocking_task_id) REFERENCES task (id),
+                        UNIQUE(blocked_task_id, blocking_task_id),
+                        CHECK (blocked_task_id <> blocking_task_id)
+                    )
+                """))
+                db.session.commit()
+            
+            # Check if sub_task table exists
+            result = db.session.execute(text("""
+                SELECT table_name 
+                FROM information_schema.tables 
+                WHERE table_name = 'sub_task'
+            """))
+            
+            if not result.fetchone():
+                print("Creating sub_task table...")
+                db.session.execute(text("""
+                    CREATE TABLE sub_task (
+                        id SERIAL PRIMARY KEY,
+                        name VARCHAR(200) NOT NULL,
+                        description TEXT,
+                        status taskstatus DEFAULT 'NOT_STARTED',
+                        priority taskpriority DEFAULT 'MEDIUM',
+                        estimated_hours FLOAT,
+                        task_id INTEGER NOT NULL,
+                        assigned_to_id INTEGER,
+                        start_date DATE,
+                        due_date DATE,
+                        completed_date DATE,
+                        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        created_by_id INTEGER NOT NULL,
+                        FOREIGN KEY (task_id) REFERENCES task (id) ON DELETE CASCADE,
+                        FOREIGN KEY (assigned_to_id) REFERENCES "user" (id),
+                        FOREIGN KEY (created_by_id) REFERENCES "user" (id)
+                    )
+                """))
+                
+                # Create index for better performance
+                db.session.execute(text("CREATE INDEX idx_subtask_task_id ON sub_task(task_id)"))
+                db.session.commit()
+            
+            # Check if avatar_url column exists in user table
+            result = db.session.execute(text("""
+                SELECT column_name 
+                FROM information_schema.columns 
+                WHERE table_name = 'user' AND column_name = 'avatar_url'
+            """))
+            
+            if not result.fetchone():
+                print("Adding avatar_url column to user table...")
+                db.session.execute(text('ALTER TABLE "user" ADD COLUMN avatar_url VARCHAR(255)'))
+                db.session.commit()
+            
+            # Check if comment table exists
+            result = db.session.execute(text("""
+                SELECT table_name 
+                FROM information_schema.tables 
+                WHERE table_name = 'comment'
+            """))
+            
+            if not result.fetchone():
+                print("Creating comment table...")
+                
+                # Create comment visibility enum type if it doesn't exist
+                db.session.execute(text("""
+                    DO $$ BEGIN
+                        CREATE TYPE commentvisibility AS ENUM ('TEAM', 'COMPANY');
+                    EXCEPTION
+                        WHEN duplicate_object THEN null;
+                    END $$;
+                """))
+                
+                db.session.execute(text("""
+                    CREATE TABLE comment (
+                        id SERIAL PRIMARY KEY,
+                        content TEXT NOT NULL,
+                        task_id INTEGER NOT NULL,
+                        parent_comment_id INTEGER,
+                        visibility commentvisibility DEFAULT 'COMPANY',
+                        is_edited BOOLEAN DEFAULT FALSE,
+                        edited_at TIMESTAMP,
+                        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        created_by_id INTEGER NOT NULL,
+                        FOREIGN KEY (task_id) REFERENCES task (id) ON DELETE CASCADE,
+                        FOREIGN KEY (parent_comment_id) REFERENCES comment (id),
+                        FOREIGN KEY (created_by_id) REFERENCES "user" (id)
+                    )
+                """))
+                
+                # Create indexes for better performance
+                db.session.execute(text("CREATE INDEX idx_comment_task ON comment(task_id)"))
+                db.session.execute(text("CREATE INDEX idx_comment_parent ON comment(parent_comment_id)"))
+                db.session.execute(text("CREATE INDEX idx_comment_created_by ON comment(created_by_id)"))
+                db.session.execute(text("CREATE INDEX idx_comment_created_at ON comment(created_at DESC)"))
+                db.session.commit()
+            
+            # Check if branding_settings table exists
+            result = db.session.execute(text("""
+                SELECT table_name 
+                FROM information_schema.tables 
+                WHERE table_name = 'branding_settings'
+            """))
+            
+            if not result.fetchone():
+                print("Creating branding_settings table...")
+                db.session.execute(text("""
+                    CREATE TABLE branding_settings (
+                        id SERIAL PRIMARY KEY,
+                        app_name VARCHAR(100) NOT NULL DEFAULT 'Time Tracker',
+                        logo_filename VARCHAR(255),
+                        logo_alt_text VARCHAR(255) DEFAULT 'Logo',
+                        favicon_filename VARCHAR(255),
+                        primary_color VARCHAR(7) DEFAULT '#007bff',
+                        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        updated_by_id INTEGER,
+                        FOREIGN KEY (updated_by_id) REFERENCES "user" (id)
+                    )
+                """))
+                db.session.commit()
+            
+            # Check if company_settings table exists
+            result = db.session.execute(text("""
+                SELECT table_name 
+                FROM information_schema.tables 
+                WHERE table_name = 'company_settings'
+            """))
+            
+            if not result.fetchone():
+                print("Creating company_settings table...")
+                db.session.execute(text("""
+                    CREATE TABLE company_settings (
+                        id SERIAL PRIMARY KEY,
+                        company_id INTEGER NOT NULL,
+                        default_comment_visibility commentvisibility DEFAULT 'COMPANY',
+                        allow_team_visibility_comments BOOLEAN DEFAULT TRUE,
+                        require_task_assignment BOOLEAN DEFAULT FALSE,
+                        allow_task_creation_by_members BOOLEAN DEFAULT TRUE,
+                        restrict_project_access_by_team BOOLEAN DEFAULT FALSE,
+                        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        created_by_id INTEGER,
+                        FOREIGN KEY (company_id) REFERENCES company (id),
+                        FOREIGN KEY (created_by_id) REFERENCES "user" (id),
+                        UNIQUE(company_id)
+                    )
+                """))
+                db.session.commit()
+            
+            print("PostgreSQL schema migration completed successfully!")
+            
+    except Exception as e:
+        print(f"Error during PostgreSQL migration: {e}")
+        if FLASK_AVAILABLE:
+            db.session.rollback()
+        raise
+
+
+def migrate_dashboard_system(db_file=None):
+    """Migrate to add Dashboard widget system."""
+    db_path = get_db_path(db_file)
+
+    print(f"Migrating Dashboard system in {db_path}...")
+
+    if not os.path.exists(db_path):
+        print(f"Database file {db_path} does not exist. Run basic migration first.")
+        return False
+
+    conn = sqlite3.connect(db_path)
+    cursor = conn.cursor()
+
+    try:
+        # Check if user_dashboard table already exists
+        cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='user_dashboard'")
+        if cursor.fetchone():
+            print("Dashboard tables already exist. Skipping migration.")
+            return True
+
+        print("Creating Dashboard system tables...")
+
+        # Create user_dashboard table
+        cursor.execute("""
+        CREATE TABLE user_dashboard (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            user_id INTEGER NOT NULL,
+            name VARCHAR(100) DEFAULT 'My Dashboard',
+            is_default BOOLEAN DEFAULT 1,
+            layout_config TEXT,
+            grid_columns INTEGER DEFAULT 6,
+            theme VARCHAR(20) DEFAULT 'light',
+            auto_refresh INTEGER DEFAULT 300,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (user_id) REFERENCES user (id)
+        )
+        """)
+
+        # Create dashboard_widget table
+        cursor.execute("""
+        CREATE TABLE dashboard_widget (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            dashboard_id INTEGER NOT NULL,
+            widget_type VARCHAR(50) NOT NULL,
+            grid_x INTEGER NOT NULL DEFAULT 0,
+            grid_y INTEGER NOT NULL DEFAULT 0,
+            grid_width INTEGER NOT NULL DEFAULT 1,
+            grid_height INTEGER NOT NULL DEFAULT 1,
+            title VARCHAR(100),
+            config TEXT,
+            refresh_interval INTEGER DEFAULT 60,
+            is_visible BOOLEAN DEFAULT 1,
+            is_minimized BOOLEAN DEFAULT 0,
+            z_index INTEGER DEFAULT 1,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (dashboard_id) REFERENCES user_dashboard (id)
+        )
+        """)
+
+        # Create widget_template table
+        cursor.execute("""
+        CREATE TABLE widget_template (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            widget_type VARCHAR(50) NOT NULL,
+            name VARCHAR(100) NOT NULL,
+            description TEXT,
+            icon VARCHAR(50),
+            default_width INTEGER DEFAULT 1,
+            default_height INTEGER DEFAULT 1,
+            default_config TEXT,
+            required_role VARCHAR(50) DEFAULT 'Team Member',
+            is_active BOOLEAN DEFAULT 1,
+            category VARCHAR(50) DEFAULT 'General',
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+        """)
+
+        # Create indexes for better performance
+        cursor.execute("CREATE INDEX idx_user_dashboard_user ON user_dashboard(user_id)")
+        cursor.execute("CREATE INDEX idx_user_dashboard_default ON user_dashboard(user_id, is_default)")
+        cursor.execute("CREATE INDEX idx_dashboard_widget_dashboard ON dashboard_widget(dashboard_id)")
+        cursor.execute("CREATE INDEX idx_dashboard_widget_type ON dashboard_widget(widget_type)")
+        cursor.execute("CREATE INDEX idx_widget_template_type ON widget_template(widget_type)")
+        cursor.execute("CREATE INDEX idx_widget_template_category ON widget_template(category)")
+
+        # Insert default widget templates
+        default_templates = [
+            # Time Tracking Widgets
+            ('current_timer', 'Current Timer', 'Shows active time tracking session', '⏲️', 2, 1, '{}', 'Team Member', 'Time'),
+            ('daily_summary', 'Daily Summary', 'Today\'s time tracking summary', '📊', 2, 1, '{}', 'Team Member', 'Time'),
+            ('weekly_chart', 'Weekly Chart', 'Weekly time distribution chart', '📈', 3, 2, '{}', 'Team Member', 'Time'),
+            ('break_reminder', 'Break Reminder', 'Reminds when breaks are due', '☕', 1, 1, '{}', 'Team Member', 'Time'),
+
+            # Project Management Widgets
+            ('active_projects', 'Active Projects', 'List of current active projects', '📁', 2, 2, '{}', 'Team Member', 'Projects'),
+            ('project_progress', 'Project Progress', 'Visual progress of projects', '🎯', 2, 1, '{}', 'Team Member', 'Projects'),
+            ('project_activity', 'Recent Activity', 'Recent project activities', '🔄', 2, 1, '{}', 'Team Member', 'Projects'),
+            ('project_deadlines', 'Upcoming Deadlines', 'Projects with approaching deadlines', '⚠️', 2, 1, '{}', 'Team Member', 'Projects'),
+
+            # Task Management Widgets
+            ('assigned_tasks', 'My Tasks', 'Tasks assigned to me', '✅', 2, 2, '{}', 'Team Member', 'Tasks'),
+            ('task_priority', 'Priority Matrix', 'Tasks organized by priority', '🔥', 2, 2, '{}', 'Team Member', 'Tasks'),
+            ('task_trends', 'Task Trends', 'Task completion trends', '📉', 2, 1, '{}', 'Team Member', 'Tasks'),
+
+            # Analytics Widgets
+            ('productivity_metrics', 'Productivity', 'Personal productivity metrics', '⚡', 1, 1, '{}', 'Team Member', 'Analytics'),
+            ('time_distribution', 'Time Distribution', 'How time is distributed', '🥧', 2, 2, '{}', 'Team Member', 'Analytics'),
+            ('goal_progress', 'Goals', 'Progress towards goals', '🎯', 1, 1, '{}', 'Team Member', 'Analytics'),
+            ('performance_comparison', 'Performance', 'Performance comparison over time', '📊', 2, 1, '{}', 'Team Member', 'Analytics'),
+
+            # Team Widgets (Role-based)
+            ('team_overview', 'Team Overview', 'Overview of team performance', '👥', 3, 2, '{}', 'Team Leader', 'Team'),
+            ('resource_allocation', 'Resources', 'Team resource allocation', '📊', 2, 2, '{}', 'Administrator', 'Team'),
+            ('team_performance', 'Team Performance', 'Team performance metrics', '📈', 3, 1, '{}', 'Supervisor', 'Team'),
+            ('company_metrics', 'Company Metrics', 'Company-wide metrics', '🏢', 3, 2, '{}', 'System Administrator', 'Team'),
+
+            # Quick Action Widgets
+            ('quick_timer', 'Quick Timer', 'Quick time tracking controls', '▶️', 1, 1, '{}', 'Team Member', 'Actions'),
+            ('favorite_projects', 'Favorites', 'Quick access to favorite projects', '⭐', 1, 2, '{}', 'Team Member', 'Actions'),
+            ('recent_actions', 'Recent Actions', 'Recently performed actions', '🕒', 2, 1, '{}', 'Team Member', 'Actions'),
+            ('shortcuts_panel', 'Shortcuts', 'Quick action shortcuts', '🚀', 1, 1, '{}', 'Team Member', 'Actions'),
+        ]
+
+        cursor.executemany("""
+        INSERT INTO widget_template
+        (widget_type, name, description, icon, default_width, default_height, default_config, required_role, category)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+        """, default_templates)
+
+        conn.commit()
+        print("Dashboard system migration completed successfully!")
+        return True
+
+    except Exception as e:
+        print(f"Error during Dashboard system migration: {e}")
+        conn.rollback()
+        raise
+    finally:
+        conn.close()
+
+
+def migrate_comment_system(db_file=None):
+    """Migrate to add Comment system for tasks."""
+    db_path = get_db_path(db_file)
+
+    print(f"Migrating Comment system in {db_path}...")
+
+    if not os.path.exists(db_path):
+        print(f"Database file {db_path} does not exist. Run basic migration first.")
+        return False
+
+    conn = sqlite3.connect(db_path)
+    cursor = conn.cursor()
+
+    try:
+        # Check if comment table already exists
+        cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='comment'")
+        if cursor.fetchone():
+            print("Comment table already exists. Skipping migration.")
+            return True
+
+        print("Creating Comment system table...")
+
+        # Create comment table
+        cursor.execute("""
+        CREATE TABLE comment (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            content TEXT NOT NULL,
+            task_id INTEGER NOT NULL,
+            parent_comment_id INTEGER,
+            visibility VARCHAR(20) DEFAULT 'Company',
+            is_edited BOOLEAN DEFAULT 0,
+            edited_at TIMESTAMP,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            created_by_id INTEGER NOT NULL,
+            FOREIGN KEY (task_id) REFERENCES task (id) ON DELETE CASCADE,
+            FOREIGN KEY (parent_comment_id) REFERENCES comment (id),
+            FOREIGN KEY (created_by_id) REFERENCES user (id)
+        )
+        """)
+
+        # Create indexes for better performance
+        cursor.execute("CREATE INDEX idx_comment_task ON comment(task_id)")
+        cursor.execute("CREATE INDEX idx_comment_parent ON comment(parent_comment_id)")
+        cursor.execute("CREATE INDEX idx_comment_created_by ON comment(created_by_id)")
+        cursor.execute("CREATE INDEX idx_comment_created_at ON comment(created_at DESC)")
+
+        conn.commit()
+        print("Comment system migration completed successfully!")
+        return True
+
+    except Exception as e:
+        print(f"Error during Comment system migration: {e}")
+        conn.rollback()
+        raise
+    finally:
+        conn.close()
+
+
 def main():
     """Main function with command line interface."""
     parser = argparse.ArgumentParser(description='TimeTrack Database Migration Tool')
     parser.add_argument('--db-file', '-d', help='Path to SQLite database file')
-    parser.add_argument('--create-new', '-c', action='store_true', 
+    parser.add_argument('--create-new', '-c', action='store_true',
                        help='Create a new database (will overwrite existing)')
-    parser.add_argument('--migrate-all', '-m', action='store_true', 
+    parser.add_argument('--migrate-all', '-m', action='store_true',
                        help='Run all migrations (default action)')
     parser.add_argument('--task-system', '-t', action='store_true',
                        help='Run only task system migration')
@@ -898,16 +1498,20 @@ def main():
                        help='Run only basic table migrations')
     parser.add_argument('--system-events', '-s', action='store_true',
                        help='Run only system events migration')
-    
+    parser.add_argument('--dashboard', '--dash', action='store_true',
+                       help='Run only dashboard system migration')
+    parser.add_argument('--postgresql', '--pg', action='store_true',
+                       help='Run only PostgreSQL schema migration')
+
     args = parser.parse_args()
-    
+
     db_path = get_db_path(args.db_file)
-    
+
     print(f"TimeTrack Database Migration Tool")
     print(f"Database: {db_path}")
     print(f"Flask available: {FLASK_AVAILABLE}")
     print("-" * 50)
-    
+
     try:
         if args.create_new:
             if os.path.exists(db_path):
@@ -917,25 +1521,32 @@ def main():
                     return
                 os.remove(db_path)
             create_new_database(db_path)
-            
+
         elif args.task_system:
             migrate_task_system(db_path)
-            
+
         elif args.company_model:
             migrate_to_company_model(db_path)
-            
+
         elif args.basic:
             run_basic_migrations(db_path)
-            
+
         elif args.system_events:
             migrate_system_events(db_path)
-            
+
+
+        elif args.dashboard:
+            migrate_dashboard_system(db_path)
+
+        elif args.postgresql:
+            migrate_postgresql_schema()
+
         else:
             # Default: run all migrations
             run_all_migrations(db_path)
-            
+
         print("\nMigration completed successfully!")
-        
+
     except Exception as e:
         print(f"\nError during migration: {e}")
         sys.exit(1)
diff --git a/models.py b/models.py
index 6736d25..68de2e6 100644
--- a/models.py
+++ b/models.py
@@ -26,22 +26,22 @@ class Company(db.Model):
     slug = db.Column(db.String(50), unique=True, nullable=False)  # URL-friendly identifier
     description = db.Column(db.Text)
     created_at = db.Column(db.DateTime, default=datetime.now)
-    
+
     # Freelancer support
     is_personal = db.Column(db.Boolean, default=False)  # True for auto-created freelancer companies
-    
+
     # Company settings
     is_active = db.Column(db.Boolean, default=True)
     max_users = db.Column(db.Integer, default=100)  # Optional user limit
-    
+
     # Relationships
     users = db.relationship('User', backref='company', lazy=True)
-    teams = db.relationship('Team', backref='company', lazy=True) 
+    teams = db.relationship('Team', backref='company', lazy=True)
     projects = db.relationship('Project', backref='company', lazy=True)
-    
+
     def __repr__(self):
         return f'<Company {self.name}>'
-    
+
     def generate_slug(self):
         """Generate URL-friendly slug from company name"""
         import re
@@ -55,16 +55,16 @@ class Team(db.Model):
     name = db.Column(db.String(100), nullable=False)
     description = db.Column(db.String(255))
     created_at = db.Column(db.DateTime, default=datetime.now)
-    
+
     # Company association for multi-tenancy
     company_id = db.Column(db.Integer, db.ForeignKey('company.id'), nullable=False)
-    
+
     # Relationship with users (one team has many users)
     users = db.relationship('User', backref='team', lazy=True)
-    
+
     # Unique constraint per company
     __table_args__ = (db.UniqueConstraint('company_id', 'name', name='uq_team_name_per_company'),)
-    
+
     def __repr__(self):
         return f'<Team {self.name}>'
 
@@ -76,52 +76,52 @@ class Project(db.Model):
     is_active = db.Column(db.Boolean, default=True)
     created_at = db.Column(db.DateTime, default=datetime.now)
     updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
-    
+
     # Company association for multi-tenancy
     company_id = db.Column(db.Integer, db.ForeignKey('company.id'), nullable=False)
-    
+
     # Foreign key to user who created the project (Admin/Supervisor)
     created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    
+
     # Optional team assignment - if set, only team members can log time to this project
     team_id = db.Column(db.Integer, db.ForeignKey('team.id'), nullable=True)
-    
+
     # Project categorization
     category_id = db.Column(db.Integer, db.ForeignKey('project_category.id'), nullable=True)
-    
+
     # Project dates
     start_date = db.Column(db.Date, nullable=True)
     end_date = db.Column(db.Date, nullable=True)
-    
+
     # Relationships
     created_by = db.relationship('User', foreign_keys=[created_by_id], backref='created_projects')
     team = db.relationship('Team', backref='projects')
     time_entries = db.relationship('TimeEntry', backref='project', lazy=True)
     category = db.relationship('ProjectCategory', back_populates='projects')
-    
+
     # Unique constraint per company
     __table_args__ = (db.UniqueConstraint('company_id', 'code', name='uq_project_code_per_company'),)
-    
+
     def __repr__(self):
         return f'<Project {self.code}: {self.name}>'
-    
+
     def is_user_allowed(self, user):
         """Check if a user is allowed to log time to this project"""
         if not self.is_active:
             return False
-        
+
         # Must be in same company
         if self.company_id != user.company_id:
             return False
-        
+
         # Admins and Supervisors can log time to any project in their company
         if user.role in [Role.ADMIN, Role.SUPERVISOR]:
             return True
-        
+
         # If project is team-specific, only team members can log time
         if self.team_id:
             return user.team_id == self.team_id
-        
+
         # If no team restriction, any user in the company can log time
         return True
 
@@ -129,55 +129,58 @@ def is_user_allowed(self, user):
 class User(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     username = db.Column(db.String(80), nullable=False)
-    email = db.Column(db.String(120), nullable=False)
+    email = db.Column(db.String(120), nullable=True)
     password_hash = db.Column(db.String(128))
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    
+
     # Company association for multi-tenancy
     company_id = db.Column(db.Integer, db.ForeignKey('company.id'), nullable=False)
-    
+
     # Email verification fields
     is_verified = db.Column(db.Boolean, default=False)
     verification_token = db.Column(db.String(100), unique=True, nullable=True)
     token_expiry = db.Column(db.DateTime, nullable=True)
-    
+
     # New field for blocking users
     is_blocked = db.Column(db.Boolean, default=False)
-    
+
     # New fields for role and team
     role = db.Column(db.Enum(Role, values_callable=lambda obj: [e.value for e in obj]), default=Role.TEAM_MEMBER)
     team_id = db.Column(db.Integer, db.ForeignKey('team.id'), nullable=True)
-    
+
     # Freelancer support
     account_type = db.Column(db.Enum(AccountType, values_callable=lambda obj: [e.value for e in obj]), default=AccountType.COMPANY_USER)
     business_name = db.Column(db.String(100), nullable=True)  # Optional business name for freelancers
-    
+
     # Unique constraints per company
     __table_args__ = (
         db.UniqueConstraint('company_id', 'username', name='uq_user_username_per_company'),
         db.UniqueConstraint('company_id', 'email', name='uq_user_email_per_company'),
     )
-    
+
     # Two-Factor Authentication fields
     two_factor_enabled = db.Column(db.Boolean, default=False)
     two_factor_secret = db.Column(db.String(32), nullable=True)  # Base32 encoded secret
     
+    # Avatar field
+    avatar_url = db.Column(db.String(255), nullable=True)  # URL to user's avatar image
+
     # Relationships
     time_entries = db.relationship('TimeEntry', backref='user', lazy=True)
     work_config = db.relationship('WorkConfig', backref='user', lazy=True, uselist=False)
-    
+
     def set_password(self, password):
         self.password_hash = generate_password_hash(password)
-        
+
     def check_password(self, password):
         return check_password_hash(self.password_hash, password)
-    
+
     def generate_verification_token(self):
         """Generate a verification token that expires in 24 hours"""
         self.verification_token = secrets.token_urlsafe(32)
         self.token_expiry = datetime.utcnow() + timedelta(hours=24)
         return self.verification_token
-    
+
     def verify_token(self, token):
         """Verify the token and mark user as verified if valid"""
         if token == self.verification_token and self.token_expiry > datetime.utcnow():
@@ -186,24 +189,26 @@ def verify_token(self, token):
             self.token_expiry = None
             return True
         return False
-    
+
     def generate_2fa_secret(self):
         """Generate a new 2FA secret"""
         import pyotp
         self.two_factor_secret = pyotp.random_base32()
         return self.two_factor_secret
     
-    def get_2fa_uri(self):
+    def get_2fa_uri(self, issuer_name=None):
         """Get the provisioning URI for QR code generation"""
         if not self.two_factor_secret:
             return None
         import pyotp
         totp = pyotp.TOTP(self.two_factor_secret)
+        if issuer_name is None:
+            issuer_name = "Time Tracker"  # Default fallback
         return totp.provisioning_uri(
             name=self.email,
-            issuer_name="TimeTrack"
+            issuer_name=issuer_name
         )
-    
+
     def verify_2fa_token(self, token, allow_setup=False):
         """Verify a 2FA token"""
         if not self.two_factor_secret:
@@ -214,7 +219,43 @@ def verify_2fa_token(self, token, allow_setup=False):
         import pyotp
         totp = pyotp.TOTP(self.two_factor_secret)
         return totp.verify(token, valid_window=1)  # Allow 1 window tolerance
-    
+
+    def get_avatar_url(self, size=40):
+        """Get user's avatar URL or generate a default one"""
+        if self.avatar_url:
+            return self.avatar_url
+        
+        # Generate a default avatar using DiceBear Avatars (similar to GitHub's identicons)
+        # Using initials style for a clean, professional look
+        import hashlib
+        
+        # Create a hash from username for consistent colors
+        hash_input = f"{self.username}_{self.id}".encode('utf-8')
+        hash_hex = hashlib.md5(hash_input).hexdigest()
+        
+        # Use DiceBear API for avatar generation
+        # For initials style, we need to provide the actual initials
+        initials = self.get_initials()
+        
+        # Generate avatar URL with initials
+        # Using a color based on the hash for consistency
+        bg_colors = ['0ea5e9', '8b5cf6', 'ec4899', 'f59e0b', '10b981', 'ef4444', '3b82f6', '6366f1']
+        color_index = int(hash_hex[:2], 16) % len(bg_colors)
+        bg_color = bg_colors[color_index]
+        
+        avatar_url = f"https://api.dicebear.com/7.x/initials/svg?seed={initials}&size={size}&backgroundColor={bg_color}&fontSize=50"
+        
+        return avatar_url
+    
+    def get_initials(self):
+        """Get user initials for avatar display"""
+        parts = self.username.split()
+        if len(parts) >= 2:
+            return f"{parts[0][0]}{parts[-1][0]}".upper()
+        elif self.username:
+            return self.username[:2].upper()
+        return "??"
+
     def __repr__(self):
         return f'<User {self.username}>'
 
@@ -224,10 +265,47 @@ class SystemSettings(db.Model):
     value = db.Column(db.String(255), nullable=False)
     description = db.Column(db.String(255))
     updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
-    
+
     def __repr__(self):
         return f'<SystemSettings {self.key}={self.value}>'
 
+class BrandingSettings(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    app_name = db.Column(db.String(100), nullable=False, default='Time Tracker')
+    logo_filename = db.Column(db.String(255), nullable=True)  # Filename of uploaded logo
+    logo_alt_text = db.Column(db.String(255), nullable=True, default='Logo')
+    favicon_filename = db.Column(db.String(255), nullable=True)  # Filename of uploaded favicon
+    primary_color = db.Column(db.String(7), nullable=True, default='#007bff')  # Hex color
+    
+    # Imprint/Legal page settings
+    imprint_enabled = db.Column(db.Boolean, default=False)  # Enable/disable imprint page
+    imprint_title = db.Column(db.String(200), nullable=True, default='Imprint')  # Page title
+    imprint_content = db.Column(db.Text, nullable=True)  # HTML content for imprint page
+    
+    # Meta fields
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
+    updated_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
+    
+    # Relationships
+    updated_by = db.relationship('User', foreign_keys=[updated_by_id])
+    
+    def __repr__(self):
+        return f'<BrandingSettings {self.app_name}>'
+    
+    @staticmethod
+    def get_current():
+        """Get current branding settings or create defaults"""
+        settings = BrandingSettings.query.first()
+        if not settings:
+            settings = BrandingSettings(
+                app_name='Time Tracker',
+                logo_alt_text='Application Logo'
+            )
+            db.session.add(settings)
+            db.session.commit()
+        return settings
+
 class TimeEntry(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     arrival_time = db.Column(db.DateTime, nullable=False)
@@ -237,14 +315,14 @@ class TimeEntry(db.Model):
     pause_start_time = db.Column(db.DateTime, nullable=True)
     total_break_duration = db.Column(db.Integer, default=0)  # Total break duration in seconds
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
-    
+
     # Project association - nullable for backward compatibility
     project_id = db.Column(db.Integer, db.ForeignKey('project.id'), nullable=True)
-    
+
     # Task/SubTask associations - nullable for backward compatibility
     task_id = db.Column(db.Integer, db.ForeignKey('task.id'), nullable=True)
     subtask_id = db.Column(db.Integer, db.ForeignKey('sub_task.id'), nullable=True)
-    
+
     # Optional notes/description for the time entry
     notes = db.Column(db.Text, nullable=True)
 
@@ -259,15 +337,15 @@ class WorkConfig(db.Model):
     break_threshold_hours = db.Column(db.Float, default=6.0)  # Work hours that trigger mandatory break
     additional_break_minutes = db.Column(db.Integer, default=15)  # Default 15 minutes for additional break
     additional_break_threshold_hours = db.Column(db.Float, default=9.0)  # Work hours that trigger additional break
-    
+
     # Time rounding settings
     time_rounding_minutes = db.Column(db.Integer, default=0)  # 0 = no rounding, 15 = 15 min, 30 = 30 min
     round_to_nearest = db.Column(db.Boolean, default=True)  # True = round to nearest, False = round up
-    
+
     # Date/time format settings
     time_format_24h = db.Column(db.Boolean, default=True)  # True = 24h, False = 12h (AM/PM)
     date_format = db.Column(db.String(20), default='ISO')  # ISO, US, EU, etc.
-    
+
     created_at = db.Column(db.DateTime, default=datetime.now)
     updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
@@ -288,33 +366,33 @@ class WorkRegion(enum.Enum):
 class CompanyWorkConfig(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     company_id = db.Column(db.Integer, db.ForeignKey('company.id'), nullable=False)
-    
+
     # Work policy settings (legal requirements)
     work_hours_per_day = db.Column(db.Float, default=8.0)  # Standard work hours per day
     mandatory_break_minutes = db.Column(db.Integer, default=30)  # Required break duration
     break_threshold_hours = db.Column(db.Float, default=6.0)  # Hours that trigger mandatory break
     additional_break_minutes = db.Column(db.Integer, default=15)  # Additional break duration
     additional_break_threshold_hours = db.Column(db.Float, default=9.0)  # Hours that trigger additional break
-    
+
     # Regional compliance
     region = db.Column(db.Enum(WorkRegion), default=WorkRegion.GERMANY)
     region_name = db.Column(db.String(50), default='Germany')
-    
+
     # Metadata
     created_at = db.Column(db.DateTime, default=datetime.now)
     updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
     created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
-    
+
     # Relationships
     company = db.relationship('Company', backref='work_config')
     created_by = db.relationship('User', foreign_keys=[created_by_id])
-    
+
     # Unique constraint - one config per company
     __table_args__ = (db.UniqueConstraint('company_id', name='uq_company_work_config'),)
-    
+
     def __repr__(self):
         return f'<CompanyWorkConfig {self.company.name}: {self.region.value}, {self.work_hours_per_day}h/day>'
-    
+
     @classmethod
     def get_regional_preset(cls, region):
         """Get regional preset configuration."""
@@ -362,29 +440,65 @@ def get_regional_preset(cls, region):
         }
         return presets.get(region, presets[WorkRegion.GERMANY])
 
+# Comment visibility enumeration
+class CommentVisibility(enum.Enum):
+    TEAM = "Team"  # Only visible to team members
+    COMPANY = "Company"  # Visible to all company members
+
+# Company Settings (General company preferences)
+class CompanySettings(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    company_id = db.Column(db.Integer, db.ForeignKey('company.id'), nullable=False)
+    
+    # Comment settings
+    default_comment_visibility = db.Column(db.Enum(CommentVisibility), default=CommentVisibility.COMPANY)
+    allow_team_visibility_comments = db.Column(db.Boolean, default=True)  # Allow users to set comments as team-only
+    
+    # Task settings
+    require_task_assignment = db.Column(db.Boolean, default=False)  # Tasks must be assigned before work can begin
+    allow_task_creation_by_members = db.Column(db.Boolean, default=True)  # Team members can create tasks
+    
+    # Project settings
+    restrict_project_access_by_team = db.Column(db.Boolean, default=False)  # Only team members can access team projects
+    
+    # Metadata
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
+    created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
+    
+    # Relationships
+    company = db.relationship('Company', backref=db.backref('settings', uselist=False))
+    created_by = db.relationship('User', foreign_keys=[created_by_id])
+    
+    # Unique constraint - one settings per company
+    __table_args__ = (db.UniqueConstraint('company_id', name='uq_company_settings'),)
+    
+    def __repr__(self):
+        return f'<CompanySettings {self.company.name}>'
+
 # User Preferences (User-configurable display settings)
 class UserPreferences(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    
+
     # Display format preferences
     time_format_24h = db.Column(db.Boolean, default=True)  # True = 24h, False = 12h (AM/PM)
     date_format = db.Column(db.String(20), default='ISO')  # ISO, US, EU, etc.
-    
+
     # Time rounding preferences
     time_rounding_minutes = db.Column(db.Integer, default=0)  # 0 = no rounding, 15 = 15 min, 30 = 30 min
     round_to_nearest = db.Column(db.Boolean, default=True)  # True = round to nearest, False = round up
-    
+
     # Metadata
     created_at = db.Column(db.DateTime, default=datetime.now)
     updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
-    
-    # Relationships  
+
+    # Relationships
     user = db.relationship('User', backref=db.backref('preferences', uselist=False))
-    
+
     # Unique constraint - one preferences per user
     __table_args__ = (db.UniqueConstraint('user_id', name='uq_user_preferences'),)
-    
+
     def __repr__(self):
         return f'<UserPreferences {self.user.username}: {self.date_format}, {"24h" if self.time_format_24h else "12h"}>'
 
@@ -395,23 +509,23 @@ class ProjectCategory(db.Model):
     description = db.Column(db.Text, nullable=True)
     color = db.Column(db.String(7), default='#007bff')  # Hex color for UI
     icon = db.Column(db.String(50), nullable=True)  # Icon name/emoji
-    
+
     # Company association for multi-tenancy
     company_id = db.Column(db.Integer, db.ForeignKey('company.id'), nullable=False)
-    
+
     # Metadata
     created_at = db.Column(db.DateTime, default=datetime.now)
     updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
     created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    
+
     # Relationships
     company = db.relationship('Company', backref='project_categories')
     created_by = db.relationship('User', foreign_keys=[created_by_id])
     projects = db.relationship('Project', back_populates='category', lazy=True)
-    
+
     # Unique constraint per company
     __table_args__ = (db.UniqueConstraint('company_id', 'name', name='uq_category_name_per_company'),)
-    
+
     def __repr__(self):
         return f'<ProjectCategory {self.name}>'
 
@@ -421,6 +535,7 @@ class TaskStatus(enum.Enum):
     IN_PROGRESS = "In Progress"
     ON_HOLD = "On Hold"
     COMPLETED = "Completed"
+    ARCHIVED = "Archived"
     CANCELLED = "Cancelled"
 
 # Task priority enumeration
@@ -433,159 +548,292 @@ class TaskPriority(enum.Enum):
 # Task model for project breakdown
 class Task(db.Model):
     id = db.Column(db.Integer, primary_key=True)
+    task_number = db.Column(db.String(20), nullable=False, unique=True)  # e.g., "TSK-001", "TSK-002"
     name = db.Column(db.String(200), nullable=False)
     description = db.Column(db.Text, nullable=True)
-    
+
     # Task properties
     status = db.Column(db.Enum(TaskStatus), default=TaskStatus.NOT_STARTED)
     priority = db.Column(db.Enum(TaskPriority), default=TaskPriority.MEDIUM)
     estimated_hours = db.Column(db.Float, nullable=True)  # Estimated time to complete
-    
+
     # Project association
     project_id = db.Column(db.Integer, db.ForeignKey('project.id'), nullable=False)
     
+    # Sprint association (optional)
+    sprint_id = db.Column(db.Integer, db.ForeignKey('sprint.id'), nullable=True)
+
     # Task assignment
     assigned_to_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
-    
+
     # Task dates
     start_date = db.Column(db.Date, nullable=True)
     due_date = db.Column(db.Date, nullable=True)
     completed_date = db.Column(db.Date, nullable=True)
-    
+    archived_date = db.Column(db.Date, nullable=True)
+
     # Metadata
     created_at = db.Column(db.DateTime, default=datetime.now)
     updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
     created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    
+
     # Relationships
     project = db.relationship('Project', backref='tasks')
     assigned_to = db.relationship('User', foreign_keys=[assigned_to_id], backref='assigned_tasks')
     created_by = db.relationship('User', foreign_keys=[created_by_id])
     subtasks = db.relationship('SubTask', backref='parent_task', lazy=True, cascade='all, delete-orphan')
     time_entries = db.relationship('TimeEntry', backref='task', lazy=True)
-    
+
     def __repr__(self):
         return f'<Task {self.name} ({self.status.value})>'
-    
+
     @property
     def progress_percentage(self):
         """Calculate task progress based on subtasks completion"""
         if not self.subtasks:
             return 100 if self.status == TaskStatus.COMPLETED else 0
-        
+
         completed_subtasks = sum(1 for subtask in self.subtasks if subtask.status == TaskStatus.COMPLETED)
         return int((completed_subtasks / len(self.subtasks)) * 100)
-    
+
     @property
     def total_time_logged(self):
         """Calculate total time logged to this task (in seconds)"""
         return sum(entry.duration or 0 for entry in self.time_entries if entry.duration)
-    
+
     def can_user_access(self, user):
         """Check if a user can access this task"""
         return self.project.is_user_allowed(user)
 
+    @classmethod
+    def generate_task_number(cls, company_id):
+        """Generate next task number for the company"""
+        # Get the highest task number for this company
+        last_task = cls.query.join(Project).filter(
+            Project.company_id == company_id,
+            cls.task_number.like('TSK-%')
+        ).order_by(cls.task_number.desc()).first()
+        
+        if last_task and last_task.task_number:
+            try:
+                # Extract number from TSK-XXX format
+                last_num = int(last_task.task_number.split('-')[1])
+                return f"TSK-{last_num + 1:03d}"
+            except (IndexError, ValueError):
+                pass
+        
+        return "TSK-001"
+
+    @property
+    def blocked_by_tasks(self):
+        """Get tasks that are blocking this task"""
+        return [dep.blocking_task for dep in self.blocked_by_dependencies]
+    
+    @property
+    def blocking_tasks(self):
+        """Get tasks that this task is blocking"""
+        return [dep.blocked_task for dep in self.blocking_dependencies]
+
+# Task Dependencies model for tracking blocking relationships
+class TaskDependency(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    
+    # The task that is blocked (cannot start until blocking task is done)
+    blocked_task_id = db.Column(db.Integer, db.ForeignKey('task.id'), nullable=False)
+    
+    # The task that is blocking (must be completed before blocked task can start)
+    blocking_task_id = db.Column(db.Integer, db.ForeignKey('task.id'), nullable=False)
+    
+    # Dependency type (for future extension)
+    dependency_type = db.Column(db.String(50), default='blocks', nullable=False)  # 'blocks', 'subtask', etc.
+    
+    # Metadata
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    
+    # Relationships
+    blocked_task = db.relationship('Task', foreign_keys=[blocked_task_id], 
+                                 backref=db.backref('blocked_by_dependencies', cascade='all, delete-orphan'))
+    blocking_task = db.relationship('Task', foreign_keys=[blocking_task_id], 
+                                  backref=db.backref('blocking_dependencies', cascade='all, delete-orphan'))
+    created_by = db.relationship('User', foreign_keys=[created_by_id])
+    
+    # Ensure a task doesn't block itself and prevent duplicate dependencies
+    __table_args__ = (
+        db.CheckConstraint('blocked_task_id != blocking_task_id', name='no_self_blocking'),
+        db.UniqueConstraint('blocked_task_id', 'blocking_task_id', name='unique_dependency'),
+    )
+    
+    def __repr__(self):
+        return f'<TaskDependency {self.blocking_task_id} blocks {self.blocked_task_id}>'
+
 # SubTask model for task breakdown
 class SubTask(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     name = db.Column(db.String(200), nullable=False)
     description = db.Column(db.Text, nullable=True)
-    
+
     # SubTask properties
     status = db.Column(db.Enum(TaskStatus), default=TaskStatus.NOT_STARTED)
     priority = db.Column(db.Enum(TaskPriority), default=TaskPriority.MEDIUM)
     estimated_hours = db.Column(db.Float, nullable=True)
-    
+
     # Parent task association
     task_id = db.Column(db.Integer, db.ForeignKey('task.id'), nullable=False)
-    
+
     # Assignment
     assigned_to_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
-    
+
     # Dates
     start_date = db.Column(db.Date, nullable=True)
     due_date = db.Column(db.Date, nullable=True)
     completed_date = db.Column(db.Date, nullable=True)
-    
+
     # Metadata
     created_at = db.Column(db.DateTime, default=datetime.now)
     updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
     created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    
+
     # Relationships
     assigned_to = db.relationship('User', foreign_keys=[assigned_to_id], backref='assigned_subtasks')
     created_by = db.relationship('User', foreign_keys=[created_by_id])
     time_entries = db.relationship('TimeEntry', backref='subtask', lazy=True)
-    
+
     def __repr__(self):
         return f'<SubTask {self.name} ({self.status.value})>'
-    
+
     @property
     def total_time_logged(self):
         """Calculate total time logged to this subtask (in seconds)"""
         return sum(entry.duration or 0 for entry in self.time_entries if entry.duration)
-    
+
     def can_user_access(self, user):
         """Check if a user can access this subtask"""
         return self.parent_task.can_user_access(user)
 
+# Comment model for task discussions
+class Comment(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    content = db.Column(db.Text, nullable=False)
+    
+    # Task association
+    task_id = db.Column(db.Integer, db.ForeignKey('task.id'), nullable=False)
+    
+    # Parent comment for thread support
+    parent_comment_id = db.Column(db.Integer, db.ForeignKey('comment.id'), nullable=True)
+    
+    # Visibility setting
+    visibility = db.Column(db.Enum(CommentVisibility), default=CommentVisibility.COMPANY)
+    
+    # Edit tracking
+    is_edited = db.Column(db.Boolean, default=False)
+    edited_at = db.Column(db.DateTime, nullable=True)
+    
+    # Metadata
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    
+    # Relationships
+    task = db.relationship('Task', backref=db.backref('comments', lazy='dynamic', cascade='all, delete-orphan'))
+    created_by = db.relationship('User', foreign_keys=[created_by_id], backref='comments')
+    replies = db.relationship('Comment', backref=db.backref('parent_comment', remote_side=[id]))
+    
+    def __repr__(self):
+        return f'<Comment {self.id} on Task {self.task_id}>'
+    
+    def can_user_view(self, user):
+        """Check if a user can view this comment based on visibility settings"""
+        # First check if user can access the task
+        if not self.task.can_user_access(user):
+            return False
+        
+        # Then check visibility settings
+        if self.visibility == CommentVisibility.TEAM:
+            # Check if user is in the same team as the task's project
+            if self.task.project.team_id:
+                return user.team_id == self.task.project.team_id
+            # If no team assigned to project, fall back to company visibility
+            return user.company_id == self.task.project.company_id
+        elif self.visibility == CommentVisibility.COMPANY:
+            # Check if user is in the same company
+            return user.company_id == self.task.project.company_id
+        
+        return False
+    
+    def can_user_edit(self, user):
+        """Check if a user can edit this comment"""
+        # Only the comment creator can edit their own comments
+        return user.id == self.created_by_id
+    
+    def can_user_delete(self, user):
+        """Check if a user can delete this comment"""
+        # Comment creator can delete their own comments
+        if user.id == self.created_by_id:
+            return True
+        
+        # Admins and supervisors can delete any comment in their company
+        if user.role in [Role.ADMIN, Role.SUPERVISOR]:
+            return user.company_id == self.task.project.company_id
+        
+        return False
+
 # Announcement model for system-wide announcements
 class Announcement(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     title = db.Column(db.String(200), nullable=False)
     content = db.Column(db.Text, nullable=False)
-    
+
     # Announcement properties
     is_active = db.Column(db.Boolean, default=True)
     is_urgent = db.Column(db.Boolean, default=False)  # For urgent announcements with different styling
     announcement_type = db.Column(db.String(20), default='info')  # info, warning, success, danger
-    
+
     # Scheduling
     start_date = db.Column(db.DateTime, nullable=True)  # When to start showing
     end_date = db.Column(db.DateTime, nullable=True)    # When to stop showing
-    
+
     # Targeting
     target_all_users = db.Column(db.Boolean, default=True)
     target_roles = db.Column(db.Text, nullable=True)  # JSON string of roles if not all users
     target_companies = db.Column(db.Text, nullable=True)  # JSON string of company IDs if not all companies
-    
+
     # Metadata
     created_at = db.Column(db.DateTime, default=datetime.now)
     updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
     created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    
+
     # Relationships
     created_by = db.relationship('User', foreign_keys=[created_by_id])
-    
+
     def __repr__(self):
         return f'<Announcement {self.title}>'
-    
+
     def is_visible_now(self):
         """Check if announcement should be visible at current time"""
         if not self.is_active:
             return False
-        
+
         now = datetime.now()
-        
+
         # Check start date
         if self.start_date and now < self.start_date:
             return False
-        
+
         # Check end date
         if self.end_date and now > self.end_date:
             return False
-        
+
         return True
-    
+
     def is_visible_to_user(self, user):
         """Check if announcement should be visible to specific user"""
         if not self.is_visible_now():
             return False
-        
+
         # If targeting all users, show to everyone
         if self.target_all_users:
             return True
-        
+
         # Check role targeting
         if self.target_roles:
             import json
@@ -595,7 +843,7 @@ def is_visible_to_user(self, user):
                     return False
             except (json.JSONDecodeError, AttributeError):
                 pass
-        
+
         # Check company targeting
         if self.target_companies:
             import json
@@ -605,9 +853,9 @@ def is_visible_to_user(self, user):
                     return False
             except (json.JSONDecodeError, AttributeError):
                 pass
-        
+
         return True
-    
+
     @staticmethod
     def get_active_announcements_for_user(user):
         """Get all active announcements visible to a specific user"""
@@ -622,27 +870,27 @@ class SystemEvent(db.Model):
     description = db.Column(db.Text, nullable=False)
     severity = db.Column(db.String(20), default='info')  # 'info', 'warning', 'error', 'critical'
     timestamp = db.Column(db.DateTime, default=datetime.now, nullable=False)
-    
+
     # Optional associations
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
     company_id = db.Column(db.Integer, db.ForeignKey('company.id'), nullable=True)
-    
+
     # Additional metadata (JSON string)
     event_metadata = db.Column(db.Text, nullable=True)  # Store additional event data as JSON
-    
+
     # IP address and user agent for security tracking
     ip_address = db.Column(db.String(45), nullable=True)  # IPv6 compatible
     user_agent = db.Column(db.Text, nullable=True)
-    
+
     # Relationships
     user = db.relationship('User', backref='system_events')
     company = db.relationship('Company', backref='system_events')
-    
+
     def __repr__(self):
         return f'<SystemEvent {self.event_type}: {self.description[:50]}>'
-    
+
     @staticmethod
-    def log_event(event_type, description, event_category='system', severity='info', 
+    def log_event(event_type, description, event_category='system', severity='info',
                   user_id=None, company_id=None, event_metadata=None, ip_address=None, user_agent=None):
         """Helper method to log system events"""
         event = SystemEvent(
@@ -664,7 +912,7 @@ def log_event(event_type, description, event_category='system', severity='info',
             # Log to application logger if DB logging fails
             import logging
             logging.error(f"Failed to log system event: {e}")
-    
+
     @staticmethod
     def get_recent_events(days=7, limit=100):
         """Get recent system events from the last N days"""
@@ -673,7 +921,7 @@ def get_recent_events(days=7, limit=100):
         return SystemEvent.query.filter(
             SystemEvent.timestamp >= since
         ).order_by(SystemEvent.timestamp.desc()).limit(limit).all()
-    
+
     @staticmethod
     def get_events_by_severity(severity, days=7, limit=50):
         """Get events by severity level"""
@@ -683,42 +931,314 @@ def get_events_by_severity(severity, days=7, limit=50):
             SystemEvent.timestamp >= since,
             SystemEvent.severity == severity
         ).order_by(SystemEvent.timestamp.desc()).limit(limit).all()
-    
+
     @staticmethod
     def get_system_health_summary():
         """Get a summary of system health based on recent events"""
         from datetime import datetime, timedelta
         from sqlalchemy import func
-        
+
         now = datetime.now()
         last_24h = now - timedelta(hours=24)
         last_week = now - timedelta(days=7)
-        
+
         # Count events by severity in last 24h
         recent_errors = SystemEvent.query.filter(
             SystemEvent.timestamp >= last_24h,
             SystemEvent.severity.in_(['error', 'critical'])
         ).count()
-        
+
         recent_warnings = SystemEvent.query.filter(
             SystemEvent.timestamp >= last_24h,
             SystemEvent.severity == 'warning'
         ).count()
-        
+
         # Count total events in last week
         weekly_events = SystemEvent.query.filter(
             SystemEvent.timestamp >= last_week
         ).count()
-        
+
         # Get most recent error
         last_error = SystemEvent.query.filter(
             SystemEvent.severity.in_(['error', 'critical'])
         ).order_by(SystemEvent.timestamp.desc()).first()
-        
+
         return {
             'errors_24h': recent_errors,
             'warnings_24h': recent_warnings,
             'total_events_week': weekly_events,
             'last_error': last_error,
             'health_status': 'healthy' if recent_errors == 0 else 'issues' if recent_errors < 5 else 'critical'
-        }
\ No newline at end of file
+        }
+
+
+# Sprint Management System
+class SprintStatus(enum.Enum):
+    PLANNING = "Planning"
+    ACTIVE = "Active" 
+    COMPLETED = "Completed"
+    CANCELLED = "Cancelled"
+
+class Sprint(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(200), nullable=False)
+    description = db.Column(db.Text, nullable=True)
+    
+    # Sprint status
+    status = db.Column(db.Enum(SprintStatus), nullable=False, default=SprintStatus.PLANNING)
+    
+    # Company association - sprints are company-scoped
+    company_id = db.Column(db.Integer, db.ForeignKey('company.id'), nullable=False)
+    
+    # Optional project association - can be project-specific or company-wide
+    project_id = db.Column(db.Integer, db.ForeignKey('project.id'), nullable=True)
+    
+    # Sprint timeline
+    start_date = db.Column(db.Date, nullable=False)
+    end_date = db.Column(db.Date, nullable=False)
+    
+    # Sprint goals and metrics
+    goal = db.Column(db.Text, nullable=True)  # Sprint goal description
+    capacity_hours = db.Column(db.Integer, nullable=True)  # Planned capacity in hours
+    
+    # Metadata
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
+    created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    
+    # Relationships
+    company = db.relationship('Company', backref='sprints')
+    project = db.relationship('Project', backref='sprints')
+    created_by = db.relationship('User', foreign_keys=[created_by_id])
+    tasks = db.relationship('Task', backref='sprint', lazy=True)
+    
+    def __repr__(self):
+        return f'<Sprint {self.name}>'
+    
+    @property
+    def is_current(self):
+        """Check if this sprint is currently active"""
+        from datetime import date
+        today = date.today()
+        return (self.status == SprintStatus.ACTIVE and 
+                self.start_date <= today <= self.end_date)
+    
+    @property
+    def duration_days(self):
+        """Get sprint duration in days"""
+        return (self.end_date - self.start_date).days + 1
+    
+    @property
+    def days_remaining(self):
+        """Get remaining days in sprint"""
+        from datetime import date
+        today = date.today()
+        if self.end_date < today:
+            return 0
+        elif self.start_date > today:
+            return self.duration_days
+        else:
+            return (self.end_date - today).days + 1
+    
+    @property
+    def progress_percentage(self):
+        """Calculate sprint progress percentage based on dates"""
+        from datetime import date
+        today = date.today()
+        
+        if today < self.start_date:
+            return 0
+        elif today > self.end_date:
+            return 100
+        else:
+            total_days = self.duration_days
+            elapsed_days = (today - self.start_date).days + 1
+            return min(100, int((elapsed_days / total_days) * 100))
+    
+    def get_task_summary(self):
+        """Get summary of tasks in this sprint"""
+        total_tasks = len(self.tasks)
+        completed_tasks = len([t for t in self.tasks if t.status == TaskStatus.COMPLETED])
+        in_progress_tasks = len([t for t in self.tasks if t.status == TaskStatus.IN_PROGRESS])
+        
+        return {
+            'total': total_tasks,
+            'completed': completed_tasks,
+            'in_progress': in_progress_tasks,
+            'not_started': total_tasks - completed_tasks - in_progress_tasks,
+            'completion_percentage': int((completed_tasks / total_tasks) * 100) if total_tasks > 0 else 0
+        }
+    
+    def can_user_access(self, user):
+        """Check if user can access this sprint"""
+        # Must be in same company
+        if self.company_id != user.company_id:
+            return False
+        
+        # If sprint is project-specific, check project access
+        if self.project_id:
+            return self.project.is_user_allowed(user)
+        
+        # Company-wide sprints are accessible to all company members
+        return True
+
+# Dashboard Widget System
+class WidgetType(enum.Enum):
+    # Time Tracking Widgets
+    CURRENT_TIMER = "current_timer"
+    DAILY_SUMMARY = "daily_summary"
+    WEEKLY_CHART = "weekly_chart"
+    BREAK_REMINDER = "break_reminder"
+    
+    # Project Management Widgets
+    ACTIVE_PROJECTS = "active_projects"
+    PROJECT_PROGRESS = "project_progress"
+    PROJECT_ACTIVITY = "project_activity"
+    PROJECT_DEADLINES = "project_deadlines"
+    
+    # Task Management Widgets
+    ASSIGNED_TASKS = "assigned_tasks"
+    TASK_PRIORITY = "task_priority"
+    TASK_TRENDS = "task_trends"
+    
+    # Analytics Widgets
+    PRODUCTIVITY_METRICS = "productivity_metrics"
+    TIME_DISTRIBUTION = "time_distribution"
+    GOAL_PROGRESS = "goal_progress"
+    PERFORMANCE_COMPARISON = "performance_comparison"
+    
+    # Team Widgets (Role-based)
+    TEAM_OVERVIEW = "team_overview"
+    RESOURCE_ALLOCATION = "resource_allocation"
+    TEAM_PERFORMANCE = "team_performance"
+    COMPANY_METRICS = "company_metrics"
+    
+    # Quick Action Widgets
+    QUICK_TIMER = "quick_timer"
+    FAVORITE_PROJECTS = "favorite_projects"
+    RECENT_ACTIONS = "recent_actions"
+    SHORTCUTS_PANEL = "shortcuts_panel"
+
+class WidgetSize(enum.Enum):
+    SMALL = "1x1"      # 1 grid unit
+    MEDIUM = "2x1"     # 2 grid units wide, 1 high
+    LARGE = "2x2"      # 2x2 grid units
+    WIDE = "3x1"       # 3 grid units wide, 1 high
+    TALL = "1x2"       # 1 grid unit wide, 2 high
+    EXTRA_LARGE = "3x2" # 3x2 grid units
+
+class UserDashboard(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    name = db.Column(db.String(100), default='My Dashboard')
+    is_default = db.Column(db.Boolean, default=True)
+    layout_config = db.Column(db.Text)  # JSON string for grid layout configuration
+    
+    # Dashboard settings
+    grid_columns = db.Column(db.Integer, default=6)  # Number of grid columns
+    theme = db.Column(db.String(20), default='light')  # light, dark, auto
+    auto_refresh = db.Column(db.Integer, default=300)  # Auto-refresh interval in seconds
+    
+    # Metadata
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
+    
+    # Relationships
+    user = db.relationship('User', backref='dashboards')
+    widgets = db.relationship('DashboardWidget', backref='dashboard', lazy=True, cascade='all, delete-orphan')
+    
+    # Unique constraint - one default dashboard per user
+    __table_args__ = (db.Index('idx_user_default_dashboard', 'user_id', 'is_default'),)
+    
+    def __repr__(self):
+        return f'<UserDashboard {self.name} (User: {self.user.username})>'
+
+class DashboardWidget(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    dashboard_id = db.Column(db.Integer, db.ForeignKey('user_dashboard.id'), nullable=False)
+    widget_type = db.Column(db.Enum(WidgetType), nullable=False)
+    
+    # Grid position and size
+    grid_x = db.Column(db.Integer, nullable=False, default=0)  # X position in grid
+    grid_y = db.Column(db.Integer, nullable=False, default=0)  # Y position in grid
+    grid_width = db.Column(db.Integer, nullable=False, default=1)  # Width in grid units
+    grid_height = db.Column(db.Integer, nullable=False, default=1)  # Height in grid units
+    
+    # Widget configuration
+    title = db.Column(db.String(100))  # Custom widget title
+    config = db.Column(db.Text)  # JSON string for widget-specific configuration
+    refresh_interval = db.Column(db.Integer, default=60)  # Refresh interval in seconds
+    
+    # Widget state
+    is_visible = db.Column(db.Boolean, default=True)
+    is_minimized = db.Column(db.Boolean, default=False)
+    z_index = db.Column(db.Integer, default=1)  # Stacking order
+    
+    # Metadata
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
+    
+    def __repr__(self):
+        return f'<DashboardWidget {self.widget_type.value} ({self.grid_width}x{self.grid_height})>'
+    
+    @property
+    def config_dict(self):
+        """Parse widget configuration JSON"""
+        if self.config:
+            import json
+            try:
+                return json.loads(self.config)
+            except:
+                return {}
+        return {}
+    
+    @config_dict.setter
+    def config_dict(self, value):
+        """Set widget configuration as JSON"""
+        import json
+        self.config = json.dumps(value) if value else None
+
+class WidgetTemplate(db.Model):
+    """Pre-defined widget templates for easy dashboard setup"""
+    id = db.Column(db.Integer, primary_key=True)
+    widget_type = db.Column(db.Enum(WidgetType), nullable=False)
+    name = db.Column(db.String(100), nullable=False)
+    description = db.Column(db.Text)
+    icon = db.Column(db.String(50))  # Icon name or emoji
+    
+    # Default configuration
+    default_width = db.Column(db.Integer, default=1)
+    default_height = db.Column(db.Integer, default=1)
+    default_config = db.Column(db.Text)  # JSON string for default widget configuration
+    
+    # Access control
+    required_role = db.Column(db.Enum(Role), default=Role.TEAM_MEMBER)
+    is_active = db.Column(db.Boolean, default=True)
+    
+    # Categories for organization
+    category = db.Column(db.String(50), default='General')  # Time, Projects, Tasks, Analytics, Team, Actions
+    
+    # Metadata
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    
+    def __repr__(self):
+        return f'<WidgetTemplate {self.name} ({self.widget_type.value})>'
+    
+    def can_user_access(self, user):
+        """Check if user has required role to use this widget"""
+        if not self.is_active:
+            return False
+        
+        # Define role hierarchy
+        role_hierarchy = {
+            Role.TEAM_MEMBER: 1,
+            Role.TEAM_LEADER: 2,
+            Role.SUPERVISOR: 3,
+            Role.ADMIN: 4,
+            Role.SYSTEM_ADMIN: 5
+        }
+        
+        user_level = role_hierarchy.get(user.role, 0)
+        required_level = role_hierarchy.get(self.required_role, 0)
+        
+        return user_level >= required_level
\ No newline at end of file
diff --git a/password_utils.py b/password_utils.py
new file mode 100644
index 0000000..8c2b692
--- /dev/null
+++ b/password_utils.py
@@ -0,0 +1,89 @@
+"""Password validation utilities for TimeTrack"""
+import re
+
+class PasswordValidator:
+    """Password strength validator with configurable rules"""
+    
+    def __init__(self):
+        self.min_length = 8
+        self.require_uppercase = True
+        self.require_lowercase = True
+        self.require_numbers = True
+        self.require_special_chars = True
+        self.special_chars = r'!@#$%^&*()_+\-=\[\]{}|;:,.<>?'
+        
+    def validate(self, password):
+        """
+        Validate a password against the configured rules.
+        Returns a tuple (is_valid, list_of_errors)
+        """
+        errors = []
+        
+        # Check minimum length
+        if len(password) < self.min_length:
+            errors.append(f'Password must be at least {self.min_length} characters long')
+        
+        # Check for uppercase letter
+        if self.require_uppercase and not re.search(r'[A-Z]', password):
+            errors.append('Password must contain at least one uppercase letter')
+        
+        # Check for lowercase letter
+        if self.require_lowercase and not re.search(r'[a-z]', password):
+            errors.append('Password must contain at least one lowercase letter')
+        
+        # Check for number
+        if self.require_numbers and not re.search(r'\d', password):
+            errors.append('Password must contain at least one number')
+        
+        # Check for special character
+        if self.require_special_chars and not re.search(f'[{re.escape(self.special_chars)}]', password):
+            errors.append('Password must contain at least one special character')
+        
+        return len(errors) == 0, errors
+    
+    def get_strength_score(self, password):
+        """
+        Calculate a strength score for the password (0-100).
+        This matches the JavaScript implementation.
+        """
+        score = 0
+        
+        # Base scoring
+        if len(password) >= self.min_length:
+            score += 20
+        
+        if re.search(r'[A-Z]', password):
+            score += 20
+            
+        if re.search(r'[a-z]', password):
+            score += 20
+            
+        if re.search(r'\d', password):
+            score += 20
+            
+        if re.search(f'[{re.escape(self.special_chars)}]', password):
+            score += 20
+        
+        # Bonus points for extra length
+        if len(password) >= 12:
+            score = min(100, score + 10)
+        if len(password) >= 16:
+            score = min(100, score + 10)
+        
+        return score
+    
+    def get_requirements_text(self):
+        """Get a user-friendly text describing password requirements"""
+        requirements = []
+        requirements.append(f'At least {self.min_length} characters')
+        
+        if self.require_uppercase:
+            requirements.append('One uppercase letter')
+        if self.require_lowercase:
+            requirements.append('One lowercase letter')
+        if self.require_numbers:
+            requirements.append('One number')
+        if self.require_special_chars:
+            requirements.append('One special character (!@#$%^&*()_+-=[]{}|;:,.<>?)')
+        
+        return requirements
\ No newline at end of file
diff --git a/static/css/auth.css b/static/css/auth.css
new file mode 100644
index 0000000..d99f996
--- /dev/null
+++ b/static/css/auth.css
@@ -0,0 +1,581 @@
+/* Modern Authentication Pages Styles */
+
+/* Auth page background */
+body.auth-page {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background-attachment: fixed;
+    min-height: 100vh;
+    padding: 2rem;
+    overflow-x: hidden;
+    overflow-y: auto; /* Allow vertical scrolling */
+    display: flex;
+    align-items: flex-start; /* Align to top */
+    justify-content: center;
+}
+
+/* Add min-height to html to ensure full coverage */
+html {
+    min-height: 100%;
+}
+
+/* Animated background shapes */
+body.auth-page::before,
+body.auth-page::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    animation: float 20s infinite ease-in-out;
+}
+
+body.auth-page::before {
+    width: 300px;
+    height: 300px;
+    top: -150px;
+    right: -150px;
+}
+
+body.auth-page::after {
+    width: 500px;
+    height: 500px;
+    bottom: -250px;
+    left: -250px;
+    animation-delay: 10s;
+}
+
+/* Auth container */
+.auth-container {
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    padding: 2.5rem;
+    width: 100%;
+    max-width: 480px;
+    animation: slideUp 0.6s ease-out;
+    position: relative;
+    z-index: 1;
+    margin: 2rem auto 4rem; /* Top and bottom margin */
+}
+
+/* Logo/Brand section */
+.auth-brand {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.auth-brand h1 {
+    color: #333;
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+}
+
+.auth-brand p {
+    color: #666;
+    font-size: 1.1rem;
+}
+
+/* Form styles */
+.auth-form {
+    margin-top: 2rem;
+}
+
+.form-group {
+    margin-bottom: 1.25rem;
+    position: relative;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #333;
+    font-weight: 500;
+    font-size: 0.95rem;
+    transition: all 0.3s ease;
+}
+
+.form-control {
+    width: 100%;
+    padding: 0.875rem 1rem;
+    border: 2px solid #e1e8ed;
+    border-radius: 10px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background-color: #f8f9fa;
+    line-height: 1.5;
+    height: 48px; /* Fixed height for consistent alignment */
+    font-family: inherit;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: #667eea;
+    background-color: white;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+}
+
+/* Floating label effect */
+.form-group.floating-label {
+    position: relative;
+    margin-bottom: 2rem;
+}
+
+.form-group.floating-label label {
+    position: absolute;
+    top: 50%;
+    left: 1rem;
+    transform: translateY(-50%);
+    transition: all 0.3s ease;
+    pointer-events: none;
+    background: white;
+    padding: 0 0.5rem;
+    color: #999;
+}
+
+.form-group.floating-label .form-control:focus ~ label,
+.form-group.floating-label .form-control:not(:placeholder-shown) ~ label {
+    top: 0;
+    font-size: 0.85rem;
+    color: #667eea;
+}
+
+/* Registration options */
+.registration-options {
+    margin-bottom: 1.5rem;
+}
+
+.registration-options .alert {
+    border-radius: 12px;
+    border: none;
+    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
+    padding: 1rem;
+}
+
+.registration-options h5 {
+    color: #333;
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+}
+
+.registration-options p {
+    margin-bottom: 0.5rem;
+    color: #555;
+}
+
+.registration-options .btn-outline-primary {
+    border: 2px solid #667eea;
+    color: #667eea;
+    border-radius: 25px;
+    padding: 0.5rem 1.5rem;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-block;
+    font-weight: 500;
+}
+
+.registration-options .btn-outline-primary:hover {
+    background: #667eea;
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+}
+
+/* Submit button */
+.btn-primary {
+    width: 100%;
+    padding: 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    border-radius: 10px;
+    color: white;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+}
+
+/* Ripple effect for button */
+.btn-primary::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+
+.btn-primary:active::after {
+    width: 300px;
+    height: 300px;
+}
+
+/* Auth links */
+.auth-links {
+    text-align: center;
+    margin-top: 2rem;
+}
+
+.auth-links p {
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+
+.auth-links a {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.auth-links a:hover {
+    color: #764ba2;
+    text-decoration: underline;
+}
+
+/* Verification notice */
+.verification-notice {
+    background: #f0f4ff;
+    border-radius: 10px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+    text-align: center;
+}
+
+.verification-notice p {
+    color: #555;
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+/* Alert messages */
+.alert {
+    padding: 1rem;
+    border-radius: 10px;
+    margin-bottom: 1.5rem;
+    border: none;
+    animation: fadeIn 0.3s ease;
+}
+
+.alert-error {
+    background: #fee;
+    color: #c33;
+}
+
+.alert-success {
+    background: #efe;
+    color: #3c3;
+}
+
+.alert-info {
+    background: #eef;
+    color: #33c;
+}
+
+/* Password strength indicator integration */
+.password-strength-container {
+    margin-top: 0.75rem;
+    animation: fadeIn 0.3s ease;
+}
+
+.password-strength-indicator {
+    height: 6px;
+    background-color: #f0f0f0;
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.password-strength-bar {
+    height: 100%;
+    transition: all 0.4s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+/* Icon inputs */
+.input-icon {
+    position: relative;
+}
+
+.input-icon i {
+    position: absolute;
+    left: 1rem;
+    color: #999;
+    font-size: 1.2rem;
+    z-index: 1;
+    pointer-events: none;
+}
+
+.input-icon .form-control {
+    padding-left: 3rem;
+}
+
+.input-icon label {
+    position: absolute;
+    left: 3rem; /* Start after the icon */
+    top: 0.875rem;
+    color: #999;
+    pointer-events: none;
+    transition: all 0.3s ease;
+    background: white;
+    padding: 0 0.25rem;
+}
+
+.input-icon .form-control:focus ~ label,
+.input-icon .form-control:not(:placeholder-shown) ~ label {
+    top: -0.5rem;
+    left: 2.75rem;
+    font-size: 0.85rem;
+    color: #667eea;
+}
+
+/* Checkbox styling */
+.form-check {
+    margin-bottom: 1.5rem;
+}
+
+.form-check-input {
+    width: 20px;
+    height: 20px;
+    margin-right: 0.5rem;
+    cursor: pointer;
+}
+
+.form-check-label {
+    cursor: pointer;
+    color: #555;
+}
+
+/* Company code input special styling */
+.company-code-group {
+    position: relative;
+}
+
+.company-code-group::before {
+    content: '🏢';
+    position: absolute;
+    left: 1rem;
+    top: 2.5rem; /* Position below the label */
+    font-size: 1.5rem;
+    z-index: 1;
+}
+
+.company-code-group .form-control {
+    padding-left: 3.5rem;
+    font-family: inherit;
+    font-size: 1.2rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+/* Animations */
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0) rotate(0deg);
+    }
+    33% {
+        transform: translateY(-30px) rotate(120deg);
+    }
+    66% {
+        transform: translateY(30px) rotate(240deg);
+    }
+}
+
+/* Responsive design */
+@media (max-width: 568px) {
+    body.auth-page {
+        padding: 1rem;
+        align-items: flex-start; /* Align to top on mobile */
+    }
+    
+    .auth-container {
+        padding: 2rem 1.5rem;
+        margin: 1rem auto;
+        max-height: none; /* Remove height limit on mobile */
+    }
+    
+    .auth-brand h1 {
+        font-size: 2rem;
+    }
+    
+    body.auth-page::before,
+    body.auth-page::after {
+        display: none;
+    }
+}
+
+/* Loading state */
+.btn-primary.loading {
+    color: transparent;
+}
+
+.btn-primary.loading::before {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 50%;
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    border-top-color: transparent;
+    animation: spinner 0.8s linear infinite;
+}
+
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Social registration options */
+.social-registration {
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.social-divider {
+    position: relative;
+    text-align: center;
+    margin: 2rem 0;
+}
+
+.social-divider::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: #e1e8ed;
+}
+
+.social-divider span {
+    background: white;
+    padding: 0 1rem;
+    color: #999;
+    position: relative;
+}
+
+/* Progress indicator for multi-step forms */
+.registration-progress {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+}
+
+.progress-step {
+    flex: 1;
+    text-align: center;
+    position: relative;
+}
+
+.progress-step::after {
+    content: '';
+    position: absolute;
+    top: 15px;
+    right: -50%;
+    width: 100%;
+    height: 2px;
+    background: #e1e8ed;
+    z-index: -1;
+}
+
+.progress-step:last-child::after {
+    display: none;
+}
+
+.progress-step.active::after {
+    background: #667eea;
+}
+
+.progress-step-number {
+    width: 30px;
+    height: 30px;
+    background: #e1e8ed;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    color: #999;
+}
+
+.progress-step.active .progress-step-number {
+    background: #667eea;
+    color: white;
+}
+
+.progress-step.completed .progress-step-number {
+    background: #4caf50;
+    color: white;
+}
+
+.progress-step-label {
+    font-size: 0.85rem;
+    color: #666;
+}
+
+/* Form helper text alignment */
+.form-text {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: #6c757d;
+}
+
+.input-icon .form-text {
+    padding-left: 3rem; /* Align with input content */
+}
+
+/* Fix textarea height */
+textarea.form-control {
+    height: auto;
+    min-height: 48px;
+}
+
+/* Better icon vertical centering */
+.input-icon i {
+    display: flex;
+    align-items: center;
+    height: 48px; /* Match input height */
+    top: 0;
+}
\ No newline at end of file
diff --git a/static/css/fonts.css b/static/css/fonts.css
new file mode 100644
index 0000000..22f6232
--- /dev/null
+++ b/static/css/fonts.css
@@ -0,0 +1,57 @@
+/* Inter Font Self-Hosted */
+
+/* Inter Light (300) */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('../fonts/inter/Inter-Light.woff2') format('woff2');
+}
+
+/* Inter Regular (400) */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
+}
+
+/* Inter Medium (500) */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
+}
+
+/* Inter SemiBold (600) */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
+}
+
+/* Inter Bold (700) */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
+}
+
+/* Optional: Inter Variable Font for modern browsers */
+@supports (font-variation-settings: normal) {
+    @font-face {
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url('../fonts/inter/InterVariable.woff2') format('woff2-variations');
+    }
+}
\ No newline at end of file
diff --git a/static/css/splash.css b/static/css/splash.css
new file mode 100644
index 0000000..d4da092
--- /dev/null
+++ b/static/css/splash.css
@@ -0,0 +1,509 @@
+/* Splash Page Styles */
+
+/* Reset for splash page */
+.splash-container {
+    margin: -2rem -2rem 0 -2rem;
+    padding: 0;
+    font-family: inherit;
+}
+
+/* Hero Section */
+.splash-hero {
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    color: white;
+    padding: 6rem 2rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    min-height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hero-content {
+    max-width: 800px;
+    margin: 0 auto;
+    z-index: 2;
+    position: relative;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    letter-spacing: -1px;
+    animation: fadeInUp 1s ease-out;
+}
+
+.hero-subtitle {
+    font-size: 1.5rem;
+    font-weight: 300;
+    margin-bottom: 2.5rem;
+    opacity: 0.9;
+    animation: fadeInUp 1s ease-out 0.2s both;
+}
+
+.cta-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    animation: fadeInUp 1s ease-out 0.4s both;
+}
+
+.btn-primary, .btn-secondary {
+    padding: 1rem 2.5rem;
+    font-size: 1.1rem;
+    border-radius: 50px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    display: inline-block;
+    font-family: inherit;
+}
+
+.btn-primary {
+    background: #4CAF50;
+    color: white;
+    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
+}
+
+.btn-primary:hover {
+    background: #45a049;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
+}
+
+.btn-secondary {
+    background: transparent;
+    color: white;
+    border: 2px solid white;
+}
+
+.btn-secondary:hover {
+    background: white;
+    color: #2a5298;
+}
+
+/* Floating Clock Animation */
+.hero-visual {
+    position: absolute;
+    right: 10%;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.1;
+}
+
+.floating-clock {
+    width: 300px;
+    height: 300px;
+    animation: float 6s ease-in-out infinite;
+}
+
+.clock-face {
+    width: 100%;
+    height: 100%;
+    border: 8px solid white;
+    border-radius: 50%;
+    position: relative;
+}
+
+.hour-hand, .minute-hand, .second-hand {
+    position: absolute;
+    background: white;
+    transform-origin: bottom center;
+    bottom: 50%;
+    left: 50%;
+}
+
+.hour-hand {
+    width: 6px;
+    height: 80px;
+    margin-left: -3px;
+    animation: rotate 43200s linear infinite;
+}
+
+.minute-hand {
+    width: 4px;
+    height: 100px;
+    margin-left: -2px;
+    animation: rotate 3600s linear infinite;
+}
+
+.second-hand {
+    width: 2px;
+    height: 110px;
+    margin-left: -1px;
+    background: #4CAF50;
+    animation: rotate 60s linear infinite;
+}
+
+/* Features Grid */
+.features-grid {
+    padding: 5rem 2rem;
+    background: #f8f9fa;
+}
+
+.section-title {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+    color: #333;
+    font-weight: 600;
+}
+
+.feature-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.feature-card {
+    background: white;
+    padding: 2.5rem;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
+}
+
+.feature-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+.feature-card p {
+    color: #666;
+    line-height: 1.6;
+}
+
+/* Statistics Section */
+.statistics {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 5rem 2rem;
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 2rem;
+    position: relative;
+}
+
+/* Add subtle overlay for better text contrast */
+.statistics::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.1);
+    pointer-events: none;
+}
+
+.statistics .section-title {
+    color: white;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 3rem;
+    position: relative;
+    z-index: 1;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.stat-item {
+    text-align: center;
+    color: white;
+    position: relative;
+    z-index: 1;
+}
+
+.stat-number {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.stat-label {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 500;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Testimonials */
+.testimonials {
+    padding: 5rem 2rem;
+    background: white;
+}
+
+.testimonial-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.testimonial-card {
+    background: #f8f9fa;
+    padding: 2rem;
+    border-radius: 12px;
+    text-align: center;
+}
+
+.stars {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+}
+
+.testimonial-card p {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: #555;
+    margin-bottom: 1.5rem;
+    font-style: italic;
+}
+
+.testimonial-author {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.testimonial-author strong {
+    color: #333;
+}
+
+.testimonial-author span {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+/* Pricing Section */
+.pricing {
+    padding: 5rem 2rem;
+    background: #f8f9fa;
+}
+
+.pricing-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.pricing-card {
+    background: white;
+    padding: 2.5rem;
+    border-radius: 12px;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+    transition: all 0.3s ease;
+}
+
+.pricing-card.featured {
+    transform: scale(1.05);
+    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
+}
+
+.badge {
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #4CAF50;
+    color: white;
+    padding: 0.5rem 1.5rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+.pricing-card h3 {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+.price {
+    font-size: 3rem;
+    font-weight: 700;
+    color: #2a5298;
+    margin-bottom: 2rem;
+}
+
+.price span {
+    font-size: 1rem;
+    font-weight: 400;
+    color: #666;
+}
+
+.pricing-features {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 2rem 0;
+}
+
+.pricing-features li {
+    padding: 0.75rem 0;
+    color: #555;
+    border-bottom: 1px solid #eee;
+}
+
+.pricing-features li:last-child {
+    border-bottom: none;
+}
+
+.btn-pricing {
+    display: inline-block;
+    padding: 1rem 2rem;
+    background: #4CAF50;
+    color: white;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    font-family: inherit;
+}
+
+.btn-pricing:hover {
+    background: #45a049;
+    transform: translateY(-2px);
+}
+
+.pricing-card.featured .btn-pricing {
+    background: #2a5298;
+}
+
+.pricing-card.featured .btn-pricing:hover {
+    background: #1e3c72;
+}
+
+/* Final CTA */
+.final-cta {
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    color: white;
+    padding: 5rem 2rem;
+    text-align: center;
+}
+
+.final-cta h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.final-cta p {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+}
+
+.btn-primary.large {
+    font-size: 1.2rem;
+    padding: 1.25rem 3rem;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(-50%) translateX(0);
+    }
+    50% {
+        transform: translateY(-50%) translateX(20px);
+    }
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .hero-title {
+        font-size: 2.5rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.2rem;
+    }
+    
+    .cta-buttons {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .btn-primary, .btn-secondary {
+        width: 200px;
+    }
+    
+    .hero-visual {
+        display: none;
+    }
+    
+    .section-title {
+        font-size: 2rem;
+    }
+    
+    .stat-number {
+        font-size: 2.5rem;
+    }
+    
+    .pricing-card.featured {
+        transform: none;
+    }
+}
+
+/* Ripple Effect */
+.btn-primary, .btn-secondary, .btn-pricing {
+    position: relative;
+    overflow: hidden;
+}
+
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    transform: scale(0);
+    animation: ripple-animation 0.6s ease-out;
+}
+
+@keyframes ripple-animation {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 3d768b0..7c9b0aa 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5,11 +5,38 @@
 }
 
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     line-height: 1.6;
     color: #333;
     margin: 0;
     padding: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    letter-spacing: -0.025em;
+    line-height: 1.3;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+h1 { font-size: 2.5rem; font-weight: 700; }
+h2 { font-size: 2rem; font-weight: 600; }
+h3 { font-size: 1.5rem; font-weight: 600; }
+h4 { font-size: 1.25rem; font-weight: 600; }
+h5 { font-size: 1.1rem; font-weight: 600; }
+h6 { font-size: 1rem; font-weight: 600; }
+
+/* Ensure all form elements inherit font */
+input,
+textarea,
+select,
+button {
+    font-family: inherit;
+    font-size: inherit;
 }
 
 /* Mobile Header Styles */
@@ -69,41 +96,87 @@ body {
 /* Sidebar Styles */
 .sidebar {
     position: fixed;
-    top: 0;
-    left: 0;
+    top: 1rem;
+    left: 1rem;
     width: 280px;
-    height: 100vh;
-    background-color: #3d9c17;
-    color: white;
+    height: calc(100vh - 2rem);
+    background-color: #f8f9fa;
+    color: #333;
     overflow-y: auto;
-    transition: transform 0.3s ease;
+    overflow-x: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
     z-index: 1000;
-    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+    border-radius: 12px;
+    border: 1px solid #e9ecef;
+}
+
+.sidebar:hover {
+    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
+}
+
+/* Custom scrollbar for sidebar */
+.sidebar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background: #dee2e6;
+    border-radius: 3px;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background: #adb5bd;
 }
 
 .sidebar.collapsed {
     width: 60px;
 }
 
+.sidebar.collapsed .sidebar-header {
+    padding: 1rem 0.5rem;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
 .sidebar-header {
-    padding: 1.5rem;
-    background-color: #34495e;
+    padding: 0.75rem 1.25rem;
+    background-color: #fff;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid #3a5269;
+    border-bottom: 1px solid #e9ecef;
+    position: relative;
+    gap: 0.5rem;
+    border-radius: 12px 12px 0 0;
 }
 
 .sidebar-header h2 {
     margin: 0;
-    color: white;
-    font-size: 1.5rem;
-    font-weight: bold;
+    color: #333;
+    font-size: 1.4rem;
+    font-weight: 600;
 }
 
 .sidebar-header h2 a {
-    color: white;
+    color: #333;
     text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.sidebar-header h2 a:hover {
+    color: #4CAF50;
+}
+
+.sidebar-header small {
+    color: #6c757d;
+    font-size: 0.85rem;
+    display: block;
+    margin-top: 0.25rem;
 }
 
 .sidebar-toggle {
@@ -122,14 +195,14 @@ body {
     display: block;
     height: 2px;
     width: 100%;
-    background-color: white;
+    background-color: #6c757d;
     border-radius: 1px;
     transition: all 0.3s ease;
 }
 
 .sidebar-nav {
-    padding: 0;
-    font-weight: bold;
+    padding: 0.25rem 0;
+    font-weight: 500;
 }
 
 .sidebar-nav ul {
@@ -145,41 +218,44 @@ body {
 .sidebar-nav li a {
     display: flex;
     align-items: center;
-    padding: 1rem 1.5rem;
-    color: #ecf0f1;
+    padding: 0.5rem 1.25rem;
+    color: #495057;
     text-decoration: none;
-    transition: all 0.3s ease;
+    transition: all 0.2s ease;
     border-left: 3px solid transparent;
+    font-size: 0.9rem;
+    line-height: 1.2;
 }
 
 .sidebar-nav li a:hover {
-    background-color: #34495e;
+    background-color: #e9ecef;
     border-left-color: #4CAF50;
-    color: white;
+    color: #333;
 }
 
 .sidebar-nav li a.active {
-    background-color: #4CAF50;
-    border-left-color: #45a049;
-    color: white;
+    background-color: #e8f5e9;
+    border-left-color: #4CAF50;
+    color: #2e7d32;
+    font-weight: 600;
 }
 
 .nav-icon {
-    margin-right: 1rem;
-    font-size: 1.2rem;
-    min-width: 24px;
+    margin-right: 0.75rem;
+    font-size: 1.1rem;
+    min-width: 20px;
     text-align: center;
 }
 
 .nav-divider {
-    padding: 0.75rem 1.5rem 0.25rem;
-    font-size: 0.85rem;
-    color: #d9ffd1;
+    padding: 0.4rem 1.25rem 0.2rem;
+    font-size: 0.7rem;
+    color: #6c757d;
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 0.5px;
-    border-top: 1px solid #3a5269;
-    margin-top: 0.5rem;
+    border-top: 1px solid #e9ecef;
+    margin-top: 0.25rem;
 }
 
 .nav-divider:first-child {
@@ -201,7 +277,7 @@ body {
 }
 
 .sidebar.collapsed .sidebar-nav li a {
-    padding: 1rem 0.5rem;
+    padding: 0.5rem 0.5rem;
     justify-content: center;
     position: relative;
 }
@@ -246,20 +322,25 @@ body {
 }
 
 .main-content {
-    margin-left: 280px;
+    margin-left: 308px; /* 280px sidebar + 28px (1rem left + 1rem gap + 0.75rem) */
     padding: 2rem;
     min-height: 100vh;
     transition: margin-left 0.3s ease;
 }
 
+/* Full width when no user (no sidebar) */
+body:not(.has-user) .main-content {
+    margin-left: 0;
+}
+
 /* Main content adjustments for collapsed sidebar */
 body:has(.sidebar.collapsed) .main-content {
-    margin-left: 60px;
+    margin-left: 88px; /* 60px collapsed + 28px margins */
 }
 
 /* Fallback for browsers that don't support :has() */
 .sidebar.collapsed ~ .main-content {
-    margin-left: 60px;
+    margin-left: 88px;
 }
 
 .hero {
@@ -311,8 +392,11 @@ body:has(.sidebar.collapsed) .main-content {
     padding: 0.5rem;
     border: 1px solid #ddd;
     border-radius: 4px;
+    font-family: inherit;
+    font-size: inherit;
 }
 
+/* Button Base Styles */
 button {
     background-color: #4CAF50;
     color: white;
@@ -320,53 +404,154 @@ button {
     padding: 8px 16px;
     cursor: pointer;
     border-radius: 4px;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
 }
 
 .btn {
-    padding: 5px 10px;
+    padding: 0.5rem 1rem;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 1rem;
     text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.2s ease;
+    line-height: 1.5;
+    font-weight: 500;
+    font-family: inherit;
+}
+
+/* Button Sizes */
+.btn-xs {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+    min-width: 50px;
+}
+
+.btn-sm {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+}
+
+.btn-md {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border-radius: 8px;
+}
+
+.btn-small {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    margin-right: 0.5rem;
 }
 
+/* Button Colors */
 .btn-primary {
-    background-color: #45a049;
+    background-color: #007bff;
     color: white;
-    margin-bottom: 1rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
-    display: inline-block;
-    font-size: medium;
+    border: 1px solid #007bff;
 }
 
-.btn-sm {
-    padding: 5px 10px;
-    border-radius: 4px;
-    font-size: small;
+.btn-primary:hover {
+    background-color: #0056b3;
+    border-color: #0056b3;
 }
 
 .btn-secondary {
-    background-color: #f44336;
+    background-color: #6c757d;
     color: white;
+    border: 1px solid #6c757d;
+}
+
+.btn-secondary:hover {
+    background-color: #545b62;
+    border-color: #545b62;
 }
 
 .btn-success {
-    background-color: #4CAF50;
+    background-color: #28a745;
     color: white;
+    border: 1px solid #28a745;
 }
 
-.btn:hover {
-    background-color: #45a049;
+.btn-success:hover {
+    background-color: #218838;
+    border-color: #218838;
 }
 
 .btn-danger {
-    background-color: #f44336;
+    background-color: #dc3545;
+    color: white;
+    border: 1px solid #dc3545;
 }
 
 .btn-danger:hover {
-    background-color: #d32f2f;
+    background-color: #c82333;
+    border-color: #c82333;
+}
+
+.btn-warning {
+    background-color: #ffc107;
+    color: #212529;
+    border: 1px solid #ffc107;
+}
+
+.btn-warning:hover {
+    background-color: #e0a800;
+    border-color: #e0a800;
+}
+
+.btn-info {
+    background-color: #17a2b8;
+    color: white;
+    border: 1px solid #17a2b8;
+}
+
+.btn-info:hover {
+    background-color: #138496;
+    border-color: #138496;
+}
+
+/* Button Outline Variants */
+.btn-outline {
+    border: 1px solid #007bff;
+    color: #007bff;
+    background: transparent;
+}
+
+.btn-outline:hover {
+    background-color: #007bff;
+    color: white;
+}
+
+/* Special Button Styles */
+.btn-filter {
+    padding: 0.5rem 1rem;
+    border: 1px solid #dee2e6;
+    background: white;
+    color: #495057;
+    border-radius: 4px;
+}
+
+.btn-filter:hover {
+    background-color: #f8f9fa;
+    border-color: #adb5bd;
+}
+
+.btn-filter.active {
+    background-color: #007bff;
+    color: white;
+    border-color: #007bff;
+}
+
+/* Generic Button Hover */
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 footer {
@@ -374,24 +559,168 @@ footer {
     padding: 1rem;
     background-color: #f4f4f4;
     margin-top: 2rem;
-    margin-left: 280px;
+    margin-left: 308px;
     transition: margin-left 0.3s ease;
 }
 
+.site-footer {
+    border-top: 1px solid #e0e0e0;
+}
+
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.footer-info {
+    font-size: 0.875rem;
+    color: #666;
+}
+
+.footer-info p {
+    margin: 0;
+}
+
+.footer-links {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+}
+
+.footer-links a {
+    color: #666;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.footer-links a:hover {
+    color: var(--primary-color);
+}
+
+.footer-separator {
+    color: #999;
+    margin: 0 0.5rem;
+}
+
+/* Email Nag Banner */
+.email-nag-banner {
+    background-color: #e3f2fd;
+    border-bottom: 2px solid #1976d2;
+    padding: 0.75rem 1rem;
+    position: relative;
+    animation: slideDown 0.3s ease-out;
+}
+
+.email-nag-banner.email-verify {
+    background-color: #fff3cd;
+    border-color: #ffc107;
+}
+
+.email-nag-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.email-nag-icon {
+    font-size: 1.5rem;
+    flex-shrink: 0;
+}
+
+.email-nag-text {
+    flex: 1;
+    color: #333;
+    font-size: 0.95rem;
+}
+
+.email-nag-dismiss {
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: #666;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.email-nag-dismiss:hover {
+    background-color: rgba(0,0,0,0.1);
+    color: #333;
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}
+
+@media (max-width: 768px) {
+    .email-nag-content {
+        padding-right: 2rem;
+    }
+    
+    .email-nag-text {
+        font-size: 0.875rem;
+    }
+}
+
+/* Full width footer when no user (no sidebar) */
+body:not(.has-user) footer {
+    margin-left: 0;
+}
+
 /* Footer adjustments for collapsed sidebar */
 body:has(.sidebar.collapsed) footer {
-    margin-left: 60px;
+    margin-left: 88px;
 }
 
 /* Fallback for browsers that don't support :has() */
 .sidebar.collapsed ~ footer {
-    margin-left: 60px;
+    margin-left: 88px;
 }
 
 /* Time tracking specific styles */
 .timetrack-container {
-    max-width: 800px;
+    max-width: 1200px;
     margin: 0 auto 3rem auto;
+    padding: 1.5rem;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .timer-section {
@@ -437,17 +766,25 @@ body:has(.sidebar.collapsed) footer {
     width: 100%;
     border-collapse: collapse;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-top: 1rem;
 }
 
 .time-history th, .time-history td {
     padding: 0.8rem;
     text-align: left;
     border-bottom: 1px solid #ddd;
+    min-height: 2.5rem;
+    vertical-align: middle;
 }
 
 .time-history th {
     background-color: #f2f2f2;
     font-weight: bold;
+    height: 2.5rem;
+}
+
+.time-history tr {
+    height: 2.5rem;
 }
 
 .time-history tr:hover {
@@ -519,12 +856,12 @@ body:has(.sidebar.collapsed) footer {
 }
 
 .config-container {
-    max-width: 800px;
+    max-width: 1200px;
     margin: 0 auto 3rem auto;
-    padding: 1rem;
-    background-color: #f9f9f9;
+    padding: 1.5rem;
+    background-color: white;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .form-section {
@@ -647,7 +984,7 @@ body:has(.sidebar.collapsed) footer {
 }
 
 input[type="date"], input[type="time"] {
-    font-family: monospace;
+    font-family: inherit;
     padding: 8px;
     width: 100%;
 }
@@ -655,7 +992,7 @@ input[type="date"], input[type="time"] {
 /* Force consistent date format display */
 input[type="date"]::-webkit-datetime-edit,
 input[type="time"]::-webkit-datetime-edit {
-    font-family: monospace;
+    font-family: inherit;
 }
 
 /* Add some styling to the format hints */
@@ -668,11 +1005,12 @@ input[type="time"]::-webkit-datetime-edit {
 
 /* Admin Dashboard Styles */
 .admin-container {
+    max-width: 1200px;
+    margin: 0 auto 2rem auto;
     padding: 1.5rem;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    margin-bottom: 2rem;
 }
 
 .admin-header {
@@ -811,17 +1149,25 @@ input[type="time"]::-webkit-datetime-edit {
     width: 100%;
     border-collapse: collapse;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-top: 1rem;
 }
 
 .data-table th, .data-table td {
     padding: 0.8rem;
     text-align: left;
     border-bottom: 1px solid #ddd;
+    min-height: 2.5rem;
+    vertical-align: middle;
 }
 
 .data-table th {
     background-color: #f2f2f2;
     font-weight: bold;
+    height: 2.5rem;
+}
+
+.data-table tr {
+    height: 2.5rem;
 }
 
 .data-table tr:hover {
@@ -1046,7 +1392,11 @@ input[type="time"]::-webkit-datetime-edit {
 /* Responsive Design for Sidebar Navigation */
 @media (max-width: 1024px) {
     .sidebar {
-        transform: translateX(-100%);
+        transform: translateX(calc(-100% - 1rem));
+        top: 0;
+        left: 0;
+        height: 100vh;
+        border-radius: 0;
     }
 
     .sidebar.mobile-open {
@@ -1065,7 +1415,12 @@ input[type="time"]::-webkit-datetime-edit {
     footer {
         margin-left: 0;
     }
-
+    
+    .footer-content {
+        flex-direction: column;
+        text-align: center;
+    }
+
     .mobile-overlay.active {
         display: block;
     }
@@ -1086,8 +1441,14 @@ input[type="time"]::-webkit-datetime-edit {
         max-width: 300px;
     }
 
-    .timetrack-container {
-        padding: 0;
+    .timetrack-container,
+    .admin-container,
+    .config-container,
+    .table-container,
+    .team-summary-container {
+        padding: 1rem;
+        margin: 0 1rem 2rem 1rem;
+        max-width: none;
     }
 
     .admin-panel {
@@ -1289,9 +1650,12 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .table-container {
+    max-width: 1200px;
+    margin: 0 auto 2rem auto;
+    padding: 1.5rem;
     background: white;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     overflow: hidden;
 }
 
@@ -1356,9 +1720,12 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .team-summary-container {
+    max-width: 1200px;
+    margin: 0 auto 2rem auto;
+    padding: 1.5rem;
     background: white;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     overflow: hidden;
 }
 
@@ -1604,8 +1971,842 @@ input[type="time"]::-webkit-datetime-edit {
         align-items: flex-start;
         gap: 0.5rem;
     }
-    
+
     .urgent-badge {
         align-self: flex-end;
     }
+}
+
+/* Common Management Interface Styles */
+.management-container {
+    padding: 1rem;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.management-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.management-header h1 {
+    margin: 0;
+    color: #333;
+}
+
+.management-controls {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+/* View Switcher Component */
+.view-switcher {
+    display: flex;
+    background: #f8f9fa;
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.view-btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    background: white;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+    color: #333;
+    border: 1px solid #ddd;
+}
+
+.view-btn.active {
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
+}
+
+.view-btn:hover:not(.active) {
+    background: #e9ecef;
+}
+
+/* Statistics Cards */
+.management-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-card {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: center;
+}
+
+.stat-number {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #007bff;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    color: #666;
+    margin-top: 0.25rem;
+}
+
+/* Loading and Error States */
+.loading-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.error-alert {
+    background: #f8d7da;
+    color: #721c24;
+    padding: 1rem;
+    border-radius: 6px;
+    text-align: center;
+    margin: 1rem 0;
+}
+
+/* Modal Enhancements */
+.modal.large .modal-content {
+    max-width: 800px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid #dee2e6;
+}
+
+/* Form Components */
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-weight: 500;
+    color: #333;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+/* Priority and Status Badges */
+.priority-badge, .status-badge {
+    padding: 0.125rem 0.375rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.priority-badge.LOW { background: #d4edda; color: #155724; }
+.priority-badge.MEDIUM { background: #fff3cd; color: #856404; }
+.priority-badge.HIGH { background: #f8d7da; color: #721c24; }
+.priority-badge.URGENT { background: #f5c6cb; color: #721c24; }
+
+.status-badge.PLANNING { background: #fff3cd; color: #856404; }
+.status-badge.ACTIVE { background: #d1ecf1; color: #0c5460; }
+.status-badge.COMPLETED { background: #d4edda; color: #155724; }
+.status-badge.CANCELLED { background: #f8d7da; color: #721c24; }
+.status-badge.NOT_STARTED { background: #e2e3e5; color: #495057; }
+.status-badge.IN_PROGRESS { background: #d1ecf1; color: #0c5460; }
+.status-badge.ON_HOLD { background: #ffeaa7; color: #856404; }
+
+/* Card Components */
+.management-card {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1.5rem;
+    cursor: pointer;
+    transition: box-shadow 0.2s, transform 0.1s;
+    position: relative;
+}
+
+.management-card:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    transform: translateY(-2px);
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin: 0;
+    color: #333;
+}
+
+.card-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8rem;
+    color: #666;
+}
+
+/* Progress Components */
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: #e9ecef;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #007bff, #0056b3);
+    transition: width 0.3s ease;
+}
+
+.progress-text {
+    font-size: 0.8rem;
+    color: #666;
+    margin-top: 0.25rem;
+}
+
+/* Actions */
+.management-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Grid Layouts */
+.management-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+/* Responsive Design for Management Interfaces */
+@media (max-width: 768px) {
+    .management-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .management-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .view-switcher {
+        justify-content: center;
+    }
+    
+    .management-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Common Container Patterns */
+.page-container {
+    padding: 1rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #e9ecef;
+}
+
+.page-header h2 {
+    margin: 0;
+    color: #333;
+}
+
+.page-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+
+/* Card Components - Enhanced */
+.card {
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: box-shadow 0.2s ease;
+}
+
+.card:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.card-header {
+    padding: 1.5rem;
+    background: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+.card-footer {
+    padding: 1rem 1.5rem;
+    background: #f8f9fa;
+    border-top: 1px solid #dee2e6;
+}
+
+.card-title {
+    margin: 0 0 0.5rem 0;
+    color: #333;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.card-subtitle {
+    color: #666;
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+/* Grid Systems */
+.grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+}
+
+.grid-4 {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+}
+
+.grid-auto {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+/* Dashboard Widget Common Styles */
+.widget {
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.widget:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+.widget-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #eee;
+}
+
+.widget-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.widget-content {
+    min-height: 100px;
+}
+
+/* Filter Components */
+.filter-bar {
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    border: 1px solid #dee2e6;
+}
+
+.filter-row {
+    display: flex;
+    gap: 1rem;
+    align-items: end;
+    flex-wrap: wrap;
+}
+
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    min-width: 150px;
+}
+
+.filter-group label {
+    font-weight: 500;
+    color: #495057;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.filter-group input,
+.filter-group select {
+    padding: 0.5rem;
+    border: 1px solid #ced4da;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    transition: border-color 0.2s ease;
+}
+
+.filter-group input:focus,
+.filter-group select:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+}
+
+/* Tag/Badge System Enhancement */
+.tag {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.tag-blue { background: #d1ecf1; color: #0c5460; }
+.tag-green { background: #d4edda; color: #155724; }
+.tag-yellow { background: #fff3cd; color: #856404; }
+.tag-red { background: #f8d7da; color: #721c24; }
+.tag-gray { background: #e2e3e5; color: #495057; }
+.tag-purple { background: #e1d3ed; color: #6f42c1; }
+
+/* Project/Context Information */
+.project-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.project-code {
+    background: #007bff;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.project-name {
+    font-weight: 500;
+    color: #333;
+}
+
+.context-info {
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border-radius: 6px;
+    border-left: 4px solid #007bff;
+    margin: 1rem 0;
+}
+
+.context-label {
+    font-weight: 600;
+    color: #333;
+    margin-right: 0.5rem;
+}
+
+/* Enhanced Responsive Design */
+@media (max-width: 1200px) {
+    .grid-4 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 992px) {
+    .grid-3, .grid-4 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+}
+
+@media (max-width: 768px) {
+    .page-container {
+        padding: 0.5rem;
+    }
+    
+    .page-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+    
+    .page-actions {
+        justify-content: center;
+    }
+    
+    .grid-2, .grid-3, .grid-4 {
+        grid-template-columns: 1fr;
+    }
+    
+    
+    .filter-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .filter-group {
+        min-width: auto;
+    }
+    
+    .card-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+}
+
+/* User Dropdown Styles */
+.user-dropdown-toggle {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1.25rem;
+    color: #495057;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    font-size: 0.9rem;
+}
+
+.user-dropdown-toggle:hover {
+    background-color: #e9ecef;
+    color: #333;
+}
+
+/* Removed nav-icon style as we're using avatar instead */
+
+.sidebar.collapsed .user-dropdown-toggle .nav-text {
+    display: none;
+}
+
+.sidebar.collapsed .user-dropdown-toggle {
+    padding: 0.75rem 0.5rem;
+}
+
+.sidebar.collapsed .user-dropdown-toggle .nav-icon {
+    margin-right: 0;
+}
+
+.user-dropdown-toggle .dropdown-arrow {
+    float: right;
+    transition: transform 0.3s ease;
+}
+
+.user-dropdown-toggle.active .dropdown-arrow {
+    transform: rotate(180deg);
+}
+
+/* User Dropdown Context Menu */
+.user-dropdown-modal {
+    position: absolute;
+    top: 100%;
+    right: 10px;
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 2000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+    min-width: 200px;
+    margin-top: 5px;
+}
+
+.user-dropdown-modal.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.user-dropdown-header {
+    padding: 1rem;
+    background-color: #f8f8f8;
+    color: #333;
+    border-radius: 4px 4px 0 0;
+    border-bottom: 1px solid #e0e0e0;
+    text-align: center;
+}
+
+.user-dropdown-header h3 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: normal;
+}
+
+.user-dropdown-header .user-info {
+    margin-top: 0.25rem;
+    font-size: 0.85rem;
+    color: #666;
+}
+
+.user-dropdown-menu {
+    padding: 0.5rem 0;
+}
+
+.user-dropdown-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.user-dropdown-menu li {
+    margin: 0;
+}
+
+.user-dropdown-menu a {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    color: #333;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+    font-size: 0.9rem;
+}
+
+.user-dropdown-menu a:hover {
+    background-color: #f0f0f0;
+}
+
+.user-dropdown-menu .nav-icon {
+    margin-right: 0.5rem;
+    font-size: 1rem;
+}
+
+.user-dropdown-divider {
+    height: 1px;
+    background-color: #e0e0e0;
+    margin: 0.5rem 0;
+}
+
+/* User Dropdown Overlay - Not needed for context menu style */
+/* .user-dropdown-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.user-dropdown-overlay.active {
+    opacity: 1;
+    visibility: visible;
+} */
+
+/* Mobile adjustments */
+@media (max-width: 1024px) {
+    .user-dropdown-modal {
+        width: 90%;
+        max-width: 400px;
+    }
+}
+
+/* User Avatar Styles */
+.user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 0.75rem;
+    border: 2px solid #e9ecef;
+    vertical-align: middle;
+}
+
+.user-avatar-large {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin: 0 auto 0.75rem;
+    display: block;
+    border: 3px solid #dee2e6;
+}
+
+.sidebar.collapsed .user-avatar {
+    margin-right: 0;
+    width: 28px;
+    height: 28px;
+}
+
+.user-dropdown-toggle .nav-text {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* Password Strength Indicator Styles */
+.password-strength-container {
+    margin-top: 0.5rem;
+}
+
+.password-strength-indicator {
+    height: 5px;
+    background-color: #e9ecef;
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.password-strength-bar {
+    height: 100%;
+    width: 0%;
+    transition: width 0.3s ease, background-color 0.3s ease;
+    border-radius: 3px;
+}
+
+.password-strength-bar.strength-weak {
+    background-color: #dc3545;
+}
+
+.password-strength-bar.strength-fair {
+    background-color: #ffc107;
+}
+
+.password-strength-bar.strength-good {
+    background-color: #17a2b8;
+}
+
+.password-strength-bar.strength-strong {
+    background-color: #28a745;
+}
+
+.password-strength-text {
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+}
+
+.password-strength-text.text-weak {
+    color: #dc3545;
+}
+
+.password-strength-text.text-fair {
+    color: #ffc107;
+}
+
+.password-strength-text.text-good {
+    color: #17a2b8;
+}
+
+.password-strength-text.text-strong {
+    color: #28a745;
+}
+
+.password-requirements {
+    list-style: none;
+    padding-left: 0;
+    margin: 0.5rem 0 0 0;
+    font-size: 0.85rem;
+}
+
+.password-requirements li {
+    color: #6c757d;
+    padding: 0.25rem 0;
+    position: relative;
+    padding-left: 1.5rem;
+}
+
+.password-requirements li:before {
+    content: "✗";
+    position: absolute;
+    left: 0;
+    color: #dc3545;
+}
+
+.password-match-indicator {
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    font-weight: 500;
+}
+
+.password-match-indicator.match {
+    color: #28a745;
+}
+
+.password-match-indicator.no-match {
+    color: #dc3545;
 }
\ No newline at end of file
diff --git a/static/fonts/inter/Inter-Bold.woff2 b/static/fonts/inter/Inter-Bold.woff2
new file mode 100644
index 0000000..0f1b157
Binary files /dev/null and b/static/fonts/inter/Inter-Bold.woff2 differ
diff --git a/static/fonts/inter/Inter-Light.woff2 b/static/fonts/inter/Inter-Light.woff2
new file mode 100644
index 0000000..dbe6143
Binary files /dev/null and b/static/fonts/inter/Inter-Light.woff2 differ
diff --git a/static/fonts/inter/Inter-Medium.woff2 b/static/fonts/inter/Inter-Medium.woff2
new file mode 100644
index 0000000..0fd2ee7
Binary files /dev/null and b/static/fonts/inter/Inter-Medium.woff2 differ
diff --git a/static/fonts/inter/Inter-Regular.woff2 b/static/fonts/inter/Inter-Regular.woff2
new file mode 100644
index 0000000..b8699af
Binary files /dev/null and b/static/fonts/inter/Inter-Regular.woff2 differ
diff --git a/static/fonts/inter/Inter-SemiBold.woff2 b/static/fonts/inter/Inter-SemiBold.woff2
new file mode 100644
index 0000000..95c48b1
Binary files /dev/null and b/static/fonts/inter/Inter-SemiBold.woff2 differ
diff --git a/static/fonts/inter/InterVariable.woff2 b/static/fonts/inter/InterVariable.woff2
new file mode 100644
index 0000000..22a12b0
Binary files /dev/null and b/static/fonts/inter/InterVariable.woff2 differ
diff --git a/static/js/auth-animations.js b/static/js/auth-animations.js
new file mode 100644
index 0000000..f213f3a
--- /dev/null
+++ b/static/js/auth-animations.js
@@ -0,0 +1,224 @@
+// Authentication Page Animations and Interactions
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Add loading state to submit button
+    const form = document.querySelector('.auth-form');
+    const submitBtn = document.querySelector('.btn-primary');
+    
+    if (form && submitBtn) {
+        form.addEventListener('submit', function(e) {
+            // Check if form is valid
+            if (form.checkValidity()) {
+                submitBtn.classList.add('loading');
+                submitBtn.disabled = true;
+            }
+        });
+    }
+
+    // Animate form fields on focus
+    const formInputs = document.querySelectorAll('.form-control');
+    formInputs.forEach(input => {
+        input.addEventListener('focus', function() {
+            this.parentElement.classList.add('focused');
+        });
+        
+        input.addEventListener('blur', function() {
+            if (!this.value) {
+                this.parentElement.classList.remove('focused');
+            }
+        });
+        
+        // Check if input has value on load (for browser autofill)
+        if (input.value) {
+            input.parentElement.classList.add('focused');
+        }
+    });
+
+    // Company code formatting
+    const companyCodeInput = document.querySelector('#company_code');
+    if (companyCodeInput) {
+        companyCodeInput.addEventListener('input', function(e) {
+            // Convert to uppercase and remove non-alphanumeric characters
+            let value = e.target.value.toUpperCase().replace(/[^A-Z0-9-]/g, '');
+            
+            // Add dashes every 4 characters
+            if (value.length > 4 && !value.includes('-')) {
+                value = value.match(/.{1,4}/g).join('-');
+            }
+            
+            e.target.value = value;
+        });
+    }
+
+    // Smooth scroll to alert messages
+    const alerts = document.querySelectorAll('.alert');
+    if (alerts.length > 0) {
+        alerts[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+    // Add ripple effect to buttons
+    const buttons = document.querySelectorAll('.btn-primary, .btn-outline-primary');
+    buttons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            const ripple = document.createElement('span');
+            const rect = this.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            
+            ripple.style.width = ripple.style.height = size + 'px';
+            ripple.style.left = x + 'px';
+            ripple.style.top = y + 'px';
+            ripple.classList.add('ripple');
+            
+            // Remove any existing ripples
+            const existingRipple = this.querySelector('.ripple');
+            if (existingRipple) {
+                existingRipple.remove();
+            }
+            
+            this.appendChild(ripple);
+            
+            setTimeout(() => ripple.remove(), 600);
+        });
+    });
+
+    // Animate registration options
+    const registrationOptions = document.querySelector('.registration-options');
+    if (registrationOptions) {
+        registrationOptions.style.opacity = '0';
+        registrationOptions.style.transform = 'translateY(20px)';
+        
+        setTimeout(() => {
+            registrationOptions.style.transition = 'all 0.6s ease';
+            registrationOptions.style.opacity = '1';
+            registrationOptions.style.transform = 'translateY(0)';
+        }, 300);
+    }
+
+    // Password visibility toggle
+    const passwordInputs = document.querySelectorAll('input[type="password"]');
+    passwordInputs.forEach(input => {
+        const wrapper = input.parentElement;
+        const toggleBtn = document.createElement('button');
+        toggleBtn.type = 'button';
+        toggleBtn.className = 'password-toggle';
+        toggleBtn.innerHTML = '👁️';
+        toggleBtn.style.cssText = `
+            position: absolute;
+            right: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.2rem;
+            opacity: 0.6;
+            transition: opacity 0.3s ease;
+        `;
+        
+        toggleBtn.addEventListener('click', function() {
+            if (input.type === 'password') {
+                input.type = 'text';
+                this.innerHTML = '🙈';
+            } else {
+                input.type = 'password';
+                this.innerHTML = '👁️';
+            }
+        });
+        
+        toggleBtn.addEventListener('mouseenter', function() {
+            this.style.opacity = '1';
+        });
+        
+        toggleBtn.addEventListener('mouseleave', function() {
+            this.style.opacity = '0.6';
+        });
+        
+        wrapper.style.position = 'relative';
+        wrapper.appendChild(toggleBtn);
+    });
+
+    // Form validation feedback
+    const requiredInputs = document.querySelectorAll('.form-control[required]');
+    requiredInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            if (this.value.trim() === '') {
+                this.classList.add('invalid');
+                this.classList.remove('valid');
+            } else {
+                this.classList.add('valid');
+                this.classList.remove('invalid');
+            }
+        });
+    });
+
+    // Email validation
+    const emailInput = document.querySelector('input[type="email"]');
+    if (emailInput) {
+        emailInput.addEventListener('blur', function() {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (this.value && !emailRegex.test(this.value)) {
+                this.classList.add('invalid');
+                this.classList.remove('valid');
+                
+                // Add error message if not exists
+                if (!this.parentElement.querySelector('.error-message')) {
+                    const errorMsg = document.createElement('small');
+                    errorMsg.className = 'error-message';
+                    errorMsg.style.color = '#dc3545';
+                    errorMsg.textContent = 'Please enter a valid email address';
+                    this.parentElement.appendChild(errorMsg);
+                }
+            } else if (this.value) {
+                // Remove error message if exists
+                const errorMsg = this.parentElement.querySelector('.error-message');
+                if (errorMsg) {
+                    errorMsg.remove();
+                }
+            }
+        });
+    }
+
+    // Animate auth container on load
+    const authContainer = document.querySelector('.auth-container');
+    if (authContainer) {
+        authContainer.style.opacity = '0';
+        authContainer.style.transform = 'scale(0.95)';
+        
+        setTimeout(() => {
+            authContainer.style.transition = 'all 0.5s ease';
+            authContainer.style.opacity = '1';
+            authContainer.style.transform = 'scale(1)';
+        }, 100);
+    }
+});
+
+// Add CSS for valid/invalid states
+const style = document.createElement('style');
+style.textContent = `
+    .form-control.valid {
+        border-color: #28a745 !important;
+    }
+    
+    .form-control.invalid {
+        border-color: #dc3545 !important;
+    }
+    
+    .ripple {
+        position: absolute;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.6);
+        transform: scale(0);
+        animation: ripple-animation 0.6s ease-out;
+        pointer-events: none;
+    }
+    
+    @keyframes ripple-animation {
+        to {
+            transform: scale(4);
+            opacity: 0;
+        }
+    }
+`;
+document.head.appendChild(style);
\ No newline at end of file
diff --git a/static/js/password-strength.js b/static/js/password-strength.js
new file mode 100644
index 0000000..f5e0f8b
--- /dev/null
+++ b/static/js/password-strength.js
@@ -0,0 +1,221 @@
+// Password Strength Indicator
+document.addEventListener('DOMContentLoaded', function() {
+    // Password strength rules
+    const passwordRules = {
+        minLength: 8,
+        requireUppercase: true,
+        requireLowercase: true,
+        requireNumbers: true,
+        requireSpecialChars: true,
+        specialChars: '!@#$%^&*()_+-=[]{}|;:,.<>?'
+    };
+
+    // Function to check password strength
+    function checkPasswordStrength(password) {
+        let strength = 0;
+        const feedback = [];
+
+        // Check minimum length
+        if (password.length >= passwordRules.minLength) {
+            strength += 20;
+        } else {
+            feedback.push(`At least ${passwordRules.minLength} characters`);
+        }
+
+        // Check for uppercase letters
+        if (passwordRules.requireUppercase && /[A-Z]/.test(password)) {
+            strength += 20;
+        } else if (passwordRules.requireUppercase) {
+            feedback.push('One uppercase letter');
+        }
+
+        // Check for lowercase letters
+        if (passwordRules.requireLowercase && /[a-z]/.test(password)) {
+            strength += 20;
+        } else if (passwordRules.requireLowercase) {
+            feedback.push('One lowercase letter');
+        }
+
+        // Check for numbers
+        if (passwordRules.requireNumbers && /\d/.test(password)) {
+            strength += 20;
+        } else if (passwordRules.requireNumbers) {
+            feedback.push('One number');
+        }
+
+        // Check for special characters
+        const specialCharRegex = new RegExp(`[${passwordRules.specialChars.replace(/[\[\]\\]/g, '\\$&')}]`);
+        if (passwordRules.requireSpecialChars && specialCharRegex.test(password)) {
+            strength += 20;
+        } else if (passwordRules.requireSpecialChars) {
+            feedback.push('One special character');
+        }
+
+        // Bonus points for length
+        if (password.length >= 12) {
+            strength = Math.min(100, strength + 10);
+        }
+        if (password.length >= 16) {
+            strength = Math.min(100, strength + 10);
+        }
+
+        return {
+            score: strength,
+            feedback: feedback,
+            isValid: strength >= 100
+        };
+    }
+
+    // Function to update the strength indicator UI
+    function updateStrengthIndicator(input, result) {
+        let container = input.parentElement.querySelector('.password-strength-container');
+        
+        // Create container if it doesn't exist
+        if (!container) {
+            container = document.createElement('div');
+            container.className = 'password-strength-container';
+            
+            const indicator = document.createElement('div');
+            indicator.className = 'password-strength-indicator';
+            
+            const bar = document.createElement('div');
+            bar.className = 'password-strength-bar';
+            
+            const text = document.createElement('div');
+            text.className = 'password-strength-text';
+            
+            const requirements = document.createElement('ul');
+            requirements.className = 'password-requirements';
+            
+            indicator.appendChild(bar);
+            container.appendChild(indicator);
+            container.appendChild(text);
+            container.appendChild(requirements);
+            
+            input.parentElement.appendChild(container);
+        }
+
+        const bar = container.querySelector('.password-strength-bar');
+        const text = container.querySelector('.password-strength-text');
+        const requirements = container.querySelector('.password-requirements');
+
+        // Update bar width and color
+        bar.style.width = result.score + '%';
+        
+        // Remove all strength classes
+        bar.className = 'password-strength-bar';
+        
+        // Add appropriate class based on score
+        if (result.score < 40) {
+            bar.classList.add('strength-weak');
+            text.textContent = 'Weak';
+            text.className = 'password-strength-text text-weak';
+        } else if (result.score < 70) {
+            bar.classList.add('strength-fair');
+            text.textContent = 'Fair';
+            text.className = 'password-strength-text text-fair';
+        } else if (result.score < 100) {
+            bar.classList.add('strength-good');
+            text.textContent = 'Good';
+            text.className = 'password-strength-text text-good';
+        } else {
+            bar.classList.add('strength-strong');
+            text.textContent = 'Strong';
+            text.className = 'password-strength-text text-strong';
+        }
+
+        // Update requirements list
+        requirements.innerHTML = '';
+        if (result.feedback.length > 0) {
+            requirements.innerHTML = '<li>' + result.feedback.join('</li><li>') + '</li>';
+        }
+    }
+
+    // Function to check if passwords match
+    function checkPasswordMatch(password, confirmPassword) {
+        const confirmInput = document.querySelector(confirmPassword);
+        if (!confirmInput) return;
+
+        let matchIndicator = confirmInput.parentElement.querySelector('.password-match-indicator');
+        
+        if (!matchIndicator) {
+            matchIndicator = document.createElement('div');
+            matchIndicator.className = 'password-match-indicator';
+            confirmInput.parentElement.appendChild(matchIndicator);
+        }
+
+        if (confirmInput.value === '') {
+            matchIndicator.textContent = '';
+            matchIndicator.className = 'password-match-indicator';
+        } else if (password === confirmInput.value) {
+            matchIndicator.textContent = '✓ Passwords match';
+            matchIndicator.className = 'password-match-indicator match';
+        } else {
+            matchIndicator.textContent = '✗ Passwords do not match';
+            matchIndicator.className = 'password-match-indicator no-match';
+        }
+    }
+
+    // Attach to all password inputs
+    const passwordInputs = document.querySelectorAll('input[type="password"][name="password"], input[type="password"][name="new_password"]');
+    
+    passwordInputs.forEach(input => {
+        // Show initial requirements when focused
+        input.addEventListener('focus', function() {
+            if (this.value === '') {
+                const result = checkPasswordStrength('');
+                updateStrengthIndicator(this, result);
+            }
+        });
+
+        // Check strength on input
+        input.addEventListener('input', function() {
+            const result = checkPasswordStrength(this.value);
+            updateStrengthIndicator(this, result);
+
+            // Check password match if there's a confirm field
+            const formElement = this.closest('form');
+            const confirmField = formElement.querySelector('input[name="confirm_password"], input[name="confirm_new_password"]');
+            if (confirmField && confirmField.value) {
+                checkPasswordMatch(this.value, '#' + confirmField.id);
+            }
+        });
+    });
+
+    // Attach to confirm password inputs
+    const confirmInputs = document.querySelectorAll('input[name="confirm_password"], input[name="confirm_new_password"]');
+    
+    confirmInputs.forEach(input => {
+        input.addEventListener('input', function() {
+            const formElement = this.closest('form');
+            const passwordField = formElement.querySelector('input[name="password"], input[name="new_password"]');
+            if (passwordField) {
+                checkPasswordMatch(passwordField.value, '#' + this.id);
+            }
+        });
+    });
+
+    // Prevent form submission if password is not strong enough
+    const forms = document.querySelectorAll('form');
+    forms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            const passwordField = this.querySelector('input[name="password"], input[name="new_password"]');
+            if (passwordField && passwordField.value) {
+                const result = checkPasswordStrength(passwordField.value);
+                if (!result.isValid) {
+                    e.preventDefault();
+                    alert('Please ensure your password meets all the requirements.');
+                    return false;
+                }
+
+                // Check password match
+                const confirmField = this.querySelector('input[name="confirm_password"], input[name="confirm_new_password"]');
+                if (confirmField && confirmField.value !== passwordField.value) {
+                    e.preventDefault();
+                    alert('Passwords do not match.');
+                    return false;
+                }
+            }
+        });
+    });
+});
\ No newline at end of file
diff --git a/static/js/splash.js b/static/js/splash.js
new file mode 100644
index 0000000..55b6f77
--- /dev/null
+++ b/static/js/splash.js
@@ -0,0 +1,125 @@
+// Splash Page Interactive Elements
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Observer options for animations
+    const observerOptions = {
+        threshold: 0.5,
+        rootMargin: '0px'
+    };
+
+    // Parallax effect for hero section
+    const hero = document.querySelector('.splash-hero');
+    if (hero) {
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            const parallaxSpeed = 0.5;
+            hero.style.transform = `translateY(${scrolled * parallaxSpeed}px)`;
+        });
+    }
+
+    // Add hover effects to feature cards
+    const featureCards = document.querySelectorAll('.feature-card');
+    featureCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-10px) scale(1.02)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0) scale(1)';
+        });
+    });
+
+    // Smooth scroll for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+
+    // Add stagger animation to feature cards
+    const featureObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry, index) => {
+            if (entry.isIntersecting) {
+                setTimeout(() => {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }, index * 100);
+                featureObserver.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    featureCards.forEach(card => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(20px)';
+        card.style.transition = 'all 0.6s ease';
+        featureObserver.observe(card);
+    });
+
+    // Testimonial cards animation
+    const testimonialCards = document.querySelectorAll('.testimonial-card');
+    const testimonialObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry, index) => {
+            if (entry.isIntersecting) {
+                setTimeout(() => {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateX(0)';
+                }, index * 150);
+                testimonialObserver.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    testimonialCards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = index % 2 === 0 ? 'translateX(-30px)' : 'translateX(30px)';
+        card.style.transition = 'all 0.8s ease';
+        testimonialObserver.observe(card);
+    });
+
+    // Pricing cards hover effect
+    const pricingCards = document.querySelectorAll('.pricing-card');
+    pricingCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            if (!this.classList.contains('featured')) {
+                this.style.transform = 'translateY(-10px)';
+                this.style.boxShadow = '0 15px 40px rgba(0,0,0,0.12)';
+            }
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            if (!this.classList.contains('featured')) {
+                this.style.transform = 'translateY(0)';
+                this.style.boxShadow = '0 5px 20px rgba(0,0,0,0.08)';
+            }
+        });
+    });
+
+    // Add ripple effect to buttons
+    const buttons = document.querySelectorAll('.btn-primary, .btn-secondary, .btn-pricing');
+    buttons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            const ripple = document.createElement('span');
+            const rect = this.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            
+            ripple.style.width = ripple.style.height = size + 'px';
+            ripple.style.left = x + 'px';
+            ripple.style.top = y + 'px';
+            ripple.classList.add('ripple');
+            
+            this.appendChild(ripple);
+            
+            setTimeout(() => ripple.remove(), 600);
+        });
+    });
+});
\ No newline at end of file
diff --git a/static/js/subtasks.js b/static/js/subtasks.js
new file mode 100644
index 0000000..b41ff69
--- /dev/null
+++ b/static/js/subtasks.js
@@ -0,0 +1,363 @@
+// Sub-task Management Functions
+
+// Global variable to track subtasks
+let currentSubtasks = [];
+
+// Initialize subtasks when loading a task
+function initializeSubtasks(taskId) {
+    currentSubtasks = [];
+    const subtasksContainer = document.getElementById('subtasks-container');
+    if (!subtasksContainer) return;
+    
+    subtasksContainer.innerHTML = '<div class="loading">Loading subtasks...</div>';
+    
+    if (taskId) {
+        // Fetch existing subtasks
+        fetch(`/api/tasks/${taskId}`)
+            .then(response => response.json())
+            .then(task => {
+                if (task.subtasks) {
+                    currentSubtasks = task.subtasks;
+                    renderSubtasks();
+                } else {
+                    subtasksContainer.innerHTML = '<p class="no-subtasks">No subtasks yet</p>';
+                }
+            })
+            .catch(error => {
+                console.error('Error loading subtasks:', error);
+                subtasksContainer.innerHTML = '<p class="error">Error loading subtasks</p>';
+            });
+    } else {
+        renderSubtasks();
+    }
+}
+
+// Render subtasks in the modal
+function renderSubtasks() {
+    const container = document.getElementById('subtasks-container');
+    if (!container) return;
+    
+    if (currentSubtasks.length === 0) {
+        container.innerHTML = '<p class="no-subtasks">No subtasks yet</p>';
+        return;
+    }
+    
+    container.innerHTML = currentSubtasks.map((subtask, index) => `
+        <div class="subtask-item" data-subtask-id="${subtask.id || ''}" data-index="${index}">
+            <input type="checkbox" 
+                   class="subtask-checkbox" 
+                   ${subtask.status === 'COMPLETED' ? 'checked' : ''}
+                   onchange="toggleSubtaskStatus(${index})"
+                   ${subtask.id ? '' : 'disabled'}>
+            <input type="text" 
+                   class="subtask-name" 
+                   value="${escapeHtml(subtask.name)}" 
+                   placeholder="Subtask name"
+                   onchange="updateSubtaskName(${index}, this.value)">
+            <select class="subtask-priority" onchange="updateSubtaskPriority(${index}, this.value)">
+                <option value="LOW" ${subtask.priority === 'LOW' ? 'selected' : ''}>Low</option>
+                <option value="MEDIUM" ${subtask.priority === 'MEDIUM' ? 'selected' : ''}>Medium</option>
+                <option value="HIGH" ${subtask.priority === 'HIGH' ? 'selected' : ''}>High</option>
+                <option value="URGENT" ${subtask.priority === 'URGENT' ? 'selected' : ''}>Urgent</option>
+            </select>
+            <select class="subtask-assignee" onchange="updateSubtaskAssignee(${index}, this.value)">
+                <option value="">Unassigned</option>
+                ${renderAssigneeOptions(subtask.assigned_to_id)}
+            </select>
+            <button type="button" class="btn btn-danger btn-xs" onclick="removeSubtask(${index})">Remove</button>
+        </div>
+    `).join('');
+}
+
+// Add a new subtask
+function addSubtask() {
+    const newSubtask = {
+        name: '',
+        status: 'NOT_STARTED',
+        priority: 'MEDIUM',
+        assigned_to_id: null,
+        isNew: true
+    };
+    
+    currentSubtasks.push(newSubtask);
+    renderSubtasks();
+    
+    // Focus on the new subtask input
+    setTimeout(() => {
+        const inputs = document.querySelectorAll('.subtask-name');
+        if (inputs.length > 0) {
+            inputs[inputs.length - 1].focus();
+        }
+    }, 50);
+}
+
+// Remove a subtask
+function removeSubtask(index) {
+    const subtask = currentSubtasks[index];
+    
+    if (subtask.id) {
+        // If it has an ID, it exists in the database
+        if (confirm('Are you sure you want to delete this subtask?')) {
+            fetch(`/api/subtasks/${subtask.id}`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+            .then(response => {
+                if (response.ok) {
+                    currentSubtasks.splice(index, 1);
+                    renderSubtasks();
+                    showNotification('Subtask deleted successfully', 'success');
+                } else {
+                    throw new Error('Failed to delete subtask');
+                }
+            })
+            .catch(error => {
+                console.error('Error deleting subtask:', error);
+                showNotification('Error deleting subtask', 'error');
+            });
+        }
+    } else {
+        // Just remove from array if not saved yet
+        currentSubtasks.splice(index, 1);
+        renderSubtasks();
+    }
+}
+
+// Update subtask name
+function updateSubtaskName(index, name) {
+    currentSubtasks[index].name = name;
+}
+
+// Update subtask priority
+function updateSubtaskPriority(index, priority) {
+    currentSubtasks[index].priority = priority;
+}
+
+// Update subtask assignee
+function updateSubtaskAssignee(index, assigneeId) {
+    currentSubtasks[index].assigned_to_id = assigneeId || null;
+}
+
+// Toggle subtask status
+function toggleSubtaskStatus(index) {
+    const subtask = currentSubtasks[index];
+    const newStatus = subtask.status === 'COMPLETED' ? 'NOT_STARTED' : 'COMPLETED';
+    
+    if (subtask.id) {
+        // Update in database
+        fetch(`/api/subtasks/${subtask.id}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ status: newStatus })
+        })
+        .then(response => response.json())
+        .then(updatedSubtask => {
+            currentSubtasks[index] = updatedSubtask;
+            renderSubtasks();
+            updateTaskProgress();
+        })
+        .catch(error => {
+            console.error('Error updating subtask status:', error);
+            showNotification('Error updating subtask status', 'error');
+            renderSubtasks(); // Re-render to revert checkbox
+        });
+    } else {
+        currentSubtasks[index].status = newStatus;
+    }
+}
+
+// Save all subtasks for a task
+function saveSubtasks(taskId) {
+    const promises = [];
+    
+    currentSubtasks.forEach(subtask => {
+        if (subtask.isNew && subtask.name.trim()) {
+            // Create new subtask
+            promises.push(
+                fetch('/api/subtasks', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        task_id: taskId,
+                        name: subtask.name,
+                        priority: subtask.priority,
+                        assigned_to_id: subtask.assigned_to_id,
+                        status: subtask.status
+                    })
+                })
+                .then(response => response.json())
+            );
+        } else if (subtask.id && !subtask.isNew) {
+            // Update existing subtask
+            promises.push(
+                fetch(`/api/subtasks/${subtask.id}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        name: subtask.name,
+                        priority: subtask.priority,
+                        assigned_to_id: subtask.assigned_to_id,
+                        status: subtask.status
+                    })
+                })
+                .then(response => response.json())
+            );
+        }
+    });
+    
+    return Promise.all(promises);
+}
+
+// Update task progress based on subtasks
+function updateTaskProgress() {
+    const taskId = document.getElementById('task-id').value;
+    if (!taskId) return;
+    
+    // Refresh the task card in the board
+    if (typeof refreshTaskCard === 'function') {
+        refreshTaskCard(taskId);
+    }
+}
+
+// Render assignee options
+function renderAssigneeOptions(selectedId) {
+    // This should be populated from the global team members list
+    const teamMembers = window.teamMembers || [];
+    return teamMembers.map(member => 
+        `<option value="${member.id}" ${member.id == selectedId ? 'selected' : ''}>${escapeHtml(member.username)}</option>`
+    ).join('');
+}
+
+// Helper function to escape HTML
+function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+// Display subtasks in task cards
+function renderSubtasksInCard(subtasks) {
+    if (!subtasks || subtasks.length === 0) return '';
+    
+    const completedCount = subtasks.filter(s => s.status === 'COMPLETED').length;
+    const totalCount = subtasks.length;
+    const percentage = Math.round((completedCount / totalCount) * 100);
+    
+    return `
+        <div class="task-subtasks">
+            <div class="subtask-progress">
+                <div class="subtask-progress-bar">
+                    <div class="subtask-progress-fill" style="width: ${percentage}%"></div>
+                </div>
+                <span class="subtask-count">${completedCount}/${totalCount} subtasks</span>
+            </div>
+        </div>
+    `;
+}
+
+// Add subtask styles
+const subtaskStyles = `
+<style>
+/* Subtask Styles - Compact */
+.subtask-item {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin-bottom: 0.4rem;
+    padding: 0.4rem 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+    border: 1px solid #e9ecef;
+}
+
+.subtask-checkbox {
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+}
+
+.subtask-name {
+    flex: 2;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+.subtask-priority {
+    flex: 0.8;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.8rem;
+}
+
+.subtask-assignee {
+    flex: 1.2;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.8rem;
+}
+
+.no-subtasks {
+    color: #6c757d;
+    font-style: italic;
+    text-align: center;
+    padding: 1rem;
+}
+
+/* Subtask progress in task cards */
+.task-subtasks {
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.subtask-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.subtask-progress-bar {
+    flex: 1;
+    height: 6px;
+    background: #e9ecef;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.subtask-progress-fill {
+    height: 100%;
+    background: #28a745;
+    transition: width 0.3s ease;
+}
+
+.subtask-count {
+    font-size: 0.75rem;
+    color: #6c757d;
+    white-space: nowrap;
+}
+</style>
+`;
+
+// Inject styles when document is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+        document.head.insertAdjacentHTML('beforeend', subtaskStyles);
+    });
+} else {
+    document.head.insertAdjacentHTML('beforeend', subtaskStyles);
+}
\ No newline at end of file
diff --git a/static/js/user-dropdown.js b/static/js/user-dropdown.js
new file mode 100644
index 0000000..ffb0b06
--- /dev/null
+++ b/static/js/user-dropdown.js
@@ -0,0 +1,54 @@
+// User dropdown context menu functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const userDropdownToggle = document.getElementById('user-dropdown-toggle');
+    const userDropdownModal = document.getElementById('user-dropdown-modal');
+    
+    // Toggle dropdown context menu
+    if (userDropdownToggle && userDropdownModal) {
+        userDropdownToggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            // Toggle active class
+            const isActive = userDropdownModal.classList.contains('active');
+            userDropdownModal.classList.toggle('active');
+            
+            // Position the dropdown relative to the toggle button
+            if (!isActive) {
+                const toggleRect = userDropdownToggle.getBoundingClientRect();
+                const sidebarHeader = userDropdownToggle.closest('.sidebar-header');
+                const sidebarHeaderRect = sidebarHeader.getBoundingClientRect();
+                
+                // Position relative to sidebar header
+                userDropdownModal.style.position = 'absolute';
+                userDropdownModal.style.top = (toggleRect.bottom - sidebarHeaderRect.top + 5) + 'px';
+                userDropdownModal.style.right = '10px';
+                userDropdownModal.style.left = 'auto';
+            }
+        });
+    }
+    
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(e) {
+        if (userDropdownModal && !userDropdownModal.contains(e.target) && !userDropdownToggle.contains(e.target)) {
+            userDropdownModal.classList.remove('active');
+        }
+    });
+    
+    // Close dropdown when pressing Escape
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && userDropdownModal && userDropdownModal.classList.contains('active')) {
+            userDropdownModal.classList.remove('active');
+        }
+    });
+    
+    // Close dropdown when clicking on menu items
+    if (userDropdownModal) {
+        const menuLinks = userDropdownModal.querySelectorAll('a');
+        menuLinks.forEach(link => {
+            link.addEventListener('click', function() {
+                userDropdownModal.classList.remove('active');
+            });
+        });
+    }
+});
\ No newline at end of file
diff --git a/static/uploads/avatars/.gitkeep b/static/uploads/avatars/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/templates/about.html b/templates/about.html
index c1846a9..2248ad9 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -5,7 +5,7 @@
     <div class="about-content">
         <div class="intro">
             <h2>Professional Time Tracking Made Simple</h2>
-            <p>TimeTrack is a comprehensive multi-tenant time management solution designed to help organizations and individuals monitor work hours efficiently. Built with simplicity and accuracy in mind, our platform provides the tools you need to track, manage, and analyze time spent on work activities across multiple companies and teams.</p>
+            <p>{{ g.branding.app_name }} is a comprehensive multi-tenant time management solution designed to help organizations and individuals monitor work hours efficiently. Built with simplicity and accuracy in mind, our platform provides the tools you need to track, manage, and analyze time spent on work activities across multiple companies and teams.</p>
         </div>
         
         <div class="features-section">
@@ -39,7 +39,7 @@ <h3>🔧 Flexible Configuration</h3>
                 
                 <div class="feature-item">
                     <h3>🏢 Multi-Company Support</h3>
-                    <p>Enterprise-ready multi-tenant architecture allows multiple companies to operate independently within a single TimeTrack instance, with complete data isolation and security.</p>
+                    <p>Enterprise-ready multi-tenant architecture allows multiple companies to operate independently within a single {{ g.branding.app_name }} instance, with complete data isolation and security.</p>
                 </div>
                 
                 <div class="feature-item">
@@ -76,7 +76,7 @@ <h3>⚙️ Administrator</h3>
         </div>
         
         <div class="benefits-section">
-            <h2>Why Choose TimeTrack?</h2>
+            <h2>Why Choose {{ g.branding.app_name }}?</h2>
             
             <div class="benefits-list">
                 <div class="benefit">
@@ -103,7 +103,7 @@ <h3>✅ Data-Driven Insights</h3>
         
         <div class="technical-section">
             <h2>Technical Information</h2>
-            <p>TimeTrack is built using modern web technologies including Flask (Python), SQLite database, and responsive HTML/CSS/JavaScript frontend. The application features a REST API architecture, secure session management, and email integration for user verification.</p>
+            <p>{{ g.branding.app_name }} is built using modern web technologies including Flask (Python), SQLite database, and responsive HTML/CSS/JavaScript frontend. The application features a REST API architecture, secure session management, and email integration for user verification.</p>
         </div>
         
         <div class="company-setup-section">
@@ -111,12 +111,12 @@ <h2>Company Setup & Registration</h2>
             <div class="setup-options">
                 <div class="setup-option">
                     <h3>🏢 New Company Setup</h3>
-                    <p>Setting up TimeTrack for the first time or adding a new company? Create your company profile and administrator account to get started.</p>
+                    <p>Setting up {{ g.branding.app_name }} for the first time or adding a new company? Create your company profile and administrator account to get started.</p>
                 </div>
                 
                 <div class="setup-option">
                     <h3>👥 Join Existing Company</h3>
-                    <p>Already have a company using TimeTrack? Get your company code from your administrator and register to join your organization.</p>
+                    <p>Already have a company using {{ g.branding.app_name }}? Get your company code from your administrator and register to join your organization.</p>
                 </div>
             </div>
         </div>
diff --git a/templates/admin_company.html b/templates/admin_company.html
index b9eb18e..ef740e5 100644
--- a/templates/admin_company.html
+++ b/templates/admin_company.html
@@ -5,8 +5,8 @@
     <div class="admin-header">
         <h1>Company Management</h1>
         <div class="admin-actions">
-            <a href="{{ url_for('setup_company') }}" class="btn btn-success">Create New Company</a>
-            <a href="{{ url_for('edit_company') }}" class="btn btn-primary">Edit Company</a>
+            <a href="{{ url_for('setup_company') }}" class="btn btn-md btn-success">Create New Company</a>
+            <a href="{{ url_for('edit_company') }}" class="btn btn-md btn-primary">Edit Company</a>
         </div>
     </div>
     
diff --git a/templates/admin_projects.html b/templates/admin_projects.html
index 6aa8c31..25174b3 100644
--- a/templates/admin_projects.html
+++ b/templates/admin_projects.html
@@ -1,12 +1,48 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="timetrack-container">
+<div class="timetrack-container admin-projects-container">
     <div class="admin-header">
         <h2>Project Management</h2>
-        <a href="{{ url_for('create_project') }}" class="btn btn-success">Create New Project</a>
+        <div class="admin-actions">
+            <a href="{{ url_for('create_project') }}" class="btn btn-md btn-success">Create New Project</a>
+            <button id="manage-categories-btn" class="btn btn-md btn-info">Manage Categories</button>
+        </div>
     </div>
-    
+
+    <!-- Project Categories Section -->
+    <div id="categories-section" class="categories-section" style="display: none;">
+        <div class="section-header">
+            <h3>Project Categories</h3>
+            <button id="create-category-btn" class="btn btn-success btn-sm">Create Category</button>
+        </div>
+
+        <div class="categories-grid">
+            {% for category in categories %}
+            <div class="category-card" data-category-id="{{ category.id }}">
+                <div class="category-header" style="background-color: {{ category.color }}20; border-left: 4px solid {{ category.color }};">
+                    <div class="category-title">
+                        <span class="category-icon">{{ category.icon or '📁' }}</span>
+                        <span class="category-name">{{ category.name }}</span>
+                    </div>
+                    <div class="category-actions">
+                        <button class="edit-category-btn btn btn-xs btn-primary" data-id="{{ category.id }}">Edit</button>
+                        <button class="delete-category-btn btn btn-xs btn-danger" data-id="{{ category.id }}">Delete</button>
+                    </div>
+                </div>
+                <div class="category-body">
+                    <p class="category-description">{{ category.description or 'No description' }}</p>
+                    <small class="category-projects">{{ category.projects|length }} project(s)</small>
+                </div>
+            </div>
+            {% else %}
+            <div class="no-categories">
+                <p>No categories created yet. <button id="first-category-btn" class="btn btn-link">Create your first category</button>.</p>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+
     {% if projects %}
     <div class="projects-table">
         <table class="time-history">
@@ -14,6 +50,7 @@ <h2>Project Management</h2>
                 <tr>
                     <th>Code</th>
                     <th>Name</th>
+                    <th>Category</th>
                     <th>Team</th>
                     <th>Status</th>
                     <th>Start Date</th>
@@ -28,6 +65,15 @@ <h2>Project Management</h2>
                 <tr class="{% if not project.is_active %}inactive-project{% endif %}">
                     <td><strong>{{ project.code }}</strong></td>
                     <td>{{ project.name }}</td>
+                    <td>
+                        {% if project.category %}
+                            <span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
+                                {{ project.category.icon or '📁' }} {{ project.category.name }}
+                            </span>
+                        {% else %}
+                            <em>No category</em>
+                        {% endif %}
+                    </td>
                     <td>
                         {% if project.team %}
                             {{ project.team.name }}
@@ -46,8 +92,9 @@ <h2>Project Management</h2>
                     <td>{{ project.time_entries|length }}</td>
                     <td class="actions">
                         <a href="{{ url_for('edit_project', project_id=project.id) }}" class="btn btn-sm btn-primary">Edit</a>
-                        {% if g.user.role.name == 'ADMIN' and project.time_entries|length == 0 %}
-                        <form method="POST" action="{{ url_for('delete_project', project_id=project.id) }}" style="display: inline;" 
+                        <a href="{{ url_for('manage_project_tasks', project_id=project.id) }}" class="btn btn-sm btn-info">Tasks</a>
+                        {% if g.user.role == Role.ADMIN and project.time_entries|length == 0 %}
+                        <form method="POST" action="{{ url_for('delete_project', project_id=project.id) }}" style="display: inline;"
                               onsubmit="return confirm('Are you sure you want to delete this project?')">
                             <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                         </form>
@@ -66,9 +113,84 @@ <h2>Project Management</h2>
 </div>
 
 <style>
+/* Override container width for admin projects page */
+.admin-projects-container {
+    max-width: none !important;
+    width: 100% !important;
+    padding: 1rem !important;
+    margin: 0 !important;
+}
 
 .projects-table {
     overflow-x: auto;
+    width: 100%;
+}
+
+.projects-table table {
+    width: 100%;
+    min-width: 1200px; /* Ensure table is wide enough for all columns */
+    table-layout: auto;
+}
+
+/* Optimize column widths */
+.projects-table th:nth-child(1), /* Code */
+.projects-table td:nth-child(1) {
+    width: 8%;
+    min-width: 80px;
+}
+
+.projects-table th:nth-child(2), /* Name */
+.projects-table td:nth-child(2) {
+    width: 20%;
+    min-width: 150px;
+}
+
+.projects-table th:nth-child(3), /* Category */
+.projects-table td:nth-child(3) {
+    width: 12%;
+    min-width: 120px;
+}
+
+.projects-table th:nth-child(4), /* Team */
+.projects-table td:nth-child(4) {
+    width: 12%;
+    min-width: 100px;
+}
+
+.projects-table th:nth-child(5), /* Status */
+.projects-table td:nth-child(5) {
+    width: 8%;
+    min-width: 80px;
+}
+
+.projects-table th:nth-child(6), /* Start Date */
+.projects-table td:nth-child(6) {
+    width: 10%;
+    min-width: 100px;
+}
+
+.projects-table th:nth-child(7), /* End Date */
+.projects-table td:nth-child(7) {
+    width: 10%;
+    min-width: 100px;
+}
+
+.projects-table th:nth-child(8), /* Created By */
+.projects-table td:nth-child(8) {
+    width: 10%;
+    min-width: 100px;
+}
+
+.projects-table th:nth-child(9), /* Time Entries */
+.projects-table td:nth-child(9) {
+    width: 8%;
+    min-width: 80px;
+}
+
+.projects-table th:nth-child(10), /* Actions */
+.projects-table td:nth-child(10) {
+    width: 12%;
+    min-width: 200px;
 }
 
 .inactive-project {
@@ -94,28 +216,408 @@ <h2>Project Management</h2>
 
 .actions {
     white-space: nowrap;
+    min-width: 180px; /* Ensure enough space for buttons */
 }
 
-.btn-small {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
+.actions .btn {
     margin-right: 0.5rem;
+    margin-bottom: 0.25rem;
 }
 
-.btn-danger {
-    background-color: #dc3545;
-    border-color: #dc3545;
+.actions .btn-sm {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    min-width: 60px; /* Consistent button widths */
 }
 
-.btn-danger:hover {
-    background-color: #c82333;
-    border-color: #bd2130;
-}
+/* Button definitions now in main style.css */
 
 .no-data {
     text-align: center;
     padding: 3rem;
     color: #666;
 }
+
+/* Category Management Styles */
+.admin-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.categories-section {
+    background: #f8f9fa;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.categories-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+.category-card {
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease;
+}
+
+.category-card:hover {
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.category-header {
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.category-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+}
+
+.category-icon {
+    font-size: 1.2rem;
+}
+
+.category-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.category-body {
+    padding: 0 1rem 1rem;
+}
+
+.category-description {
+    margin: 0 0 0.5rem 0;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.category-projects {
+    color: #999;
+    font-size: 0.8rem;
+}
+
+.category-badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    border: 1px solid currentColor;
+}
+
+.no-categories {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+}
+
+.btn.btn-xs {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+    min-width: 50px;
+}
+
+/* Consistent button styling across the interface */
+.btn-info {
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+    color: white;
+}
+
+.btn-info:hover {
+    background-color: #138496;
+    border-color: #117a8b;
+}
+
+.btn-success {
+    background-color: #28a745;
+    border-color: #28a745;
+}
+
+.btn-success:hover {
+    background-color: #218838;
+    border-color: #1e7e34;
+}
+
+.section-header .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+}
+
+.category-actions .btn {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.8rem;
+    min-width: 55px;
+}
+
+/* Make the "Manage Categories" button more prominent */
+#manage-categories-btn {
+    padding: 0.5rem 1.25rem;
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.color-input-group {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.color-input-group input[type="color"] {
+    width: 50px;
+    height: 38px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.color-input-group input[type="text"] {
+    flex: 1;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+    .admin-actions {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .admin-actions .btn {
+        width: 100%;
+    }
+
+    .projects-table table {
+        min-width: 800px; /* Smaller minimum on mobile */
+    }
+
+    .categories-grid {
+        grid-template-columns: 1fr; /* Single column on mobile */
+    }
+}
+
+/* Better spacing for action buttons */
+.actions form {
+    display: inline-block;
+    margin: 0;
+}
+
+.actions .btn + .btn,
+.actions .btn + form {
+    margin-left: 0.25rem;
+}
 </style>
+
+<!-- Category Management Modal -->
+<div id="category-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h3 id="category-modal-title">Create Category</h3>
+        <form id="category-form">
+            <input type="hidden" id="category-id" name="category_id">
+            <div class="form-group">
+                <label for="category-name">Name:</label>
+                <input type="text" id="category-name" name="name" required maxlength="100">
+            </div>
+            <div class="form-group">
+                <label for="category-description">Description:</label>
+                <textarea id="category-description" name="description" rows="3"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="category-color">Color:</label>
+                <div class="color-input-group">
+                    <input type="color" id="category-color" name="color" value="#007bff">
+                    <input type="text" id="category-color-text" name="color_text" value="#007bff" maxlength="7">
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="category-icon">Icon (emoji or text):</label>
+                <input type="text" id="category-icon" name="icon" maxlength="10" placeholder="📁">
+                <small>Use emojis or short text like 📁, 🎯, 💼, etc.</small>
+            </div>
+            <div class="modal-actions">
+                <button type="submit" class="btn btn-primary">Save Category</button>
+                <button type="button" class="btn btn-secondary" id="cancel-category">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const manageCategoriesBtn = document.getElementById('manage-categories-btn');
+    const categoriesSection = document.getElementById('categories-section');
+    const categoryModal = document.getElementById('category-modal');
+    const categoryForm = document.getElementById('category-form');
+    const createCategoryBtn = document.getElementById('create-category-btn');
+    const firstCategoryBtn = document.getElementById('first-category-btn');
+    const colorInput = document.getElementById('category-color');
+    const colorTextInput = document.getElementById('category-color-text');
+
+    // Toggle categories section
+    manageCategoriesBtn.addEventListener('click', function() {
+        const isVisible = categoriesSection.style.display !== 'none';
+        categoriesSection.style.display = isVisible ? 'none' : 'block';
+        this.textContent = isVisible ? 'Manage Categories' : 'Hide Categories';
+    });
+
+    // Sync color inputs
+    colorInput.addEventListener('change', function() {
+        colorTextInput.value = this.value;
+    });
+
+    colorTextInput.addEventListener('change', function() {
+        if (/^#[0-9A-F]{6}$/i.test(this.value)) {
+            colorInput.value = this.value;
+        }
+    });
+
+    // Open create category modal
+    function openCategoryModal(categoryData = null) {
+        const isEdit = categoryData !== null;
+        document.getElementById('category-modal-title').textContent = isEdit ? 'Edit Category' : 'Create Category';
+
+        if (isEdit) {
+            document.getElementById('category-id').value = categoryData.id;
+            document.getElementById('category-name').value = categoryData.name;
+            document.getElementById('category-description').value = categoryData.description || '';
+            document.getElementById('category-color').value = categoryData.color;
+            document.getElementById('category-color-text').value = categoryData.color;
+            document.getElementById('category-icon').value = categoryData.icon || '';
+        } else {
+            categoryForm.reset();
+            document.getElementById('category-id').value = '';
+            document.getElementById('category-color').value = '#007bff';
+            document.getElementById('category-color-text').value = '#007bff';
+        }
+
+        categoryModal.style.display = 'block';
+    }
+
+    createCategoryBtn?.addEventListener('click', () => openCategoryModal());
+    firstCategoryBtn?.addEventListener('click', () => openCategoryModal());
+
+    // Edit category buttons
+    document.querySelectorAll('.edit-category-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const categoryId = this.getAttribute('data-id');
+            // Get category data from the card
+            const card = this.closest('.category-card');
+            const categoryData = {
+                id: categoryId,
+                name: card.querySelector('.category-name').textContent,
+                description: card.querySelector('.category-description').textContent,
+                color: card.querySelector('.category-header').style.borderLeftColor || '#007bff',
+                icon: card.querySelector('.category-icon').textContent
+            };
+            openCategoryModal(categoryData);
+        });
+    });
+
+    // Delete category buttons
+    document.querySelectorAll('.delete-category-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const categoryId = this.getAttribute('data-id');
+            if (confirm('Are you sure you want to delete this category? Projects using this category will be unassigned.')) {
+                fetch(`/api/admin/categories/${categoryId}`, {
+                    method: 'DELETE'
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('An error occurred while deleting the category');
+                });
+            }
+        });
+    });
+
+    // Close modal
+    document.querySelector('#category-modal .close').addEventListener('click', function() {
+        categoryModal.style.display = 'none';
+    });
+
+    document.getElementById('cancel-category').addEventListener('click', function() {
+        categoryModal.style.display = 'none';
+    });
+
+    // Submit category form
+    categoryForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const formData = new FormData(this);
+        const categoryId = formData.get('category_id');
+        const isEdit = categoryId !== '';
+
+        const url = isEdit ? `/api/admin/categories/${categoryId}` : '/api/admin/categories';
+        const method = isEdit ? 'PUT' : 'POST';
+
+        fetch(url, {
+            method: method,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                name: formData.get('name'),
+                description: formData.get('description'),
+                color: formData.get('color'),
+                icon: formData.get('icon')
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                categoryModal.style.display = 'none';
+                location.reload();
+            } else {
+                alert('Error: ' + data.message);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('An error occurred while saving the category');
+        });
+    });
+
+    // Close modal when clicking outside
+    window.addEventListener('click', function(event) {
+        if (event.target === categoryModal) {
+            categoryModal.style.display = 'none';
+        }
+    });
+});
+</script>
+
 {% endblock %}
\ No newline at end of file
diff --git a/templates/admin_teams.html b/templates/admin_teams.html
index 1ff5dc9..0f95a39 100644
--- a/templates/admin_teams.html
+++ b/templates/admin_teams.html
@@ -1,12 +1,12 @@
 {% extends 'layout.html' %}
 
 {% block content %}
-<div class="container">
+<div class="admin-container">
     <div class="admin-header">
         <h1>Team Management</h1>
-        <a href="{{ url_for('create_team') }}" class="btn btn-success">Create New Team</a>
+        <a href="{{ url_for('create_team') }}" class="btn btn-md btn-success">Create New Team</a>
     </div>
-    
+
     {% if teams %}
         <table class="data-table">
             <thead>
@@ -25,8 +25,8 @@ <h1>Team Management</h1>
                         <td>{{ team.description }}</td>
                         <td>{{ team.users|length }}</td>
                         <td>{{ team.created_at.strftime('%Y-%m-%d') }}</td>
-                        <td>
-                            <a href="{{ url_for('manage_team', team_id=team.id) }}" class="button btn btn-sm btn-info">Manage</a>
+                        <td class="actions">
+                            <a href="{{ url_for('manage_team', team_id=team.id) }}" class="button btn btn-sm btn-primary">Manage</a>
                             <form method="POST" action="{{ url_for('delete_team', team_id=team.id) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this team?');">
                                 <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                             </form>
diff --git a/templates/admin_users.html b/templates/admin_users.html
index cf38822..b9ba83a 100644
--- a/templates/admin_users.html
+++ b/templates/admin_users.html
@@ -4,7 +4,7 @@
 <div class="admin-container">
     <div class="admin-header">
         <h1>User Management</h1>
-        <a href="{{ url_for('create_user') }}" class="btn btn-success">Create New User</a>
+        <a href="{{ url_for('create_user') }}" class="btn btn-md btn-success">Create New User</a>
     </div>
     
     <div class="user-list">
diff --git a/templates/admin_work_policies.html b/templates/admin_work_policies.html
index e69b861..9887edb 100644
--- a/templates/admin_work_policies.html
+++ b/templates/admin_work_policies.html
@@ -283,36 +283,7 @@ <h4>Current Configuration Summary</h4>
     color: #495057;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    text-decoration: none;
-    cursor: pointer;
-    margin-right: 1rem;
-    margin-bottom: 0.5rem;
-    transition: background-color 0.2s ease;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
+/* Button styles now centralized in main style.css */
 
 /* Make preset cards clickable */
 .preset-card {
diff --git a/templates/analytics.html b/templates/analytics.html
index d56bbb7..3389c26 100644
--- a/templates/analytics.html
+++ b/templates/analytics.html
@@ -1,13 +1,13 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="timetrack-container">
-    <div class="analytics-header">
+<div class="page-container timetrack-container">
+    <div class="page-header analytics-header">
         <h2>📊 Time Analytics</h2>
         <div class="mode-switcher">
             <button class="mode-btn {% if mode == 'personal' %}active{% endif %}" 
                     onclick="switchMode('personal')">Personal</button>
-            {% if g.user.team_id and g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator'] %}
+            {% if g.user.team_id and g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR, Role.ADMIN] %}
             <button class="mode-btn {% if mode == 'team' %}active{% endif %}" 
                     onclick="switchMode('team')">Team</button>
             {% endif %}
@@ -106,6 +106,7 @@ <h3>Visual Analytics</h3>
                 <select id="chart-type">
                     <option value="timeSeries">Time Series</option>
                     <option value="projectDistribution">Project Distribution</option>
+                    <option value="burndown">Burndown Chart</option>
                 </select>
                 <div class="export-buttons">
                     <button class="btn btn-secondary" onclick="exportChart('png')">Export PNG</button>
@@ -268,7 +269,12 @@ <h2>Confirm Deletion</h2>
         const chartTypeSelect = document.getElementById('chart-type');
         if (chartTypeSelect) {
             chartTypeSelect.addEventListener('change', () => {
-                this.updateChart();
+                // For burndown chart, we need to reload data from the server
+                if (chartTypeSelect.value === 'burndown') {
+                    this.loadData();
+                } else {
+                    this.updateChart();
+                }
             });
         }
 
@@ -309,6 +315,12 @@ <h2>Confirm Deletion</h2>
                 params.append('project_id', this.state.selectedProject);
             }
 
+            // Add chart_type parameter for graph view
+            if (this.state.activeView === 'graph') {
+                const chartType = document.getElementById('chart-type')?.value || 'timeSeries';
+                params.append('chart_type', chartType);
+            }
+
             const response = await fetch(`/api/analytics/data?${params}`);
             const data = await response.json();
 
@@ -355,12 +367,8 @@ <h2>Confirm Deletion</h2>
 
         this.state.activeView = viewType;
         
-        // Load data for new view if needed
-        if (this.state.data) {
-            this.refreshCurrentView();
-        } else {
-            this.loadData();
-        }
+        // Always load new data since different views need different data structures
+        this.loadData();
     }
 
     updateTableView() {
@@ -400,11 +408,29 @@ <h2>Confirm Deletion</h2>
         const data = this.state.data;
         if (!data) return;
 
-        // Update stats
-        document.getElementById('total-hours').textContent = data.totalHours?.toFixed(1) || '0';
-        document.getElementById('total-days').textContent = data.totalDays || '0';
-        document.getElementById('avg-hours').textContent = 
-            data.totalDays > 0 ? (data.totalHours / data.totalDays).toFixed(1) : '0';
+        const chartType = document.getElementById('chart-type').value;
+        
+        // Update stats based on chart type
+        if (chartType === 'burndown' && data.burndown) {
+            document.getElementById('total-hours').textContent = data.burndown.total_tasks || '0';
+            document.getElementById('total-days').textContent = data.burndown.dates?.length || '0';
+            document.getElementById('avg-hours').textContent = data.burndown.tasks_completed || '0';
+            
+            // Update stat labels for burndown
+            document.querySelector('.stat-card:nth-child(1) h4').textContent = 'Total Tasks';
+            document.querySelector('.stat-card:nth-child(2) h4').textContent = 'Timeline Days';
+            document.querySelector('.stat-card:nth-child(3) h4').textContent = 'Completed Tasks';
+        } else {
+            document.getElementById('total-hours').textContent = data.totalHours?.toFixed(1) || '0';
+            document.getElementById('total-days').textContent = data.totalDays || '0';
+            document.getElementById('avg-hours').textContent = 
+                data.totalDays > 0 ? (data.totalHours / data.totalDays).toFixed(1) : '0';
+            
+            // Restore original stat labels
+            document.querySelector('.stat-card:nth-child(1) h4').textContent = 'Total Hours';
+            document.querySelector('.stat-card:nth-child(2) h4').textContent = 'Total Days';
+            document.querySelector('.stat-card:nth-child(3) h4').textContent = 'Average Hours/Day';
+        }
 
         this.updateChart();
     }
@@ -487,6 +513,68 @@ <h2>Confirm Deletion</h2>
                     }
                 }
             });
+        } else if (chartType === 'burndown') {
+            this.charts.main = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.burndown?.dates || [],
+                    datasets: [{
+                        label: 'Remaining Tasks',
+                        data: data.burndown?.remaining || [],
+                        borderColor: '#FF5722',
+                        backgroundColor: 'rgba(255, 87, 34, 0.1)',
+                        fill: true,
+                        tension: 0.1,
+                        pointBackgroundColor: '#FF5722',
+                        pointBorderColor: '#FF5722',
+                        pointRadius: 4
+                    }, {
+                        label: 'Ideal Burndown',
+                        data: data.burndown?.ideal || [],
+                        borderColor: '#4CAF50',
+                        backgroundColor: 'transparent',
+                        borderDash: [5, 5],
+                        fill: false,
+                        tension: 0,
+                        pointRadius: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: 'Project Burndown Chart'
+                        },
+                        legend: {
+                            display: true,
+                            position: 'top'
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Remaining Tasks'
+                            },
+                            ticks: {
+                                stepSize: 1
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Date'
+                            }
+                        }
+                    },
+                    interaction: {
+                        intersect: false,
+                        mode: 'index'
+                    }
+                }
+            });
         }
     }
 
@@ -558,7 +646,9 @@ <h2>Confirm Deletion</h2>
     } else if (format === 'pdf') {
         // Get chart title for PDF
         const chartType = document.getElementById('chart-type').value;
-        const title = chartType === 'timeSeries' ? 'Daily Hours Worked' : 'Time Distribution by Project';
+        const title = chartType === 'timeSeries' ? 'Daily Hours Worked' : 
+                     chartType === 'projectDistribution' ? 'Time Distribution by Project' : 
+                     'Project Burndown Chart';
         
         // Create PDF using jsPDF
         const { jsPDF } = window.jspdf;
diff --git a/templates/confirm_company_deletion.html b/templates/confirm_company_deletion.html
new file mode 100644
index 0000000..d488c22
--- /dev/null
+++ b/templates/confirm_company_deletion.html
@@ -0,0 +1,243 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="admin-container">
+    <div class="header-section">
+        <h1>⚠️ Confirm Company Deletion</h1>
+        <p class="subtitle">Critical Action Required - Review All Data Before Proceeding</p>
+        <a href="{{ url_for('admin_users') if g.user.role != Role.SYSTEM_ADMIN else url_for('system_admin_users') }}" 
+           class="btn btn-md btn-secondary">← Back to User Management</a>
+    </div>
+    
+    <div class="alert alert-danger">
+        <h3>Critical Warning!</h3>
+        <p>You are about to delete user <strong>{{ user.username }}</strong> who is the last administrator/supervisor in company <strong>{{ company.name }}</strong>.</p>
+        <p><strong>This action will permanently delete the entire company and ALL associated data.</strong></p>
+        <p>This action cannot be undone!</p>
+    </div>
+
+    <div class="content-section">
+        <h2>The following data will be permanently deleted:</h2>
+                    
+        <!-- Company Information -->
+        <div class="table-section">
+            <h3>🏢 Company Information</h3>
+            <table class="data-table">
+                <tr>
+                    <th>Company Name:</th>
+                    <td>{{ company.name }}</td>
+                </tr>
+                <tr>
+                    <th>Company Slug:</th>
+                    <td>{{ company.slug }}</td>
+                </tr>
+                <tr>
+                    <th>Created:</th>
+                    <td>{{ company.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
+                </tr>
+                <tr>
+                    <th>Description:</th>
+                    <td>{{ company.description or 'None' }}</td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Users -->
+        {% if users %}
+        <div class="table-section">
+            <h3>👥 Users ({{ users|length }})</h3>
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Email</th>
+                        <th>Role</th>
+                        <th>Team</th>
+                        <th>Joined</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for u in users %}
+                    <tr {% if u.id == user.id %}class="highlight-row"{% endif %}>
+                        <td>
+                            {{ u.username }}
+                            {% if u.id == user.id %}<span class="status-badge status-warning">Target User</span>{% endif %}
+                        </td>
+                        <td>{{ u.email }}</td>
+                        <td>{{ u.role.value }}</td>
+                        <td>{{ u.team.name if u.team else 'None' }}</td>
+                        <td>{{ u.created_at.strftime('%Y-%m-%d') }}</td>
+                        <td>
+                            <span class="status-badge {% if u.is_blocked %}status-blocked{% else %}status-active{% endif %}">
+                                {% if u.is_blocked %}Blocked{% else %}Active{% endif %}
+                            </span>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% endif %}
+
+        <!-- Teams -->
+        {% if teams %}
+        <div class="table-section">
+            <h3>🏭 Teams ({{ teams|length }})</h3>
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Team Name</th>
+                        <th>Description</th>
+                        <th>Members</th>
+                        <th>Created</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for team in teams %}
+                    <tr>
+                        <td>{{ team.name }}</td>
+                        <td>{{ team.description or 'None' }}</td>
+                        <td>{{ team.users|length }}</td>
+                        <td>{{ team.created_at.strftime('%Y-%m-%d') }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% endif %}
+
+        <!-- Projects -->
+        {% if projects %}
+        <div class="table-section">
+            <h3>📝 Projects ({{ projects|length }})</h3>
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Project Code</th>
+                        <th>Project Name</th>
+                        <th>Team</th>
+                        <th>Tasks</th>
+                        <th>Time Entries</th>
+                        <th>Created By</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for project in projects %}
+                    <tr>
+                        <td>{{ project.code }}</td>
+                        <td>{{ project.name }}</td>
+                        <td>{{ project.team.name if project.team else 'None' }}</td>
+                        <td>{{ project.tasks|length }}</td>
+                        <td>{{ project.time_entries|length }}</td>
+                        <td>{{ project.created_by.username }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% endif %}
+
+        <!-- Tasks -->
+        {% if tasks %}
+        <div class="table-section">
+            <h3>✅ Tasks ({{ tasks|length }})</h3>
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Task Name</th>
+                        <th>Project</th>
+                        <th>Status</th>
+                        <th>Priority</th>
+                        <th>Assigned To</th>
+                        <th>Subtasks</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for task in tasks %}
+                    <tr>
+                        <td>{{ task.name }}</td>
+                        <td>{{ task.project.code }}</td>
+                        <td>{{ task.status.value }}</td>
+                        <td>{{ task.priority.value }}</td>
+                        <td>{{ task.assigned_to.username if task.assigned_to else 'None' }}</td>
+                        <td>{{ task.subtasks|length }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% endif %}
+
+
+        <!-- Time Entries -->
+        {% if time_entries_count > 0 %}
+        <div class="table-section">
+            <h3>⏱️ Time Entries ({{ time_entries_count }})</h3>
+            <div class="info-card">
+                <p>{{ time_entries_count }} time tracking entries will be permanently deleted.</p>
+                <p><strong>Total Hours Tracked:</strong> {{ total_hours_tracked }} hours</p>
+            </div>
+        </div>
+        {% endif %}
+
+        <!-- Categories -->
+        {% if categories %}
+        <div class="table-section">
+            <h3>🏷️ Project Categories ({{ categories|length }})</h3>
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Category Name</th>
+                        <th>Projects</th>
+                        <th>Created By</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for category in categories %}
+                    <tr>
+                        <td>{{ category.name }}</td>
+                        <td>{{ category.projects|length }}</td>
+                        <td>{{ category.created_by.username }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% endif %}
+    </div>
+
+    <!-- Confirmation Form -->
+    <div class="form-section">
+        <div class="alert alert-danger">
+            <h3>Final Confirmation Required</h3>
+        </div>
+        
+        <form method="POST" action="{{ url_for('confirm_company_deletion', user_id=user.id) }}" class="user-form">
+            <div class="form-group">
+                <label for="company_name_confirm">
+                    To confirm deletion, please type the company name: <strong>{{ company.name }}</strong>
+                </label>
+                <input type="text" class="form-control" id="company_name_confirm" 
+                       name="company_name_confirm" required 
+                       placeholder="Enter company name exactly as shown above">
+            </div>
+            
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" id="understand_deletion" name="understand_deletion" required>
+                    I understand that this action will permanently delete the company and ALL associated data, and this cannot be undone.
+                </label>
+            </div>
+
+            <div class="form-group">
+                <a href="{{ url_for('admin_users') if g.user.role != Role.SYSTEM_ADMIN else url_for('system_admin_users') }}" 
+                   class="btn btn-secondary">Cancel</a>
+                <button type="submit" class="btn btn-danger">
+                    Delete Company and All Data
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/create_project.html b/templates/create_project.html
index c9d4f12..3e1b6fc 100644
--- a/templates/create_project.html
+++ b/templates/create_project.html
@@ -40,6 +40,19 @@ <h2>Create New Project</h2>
                     {% endfor %}
                 </select>
             </div>
+            
+            <div class="form-group">
+                <label for="category_id">Project Category</label>
+                <select id="category_id" name="category_id">
+                    <option value="">No Category</option>
+                    {% for category in categories %}
+                    <option value="{{ category.id }}" 
+                            {% if request.form.category_id and request.form.category_id|int == category.id %}selected{% endif %}>
+                        {{ category.icon or '📁' }} {{ category.name }}
+                    </option>
+                    {% endfor %}
+                </select>
+            </div>
         </div>
         
         <div class="form-row">
@@ -112,15 +125,7 @@ <h2>Create New Project</h2>
     margin-top: 2rem;
 }
 
-.btn-secondary {
-    background-color: #6c757d;
-    border-color: #6c757d;
-}
-
-.btn-secondary:hover {
-    background-color: #5a6268;
-    border-color: #545b62;
-}
+/* Button styles now centralized in main style.css */
 
 #code {
     text-transform: uppercase;
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 4ad3f4f..413db2f 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,309 +1,1814 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="admin-container">
-    <h1>
-        {% if g.user.role == Role.ADMIN or g.user.role == Role.SYSTEM_ADMIN %}
-            Admin Dashboard
-        {% elif g.user.role == Role.SUPERVISOR %}
-            Supervisor Dashboard
-        {% elif g.user.role == Role.TEAM_LEADER %}
-            Team Leader Dashboard
-        {% else %}
-            Dashboard
-        {% endif %}
-    </h1>
-
-    <!-- Quick Actions section -->
-    <div class="quick-actions">
-        <h2>Quick Actions</h2>
-        <div class="admin-panel">
-            <div class="admin-card">
-                <h2>My Profile</h2>
-                <p>Update your personal information and password.</p>
-                <a href="{{ url_for('profile') }}" class="btn btn-secondary">Edit Profile</a>
-            </div>
+<div class="page-container dashboard-container">
+    <div class="page-header dashboard-header">
+        <h2>My Dashboard</h2>
+        <div class="page-actions dashboard-actions">
+            <button id="customize-btn" class="btn btn-md btn-primary">
+                <i class="fas fa-edit"></i> Customize
+            </button>
+            <button id="add-widget-btn" class="btn btn-md btn-success">
+                <i class="fas fa-plus"></i> Add Widget
+            </button>
+        </div>
+    </div>
 
-            <div class="admin-card">
-                <h2>Configuration</h2>
-                <p>Configure work hours and break settings.</p>
-                <a href="{{ url_for('config') }}" class="btn btn-secondary">Work Config</a>
-            </div>
+    <div class="dashboard-grid" id="dashboard-grid">
+        <!-- Widgets will be loaded dynamically -->
+    </div>
 
-            <div class="admin-card">
-                <h2>Analytics</h2>
-                <p>View the complete time tracking history.</p>
-                <a href="{{ url_for('analytics') }}" class="btn btn-secondary">View Analytics</a>
-            </div>
+    <!-- Empty Dashboard Message -->
+    <div id="empty-dashboard" class="empty-dashboard" style="display: none;">
+        <div class="empty-dashboard-content">
+            <div class="empty-dashboard-icon">📊</div>
+            <h3>Your Dashboard is Empty</h3>
+            <p>Add widgets to create your personalized dashboard.</p>
+            <button id="add-first-widget-btn" class="btn btn-md btn-primary">Add Your First Widget</button>
         </div>
     </div>
+</div>
 
-    <!-- Admin-only sections -->
-    {% if g.user.role == Role.ADMIN or g.user.role == Role.SYSTEM_ADMIN %}
-    <div class="stats-section">
-        <h2>System Overview</h2>
-        <div class="stats-grid">
-            <div class="stat-card">
-                <h3>{{ total_users }}</h3>
-                <p>Total Users</p>
-            </div>
-            <div class="stat-card">
-                <h3>{{ total_teams }}</h3>
-                <p>Total Teams</p>
+<!-- Add Widget Modal -->
+<div id="add-widget-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h3>Add Widget</h3>
+        <div class="widget-gallery">
+            <div class="widget-category">
+                <h4>Time Tracking</h4>
+                <div class="widget-options">
+                    <div class="widget-option" data-type="current_timer">
+                        <div class="widget-preview">
+                            <i class="fas fa-clock"></i>
+                            <div class="widget-info">
+                                <h5>Current Timer</h5>
+                                <p>Quick time tracking with start/stop buttons</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-option" data-type="daily_summary">
+                        <div class="widget-preview">
+                            <i class="fas fa-chart-bar"></i>
+                            <div class="widget-info">
+                                <h5>Daily Summary</h5>
+                                <p>Daily, weekly, and monthly time summaries</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-option" data-type="weekly_chart">
+                        <div class="widget-preview">
+                            <i class="fas fa-chart-line"></i>
+                            <div class="widget-info">
+                                <h5>Weekly Chart</h5>
+                                <p>Visual chart of weekly time patterns</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-option" data-type="break_reminder">
+                        <div class="widget-preview">
+                            <i class="fas fa-bell"></i>
+                            <div class="widget-info">
+                                <h5>Break Reminder</h5>
+                                <p>Notifications for break times</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="stat-card">
-                <h3>{{ blocked_users }}</h3>
-                <p>Blocked Users</p>
+            
+            <div class="widget-category">
+                <h4>Projects & Tasks</h4>
+                <div class="widget-options">
+                    <div class="widget-option" data-type="active_projects">
+                        <div class="widget-preview">
+                            <i class="fas fa-project-diagram"></i>
+                            <div class="widget-info">
+                                <h5>Active Projects</h5>
+                                <p>Quick access to your active projects</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-option" data-type="project_progress">
+                        <div class="widget-preview">
+                            <i class="fas fa-chart-pie"></i>
+                            <div class="widget-info">
+                                <h5>Project Progress</h5>
+                                <p>Progress bars and completion status</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-option" data-type="assigned_tasks">
+                        <div class="widget-preview">
+                            <i class="fas fa-tasks"></i>
+                            <div class="widget-info">
+                                <h5>Assigned Tasks</h5>
+                                <p>View and manage your assigned tasks</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-option" data-type="task_priority">
+                        <div class="widget-preview">
+                            <i class="fas fa-exclamation-triangle"></i>
+                            <div class="widget-info">
+                                <h5>Task Priority</h5>
+                                <p>Tasks sorted by priority levels</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="stat-card">
-                <h3>{{ unverified_users }}</h3>
-                <p>Unverified Users</p>
+            
+            <div class="widget-category">
+                <h4>Analytics</h4>
+                <div class="widget-options">
+                    <div class="widget-option" data-type="productivity_metrics">
+                        <div class="widget-preview">
+                            <i class="fas fa-chart-line"></i>
+                            <div class="widget-info">
+                                <h5>Productivity Metrics</h5>
+                                <p>Visual charts of your time tracking data</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-option" data-type="time_distribution">
+                        <div class="widget-preview">
+                            <i class="fas fa-calendar"></i>
+                            <div class="widget-info">
+                                <h5>Time Distribution</h5>
+                                <p>Monthly calendar with time entries</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
+</div>
 
-    <div class="admin-panel">
-        <div class="admin-card">
-            <h2>User Management</h2>
-            <p>Manage user accounts, permissions, and roles.</p>
-            <a href="{{ url_for('admin_users') }}" class="btn btn-primary">Manage Users</a>
-        </div>
-
-        <div class="admin-card">
-            <h2>Project Management</h2>
-            <p>Manage projects, assign teams, and track project status.</p>
-            <a href="{{ url_for('admin_projects') }}" class="btn btn-primary">Manage Projects</a>
-        </div>
-
-        <div class="admin-card">
-            <h2>Team Management</h2>
-            <p>Configure teams and their members.</p>
-            <a href="{{ url_for('admin_teams') }}" class="btn btn-primary">Manage Teams</a>
-        </div>
-
-        <div class="admin-card">
-            <h2>System Settings</h2>
-            <p>Configure application-wide settings like registration and more.</p>
-            <a href="{{ url_for('admin_settings') }}" class="btn btn-primary">System Settings</a>
-        </div>
-    </div>
-    {% endif %}
-
-    <!-- Team Leader and Supervisor sections -->
-    {% if g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR, Role.ADMIN, Role.SYSTEM_ADMIN] %}
-    <div class="team-section">
-        <h2>Team Management</h2>
-
-        {% if teams %}
-        <div class="team-stats">
-            <div class="stat-card">
-                <h3>{{ team_member_count }}</h3>
-                <p>Team Members</p>
+<!-- Widget Configuration Modal -->
+<div id="widget-config-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h3>Widget Configuration</h3>
+        <form id="widget-config-form">
+            <input type="hidden" id="widget-id" name="widget_id">
+            
+            <div class="form-group">
+                <label for="widget-title">Title</label>
+                <input type="text" id="widget-title" name="title" required>
             </div>
-            <div class="stat-card">
-                <h3>{{ teams|length }}</h3>
-                <p>Teams Managed</p>
+            
+            <div class="form-group">
+                <label for="widget-size">Size</label>
+                <select id="widget-size" name="size">
+                    <option value="small">Small (2 columns)</option>
+                    <option value="medium">Medium (3 columns)</option>
+                    <option value="large">Large (4 columns, 2 rows)</option>
+                    <option value="wide">Wide (6 columns)</option>
+                    <option value="extra-large">Extra Large (6 columns, 2 rows)</option>
+                    <option value="full-width">Full Width (12 columns)</option>
+                </select>
             </div>
-        </div>
-
-        <div class="admin-panel">
-            {% if g.user.role == Role.ADMIN or g.user.role == Role.SYSTEM_ADMIN %}
-            <div class="admin-card">
-                <h2>Team Configuration</h2>
-                <p>Create and manage team structures.</p>
-                <a href="{{ url_for('admin_teams') }}" class="btn btn-primary">Configure Teams</a>
+            
+            <div id="widget-specific-config">
+                <!-- Widget-specific configuration will be loaded here -->
             </div>
-            {% endif %}
-        </div>
-
-        <div class="team-members">
-            <h3>Your Team Members</h3>
-            {% if team_members %}
-            <div class="members-grid">
-                {% for member in team_members %}
-                <div class="member-card">
-                    <h4>{{ member.username }}</h4>
-                    <p>{{ member.role.value if member.role else 'Team Member' }}</p>
-                    <p>{{ member.email }}</p>
-                    {% if member.is_blocked %}
-                        <span class="status blocked">Blocked</span>
-                    {% elif not member.is_verified %}
-                        <span class="status unverified">Unverified</span>
-                    {% else %}
-                        <span class="status active">Active</span>
-                    {% endif %}
-                </div>
-                {% endfor %}
+            
+            <div class="modal-actions">
+                <button type="submit" class="btn btn-md btn-primary">Save Configuration</button>
+                <button type="button" class="btn btn-md btn-secondary" id="cancel-config">Cancel</button>
             </div>
-            {% else %}
-            <p>No team members assigned yet.</p>
-            {% endif %}
-        </div>
-        {% else %}
-        <div class="no-team">
-            <p>You are not assigned to any team. Contact your administrator to be assigned to a team.</p>
-        </div>
-        {% endif %}
-    </div>
-    {% endif %}
-
-    <!-- Recent Activity section for all roles -->
-    {% if recent_entries %}
-    <div class="recent-activity">
-        <h2>Recent Time Entries</h2>
-        <div class="entries-table">
-            <table class="time-history">
-                <thead>
-                    <tr>
-                        {% if g.user.role in [Role.ADMIN, Role.TEAM_LEADER, Role.SUPERVISOR] %}
-                        <th>User</th>
-                        {% endif %}
-                        <th>Date</th>
-                        <th>Arrival</th>
-                        <th>Departure</th>
-                        <th>Duration</th>
-                        <th>Status</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for entry in recent_entries %}
-                    <tr>
-                        {% if g.user.role in [Role.ADMIN, Role.TEAM_LEADER, Role.SUPERVISOR] %}
-                        <td>{{ entry.user.username }}</td>
-                        {% endif %}
-                        <td>{{ entry.arrival_time.strftime('%Y-%m-%d') }}</td>
-                        <td>{{ entry.arrival_time.strftime('%H:%M:%S') }}</td>
-                        <td>{{ entry.departure_time.strftime('%H:%M:%S') if entry.departure_time else 'Active' }}</td>
-                        <td>
-                            {% if entry.duration %}
-                                {{ '%d:%02d:%02d'|format(entry.duration//3600, (entry.duration%3600)//60, entry.duration%60) }}
-                            {% else %}
-                                In progress
-                            {% endif %}
-                        </td>
-                        <td>
-                            {% if not entry.departure_time %}
-                                <span class="status active">Active</span>
-                            {% else %}
-                                <span class="status completed">Completed</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        </div>
+        </form>
     </div>
-    {% endif %}
 </div>
 
 <style>
-.stats-section {
+/* Dashboard-specific overrides */
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+    grid-auto-rows: 200px;
+}
+
+.dashboard-grid.customizing {
+    border: 2px dashed #007bff;
+    background: #f8f9fa;
+    min-height: 400px;
+}
+
+/* Widget styles now inherited from common styles.css */
+
+.widget.dragging {
+    opacity: 0.8;
+    transform: rotate(3deg);
+    z-index: 1000;
+}
+
+.widget.small {
+    grid-column: span 2;
+    grid-row: span 1;
+}
+
+.widget.medium {
+    grid-column: span 3;
+    grid-row: span 1;
+}
+
+.widget.large {
+    grid-column: span 4;
+    grid-row: span 2;
+}
+
+.widget.wide {
+    grid-column: span 6;
+    grid-row: span 1;
+}
+
+.widget.extra-large {
+    grid-column: span 6;
+    grid-row: span 2;
+}
+
+.widget.full-width {
+    grid-column: span 12;
+    grid-row: span 1;
+}
+
+/* Widget header and title styles now inherited from common styles.css */
+
+.widget-actions {
+    display: flex;
+    gap: 0.25rem;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.widget:hover .widget-actions {
+    opacity: 1;
+}
+
+.widget-action {
+    background: none;
+    border: none;
+    color: #666;
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+}
+
+.widget-action:hover {
+    background: #f8f9fa;
+    color: #333;
+}
+
+/* Widget content styling now inherited from common styles.css */
+.widget-content {
+    flex: 1;
+    overflow: hidden;
+}
+
+.widget[data-widget-type="break_reminder"] .widget-content {
+    overflow: visible;
+}
+
+.empty-dashboard {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: #666;
+}
+
+.empty-dashboard-content {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.empty-dashboard-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+.empty-dashboard h3 {
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+.empty-dashboard p {
+    margin-bottom: 2rem;
+    color: #666;
+}
+
+.widget-gallery {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.widget-category {
     margin-bottom: 2rem;
 }
 
-.stats-grid {
+.widget-category h4 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1.1rem;
+    border-bottom: 1px solid #e9ecef;
+    padding-bottom: 0.5rem;
+}
+
+.widget-options {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
-    margin: 1rem 0;
 }
 
-.stat-card {
-    background: #f8f9fa;
+.widget-option {
     border: 1px solid #dee2e6;
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    text-align: center;
+    border-radius: 8px;
+    padding: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.widget-option:hover {
+    border-color: #007bff;
+    background: #f8f9fa;
+}
+
+.widget-option.selected {
+    border-color: #007bff;
+    background: #e7f3ff;
 }
 
-.stat-card h3 {
+.widget-preview {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.widget-preview i {
     font-size: 2rem;
-    margin: 0 0 0.5rem 0;
     color: #007bff;
+    width: 3rem;
+    text-align: center;
+}
+
+.widget-info h5 {
+    margin: 0 0 0.25rem 0;
+    color: #333;
 }
 
-.stat-card p {
+.widget-info p {
     margin: 0;
-    color: #6c757d;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+    background: white;
+    margin: 5% auto;
+    padding: 2rem;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 800px;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.close:hover {
+    color: black;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+}
+
+/* Widget content styles */
+.projects-list, .tasks-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+/* Weekly Chart Widget */
+.weekly-chart {
+    display: flex;
+    justify-content: space-around;
+    align-items: end;
+    height: 120px;
+    padding: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.chart-day {
+    text-align: center;
+    position: relative;
+    flex: 1;
+}
+
+.chart-bar {
+    background: linear-gradient(to top, #007bff, #0056b3);
+    margin: 0 auto 0.5rem;
+    width: 20px;
+    border-radius: 2px 2px 0 0;
+    transition: all 0.3s ease;
+}
+
+.chart-label {
+    font-size: 0.7rem;
+    color: #666;
     font-weight: 500;
 }
 
-.team-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
-    margin: 1rem 0;
+.chart-value {
+    font-size: 0.6rem;
+    color: #333;
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 123, 255, 0.1);
+    padding: 0.1rem 0.3rem;
+    border-radius: 2px;
+    white-space: nowrap;
 }
 
-.members-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
+/* Task Priority Widget */
+.priority-task-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
-.member-card {
+.priority-task-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
     background: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 0.5rem;
-    padding: 1rem;
+    border-radius: 4px;
 }
 
-.member-card h4 {
-    margin: 0 0 0.5rem 0;
+.task-priority {
+    padding: 0.1rem 0.4rem;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    min-width: 60px;
+    text-align: center;
+}
+
+.task-priority.high {
+    background: #dc3545;
+    color: white;
+}
+
+.task-priority.medium {
+    background: #fd7e14;
+    color: white;
+}
+
+.task-priority.low {
+    background: #28a745;
+    color: white;
+}
+
+.task-title {
+    flex: 1;
+    font-size: 0.9rem;
     color: #333;
 }
 
-.member-card p {
-    margin: 0.25rem 0;
+
+/* Project Progress Widget */
+.project-progress-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.progress-item {
+    background: #f8f9fa;
+    padding: 0.75rem;
+    border-radius: 4px;
+    border-left: 3px solid #007bff;
+}
+
+.progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.progress-percent {
+    font-weight: 600;
+    color: #007bff;
+}
+
+.progress-bar {
+    height: 8px;
+    background: #e9ecef;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 0.25rem;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #007bff, #0056b3);
+    transition: width 0.5s ease;
+}
+
+.progress-stats {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+/* Productivity Metrics Widget */
+.productivity-metrics {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+    padding: 0.5rem;
+}
+
+.metric-item {
+    text-align: center;
+    padding: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.metric-label {
+    font-size: 0.7rem;
     color: #666;
+    margin-bottom: 0.25rem;
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
+.metric-value {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.metric-value.positive {
+    color: #28a745;
+}
+
+.metric-value.negative {
+    color: #dc3545;
+}
+
+/* Break Reminder Widget */
+.break-reminder-widget {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    text-align: center;
+    height: 100%;
+    overflow: visible;
+}
+
+.break-status {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.break-icon {
+    font-size: 2rem;
+    margin-bottom: 0.25rem;
+}
+
+.break-text {
     font-size: 0.9rem;
+    color: #666;
 }
 
-.status {
-    display: inline-block;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
+.next-break {
+    font-size: 0.85rem;
+    color: #333;
+    background: #f8f9fa;
+    padding: 0.5rem;
+    border-radius: 4px;
+    border-left: 3px solid #007bff;
+}
+
+.break-controls {
+    display: flex;
+    justify-content: center;
+}
+
+.project-item, .task-item {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+    border-left: 3px solid #007bff;
+}
+
+.project-header {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-bottom: 0.25rem;
+}
+
+.project-code {
+    background: #007bff;
+    color: white;
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    font-weight: 600;
+}
+
+.project-name, .task-name {
+    font-weight: 600;
+    color: #333;
+}
+
+.project-desc {
     font-size: 0.8rem;
-    font-weight: 500;
-    text-transform: uppercase;
+    color: #666;
 }
 
-.status.active {
-    background: #d4edda;
-    color: #155724;
+.task-project {
+    font-size: 0.8rem;
+    color: #666;
 }
 
-.status.blocked {
-    background: #f8d7da;
-    color: #721c24;
+.task-status {
+    font-size: 0.7rem;
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    font-weight: 600;
+    text-transform: uppercase;
 }
 
-.status.unverified {
+.task-status.pending {
     background: #fff3cd;
     color: #856404;
 }
 
-.status.completed {
+.task-status.in_progress {
+    background: #d4edda;
+    color: #155724;
+}
+
+.task-status.completed {
     background: #d1ecf1;
     color: #0c5460;
 }
 
-.no-team {
-    background: #fff3cd;
-    border: 1px solid #ffeaa7;
-    border-radius: 0.5rem;
+.widget-loading {
+    text-align: center;
+    color: #666;
+    font-style: italic;
     padding: 1rem;
-    margin: 1rem 0;
 }
 
-.entries-table {
-    overflow-x: auto;
+/* Timer widget styles */
+.current-timer-widget {
+    text-align: center;
+}
+
+.current-time {
+    margin-bottom: 0.5rem;
+}
+
+.time-display {
+    font-size: 1.5rem;
+    font-weight: 700;
+    font-family: 'Courier New', monospace;
+    color: #333;
 }
 
-.recent-activity, .team-section, .quick-actions {
-    margin-top: 2rem;
+.timer-status {
+    margin-bottom: 1rem;
+}
+
+.status-text {
+    font-size: 0.8rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-weight: 500;
+}
+
+.status-text.active {
+    background: #d4edda;
+    color: #155724;
+}
+
+.tracker-controls {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+}
+
+/* Responsive design */
+@media (max-width: 1200px) {
+    .dashboard-grid {
+        grid-template-columns: repeat(8, 1fr);
+    }
+    
+    .widget.wide {
+        grid-column: span 4;
+    }
+    
+    .widget.extra-large {
+        grid-column: span 4;
+    }
+    
+    .widget.full-width {
+        grid-column: span 8;
+    }
+}
+
+@media (max-width: 768px) {
+    .dashboard-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.5rem;
+    }
+    
+    .widget.small {
+        grid-column: span 2;
+    }
+    
+    .widget.medium {
+        grid-column: span 2;
+    }
+    
+    .widget.large {
+        grid-column: span 4;
+        grid-row: span 2;
+    }
+    
+    .widget.wide {
+        grid-column: span 4;
+    }
+    
+    .widget.extra-large {
+        grid-column: span 4;
+        grid-row: span 2;
+    }
+    
+    .widget.full-width {
+        grid-column: span 4;
+    }
+    
+    .dashboard-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+    
+    .dashboard-actions {
+        width: 100%;
+        justify-content: flex-start;
+    }
+}
+
+@media (max-width: 480px) {
+    .dashboard-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .widget.small,
+    .widget.medium,
+    .widget.large,
+    .widget.wide,
+    .widget.extra-large,
+    .widget.full-width {
+        grid-column: span 2;
+    }
 }
 </style>
+
+<script>
+// Dashboard state
+let isCustomizing = false;
+let widgets = [];
+let selectedWidgetType = null;
+
+// Widget size mapping based on content type
+const widgetSizes = {
+    'current_timer': 'medium',
+    'daily_summary': 'medium',
+    'active_projects': 'medium',
+    'assigned_tasks': 'medium',
+    'weekly_chart': 'large',
+    'break_reminder': 'large',
+    'project_progress': 'wide',
+    'task_priority': 'medium',
+    'productivity_metrics': 'medium',
+    'time_distribution': 'wide',
+    'team_activity': 'wide',
+    'recent_activities': 'medium',
+    'work_patterns': 'large',
+    'goal_tracker': 'medium'
+};
+
+// Initialize dashboard
+document.addEventListener('DOMContentLoaded', function() {
+    loadDashboard();
+    setupEventListeners();
+});
+
+function setupEventListeners() {
+    // Customize button
+    document.getElementById('customize-btn').addEventListener('click', toggleCustomizeMode);
+    
+    // Add widget buttons
+    document.getElementById('add-widget-btn').addEventListener('click', showAddWidgetModal);
+    document.getElementById('add-first-widget-btn').addEventListener('click', showAddWidgetModal);
+    
+    // Modal controls
+    document.querySelectorAll('.close').forEach(closeBtn => {
+        closeBtn.addEventListener('click', closeModals);
+    });
+    
+    // Widget type selection
+    document.querySelectorAll('.widget-option').forEach(option => {
+        option.addEventListener('click', selectWidgetType);
+    });
+    
+    // Configuration form
+    document.getElementById('widget-config-form').addEventListener('submit', saveWidgetConfig);
+    document.getElementById('cancel-config').addEventListener('click', closeModals);
+    
+    // Click outside modal to close
+    window.addEventListener('click', function(event) {
+        if (event.target.classList.contains('modal')) {
+            closeModals();
+        }
+    });
+}
+
+function loadDashboard() {
+    console.log('Loading dashboard...');
+    fetch('/api/dashboard')
+        .then(response => {
+            console.log('Dashboard load response status:', response.status);
+            return response.json();
+        })
+        .then(data => {
+            console.log('Dashboard load response data:', data);
+            if (data.success) {
+                widgets = data.widgets;
+                console.log('Loaded widgets:', widgets);
+                renderDashboard();
+            } else {
+                console.error('Failed to load dashboard:', data.error);
+            }
+        })
+        .catch(error => {
+            console.error('Error loading dashboard:', error);
+        });
+}
+
+function renderDashboard() {
+    const grid = document.getElementById('dashboard-grid');
+    const emptyMessage = document.getElementById('empty-dashboard');
+    
+    if (widgets.length === 0) {
+        grid.style.display = 'none';
+        emptyMessage.style.display = 'block';
+        return;
+    }
+    
+    grid.style.display = 'grid';
+    emptyMessage.style.display = 'none';
+    
+    // Clear existing widgets
+    grid.innerHTML = '';
+    
+    // Sort widgets by grid position
+    widgets.sort((a, b) => {
+        if (a.grid_y !== b.grid_y) return a.grid_y - b.grid_y;
+        return a.grid_x - b.grid_x;
+    });
+    
+    // Render each widget
+    widgets.forEach(widget => {
+        const widgetElement = createWidgetElement(widget);
+        grid.appendChild(widgetElement);
+    });
+    
+    // Initialize drag and drop if in customize mode
+    if (isCustomizing) {
+        initializeDragAndDrop();
+    }
+}
+
+function createWidgetElement(widget) {
+    const div = document.createElement('div');
+    // Prioritize predefined size mapping over database value
+    const widgetSize = widgetSizes[widget.type] || 'medium';
+    div.className = `widget ${widgetSize}`;
+    div.dataset.widgetId = widget.id;
+    div.dataset.widgetType = widget.type;
+    
+    div.innerHTML = `
+        <div class="widget-header">
+            <h3 class="widget-title">${widget.title}</h3>
+            <div class="widget-actions">
+                <button class="widget-action" onclick="configureWidget(${widget.id})" title="Configure">
+                    <i class="fas fa-cog"></i>
+                </button>
+                <button class="widget-action" onclick="removeWidget(${widget.id})" title="Remove">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+        <div class="widget-content">
+            ${renderWidgetContent(widget)}
+        </div>
+    `;
+    
+    return div;
+}
+
+function renderWidgetContent(widget) {
+    switch (widget.type) {
+        case 'current_timer':
+            return renderCurrentTimerWidget(widget);
+        case 'daily_summary':
+            return renderDailySummaryWidget(widget);
+        case 'weekly_chart':
+            return renderWeeklyChartWidget(widget);
+        case 'break_reminder':
+            return renderBreakReminderWidget(widget);
+        case 'active_projects':
+            return renderActiveProjectsWidget(widget);
+        case 'project_progress':
+            return renderProjectProgressWidget(widget);
+        case 'assigned_tasks':
+            return renderAssignedTasksWidget(widget);
+        case 'task_priority':
+            return renderTaskPriorityWidget(widget);
+        case 'productivity_metrics':
+            return renderProductivityMetricsWidget(widget);
+        case 'time_distribution':
+            return renderTimeDistributionWidget(widget);
+        default:
+            return '<p>Widget type not supported</p>';
+    }
+}
+
+function renderCurrentTimerWidget(widget) {
+    // Load current timer status
+    loadCurrentTimer(widget.id);
+    
+    return `
+        <div class="current-timer-widget" id="widget-content-${widget.id}">
+            <div class="current-time">
+                <span class="time-display" id="timer-display-${widget.id}">00:00:00</span>
+            </div>
+            <div class="timer-status" id="timer-status-${widget.id}">
+                <span class="status-text">No active timer</span>
+            </div>
+            <div class="tracker-controls">
+                <button class="btn btn-sm btn-success" onclick="startTimerFromWidget()">Start</button>
+                <button class="btn btn-sm btn-danger" onclick="stopTimerFromWidget()">Stop</button>
+            </div>
+        </div>
+    `;
+}
+
+function renderDailySummaryWidget(widget) {
+    // Load widget data
+    loadWidgetData(widget.id);
+    
+    return `
+        <div class="daily-summary-widget" id="widget-content-${widget.id}">
+            <div class="summary-item">
+                <span class="summary-label">Today:</span>
+                <span class="summary-value" id="today-${widget.id}">0h 0m</span>
+            </div>
+            <div class="summary-item">
+                <span class="summary-label">This Week:</span>
+                <span class="summary-value" id="week-${widget.id}">0h 0m</span>
+            </div>
+            <div class="summary-item">
+                <span class="summary-label">This Month:</span>
+                <span class="summary-value" id="month-${widget.id}">0h 0m</span>
+            </div>
+        </div>
+    `;
+}
+
+function renderActiveProjectsWidget(widget) {
+    // Load widget data
+    loadWidgetData(widget.id);
+    
+    return `
+        <div class="active-projects-widget" id="widget-content-${widget.id}">
+            <div class="widget-loading">Loading projects...</div>
+        </div>
+    `;
+}
+
+function renderAssignedTasksWidget(widget) {
+    // Load widget data
+    loadWidgetData(widget.id);
+    
+    return `
+        <div class="assigned-tasks-widget" id="widget-content-${widget.id}">
+            <div class="widget-loading">Loading tasks...</div>
+        </div>
+    `;
+}
+
+function renderWeeklyChartWidget(widget) {
+    loadWidgetData(widget.id);
+    return `
+        <div class="weekly-chart-widget" id="widget-content-${widget.id}">
+            <div class="widget-loading">Loading weekly chart...</div>
+        </div>
+    `;
+}
+
+function renderBreakReminderWidget(widget) {
+    // Calculate next break time based on current timer after DOM is ready
+    setTimeout(() => updateBreakTimer(widget.id), 100);
+    
+    return `
+        <div class="break-reminder-widget" id="widget-content-${widget.id}">
+            <div class="break-status">
+                <div class="break-icon">☕</div>
+                <div class="break-text">Take a break every 2 hours</div>
+                <div class="next-break">Next break in: <span id="break-timer-${widget.id}">Loading...</span></div>
+            </div>
+            <div class="break-controls">
+                <button class="btn btn-sm btn-info" onclick="takeBreakNow()">Take Break Now</button>
+            </div>
+        </div>
+    `;
+}
+
+function renderProjectProgressWidget(widget) {
+    loadWidgetData(widget.id);
+    return `
+        <div class="project-progress-widget" id="widget-content-${widget.id}">
+            <div class="widget-loading">Loading project progress...</div>
+        </div>
+    `;
+}
+
+function renderTaskPriorityWidget(widget) {
+    loadWidgetData(widget.id);
+    return `
+        <div class="task-priority-widget" id="widget-content-${widget.id}">
+            <div class="widget-loading">Loading priority tasks...</div>
+        </div>
+    `;
+}
+
+
+function renderProductivityMetricsWidget(widget) {
+    loadWidgetData(widget.id);
+    return `
+        <div class="productivity-metrics-widget" id="widget-content-${widget.id}">
+            <div class="widget-loading">Loading analytics...</div>
+        </div>
+    `;
+}
+
+function renderTimeDistributionWidget(widget) {
+    loadWidgetData(widget.id);
+    return `
+        <div class="time-distribution-widget" id="widget-content-${widget.id}">
+            <div class="widget-loading">Loading time distribution...</div>
+        </div>
+    `;
+}
+
+function toggleCustomizeMode() {
+    isCustomizing = !isCustomizing;
+    const grid = document.getElementById('dashboard-grid');
+    const customizeBtn = document.getElementById('customize-btn');
+    
+    if (isCustomizing) {
+        grid.classList.add('customizing');
+        customizeBtn.textContent = 'Done';
+        customizeBtn.className = 'btn btn-md btn-warning';
+        initializeDragAndDrop();
+    } else {
+        grid.classList.remove('customizing');
+        customizeBtn.innerHTML = '<i class="fas fa-edit"></i> Customize';
+        customizeBtn.className = 'btn btn-md btn-primary';
+        destroyDragAndDrop();
+    }
+}
+
+function initializeDragAndDrop() {
+    // Initialize SortableJS for drag and drop
+    const grid = document.getElementById('dashboard-grid');
+    if (window.Sortable) {
+        new Sortable(grid, {
+            animation: 150,
+            ghostClass: 'dragging',
+            onEnd: function(evt) {
+                updateWidgetPositions();
+            }
+        });
+    }
+}
+
+function destroyDragAndDrop() {
+    // Remove sortable functionality
+    const grid = document.getElementById('dashboard-grid');
+    if (grid.sortable) {
+        grid.sortable.destroy();
+    }
+}
+
+function updateWidgetPositions() {
+    const widgetElements = document.querySelectorAll('.widget');
+    const positions = Array.from(widgetElements).map((element, index) => ({
+        id: parseInt(element.dataset.widgetId),
+        position: index,
+        grid_y: index  // Simple linear positioning for now
+    }));
+    
+    fetch('/api/dashboard/positions', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({positions})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (!data.success) {
+            console.error('Failed to update positions:', data.error);
+        }
+    })
+    .catch(error => {
+        console.error('Error updating positions:', error);
+    });
+}
+
+function showAddWidgetModal() {
+    document.getElementById('add-widget-modal').style.display = 'block';
+}
+
+function selectWidgetType(event) {
+    console.log('Widget type selected:', event.currentTarget.dataset.type);
+    
+    // Remove previous selection
+    document.querySelectorAll('.widget-option').forEach(option => {
+        option.classList.remove('selected');
+    });
+    
+    // Select current option
+    event.currentTarget.classList.add('selected');
+    selectedWidgetType = event.currentTarget.dataset.type;
+    
+    console.log('Selected widget type:', selectedWidgetType);
+    
+    // Close add widget modal and show configuration modal
+    setTimeout(() => {
+        document.getElementById('add-widget-modal').style.display = 'none';
+        showConfigurationModal();
+    }, 200);
+}
+
+function showConfigurationModal() {
+    console.log('Showing configuration modal for:', selectedWidgetType);
+    
+    if (!selectedWidgetType) {
+        console.error('No widget type selected');
+        return;
+    }
+    
+    // Reset form
+    document.getElementById('widget-config-form').reset();
+    document.getElementById('widget-id').value = '';
+    
+    // Set default title based on widget type
+    const titles = {
+        'current_timer': 'Current Timer',
+        'daily_summary': 'Daily Summary',
+        'weekly_chart': 'Weekly Chart',
+        'break_reminder': 'Break Reminder',
+        'active_projects': 'Active Projects',
+        'project_progress': 'Project Progress',
+        'assigned_tasks': 'Assigned Tasks',
+        'task_priority': 'Task Priority',
+        'productivity_metrics': 'Productivity Metrics',
+        'time_distribution': 'Time Distribution'
+    };
+    
+    document.getElementById('widget-title').value = titles[selectedWidgetType] || 'New Widget';
+    
+    // Load widget-specific configuration
+    loadWidgetSpecificConfig(selectedWidgetType);
+    
+    document.getElementById('widget-config-modal').style.display = 'block';
+    console.log('Configuration modal displayed');
+}
+
+function loadWidgetSpecificConfig(widgetType) {
+    const configContainer = document.getElementById('widget-specific-config');
+    configContainer.innerHTML = '';
+    
+    // Add widget-specific configuration fields based on type
+    switch (widgetType) {
+        case 'TIME_SUMMARY':
+            configContainer.innerHTML = `
+                <div class="form-group">
+                    <label for="summary-period">Summary Period</label>
+                    <select id="summary-period" name="summary_period">
+                        <option value="daily">Daily</option>
+                        <option value="weekly">Weekly</option>
+                        <option value="monthly">Monthly</option>
+                    </select>
+                </div>
+            `;
+            break;
+        case 'PROJECT_LIST':
+            configContainer.innerHTML = `
+                <div class="form-group">
+                    <label for="project-filter">Project Filter</label>
+                    <select id="project-filter" name="project_filter">
+                        <option value="all">All Projects</option>
+                        <option value="active">Active Projects Only</option>
+                        <option value="recent">Recently Used</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="max-projects">Maximum Projects to Show</label>
+                    <input type="number" id="max-projects" name="max_projects" value="5" min="1" max="20">
+                </div>
+            `;
+            break;
+        case 'TASK_LIST':
+            configContainer.innerHTML = `
+                <div class="form-group">
+                    <label for="task-filter">Task Filter</label>
+                    <select id="task-filter" name="task_filter">
+                        <option value="assigned">Assigned to Me</option>
+                        <option value="created">Created by Me</option>
+                        <option value="all">All Tasks</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="task-status">Task Status</label>
+                    <select id="task-status" name="task_status">
+                        <option value="active">Active Tasks</option>
+                        <option value="pending">Pending Tasks</option>
+                        <option value="completed">Completed Tasks</option>
+                        <option value="all">All Statuses</option>
+                    </select>
+                </div>
+            `;
+            break;
+    }
+}
+
+function saveWidgetConfig(event) {
+    event.preventDefault();
+    
+    const formData = new FormData(event.target);
+    const config = {};
+    
+    // Get all form data
+    for (let [key, value] of formData.entries()) {
+        config[key] = value;
+    }
+    
+    // Add widget type
+    config.type = selectedWidgetType;
+    
+    // If editing existing widget
+    const widgetId = document.getElementById('widget-id').value;
+    if (widgetId) {
+        config.widget_id = widgetId;
+    }
+    
+    console.log('Saving widget config:', config);
+    
+    // Save widget
+    fetch('/api/dashboard/widgets', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(config)
+    })
+    .then(response => {
+        console.log('Widget save response status:', response.status);
+        return response.json();
+    })
+    .then(data => {
+        console.log('Widget save response data:', data);
+        if (data.success) {
+            closeModals();
+            loadDashboard();
+        } else {
+            alert('Failed to save widget: ' + data.error);
+        }
+    })
+    .catch(error => {
+        console.error('Error saving widget:', error);
+        alert('Error saving widget');
+    });
+}
+
+function configureWidget(widgetId) {
+    const widget = widgets.find(w => w.id === widgetId);
+    if (!widget) return;
+    
+    selectedWidgetType = widget.type;
+    
+    // Fill form with existing data
+    document.getElementById('widget-id').value = widget.id;
+    document.getElementById('widget-title').value = widget.title;
+    document.getElementById('widget-size').value = widget.size;
+    
+    // Load widget-specific configuration
+    loadWidgetSpecificConfig(widget.type);
+    
+    // Fill widget-specific fields
+    setTimeout(() => {
+        if (widget.config) {
+            Object.keys(widget.config).forEach(key => {
+                const field = document.querySelector(`[name="${key}"]`);
+                if (field) {
+                    field.value = widget.config[key];
+                }
+            });
+        }
+    }, 100);
+    
+    document.getElementById('widget-config-modal').style.display = 'block';
+}
+
+function removeWidget(widgetId) {
+    if (!confirm('Are you sure you want to remove this widget?')) return;
+    
+    fetch(`/api/dashboard/widgets/${widgetId}`, {
+        method: 'DELETE'
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            loadDashboard();
+        } else {
+            alert('Failed to remove widget: ' + data.error);
+        }
+    })
+    .catch(error => {
+        console.error('Error removing widget:', error);
+        alert('Error removing widget');
+    });
+}
+
+function closeModals() {
+    document.querySelectorAll('.modal').forEach(modal => {
+        modal.style.display = 'none';
+    });
+    selectedWidgetType = null;
+}
+
+// Widget data loading
+function loadWidgetData(widgetId) {
+    fetch(`/api/dashboard/widgets/${widgetId}/data`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                updateWidgetContent(widgetId, data.data);
+            } else {
+                console.error('Failed to load widget data:', data.error);
+            }
+        })
+        .catch(error => {
+            console.error('Error loading widget data:', error);
+        });
+}
+
+function updateWidgetContent(widgetId, data) {
+    const contentElement = document.getElementById(`widget-content-${widgetId}`);
+    if (!contentElement) return;
+    
+    if (data.projects) {
+        // Update active projects widget
+        let projectsHtml = '<div class="projects-list">';
+        data.projects.forEach(project => {
+            projectsHtml += `
+                <div class="project-item">
+                    <div class="project-header">
+                        <span class="project-code">${project.code}</span>
+                        <span class="project-name">${project.name}</span>
+                    </div>
+                    ${project.description ? `<div class="project-desc">${project.description}</div>` : ''}
+                </div>
+            `;
+        });
+        projectsHtml += '</div>';
+        contentElement.innerHTML = projectsHtml;
+    } else if (data.tasks) {
+        // Update tasks widget
+        let tasksHtml = '<div class="tasks-list">';
+        data.tasks.forEach(task => {
+            tasksHtml += `
+                <div class="task-item">
+                    <div class="task-name">${task.name}</div>
+                    <div class="task-project">${task.project_name}</div>
+                    <div class="task-status ${task.status.toLowerCase()}">${task.status}</div>
+                </div>
+            `;
+        });
+        tasksHtml += '</div>';
+        contentElement.innerHTML = tasksHtml;
+    } else if (data.today !== undefined) {
+        // Update daily summary widget
+        const todayElement = document.getElementById(`today-${widgetId}`);
+        const weekElement = document.getElementById(`week-${widgetId}`);
+        const monthElement = document.getElementById(`month-${widgetId}`);
+        
+        if (todayElement) todayElement.textContent = data.today || '0h 0m';
+        if (weekElement) weekElement.textContent = data.week || '0h 0m';
+        if (monthElement) monthElement.textContent = data.month || '0h 0m';
+    } else if (data.weekly_data) {
+        // Update weekly chart widget
+        updateWeeklyChart(widgetId, data.weekly_data);
+    } else if (data.priority_tasks) {
+        // Update task priority widget
+        updateTaskPriorityWidget(widgetId, data.priority_tasks);
+    } else if (data.project_progress) {
+        // Update project progress widget
+        updateProjectProgressWidget(widgetId, data.project_progress);
+    } else if (data.this_week_hours !== undefined) {
+        // Update productivity metrics widget
+        updateProductivityMetricsWidget(widgetId, data);
+    }
+    
+    // Adjust widget size based on content after updating
+    setTimeout(() => adjustWidgetSize(widgetId), 100);
+}
+
+// Current timer functions
+let timerIntervals = {}; // Store timer intervals for each widget
+let globalTimerState = null; // Store global timer state to avoid repeated API calls
+
+function loadCurrentTimer(widgetId) {
+    // If we already have timer state, use it
+    if (globalTimerState !== null) {
+        updateTimerDisplay(widgetId, globalTimerState);
+        if (globalTimerState.isActive) {
+            startTimerInterval(widgetId, globalTimerState.startTime);
+        }
+        return;
+    }
+    
+    // Otherwise, fetch it once and cache it
+    fetch('/api/current-timer-status')
+        .then(response => response.json())
+        .then(data => {
+            globalTimerState = data; // Cache the state
+            if (data.success) {
+                updateTimerDisplay(widgetId, data);
+                if (data.isActive) {
+                    startTimerInterval(widgetId, data.startTime);
+                }
+            } else {
+                console.log('No active timer or error:', data.message);
+            }
+        })
+        .catch(error => {
+            console.error('Error loading timer status:', error);
+        });
+}
+
+function updateTimerDisplay(widgetId, timerData) {
+    const displayElement = document.getElementById(`timer-display-${widgetId}`);
+    const statusElement = document.getElementById(`timer-status-${widgetId}`);
+    
+    if (timerData.isActive) {
+        statusElement.innerHTML = `<span class="status-text active">Timer running</span>`;
+        if (timerData.currentDuration) {
+            displayElement.textContent = formatDuration(timerData.currentDuration);
+        }
+    } else {
+        statusElement.innerHTML = `<span class="status-text">No active timer</span>`;
+        displayElement.textContent = '00:00:00';
+    }
+}
+
+function startTimerInterval(widgetId, startTime) {
+    // Clear existing interval if any
+    if (timerIntervals[widgetId]) {
+        clearInterval(timerIntervals[widgetId]);
+    }
+    
+    const startTimeMs = new Date(startTime).getTime();
+    
+    timerIntervals[widgetId] = setInterval(() => {
+        const now = Date.now();
+        const elapsed = Math.floor((now - startTimeMs) / 1000);
+        const displayElement = document.getElementById(`timer-display-${widgetId}`);
+        if (displayElement) {
+            displayElement.textContent = formatDuration(elapsed);
+        }
+    }, 1000);
+}
+
+function formatDuration(seconds) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+
+function startTimerFromWidget() {
+    // Navigate to main timer page to start timer
+    window.location.href = '/';
+}
+
+function stopTimerFromWidget() {
+    // Navigate to main timer page to stop timer
+    window.location.href = '/';
+}
+
+// Function to refresh global timer state (call when timer changes)
+function refreshGlobalTimerState() {
+    globalTimerState = null; // Reset cache
+    // Reload all current timer widgets
+    document.querySelectorAll('[data-widget-type="current_timer"]').forEach(widget => {
+        const widgetId = widget.dataset.widgetId;
+        loadCurrentTimer(widgetId);
+    });
+    // Refresh all break timer widgets
+    document.querySelectorAll('[data-widget-type="break_reminder"]').forEach(widget => {
+        const widgetId = widget.dataset.widgetId;
+        updateBreakTimer(widgetId);
+    });
+}
+
+// Cleanup function for page unload
+window.addEventListener('beforeunload', function() {
+    // Clear all timer intervals
+    Object.values(timerIntervals).forEach(interval => clearInterval(interval));
+    Object.values(breakTimerIntervals).forEach(interval => clearInterval(interval));
+});
+
+// Widget-specific update functions
+function updateWeeklyChart(widgetId, weeklyData) {
+    const contentElement = document.getElementById(`widget-content-${widgetId}`);
+    if (!contentElement) return;
+    
+    let chartHtml = '<div class="weekly-chart">';
+    weeklyData.forEach(day => {
+        const barHeight = Math.min(day.hours * 10, 100); // Scale for display
+        chartHtml += `
+            <div class="chart-day">
+                <div class="chart-bar" style="height: ${barHeight}%"></div>
+                <div class="chart-hours">${day.hours}h</div>
+                <div class="chart-label">${day.day.substring(0, 3)}</div>
+            </div>
+        `;
+    });
+    chartHtml += '</div>';
+    contentElement.innerHTML = chartHtml;
+}
+
+function updateTaskPriorityWidget(widgetId, priorityTasks) {
+    const contentElement = document.getElementById(`widget-content-${widgetId}`);
+    if (!contentElement) return;
+    
+    let tasksHtml = '<div class="priority-tasks-list">';
+    priorityTasks.forEach(task => {
+        const priorityClass = task.priority.toLowerCase();
+        tasksHtml += `
+            <div class="priority-task-item">
+                <div class="task-priority ${priorityClass}">${task.priority}</div>
+                <div class="task-details">
+                    <div class="task-name">${task.name}</div>
+                    <div class="task-project">${task.project_name}</div>
+                </div>
+                <div class="task-status ${task.status.toLowerCase()}">${task.status}</div>
+            </div>
+        `;
+    });
+    tasksHtml += '</div>';
+    contentElement.innerHTML = tasksHtml;
+}
+
+
+function updateProjectProgressWidget(widgetId, projectProgress) {
+    const contentElement = document.getElementById(`widget-content-${widgetId}`);
+    if (!contentElement) return;
+    
+    let progressHtml = '<div class="project-progress-list">';
+    projectProgress.forEach(project => {
+        progressHtml += `
+            <div class="progress-item">
+                <div class="progress-header">
+                    <span class="project-code">${project.code}</span>
+                    <span class="project-name">${project.name}</span>
+                    <span class="progress-percent">${project.progress}%</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: ${project.progress}%"></div>
+                </div>
+                <div class="progress-stats">${project.completed_tasks}/${project.total_tasks} tasks</div>
+            </div>
+        `;
+    });
+    progressHtml += '</div>';
+    contentElement.innerHTML = progressHtml;
+}
+
+function updateProductivityMetricsWidget(widgetId, data) {
+    const contentElement = document.getElementById(`widget-content-${widgetId}`);
+    if (!contentElement) return;
+    
+    const changeClass = data.productivity_change >= 0 ? 'positive' : 'negative';
+    const changeIcon = data.productivity_change >= 0 ? '↗' : '↘';
+    
+    const metricsHtml = `
+        <div class="productivity-metrics">
+            <div class="metric-item">
+                <div class="metric-label">This Week</div>
+                <div class="metric-value">${data.this_week_hours}h</div>
+            </div>
+            <div class="metric-item">
+                <div class="metric-label">Last Week</div>
+                <div class="metric-value">${data.last_week_hours}h</div>
+            </div>
+            <div class="metric-item">
+                <div class="metric-label">Change</div>
+                <div class="metric-value ${changeClass}">${changeIcon} ${Math.abs(data.productivity_change)}%</div>
+            </div>
+            <div class="metric-item">
+                <div class="metric-label">Daily Avg</div>
+                <div class="metric-value">${data.avg_daily_hours}h</div>
+            </div>
+        </div>
+    `;
+    contentElement.innerHTML = metricsHtml;
+}
+
+// Break reminder functions
+function takeBreakNow() {
+    alert('Break time! Take a few minutes to rest.');
+}
+
+// Store break timer intervals
+let breakTimerIntervals = {};
+
+function updateBreakTimer(widgetId) {
+    // Clear any existing interval
+    if (breakTimerIntervals[widgetId]) {
+        clearInterval(breakTimerIntervals[widgetId]);
+    }
+    
+    // If we don't have global timer state, try to load it
+    if (globalTimerState === null) {
+        loadCurrentTimer(widgetId);
+        // Retry after a short delay
+        setTimeout(() => updateBreakTimer(widgetId), 100);
+        return;
+    }
+    
+    // Start local break timer calculation
+    function updateBreakDisplay() {
+        const timerElement = document.getElementById(`break-timer-${widgetId}`);
+        if (!timerElement) return;
+        
+        if (globalTimerState.success && globalTimerState.isActive) {
+            // Calculate time since start using local time
+            const startTime = new Date(globalTimerState.startTime);
+            const now = new Date();
+            const elapsedMinutes = Math.floor((now - startTime) / 60000);
+            
+            // Break every 2 hours (120 minutes)
+            const breakInterval = 120;
+            const minutesUntilBreak = breakInterval - (elapsedMinutes % breakInterval);
+            
+            if (minutesUntilBreak <= 0) {
+                timerElement.textContent = 'Break time!';
+                timerElement.style.color = '#dc3545';
+            } else {
+                const hours = Math.floor(minutesUntilBreak / 60);
+                const minutes = minutesUntilBreak % 60;
+                timerElement.textContent = `${hours}:${minutes.toString().padStart(2, '0')}`;
+                timerElement.style.color = '#333';
+            }
+        } else {
+            timerElement.textContent = 'Timer not active';
+            timerElement.style.color = '#666';
+        }
+    }
+    
+    // Initial update
+    updateBreakDisplay();
+    
+    // Update every second using setInterval
+    breakTimerIntervals[widgetId] = setInterval(updateBreakDisplay, 1000);
+}
+
+function adjustWidgetSize(widgetId) {
+    const widgetElement = document.querySelector(`[data-widget-id="${widgetId}"]`);
+    if (!widgetElement) return;
+    
+    const contentElement = widgetElement.querySelector('.widget-content');
+    if (!contentElement) return;
+    
+    // Get content height
+    const contentHeight = contentElement.scrollHeight;
+    const containerHeight = contentElement.clientHeight;
+    
+    // If content overflows, increase widget size
+    if (contentHeight > containerHeight + 20) {
+        const currentClasses = widgetElement.className.split(' ');
+        const sizeClass = currentClasses.find(c => ['small', 'medium', 'large', 'wide', 'extra-large', 'full-width'].includes(c));
+        
+        if (sizeClass) {
+            widgetElement.classList.remove(sizeClass);
+            // Upgrade to next size
+            if (sizeClass === 'small') widgetElement.classList.add('medium');
+            else if (sizeClass === 'medium') widgetElement.classList.add('large');
+            else if (sizeClass === 'large') widgetElement.classList.add('extra-large');
+            else if (sizeClass === 'wide') widgetElement.classList.add('full-width');
+        }
+    }
+    
+    // Check if content width overflows
+    const contentWidth = contentElement.scrollWidth;
+    const containerWidth = contentElement.clientWidth;
+    
+    if (contentWidth > containerWidth + 20) {
+        const currentClasses = widgetElement.className.split(' ');
+        const sizeClass = currentClasses.find(c => ['small', 'medium', 'large', 'wide', 'extra-large', 'full-width'].includes(c));
+        
+        if (sizeClass) {
+            widgetElement.classList.remove(sizeClass);
+            // Upgrade to wider size
+            if (sizeClass === 'small' || sizeClass === 'medium') widgetElement.classList.add('wide');
+            else if (sizeClass === 'large') widgetElement.classList.add('extra-large');
+            else if (sizeClass === 'wide') widgetElement.classList.add('full-width');
+        }
+    }
+}
+</script>
+
+<!-- Include SortableJS for drag and drop -->
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+<!-- Include Font Awesome for icons -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
 {% endblock %}
\ No newline at end of file
diff --git a/templates/edit_project.html b/templates/edit_project.html
index 58636a3..c81ac68 100644
--- a/templates/edit_project.html
+++ b/templates/edit_project.html
@@ -41,6 +41,21 @@ <h2>Edit Project: {{ project.name }}</h2>
                 </select>
             </div>
             
+            <div class="form-group">
+                <label for="category_id">Project Category</label>
+                <select id="category_id" name="category_id">
+                    <option value="">No Category</option>
+                    {% for category in categories %}
+                    <option value="{{ category.id }}" 
+                            {% if (request.form.category_id and request.form.category_id|int == category.id) or (not request.form.category_id and project.category_id == category.id) %}selected{% endif %}>
+                        {{ category.icon or '📁' }} {{ category.name }}
+                    </option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+        
+        <div class="form-row">
             <div class="form-group">
                 <label class="checkbox-label">
                     <input type="checkbox" name="is_active" 
@@ -174,15 +189,7 @@ <h2>Edit Project: {{ project.name }}</h2>
     margin-top: 2rem;
 }
 
-.btn-secondary {
-    background-color: #6c757d;
-    border-color: #6c757d;
-}
-
-.btn-secondary:hover {
-    background-color: #5a6268;
-    border-color: #545b62;
-}
+/* Button styles now centralized in main style.css */
 
 #code {
     text-transform: uppercase;
diff --git a/templates/imprint.html b/templates/imprint.html
new file mode 100644
index 0000000..0bfb2b8
--- /dev/null
+++ b/templates/imprint.html
@@ -0,0 +1,99 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="container">
+    <div class="imprint-page">
+        <h1>{{ title }}</h1>
+        
+        <div class="imprint-content">
+            {{ content|safe }}
+        </div>
+        
+        <div class="imprint-footer">
+            <a href="{{ url_for('home') }}" class="btn btn-secondary">← Back to Home</a>
+        </div>
+    </div>
+</div>
+
+<style>
+.imprint-page {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.imprint-page h1 {
+    margin-bottom: 2rem;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+    padding-bottom: 1rem;
+}
+
+.imprint-content {
+    margin-bottom: 3rem;
+    line-height: 1.8;
+    color: #555;
+}
+
+.imprint-content h2 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+.imprint-content h3 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    color: #444;
+}
+
+.imprint-content p {
+    margin-bottom: 1rem;
+}
+
+.imprint-content a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+.imprint-content a:hover {
+    text-decoration: underline;
+}
+
+.imprint-content ul,
+.imprint-content ol {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+}
+
+.imprint-content li {
+    margin-bottom: 0.5rem;
+}
+
+.imprint-content strong {
+    font-weight: 600;
+    color: #333;
+}
+
+.imprint-footer {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 1px solid #e0e0e0;
+    text-align: center;
+}
+
+@media (max-width: 768px) {
+    .imprint-page {
+        padding: 1rem;
+        margin: 1rem;
+    }
+    
+    .imprint-page h1 {
+        font-size: 1.5rem;
+    }
+}
+</style>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 478b8cb..85f1d1e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,14 +1,147 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="hero">
-    <h1>Welcome to TimeTrack</h1>
-    <p>Track your work hours easily and efficiently</p>
-</div>
-
 {% if not g.user %}
 
-Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('register') }}">register</a> to access your dashboard.
+<!-- Decadent Splash Page -->
+<div class="splash-container">
+    <!-- Hero Section -->
+    <section class="splash-hero">
+        <div class="hero-content">
+            <h1 class="hero-title">Transform Your Productivity</h1>
+            <p class="hero-subtitle">Experience the future of time management with {{ g.branding.app_name if g.branding else 'TimeTrack' }}'s intelligent tracking system</p>
+            <div class="cta-buttons">
+                <a href="{{ url_for('register') }}" class="btn-primary">Get Started Free</a>
+                <a href="{{ url_for('login') }}" class="btn-secondary">Sign In</a>
+            </div>
+        </div>
+        <div class="hero-visual">
+            <div class="floating-clock">
+                <div class="clock-face">
+                    <div class="hour-hand"></div>
+                    <div class="minute-hand"></div>
+                    <div class="second-hand"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Grid -->
+    <section class="features-grid">
+        <h2 class="section-title">Powerful Features for Modern Teams</h2>
+        <div class="feature-cards">
+            <div class="feature-card">
+                <div class="feature-icon">⚡</div>
+                <h3>Lightning Fast</h3>
+                <p>Start tracking in seconds with our intuitive one-click interface</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">📊</div>
+                <h3>Advanced Analytics</h3>
+                <p>Gain insights with comprehensive reports and visual dashboards</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🏃‍♂️</div>
+                <h3>Sprint Management</h3>
+                <p>Organize work into sprints with agile project tracking</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">👥</div>
+                <h3>Team Collaboration</h3>
+                <p>Manage teams, projects, and resources all in one place</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🔒</div>
+                <h3>Enterprise Security</h3>
+                <p>Bank-level encryption with role-based access control</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🌐</div>
+                <h3>Multi-Company Support</h3>
+                <p>Perfect for agencies managing multiple client accounts</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Why Choose Section -->
+    <section class="statistics">
+        <h2 class="section-title">Why Choose {{ g.branding.app_name if g.branding else 'TimeTrack' }}?</h2>
+        <div class="stat-item">
+            <div class="stat-number">100%</div>
+            <div class="stat-label">Free & Open Source</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">∞</div>
+            <div class="stat-label">Unlimited Tracking</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">0</div>
+            <div class="stat-label">Hidden Fees</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">24/7</div>
+            <div class="stat-label">Always Available</div>
+        </div>
+    </section>
+
+    <!-- Getting Started Section -->
+    <section class="testimonials">
+        <h2 class="section-title">Get Started in Minutes</h2>
+        <div class="testimonial-grid">
+            <div class="testimonial-card">
+                <div class="feature-icon">1️⃣</div>
+                <h3>Sign Up</h3>
+                <p>Create your free account in seconds. No credit card required.</p>
+            </div>
+            <div class="testimonial-card">
+                <div class="feature-icon">2️⃣</div>
+                <h3>Set Up Your Workspace</h3>
+                <p>Add your company, teams, and projects to organize your time tracking.</p>
+            </div>
+            <div class="testimonial-card">
+                <div class="feature-icon">3️⃣</div>
+                <h3>Start Tracking</h3>
+                <p>Click "Arrive" to start tracking, "Leave" when done. It's that simple!</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Open Source Section -->
+    <section class="pricing">
+        <h2 class="section-title">Forever Free, Forever Open</h2>
+        <div class="pricing-cards">
+            <div class="pricing-card featured">
+                <div class="badge">100% Free</div>
+                <h3>{{ g.branding.app_name if g.branding else 'TimeTrack' }} Community</h3>
+                <div class="price">$0<span>/forever</span></div>
+                <ul class="pricing-features">
+                    <li>✓ Unlimited users</li>
+                    <li>✓ All features included</li>
+                    <li>✓ Time tracking & analytics</li>
+                    <li>✓ Sprint management</li>
+                    <li>✓ Team collaboration</li>
+                    <li>✓ Project management</li>
+                    <li>✓ Self-hosted option</li>
+                    <li>✓ No restrictions</li>
+                </ul>
+                <a href="{{ url_for('register') }}" class="btn-pricing">Get Started Free</a>
+            </div>
+        </div>
+        <p style="text-align: center; margin-top: 2rem; color: #666;">
+            The software {{ g.branding.app_name if g.branding else 'TimeTrack' }} runs is open source software.<br />
+            Host it yourself or use our free hosted version.<br />
+            The source is available on GitHub:
+            <a href="https://github.com/nullmedium/TimeTrack" target="_blank">https://github.com/nullmedium/TimeTrack</a>
+        </p>
+    </section>
+
+    <!-- Final CTA -->
+    <section class="final-cta">
+        <h2>Ready to Take Control of Your Time?</h2>
+        <p>Start tracking your time effectively today - no strings attached</p>
+        <a href="{{ url_for('register') }}" class="btn-primary large">Create Free Account</a>
+    </section>
+</div>
 
 {% else %}
 
@@ -115,27 +248,6 @@ <h3>Time Entry History</h3>
     </div>
 </div>
 
-{% endif %}
-
-<div class="features">
-    <div class="feature">
-        <h3>Easy Time Tracking</h3>
-        <p>Simply click "Arrive" when you start working and "Leave" when you're done.</p>
-    </div>
-    <div class="feature">
-        <h3>Break Management</h3>
-        <p>Use the Pause button when taking breaks. Your break time is tracked separately.</p>
-    </div>
-    <div class="feature">
-        <h3>Detailed History</h3>
-        <p>View your complete work history with precise timestamps and durations.</p>
-    </div>
-    <div class="feature">
-        <h3>Simple Interface</h3>
-        <p>No complicated setup or configuration needed. Start tracking right away!</p>
-    </div>
-</div>
-
 <!-- Edit Entry Modal -->
 <div id="edit-modal" class="modal">
     <div class="modal-content">
@@ -578,4 +690,6 @@ <h3>Add Manual Time Entry</h3>
 }
 </style>
 
+{% endif %}
+
 {% endblock %}
\ No newline at end of file
diff --git a/templates/layout.html b/templates/layout.html
index 6cd3925..54da97b 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -3,17 +3,69 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title }} - TimeTrack{% if g.company %} - {{ g.company.name }}{% endif %}</title>
+    <title>{{ title }} - {{ g.branding.app_name if g.branding else 'TimeTrack' }}{% if g.company %} - {{ g.company.name }}{% endif %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    {% if not g.user %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/splash.css') }}">
+    {% endif %}
+    {% if g.branding and g.branding.favicon_filename %}
+        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='uploads/branding/' + g.branding.favicon_filename) }}">
+    {% endif %}
+    <style>
+        :root {
+            --primary-color: {{ g.branding.primary_color if g.branding else '#007bff' }};
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        .btn-primary:hover {
+            background-color: {{ (g.branding.primary_color if g.branding else '#007bff') + 'dd' }};
+            border-color: {{ (g.branding.primary_color if g.branding else '#007bff') + 'dd' }};
+        }
+        .nav-icon {
+            color: var(--primary-color);
+        }
+        a:hover {
+            color: var(--primary-color);
+        }
+        .mobile-logo {
+            max-height: 30px;
+            max-width: 150px;
+            object-fit: contain;
+        }
+        .sidebar-logo {
+            max-height: 32px;
+            max-width: 160px;
+            object-fit: contain;
+        }
+        .mobile-nav-brand a {
+            display: flex;
+            align-items: center;
+        }
+        .sidebar-header h2 a {
+            display: flex;
+            align-items: center;
+            color: inherit;
+            text-decoration: none;
+        }
+    </style>
 </head>
-<body>
+<body{% if g.user %} class="has-user"{% endif %}>
     <!-- Mobile header -->
+    {% if g.user %}
     <header class="mobile-header">
         <div class="mobile-nav-brand">
-            <a href="{{ url_for('home') }}">TimeTrack</a>
-            {% if g.company %}
-                <small class="company-name">{{ g.company.name }}</small>
-            {% endif %}
+            <a href="{{ url_for('home') }}">
+                {% if g.branding and g.branding.logo_filename %}
+                    <img src="{{ url_for('static', filename='uploads/branding/' + g.branding.logo_filename) }}" 
+                         alt="{{ g.branding.logo_alt_text }}" 
+                         class="mobile-logo">
+                {% else %}
+                    {{ g.branding.app_name if g.branding else 'TimeTrack' }}
+                {% endif %}
+            </a>
         </div>
         <button class="mobile-nav-toggle" id="mobile-nav-toggle">
             <span></span>
@@ -21,33 +73,70 @@
             <span></span>
         </button>
     </header>
+    {% endif %}
 
     <!-- Sidebar navigation -->
+    {% if g.user %}
     <aside class="sidebar" id="sidebar">
         <div class="sidebar-header">
-            <h2><a href="{{ url_for('home') }}">TimeTrack</a></h2>
-            {% if g.company %}
-                <div class="company-info">
-                    <small class="text-muted">{{ g.company.name }}</small>
-                </div>
-            {% endif %}
+            <!-- <h2>
+                <a href="{{ url_for('home') }}">
+                    {% if g.branding and g.branding.logo_filename %}
+                        <img src="{{ url_for('static', filename='uploads/branding/' + g.branding.logo_filename) }}" 
+                             alt="{{ g.branding.logo_alt_text }}" 
+                             class="sidebar-logo">
+                    {% else %}
+                        {{ g.branding.app_name if g.branding else 'TimeTrack' }}
+                    {% endif %}
+                </a>
+            -->
+            </h2>
             <button class="sidebar-toggle" id="sidebar-toggle">
                 <span></span>
                 <span></span>
                 <span></span>
             </button>
+            {% if g.user %}
+            <!-- User Account Menu -->
+            <a href="#" class="user-dropdown-toggle" id="user-dropdown-toggle" data-tooltip="{{ g.user.username }}">
+            <img src="{{ g.user.get_avatar_url(32) }}" alt="{{ g.user.username }}" class="user-avatar">
+            <span class="nav-text">{{ g.user.username }}<span class="dropdown-arrow">▼</span></span>
+            </a>
+            
+            <!-- User Dropdown Context Menu -->
+            <div class="user-dropdown-modal" id="user-dropdown-modal">
+                <div class="user-dropdown-header">
+                    <img src="{{ g.user.get_avatar_url(64) }}" alt="{{ g.user.username }}" class="user-avatar-large">
+                    <h3>{{ g.user.username }}</h3>
+                    <div class="user-info">
+                        {% if g.user.email %}
+                            {{ g.user.email }}
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="user-dropdown-menu">
+                    <ul>
+                        <li><a href="{{ url_for('profile') }}"><i class="nav-icon">👤</i>Profile</a></li>
+                        <li><a href="{{ url_for('config') }}"><i class="nav-icon">⚙️</i>Settings</a></li>
+                        <li class="user-dropdown-divider"></li>
+                        <li><a href="{{ url_for('logout') }}"><i class="nav-icon">🚪</i>Logout</a></li>
+                    </ul>
+                </div>
+            </div>
+            {% endif %}
         </div>
         <nav class="sidebar-nav">
             <ul>
                 {% if g.user %}
                     <li><a href="{{ url_for('home') }}" data-tooltip="Home"><i class="nav-icon">🏠</i><span class="nav-text">Home</span></a></li>
+                    <li><a href="{{ url_for('dashboard') }}" data-tooltip="Dashboard"><i class="nav-icon">📊</i><span class="nav-text">Dashboard</span></a></li>
+                    <li><a href="{{ url_for('unified_task_management') }}" data-tooltip="Task Management"><i class="nav-icon">📋</i><span class="nav-text">Task Management</span></a></li>
+                    <li><a href="{{ url_for('sprint_management') }}" data-tooltip="Sprint Management"><i class="nav-icon">🏃‍♂️</i><span class="nav-text">Sprints</span></a></li>
                     <li><a href="{{ url_for('analytics') }}" data-tooltip="Time Analytics"><i class="nav-icon">📊</i><span class="nav-text">Analytics</span></a></li>
                     
                     <!-- Role-based menu items -->
                     {% if g.user.role == Role.ADMIN or g.user.role == Role.SYSTEM_ADMIN %}
                     <li class="nav-divider">Admin</li>
-                    <li><a href="{{ url_for('profile') }}" data-tooltip="Profile"><i class="nav-icon">👤</i><span class="nav-text">Profile</span></a></li>
-                    <li><a href="{{ url_for('config') }}" data-tooltip="Config"><i class="nav-icon">⚙️</i><span class="nav-text">Config</span></a></li>
                     <li><a href="{{ url_for('dashboard') }}" data-tooltip="Dashboard"><i class="nav-icon">📈</i><span class="nav-text">Dashboard</span></a></li>
                     <li><a href="{{ url_for('admin_company') }}" data-tooltip="Company"><i class="nav-icon">🏢</i><span class="nav-text">Company</span></a></li>
                     <li><a href="{{ url_for('admin_users') }}" data-tooltip="Manage Users"><i class="nav-icon">👥</i><span class="nav-text">Manage Users</span></a></li>
@@ -61,21 +150,12 @@ <h2><a href="{{ url_for('home') }}">TimeTrack</a></h2>
                     <li><a href="{{ url_for('system_admin_announcements') }}" data-tooltip="Announcements"><i class="nav-icon">📢</i><span class="nav-text">Announcements</span></a></li>
                     {% endif %}
                     {% elif g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] %}
-                    <li class="nav-divider">{{ g.user.username }}</li>
-                    <li><a href="{{ url_for('profile') }}" data-tooltip="Profile"><i class="nav-icon">👤</i><span class="nav-text">Profile</span></a></li>
-                    <li><a href="{{ url_for('config') }}" data-tooltip="Config"><i class="nav-icon">⚙️</i><span class="nav-text">Config</span></a></li>
+                    <li class="nav-divider">Team</li>
                     <li><a href="{{ url_for('dashboard') }}" data-tooltip="Dashboard"><i class="nav-icon">📈</i><span class="nav-text">Dashboard</span></a></li>
                     {% if g.user.role == Role.SUPERVISOR %}
                     <li><a href="{{ url_for('admin_projects') }}" data-tooltip="Manage Projects"><i class="nav-icon">📝</i><span class="nav-text">Manage Projects</span></a></li>
                     {% endif %}
-                    {% else %}
-                    <li class="nav-divider">{{ g.user.username }}</li>
-                    <li><a href="{{ url_for('profile') }}" data-tooltip="Profile"><i class="nav-icon">👤</i><span class="nav-text">Profile</span></a></li>
-                    <li><a href="{{ url_for('config') }}" data-tooltip="Config"><i class="nav-icon">⚙️</i><span class="nav-text">Config</span></a></li>
                     {% endif %}
-                    
-                    <li class="nav-divider"></li>
-                    <li><a href="{{ url_for('logout') }}" data-tooltip="Logout"><i class="nav-icon">🚪</i><span class="nav-text">Logout</span></a></li>
                 {% else %}
                     <li><a href="{{ url_for('about') }}" data-tooltip="About"><i class="nav-icon">ℹ️</i><span class="nav-text">About</span></a></li>
                     <li><a href="{{ url_for('login') }}" data-tooltip="Login"><i class="nav-icon">🔑</i><span class="nav-text">Login</span></a></li>
@@ -84,9 +164,12 @@ <h2><a href="{{ url_for('home') }}">TimeTrack</a></h2>
             </ul>
         </nav>
     </aside>
+    {% endif %}
 
     <!-- Mobile overlay -->
+    {% if g.user %}
     <div class="mobile-overlay" id="mobile-overlay"></div>
+    {% endif %}
 
     <main class="main-content">
         <!-- System Announcements -->
@@ -123,15 +206,79 @@ <h2><a href="{{ url_for('home') }}">TimeTrack</a></h2>
             {% endif %}
         {% endwith %}
         
+        <!-- Email Nag Screens -->
+        {% if g.show_email_nag %}
+            <div class="email-nag-banner">
+                <div class="email-nag-content">
+                    <span class="email-nag-icon">📧</span>
+                    <span class="email-nag-text">
+                        <strong>Add your email address</strong> to enable account recovery and receive important notifications.
+                    </span>
+                    <a href="{{ url_for('profile') }}" class="btn btn-sm btn-primary">Add Email</a>
+                    <button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session">×</button>
+                </div>
+            </div>
+        {% elif g.show_email_verification_nag %}
+            <div class="email-nag-banner email-verify">
+                <div class="email-nag-content">
+                    <span class="email-nag-icon">✉️</span>
+                    <span class="email-nag-text">
+                        <strong>Please verify your email address</strong> to ensure you can recover your account if needed.
+                    </span>
+                    <a href="{{ url_for('profile') }}" class="btn btn-sm btn-warning">Verify Email</a>
+                    <button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session">×</button>
+                </div>
+            </div>
+        {% endif %}
+        
         {% block content %}{% endblock %}
     </main>
 
-    <footer>
-        <p>&copy; {{ current_year }} TimeTrack. All rights reserved.</p>
+    <footer class="site-footer">
+        <div class="footer-content">
+            <div class="footer-info">
+                <p>&copy; {{ current_year }} {{ g.branding.app_name if g.branding else 'TimeTrack' }}{% if g.company %} - {{ g.company.name }}{% endif %}. All rights reserved.</p>
+            </div>
+            <div class="footer-links">
+                <a href="{{ url_for('about') }}">About</a>
+                {% if g.branding and g.branding.imprint_enabled %}
+                    <span class="footer-separator">•</span>
+                    <a href="{{ url_for('imprint') }}">{{ g.branding.imprint_title or 'Imprint' }}</a>
+                {% endif %}
+            </div>
+        </div>
     </footer>
 
     <script src="{{ url_for('static', filename='js/script.js') }}"></script>
     <script src="{{ url_for('static', filename='js/sidebar.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/password-strength.js') }}"></script>
+    {% if g.user %}
+    <script src="{{ url_for('static', filename='js/user-dropdown.js') }}"></script>
+    <script>
+        function dismissEmailNag() {
+            // Hide the banner with animation
+            const banner = document.querySelector('.email-nag-banner');
+            if (banner) {
+                banner.style.animation = 'slideUp 0.3s ease-out';
+                setTimeout(() => {
+                    banner.style.display = 'none';
+                }, 300);
+            }
+            // Store in session storage to not show again this session
+            sessionStorage.setItem('emailNagDismissed', 'true');
+        }
+        
+        // Check if already dismissed this session
+        if (sessionStorage.getItem('emailNagDismissed') === 'true') {
+            const banner = document.querySelector('.email-nag-banner');
+            if (banner) {
+                banner.style.display = 'none';
+            }
+        }
+    </script>
+    {% else %}
+    <script src="{{ url_for('static', filename='js/splash.js') }}"></script>
+    {% endif %}
     
     <!-- Custom Tracking Script -->
     {% if tracking_script_enabled and tracking_script_code %}
diff --git a/templates/login.html b/templates/login.html
index ff30294..4365500 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,8 +1,19 @@
-{% extends "layout.html" %}
-
-{% block content %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - {{ g.branding.app_name if g.branding else 'TimeTrack' }}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
+</head>
+<body class="auth-page">
 <div class="auth-container">
-    <h1>Login to TimeTrack</h1>
+    <div class="auth-brand">
+        <h1>Welcome Back</h1>
+        <p>Sign in to {{ g.branding.app_name if g.branding else 'TimeTrack' }}</p>
+    </div>
     
     {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
@@ -13,31 +24,42 @@ <h1>Login to TimeTrack</h1>
     {% endwith %}
     
     <form method="POST" action="{{ url_for('login') }}" class="auth-form">
-        <div class="form-group">
+        <div class="form-group input-icon">
+            <i>👤</i>
+            <input type="text" id="username" name="username" class="form-control" placeholder="Enter your username" required autofocus>
             <label for="username">Username</label>
-            <input type="text" id="username" name="username" class="form-control" required autofocus>
         </div>
         
-        <div class="form-group">
+        <div class="form-group input-icon">
+            <i>🔒</i>
+            <input type="password" id="password" name="password" class="form-control" placeholder="Enter your password" required>
             <label for="password">Password</label>
-            <input type="password" id="password" name="password" class="form-control" required>
         </div>
         
-        <div class="form-group">
-            <label class="checkbox-container">
-                <input type="checkbox" name="remember"> Remember me
-                <span class="checkmark"></span>
+        <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="remember" name="remember">
+            <label class="form-check-label" for="remember">
+                Keep me signed in
             </label>
         </div>
         
         <div class="form-group">
-            <button type="submit" class="btn btn-primary">Login</button>
+            <button type="submit" class="btn btn-primary">Sign In</button>
+        </div>
+        
+        <div class="social-divider">
+            <span>New to {{ g.branding.app_name if g.branding else 'TimeTrack' }}?</span>
         </div>
         
         <div class="auth-links">
-            <p>Don't have an account?</p>
-            <p><a href="{{ url_for('register') }}">Register with Company Code</a> | <a href="{{ url_for('register_freelancer') }}">Register as Freelancer</a></p>
+            <p>
+                <a href="{{ url_for('register') }}" style="margin-right: 1rem;">Join a Company</a>
+                <a href="{{ url_for('register_freelancer') }}">Start Freelancing</a>
+            </p>
         </div>
     </form>
 </div>
-{% endblock %}
\ No newline at end of file
+
+<script src="{{ url_for('static', filename='js/auth-animations.js') }}"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/manage_project_tasks.html b/templates/manage_project_tasks.html
new file mode 100644
index 0000000..8e2e6cd
--- /dev/null
+++ b/templates/manage_project_tasks.html
@@ -0,0 +1,783 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="page-container timetrack-container">
+    <div class="page-header task-header">
+        <div class="project-info">
+            <h2>Tasks for Project: {{ project.code }} - {{ project.name }}</h2>
+            <p class="project-description">{{ project.description or 'No description available' }}</p>
+            {% if project.category %}
+            <span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
+                {{ project.category.icon or '📁' }} {{ project.category.name }}
+            </span>
+            {% endif %}
+        </div>
+        <div class="page-actions task-actions">
+            <button id="create-task-btn" class="btn btn-success">Create New Task</button>
+            <a href="{{ url_for('admin_projects') }}" class="btn btn-secondary">Back to Projects</a>
+        </div>
+    </div>
+
+    <!-- Task Statistics -->
+    <div class="task-stats">
+        <div class="stat-card">
+            <h3>{{ tasks|length }}</h3>
+            <p>Total Tasks</p>
+        </div>
+        <div class="stat-card">
+            <h3>{{ tasks|selectattr('status.value', 'equalto', 'Completed')|list|length }}</h3>
+            <p>Completed</p>
+        </div>
+        <div class="stat-card">
+            <h3>{{ tasks|selectattr('status.value', 'equalto', 'In Progress')|list|length }}</h3>
+            <p>In Progress</p>
+        </div>
+        <div class="stat-card">
+            <h3>{{ tasks|selectattr('status.value', 'equalto', 'Not Started')|list|length }}</h3>
+            <p>Not Started</p>
+        </div>
+    </div>
+
+    <!-- Task List -->
+    {% if tasks %}
+    <div class="tasks-section">
+        <h3>Project Tasks</h3>
+        <div class="tasks-container">
+            {% for task in tasks %}
+            <div class="task-card" data-task-id="{{ task.id }}">
+                <div class="task-header">
+                    <div class="task-title-area">
+                        <h4 class="task-name">{{ task.name }}</h4>
+                        <div class="task-meta">
+                            <span class="status-badge status-{{ task.status.value.lower().replace(' ', '-') }}">
+                                {{ task.status.value }}
+                            </span>
+                            <span class="priority-badge priority-{{ task.priority.value.lower() }}">
+                                {{ task.priority.value }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="task-actions">
+                        <button class="btn btn-xs btn-primary edit-task-btn" data-id="{{ task.id }}">Edit</button>
+                        <button class="btn btn-xs btn-info add-subtask-btn" data-id="{{ task.id }}">Add Subtask</button>
+                        <button class="btn btn-xs btn-danger delete-task-btn" data-id="{{ task.id }}">Delete</button>
+                    </div>
+                </div>
+                
+                <div class="task-body">
+                    <p class="task-description">{{ task.description or 'No description' }}</p>
+                    
+                    <div class="task-details">
+                        <div class="task-detail">
+                            <strong>Assigned to:</strong> 
+                            {% if task.assigned_to %}
+                                {{ task.assigned_to.username }}
+                            {% else %}
+                                <em>Unassigned</em>
+                            {% endif %}
+                        </div>
+                        <div class="task-detail">
+                            <strong>Due Date:</strong> 
+                            {% if task.due_date %}
+                                {{ task.due_date.strftime('%Y-%m-%d') }}
+                            {% else %}
+                                <em>No due date</em>
+                            {% endif %}
+                        </div>
+                        <div class="task-detail">
+                            <strong>Estimated Hours:</strong> 
+                            {% if task.estimated_hours %}
+                                {{ task.estimated_hours }}h
+                            {% else %}
+                                <em>Not estimated</em>
+                            {% endif %}
+                        </div>
+                        <div class="task-detail">
+                            <strong>Time Logged:</strong> 
+                            {{ (task.total_time_logged / 3600)|round(1) }}h
+                        </div>
+                    </div>
+
+                    <!-- Progress Bar -->
+                    <div class="progress-section">
+                        <div class="progress-info">
+                            <span>Progress: {{ task.progress_percentage }}%</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill" style="width: {{ task.progress_percentage }}%;"></div>
+                        </div>
+                    </div>
+
+                    <!-- Subtasks -->
+                    {% if task.subtasks %}
+                    <div class="subtasks-section">
+                        <h5>Subtasks ({{ task.subtasks|length }})</h5>
+                        <div class="subtasks-list">
+                            {% for subtask in task.subtasks %}
+                            <div class="subtask-item" data-subtask-id="{{ subtask.id }}">
+                                <div class="subtask-content">
+                                    <span class="subtask-name">{{ subtask.name }}</span>
+                                    <span class="status-badge status-{{ subtask.status.value.lower().replace(' ', '-') }}">
+                                        {{ subtask.status.value }}
+                                    </span>
+                                    {% if subtask.assigned_to %}
+                                    <span class="subtask-assignee">{{ subtask.assigned_to.username }}</span>
+                                    {% endif %}
+                                </div>
+                                <div class="subtask-actions">
+                                    <button class="btn btn-xs btn-primary edit-subtask-btn" data-id="{{ subtask.id }}">Edit</button>
+                                    <button class="btn btn-xs btn-danger delete-subtask-btn" data-id="{{ subtask.id }}">Delete</button>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% else %}
+    <div class="no-tasks">
+        <div class="no-tasks-content">
+            <h3>No Tasks Created Yet</h3>
+            <p>Start organizing your project by creating tasks.</p>
+            <button id="create-first-task-btn" class="btn btn-primary">Create Your First Task</button>
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+<!-- Task Creation/Edit Modal -->
+<div id="task-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h3 id="task-modal-title">Create Task</h3>
+        <form id="task-form">
+            <input type="hidden" id="task-id" name="task_id">
+            <input type="hidden" id="project-id" name="project_id" value="{{ project.id }}">
+            
+            <div class="form-group">
+                <label for="task-name">Task Name *</label>
+                <input type="text" id="task-name" name="name" required maxlength="200">
+            </div>
+            
+            <div class="form-group">
+                <label for="task-description">Description</label>
+                <textarea id="task-description" name="description" rows="3"></textarea>
+            </div>
+            
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="task-status">Status</label>
+                    <select id="task-status" name="status">
+                        <option value="Not Started">Not Started</option>
+                        <option value="In Progress">In Progress</option>
+                        <option value="On Hold">On Hold</option>
+                        <option value="Completed">Completed</option>
+                        <option value="Cancelled">Cancelled</option>
+                    </select>
+                </div>
+                
+                <div class="form-group">
+                    <label for="task-priority">Priority</label>
+                    <select id="task-priority" name="priority">
+                        <option value="Low">Low</option>
+                        <option value="Medium" selected>Medium</option>
+                        <option value="High">High</option>
+                        <option value="Urgent">Urgent</option>
+                    </select>
+                </div>
+            </div>
+            
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="task-assigned-to">Assigned To</label>
+                    <select id="task-assigned-to" name="assigned_to_id">
+                        <option value="">Unassigned</option>
+                        {% for user in team_members %}
+                        <option value="{{ user.id }}">{{ user.username }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="form-group">
+                    <label for="task-estimated-hours">Estimated Hours</label>
+                    <input type="number" id="task-estimated-hours" name="estimated_hours" step="0.5" min="0">
+                </div>
+            </div>
+            
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="task-start-date">Start Date</label>
+                    <input type="date" id="task-start-date" name="start_date">
+                </div>
+                
+                <div class="form-group">
+                    <label for="task-due-date">Due Date</label>
+                    <input type="date" id="task-due-date" name="due_date">
+                </div>
+            </div>
+            
+            <div class="modal-actions">
+                <button type="submit" class="btn btn-primary">Save Task</button>
+                <button type="button" class="btn btn-secondary" id="cancel-task">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Subtask Creation/Edit Modal -->
+<div id="subtask-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h3 id="subtask-modal-title">Create Subtask</h3>
+        <form id="subtask-form">
+            <input type="hidden" id="subtask-id" name="subtask_id">
+            <input type="hidden" id="parent-task-id" name="task_id">
+            
+            <div class="form-group">
+                <label for="subtask-name">Subtask Name *</label>
+                <input type="text" id="subtask-name" name="name" required maxlength="200">
+            </div>
+            
+            <div class="form-group">
+                <label for="subtask-description">Description</label>
+                <textarea id="subtask-description" name="description" rows="2"></textarea>
+            </div>
+            
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="subtask-status">Status</label>
+                    <select id="subtask-status" name="status">
+                        <option value="Not Started">Not Started</option>
+                        <option value="In Progress">In Progress</option>
+                        <option value="On Hold">On Hold</option>
+                        <option value="Completed">Completed</option>
+                        <option value="Cancelled">Cancelled</option>
+                    </select>
+                </div>
+                
+                <div class="form-group">
+                    <label for="subtask-priority">Priority</label>
+                    <select id="subtask-priority" name="priority">
+                        <option value="Low">Low</option>
+                        <option value="Medium" selected>Medium</option>
+                        <option value="High">High</option>
+                        <option value="Urgent">Urgent</option>
+                    </select>
+                </div>
+            </div>
+            
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="subtask-assigned-to">Assigned To</label>
+                    <select id="subtask-assigned-to" name="assigned_to_id">
+                        <option value="">Unassigned</option>
+                        {% for user in team_members %}
+                        <option value="{{ user.id }}">{{ user.username }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="form-group">
+                    <label for="subtask-estimated-hours">Estimated Hours</label>
+                    <input type="number" id="subtask-estimated-hours" name="estimated_hours" step="0.5" min="0">
+                </div>
+            </div>
+            
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="subtask-start-date">Start Date</label>
+                    <input type="date" id="subtask-start-date" name="start_date">
+                </div>
+                
+                <div class="form-group">
+                    <label for="subtask-due-date">Due Date</label>
+                    <input type="date" id="subtask-due-date" name="due_date">
+                </div>
+            </div>
+            
+            <div class="modal-actions">
+                <button type="submit" class="btn btn-primary">Save Subtask</button>
+                <button type="button" class="btn btn-secondary" id="cancel-subtask">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<style>
+.task-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #dee2e6;
+}
+
+.project-info h2 {
+    margin: 0 0 0.5rem 0;
+}
+
+.project-description {
+    color: #666;
+    margin: 0 0 0.5rem 0;
+}
+
+.task-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.task-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.stat-card {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    text-align: center;
+}
+
+.stat-card h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 2rem;
+    color: #4CAF50;
+}
+
+.stat-card p {
+    margin: 0;
+    color: #666;
+    font-weight: 500;
+}
+
+.tasks-container {
+    display: grid;
+    gap: 1rem;
+}
+
+.task-card {
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease;
+}
+
+.task-card:hover {
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.task-header {
+    padding: 1rem;
+    background: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.task-title-area {
+    flex: 1;
+}
+
+.task-name {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.1rem;
+}
+
+.task-meta {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.task-body {
+    padding: 1rem;
+}
+
+.task-description {
+    margin: 0 0 1rem 0;
+    color: #666;
+}
+
+.task-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.task-detail {
+    font-size: 0.9rem;
+}
+
+.progress-section {
+    margin-bottom: 1rem;
+}
+
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: #e9ecef;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: #4CAF50;
+    transition: width 0.3s ease;
+}
+
+.status-badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.status-not-started { background: #f8d7da; color: #721c24; }
+.status-in-progress { background: #d1ecf1; color: #0c5460; }
+.status-on-hold { background: #fff3cd; color: #856404; }
+.status-completed { background: #d4edda; color: #155724; }
+.status-cancelled { background: #f8d7da; color: #721c24; }
+
+.priority-badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.priority-low { background: #e2e3e5; color: #383d41; }
+.priority-medium { background: #b8daff; color: #004085; }
+.priority-high { background: #ffeaa7; color: #856404; }
+.priority-urgent { background: #f5c6cb; color: #721c24; }
+
+.subtasks-section {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #dee2e6;
+}
+
+.subtasks-section h5 {
+    margin: 0 0 0.75rem 0;
+    color: #666;
+}
+
+.subtasks-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.subtask-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+    border: 1px solid #e9ecef;
+}
+
+.subtask-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+}
+
+.subtask-name {
+    font-weight: 500;
+}
+
+.subtask-assignee {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.subtask-actions {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.no-tasks {
+    text-align: center;
+    padding: 4rem 2rem;
+}
+
+.no-tasks-content {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.no-tasks h3 {
+    color: #666;
+    margin-bottom: 1rem;
+}
+
+.no-tasks p {
+    color: #999;
+    margin-bottom: 2rem;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+@media (max-width: 768px) {
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .task-header {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .task-details {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const taskModal = document.getElementById('task-modal');
+    const subtaskModal = document.getElementById('subtask-modal');
+    const taskForm = document.getElementById('task-form');
+    const subtaskForm = document.getElementById('subtask-form');
+    
+    // Task Modal Functions
+    function openTaskModal(taskData = null) {
+        const isEdit = taskData !== null;
+        document.getElementById('task-modal-title').textContent = isEdit ? 'Edit Task' : 'Create Task';
+        
+        if (isEdit) {
+            document.getElementById('task-id').value = taskData.id;
+            document.getElementById('task-name').value = taskData.name;
+            document.getElementById('task-description').value = taskData.description || '';
+            document.getElementById('task-status').value = taskData.status;
+            document.getElementById('task-priority').value = taskData.priority;
+            document.getElementById('task-assigned-to').value = taskData.assigned_to_id || '';
+            document.getElementById('task-estimated-hours').value = taskData.estimated_hours || '';
+            document.getElementById('task-start-date').value = taskData.start_date || '';
+            document.getElementById('task-due-date').value = taskData.due_date || '';
+        } else {
+            taskForm.reset();
+            document.getElementById('task-id').value = '';
+            document.getElementById('task-priority').value = 'Medium';
+        }
+        
+        taskModal.style.display = 'block';
+    }
+    
+    function openSubtaskModal(taskId, subtaskData = null) {
+        const isEdit = subtaskData !== null;
+        document.getElementById('subtask-modal-title').textContent = isEdit ? 'Edit Subtask' : 'Create Subtask';
+        document.getElementById('parent-task-id').value = taskId;
+        
+        if (isEdit) {
+            document.getElementById('subtask-id').value = subtaskData.id;
+            document.getElementById('subtask-name').value = subtaskData.name;
+            document.getElementById('subtask-description').value = subtaskData.description || '';
+            document.getElementById('subtask-status').value = subtaskData.status;
+            document.getElementById('subtask-priority').value = subtaskData.priority;
+            document.getElementById('subtask-assigned-to').value = subtaskData.assigned_to_id || '';
+            document.getElementById('subtask-estimated-hours').value = subtaskData.estimated_hours || '';
+            document.getElementById('subtask-start-date').value = subtaskData.start_date || '';
+            document.getElementById('subtask-due-date').value = subtaskData.due_date || '';
+        } else {
+            subtaskForm.reset();
+            document.getElementById('subtask-id').value = '';
+            document.getElementById('subtask-priority').value = 'Medium';
+        }
+        
+        subtaskModal.style.display = 'block';
+    }
+    
+    // Event Listeners
+    document.getElementById('create-task-btn').addEventListener('click', () => openTaskModal());
+    document.getElementById('create-first-task-btn')?.addEventListener('click', () => openTaskModal());
+    
+    // Task Actions
+    document.querySelectorAll('.edit-task-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const taskId = this.getAttribute('data-id');
+            // Fetch task data and open modal (implement API call)
+            fetch(`/api/tasks/${taskId}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        openTaskModal(data.task);
+                    }
+                });
+        });
+    });
+    
+    document.querySelectorAll('.add-subtask-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const taskId = this.getAttribute('data-id');
+            openSubtaskModal(taskId);
+        });
+    });
+    
+    document.querySelectorAll('.delete-task-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const taskId = this.getAttribute('data-id');
+            if (confirm('Are you sure you want to delete this task? All subtasks will also be deleted.')) {
+                fetch(`/api/tasks/${taskId}`, {
+                    method: 'DELETE'
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                });
+            }
+        });
+    });
+    
+    // Subtask Actions
+    document.querySelectorAll('.edit-subtask-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const subtaskId = this.getAttribute('data-id');
+            const taskId = this.closest('.task-card').getAttribute('data-task-id');
+            // Fetch subtask data and open modal
+            fetch(`/api/subtasks/${subtaskId}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        openSubtaskModal(taskId, data.subtask);
+                    }
+                });
+        });
+    });
+    
+    document.querySelectorAll('.delete-subtask-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const subtaskId = this.getAttribute('data-id');
+            if (confirm('Are you sure you want to delete this subtask?')) {
+                fetch(`/api/subtasks/${subtaskId}`, {
+                    method: 'DELETE'
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                });
+            }
+        });
+    });
+    
+    // Form Submissions
+    taskForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const formData = new FormData(this);
+        const taskId = formData.get('task_id');
+        const isEdit = taskId !== '';
+        
+        const url = isEdit ? `/api/tasks/${taskId}` : '/api/tasks';
+        const method = isEdit ? 'PUT' : 'POST';
+        
+        fetch(url, {
+            method: method,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(Object.fromEntries(formData))
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                taskModal.style.display = 'none';
+                location.reload();
+            } else {
+                alert('Error: ' + data.message);
+            }
+        });
+    });
+    
+    subtaskForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const formData = new FormData(this);
+        const subtaskId = formData.get('subtask_id');
+        const isEdit = subtaskId !== '';
+        
+        const url = isEdit ? `/api/subtasks/${subtaskId}` : '/api/subtasks';
+        const method = isEdit ? 'PUT' : 'POST';
+        
+        fetch(url, {
+            method: method,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(Object.fromEntries(formData))
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                subtaskModal.style.display = 'none';
+                location.reload();
+            } else {
+                alert('Error: ' + data.message);
+            }
+        });
+    });
+    
+    // Modal Close Events
+    document.querySelectorAll('.close').forEach(btn => {
+        btn.addEventListener('click', function() {
+            this.closest('.modal').style.display = 'none';
+        });
+    });
+    
+    document.getElementById('cancel-task').addEventListener('click', () => {
+        taskModal.style.display = 'none';
+    });
+    
+    document.getElementById('cancel-subtask').addEventListener('click', () => {
+        subtaskModal.style.display = 'none';
+    });
+    
+    // Close modals when clicking outside
+    window.addEventListener('click', function(event) {
+        if (event.target === taskModal) {
+            taskModal.style.display = 'none';
+        }
+        if (event.target === subtaskModal) {
+            subtaskModal.style.display = 'none';
+        }
+    });
+});
+</script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/profile.html b/templates/profile.html
index 77bbc2e..b369610 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -12,196 +12,422 @@ <h1>My Profile</h1>
         {% endif %}
     {% endwith %}
     
-    <div class="profile-info">
-        <p><strong>Username:</strong> {{ user.username }}</p>
-        <p><strong>Account Type:</strong> {{ user.role.value if user.role else 'Team Member' }}</p>
-        <p><strong>Member Since:</strong> {{ user.created_at.strftime('%Y-%m-%d') }}</p>
-        <p><strong>Two-Factor Authentication:</strong> 
-            {% if user.two_factor_enabled %}
-                <span class="status enabled">✅ Enabled</span>
-            {% else %}
-                <span class="status disabled">❌ Disabled</span>
-            {% endif %}
-        </p>
-    </div>
-    
-    <h2>Profile Settings</h2>
-    
-    <div class="profile-card">
-        <h3>Basic Information</h3>
-        <form method="POST" action="{{ url_for('profile') }}" class="profile-form">
-            <div class="form-group">
-                <label for="email">Email Address</label>
-                <input type="email" id="email" name="email" class="form-control" value="{{ user.email }}" required>
-                <small>This email address is used for account verification and notifications.</small>
-            </div>
-            
-            <div class="form-group">
-                <button type="submit" class="btn btn-primary">Update Email</button>
-            </div>
-        </form>
-    </div>
-    
-    <div class="profile-card">
-        <h3>Change Password</h3>
-        <p>Update your account password to keep your account secure.</p>
-        <form method="POST" action="{{ url_for('profile') }}" class="password-form">
-            <!-- Hidden email field to maintain current email -->
-            <input type="hidden" name="email" value="{{ user.email }}">
-            
-            <div class="form-group">
-                <label for="current_password">Current Password</label>
-                <input type="password" id="current_password" name="current_password" class="form-control" required>
-                <small>Enter your current password to verify your identity.</small>
+    <div class="profile-grid">
+        <!-- Avatar Card -->
+        <div class="profile-card avatar-card">
+            <h3>Profile Picture</h3>
+            <div class="avatar-section">
+                <img src="{{ user.get_avatar_url(128) }}" alt="{{ user.username }}" class="profile-avatar" id="avatar-preview">
+                <div class="avatar-info">
+                    <p><strong>{{ user.username }}</strong></p>
+                    <p class="text-muted">{{ user.role.value if user.role else 'Team Member' }}</p>
+                </div>
             </div>
             
-            <div class="form-group">
-                <label for="new_password">New Password</label>
-                <input type="password" id="new_password" name="new_password" class="form-control" required>
-                <small>Choose a strong password with at least 8 characters.</small>
+            <div class="avatar-controls">
+                <h4>Change Avatar</h4>
+                <div class="avatar-options">
+                    <div class="avatar-option">
+                        <input type="radio" id="avatar-default" name="avatar-type" value="default" checked>
+                        <label for="avatar-default">Default Avatar</label>
+                    </div>
+                    <div class="avatar-option">
+                        <input type="radio" id="avatar-upload" name="avatar-type" value="upload">
+                        <label for="avatar-upload">Upload Image</label>
+                    </div>
+                    <div class="avatar-option">
+                        <input type="radio" id="avatar-url" name="avatar-type" value="url">
+                        <label for="avatar-url">Custom URL</label>
+                    </div>
+                </div>
+                
+                <!-- Default Avatar Options -->
+                <div id="default-avatar-options" class="avatar-option-panel">
+                    <p class="help-text">Your default avatar is generated based on your username.</p>
+                    <button type="button" class="btn btn-secondary" onclick="resetAvatar()">Use Default Avatar</button>
+                </div>
+                
+                <!-- Upload Avatar Options -->
+                <div id="upload-avatar-options" class="avatar-option-panel" style="display: none;">
+                    <form method="POST" action="{{ url_for('upload_avatar') }}" enctype="multipart/form-data" class="avatar-upload-form">
+                        <div class="form-group">
+                            <label for="avatar_file" class="file-upload-label">
+                                <span class="upload-icon">📁</span>
+                                <span class="upload-text">Choose an image file</span>
+                                <span class="file-name" id="file-name">No file selected</span>
+                            </label>
+                            <input type="file" id="avatar_file" name="avatar_file" class="file-input" 
+                                   accept="image/jpeg,image/jpg,image/png,image/gif,image/webp" required>
+                            <small>Max file size: 5MB. Supported formats: JPG, PNG, GIF, WebP</small>
+                        </div>
+                        <div class="upload-preview" id="upload-preview" style="display: none;">
+                            <img id="upload-preview-img" src="" alt="Preview">
+                        </div>
+                        <button type="submit" class="btn btn-primary" id="upload-btn" disabled>Upload Avatar</button>
+                    </form>
+                </div>
+                
+                <!-- URL Avatar Options -->
+                <div id="url-avatar-options" class="avatar-option-panel" style="display: none;">
+                    <form method="POST" action="{{ url_for('update_avatar') }}" class="avatar-form">
+                        <div class="form-group">
+                            <label for="avatar_url">Avatar URL</label>
+                            <input type="url" id="avatar_url" name="avatar_url" class="form-control" 
+                                   placeholder="https://example.com/avatar.jpg"
+                                   value="{{ user.avatar_url or '' }}">
+                            <small>Enter a direct link to an image (PNG, JPG, GIF)</small>
+                        </div>
+                        <button type="submit" class="btn btn-primary">Update Avatar</button>
+                    </form>
+                </div>
             </div>
-            
-            <div class="form-group">
-                <label for="confirm_password">Confirm New Password</label>
-                <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
-                <small>Re-enter your new password to confirm.</small>
+        </div>
+        
+        <!-- Account Info Card -->
+        <div class="profile-card">
+            <h3>Account Information</h3>
+            <div class="info-grid">
+                <div class="info-item">
+                    <span class="info-label">Username</span>
+                    <span class="info-value">{{ user.username }}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Email</span>
+                    <span class="info-value">
+                        {% if user.email %}
+                            {{ user.email }}
+                            {% if not user.is_verified %}
+                                <span class="badge badge-warning">Unverified</span>
+                            {% endif %}
+                        {% else %}
+                            <span class="text-muted">Not provided</span>
+                        {% endif %}
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Role</span>
+                    <span class="info-value">{{ user.role.value if user.role else 'Team Member' }}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Company</span>
+                    <span class="info-value">{{ user.company.name if user.company else 'N/A' }}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Team</span>
+                    <span class="info-value">{{ user.team.name if user.team else 'No Team' }}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Member Since</span>
+                    <span class="info-value">{{ user.created_at.strftime('%B %d, %Y') }}</span>
+                </div>
             </div>
-            
-            <div class="form-group">
+        </div>
+        
+        <!-- Email Settings Card -->
+        <div class="profile-card">
+            <h3>Email Settings</h3>
+            <form method="POST" action="{{ url_for('profile') }}" class="profile-form">
+                <div class="form-group">
+                    <label for="email">Email Address</label>
+                    <input type="email" id="email" name="email" class="form-control" value="{{ user.email or '' }}" placeholder="your@email.com">
+                    <small>This email address is used for account recovery and notifications.</small>
+                </div>
+                {% if user.email and not user.is_verified %}
+                <div class="alert alert-warning">
+                    <i>⚠️</i> Your email address is not verified. 
+                    <a href="{{ url_for('profile') }}" class="btn btn-sm btn-warning">Send Verification Email</a>
+                </div>
+                {% elif not user.email %}
+                <div class="alert alert-info">
+                    <i>ℹ️</i> Adding an email address enables account recovery and important notifications.
+                </div>
+                {% endif %}
+                <button type="submit" class="btn btn-primary">{% if user.email %}Update{% else %}Add{% endif %} Email</button>
+            </form>
+        </div>
+        
+        <!-- Password Settings Card -->
+        <div class="profile-card">
+            <h3>Change Password</h3>
+            <form method="POST" action="{{ url_for('profile') }}" class="password-form">
+                <!-- Hidden email field to maintain current email -->
+                <input type="hidden" name="email" value="{{ user.email or '' }}">
+                
+                <div class="form-group">
+                    <label for="current_password">Current Password</label>
+                    <input type="password" id="current_password" name="current_password" class="form-control" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="new_password">New Password</label>
+                    <input type="password" id="new_password" name="new_password" class="form-control" required>
+                    <small>Choose a strong password with at least 8 characters.</small>
+                </div>
+                
+                <div class="form-group">
+                    <label for="confirm_password">Confirm New Password</label>
+                    <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
+                </div>
+                
                 <button type="submit" class="btn btn-warning">Change Password</button>
-            </div>
-        </form>
-    </div>
-    
-    <div class="security-section">
-        <h2>Security Settings</h2>
+            </form>
+        </div>
         
-        <div class="security-card">
+        <!-- Security Settings Card -->
+        <div class="profile-card security-card">
             <h3>Two-Factor Authentication</h3>
-            {% if user.two_factor_enabled %}
-                <p>Two-factor authentication is <strong>enabled</strong> for your account. This adds an extra layer of security by requiring a code from your authenticator app when logging in.</p>
-                
-                <form method="POST" action="{{ url_for('disable_2fa') }}" class="disable-2fa-form" onsubmit="return confirm('Are you sure you want to disable two-factor authentication? This will make your account less secure.');">
-                    <div class="form-group">
-                        <label for="password_disable">Enter your password to disable 2FA:</label>
-                        <input type="password" id="password_disable" name="password" class="form-control" required>
+            <div class="security-status">
+                {% if user.two_factor_enabled %}
+                    <div class="status-badge enabled">
+                        <span class="status-icon">✅</span>
+                        <span>Enabled</span>
                     </div>
-                    <button type="submit" class="btn btn-danger">Disable Two-Factor Authentication</button>
-                </form>
-            {% else %}
-                <p>Two-factor authentication is <strong>not enabled</strong> for your account. We strongly recommend enabling it to protect your account.</p>
-                <p>With 2FA enabled, you'll need both your password and a code from your phone to log in.</p>
-                
-                <a href="{{ url_for('setup_2fa') }}" class="btn btn-success">Enable Two-Factor Authentication</a>
-            {% endif %}
+                    <p>Two-factor authentication adds an extra layer of security to your account.</p>
+                    
+                    <form method="POST" action="{{ url_for('disable_2fa') }}" class="disable-2fa-form" 
+                          onsubmit="return confirm('Are you sure you want to disable two-factor authentication?');">
+                        <div class="form-group">
+                            <label for="password_disable">Enter your password to disable 2FA:</label>
+                            <input type="password" id="password_disable" name="password" class="form-control" required>
+                        </div>
+                        <button type="submit" class="btn btn-danger">Disable 2FA</button>
+                    </form>
+                {% else %}
+                    <div class="status-badge disabled">
+                        <span class="status-icon">❌</span>
+                        <span>Disabled</span>
+                    </div>
+                    <p>Enable two-factor authentication to add an extra layer of security to your account.</p>
+                    <a href="{{ url_for('setup_2fa') }}" class="btn btn-success">Enable 2FA</a>
+                {% endif %}
+            </div>
         </div>
     </div>
 </div>
 
 <style>
-.status.enabled {
-    color: #28a745;
-    font-weight: bold;
+.profile-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
 }
 
-.status.disabled {
-    color: #dc3545;
-    font-weight: bold;
+.profile-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
 }
 
 .profile-card {
-    background: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 0.5rem;
+    background: white;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
     padding: 1.5rem;
-    margin: 1.5rem 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 
 .profile-card h3 {
-    color: #007bff;
-    margin-bottom: 1rem;
+    color: #333;
+    margin-bottom: 1.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid #e9ecef;
 }
 
-.profile-card p {
-    color: #6c757d;
-    margin-bottom: 1.5rem;
+.profile-card h4 {
+    color: #495057;
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 1.5rem 0 1rem;
 }
 
-.security-section {
-    margin-top: 2rem;
-    padding-top: 2rem;
-    border-top: 1px solid #dee2e6;
+/* Avatar Section */
+.avatar-card {
+    grid-column: span 2;
 }
 
-.security-card {
-    background: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    margin: 1rem 0;
+.avatar-section {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.profile-avatar {
+    width: 128px;
+    height: 128px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 4px solid #e9ecef;
 }
 
-.security-card h3 {
-    color: #007bff;
+.avatar-info {
+    flex: 1;
+}
+
+.avatar-info p {
+    margin: 0.25rem 0;
+}
+
+.text-muted {
+    color: #6c757d;
+    font-size: 0.9rem;
+}
+
+.avatar-controls {
+    border-top: 1px solid #e9ecef;
+    padding-top: 1.5rem;
+}
+
+.avatar-options {
+    display: flex;
+    gap: 2rem;
     margin-bottom: 1rem;
 }
 
-.disable-2fa-form {
+.avatar-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.avatar-option input[type="radio"] {
+    cursor: pointer;
+}
+
+.avatar-option label {
+    cursor: pointer;
+    margin-bottom: 0;
+}
+
+.avatar-option-panel {
     margin-top: 1rem;
     padding: 1rem;
-    background: #fff3cd;
-    border: 1px solid #ffeaa7;
-    border-radius: 0.25rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.help-text {
+    color: #6c757d;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    margin: 0.5rem 0;
-    border: none;
-    border-radius: 0.25rem;
-    text-decoration: none;
+/* File Upload Styles */
+.file-upload-label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    border: 2px dashed #dee2e6;
+    border-radius: 8px;
     cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.2s;
+    transition: all 0.3s ease;
+    background: #f8f9fa;
 }
 
-.btn-success {
-    background: #28a745;
-    color: white;
+.file-upload-label:hover {
+    border-color: #007bff;
+    background: #e7f3ff;
 }
 
-.btn-success:hover {
-    background: #218838;
+.upload-icon {
+    font-size: 1.5rem;
 }
 
-.btn-danger {
-    background: #dc3545;
-    color: white;
+.upload-text {
+    flex: 1;
+    font-weight: 500;
+    color: #495057;
 }
 
-.btn-danger:hover {
-    background: #c82333;
+.file-name {
+    font-size: 0.875rem;
+    color: #6c757d;
 }
 
-.btn-primary {
-    background: #007bff;
-    color: white;
+.file-input {
+    display: none;
 }
 
-.btn-primary:hover {
-    background: #0056b3;
+.upload-preview {
+    margin: 1rem 0;
+    text-align: center;
 }
 
-.btn-warning {
-    background: #ffc107;
-    color: #212529;
+.upload-preview img {
+    max-width: 200px;
+    max-height: 200px;
+    border-radius: 8px;
+    border: 2px solid #dee2e6;
 }
 
-.btn-warning:hover {
-    background: #e0a800;
+/* Account Info Grid */
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+.info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.info-label {
+    font-size: 0.875rem;
+    color: #6c757d;
+    font-weight: 500;
+}
+
+.info-value {
+    font-size: 1rem;
+    color: #333;
+}
+
+/* Security Status */
+.security-status {
+    text-align: center;
+}
+
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-weight: 600;
+    margin-bottom: 1rem;
 }
 
+.status-badge.enabled {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.status-badge.disabled {
+    background: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.status-icon {
+    font-size: 1.25rem;
+}
+
+.disable-2fa-form {
+    margin-top: 1rem;
+    padding: 1rem;
+    background: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 4px;
+}
+
+/* Form Styles */
 .form-group {
     margin-bottom: 1.5rem;
 }
@@ -217,9 +443,8 @@ <h3>Two-Factor Authentication</h3>
     width: 100%;
     padding: 0.75rem;
     border: 1px solid #ced4da;
-    border-radius: 0.25rem;
+    border-radius: 4px;
     font-size: 1rem;
-    line-height: 1.5;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
@@ -235,5 +460,146 @@ <h3>Two-Factor Authentication</h3>
     color: #6c757d;
     font-size: 0.875rem;
 }
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+    .profile-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .avatar-card {
+        grid-column: span 1;
+    }
+    
+    .avatar-section {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .avatar-options {
+        justify-content: center;
+    }
+}
 </style>
+
+<script>
+// Avatar type toggle
+document.addEventListener('DOMContentLoaded', function() {
+    const avatarTypeRadios = document.querySelectorAll('input[name="avatar-type"]');
+    const defaultPanel = document.getElementById('default-avatar-options');
+    const uploadPanel = document.getElementById('upload-avatar-options');
+    const urlPanel = document.getElementById('url-avatar-options');
+    const avatarUrlInput = document.getElementById('avatar_url');
+    const avatarPreview = document.getElementById('avatar-preview');
+    const fileInput = document.getElementById('avatar_file');
+    const fileName = document.getElementById('file-name');
+    const uploadPreview = document.getElementById('upload-preview');
+    const uploadPreviewImg = document.getElementById('upload-preview-img');
+    const uploadBtn = document.getElementById('upload-btn');
+    
+    avatarTypeRadios.forEach(radio => {
+        radio.addEventListener('change', function() {
+            // Hide all panels
+            defaultPanel.style.display = 'none';
+            uploadPanel.style.display = 'none';
+            urlPanel.style.display = 'none';
+            
+            // Show selected panel
+            if (this.value === 'default') {
+                defaultPanel.style.display = 'block';
+            } else if (this.value === 'upload') {
+                uploadPanel.style.display = 'block';
+            } else if (this.value === 'url') {
+                urlPanel.style.display = 'block';
+            }
+        });
+    });
+    
+    // File input handling
+    fileInput.addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (file) {
+            // Update file name display
+            fileName.textContent = file.name;
+            
+            // Validate file size (5MB max)
+            if (file.size > 5 * 1024 * 1024) {
+                alert('File size must be less than 5MB');
+                this.value = '';
+                fileName.textContent = 'No file selected';
+                uploadPreview.style.display = 'none';
+                uploadBtn.disabled = true;
+                return;
+            }
+            
+            // Validate file type
+            const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
+            if (!validTypes.includes(file.type)) {
+                alert('Please select a valid image file (JPG, PNG, GIF, or WebP)');
+                this.value = '';
+                fileName.textContent = 'No file selected';
+                uploadPreview.style.display = 'none';
+                uploadBtn.disabled = true;
+                return;
+            }
+            
+            // Preview the image
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                uploadPreviewImg.src = e.target.result;
+                uploadPreview.style.display = 'block';
+                uploadBtn.disabled = false;
+            };
+            reader.readAsDataURL(file);
+        } else {
+            fileName.textContent = 'No file selected';
+            uploadPreview.style.display = 'none';
+            uploadBtn.disabled = true;
+        }
+    });
+    
+    // Preview avatar URL
+    avatarUrlInput.addEventListener('input', function() {
+        const url = this.value.trim();
+        if (url && isValidUrl(url)) {
+            // Test if image loads
+            const img = new Image();
+            img.onload = function() {
+                avatarPreview.src = url;
+            };
+            img.onerror = function() {
+                // Keep current avatar if URL is invalid
+                avatarPreview.src = '{{ user.get_avatar_url(128) }}';
+            };
+            img.src = url;
+        }
+    });
+});
+
+function isValidUrl(string) {
+    try {
+        new URL(string);
+        return true;
+    } catch (_) {
+        return false;
+    }
+}
+
+function resetAvatar() {
+    if (confirm('This will remove your custom avatar and use the default generated avatar. Continue?')) {
+        const form = document.createElement('form');
+        form.method = 'POST';
+        form.action = '{{ url_for("update_avatar") }}';
+        
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'avatar_url';
+        input.value = '';
+        
+        form.appendChild(input);
+        document.body.appendChild(form);
+        form.submit();
+    }
+}
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/register.html b/templates/register.html
index e9e7856..4e42baf 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -1,9 +1,19 @@
-{% extends "layout.html" %}
-
-{% block content %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - {{ g.branding.app_name if g.branding else 'TimeTrack' }}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
+</head>
+<body class="auth-page">
 <div class="auth-container">
-    <h1>Register for TimeTrack</h1>
-    <p class="text-muted">Join your company team</p>
+    <div class="auth-brand">
+        <h1>Welcome to {{ g.branding.app_name if g.branding else 'TimeTrack' }}</h1>
+        <p>Join your company team</p>
+    </div>
     
     {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
@@ -22,36 +32,47 @@ <h5>Registration Options:</h5>
     </div>
     
     <form method="POST" action="{{ url_for('register') }}" class="auth-form">
-        <div class="form-group">
+        <div class="form-group company-code-group">
             <label for="company_code">Company Code</label>
             <input type="text" id="company_code" name="company_code" class="form-control" required autofocus 
-                   placeholder="Enter your company code">
-            <small class="form-text text-muted">Get this code from your company administrator.</small>
+                   placeholder="ENTER-CODE">
+            <small class="form-text text-muted">Get this code from your company administrator</small>
         </div>
         
-        <div class="form-group">
+        <div class="form-group input-icon">
+            <i>👤</i>
+            <input type="text" id="username" name="username" class="form-control" placeholder="Choose a username" required>
             <label for="username">Username</label>
-            <input type="text" id="username" name="username" class="form-control" required>
         </div>
         
-        <div class="form-group">
-            <label for="email">Email</label>
-            <input type="email" id="email" name="email" class="form-control" required>
-            <small class="form-text text-muted">A verification link will be sent to this email address.</small>
+        <div class="form-group input-icon">
+            <i>📧</i>
+            <input type="email" id="email" name="email" class="form-control" placeholder="your@email.com (optional)">
+            <label for="email">Email Address (Optional)</label>
+            <small class="form-text text-muted">Recommended for account recovery and notifications</small>
         </div>
         
-        <div class="form-group">
+        <div class="form-group input-icon">
+            <i>🔒</i>
+            <input type="password" id="password" name="password" class="form-control" placeholder="Create a strong password" required>
             <label for="password">Password</label>
-            <input type="password" id="password" name="password" class="form-control" required>
         </div>
         
-        <div class="form-group">
+        <div class="form-group input-icon">
+            <i>🔒</i>
+            <input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Confirm your password" required>
             <label for="confirm_password">Confirm Password</label>
-            <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
+        </div>
+        
+        <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="terms" required>
+            <label class="form-check-label" for="terms">
+                I agree to the Terms of Service and Privacy Policy
+            </label>
         </div>
         
         <div class="form-group">
-            <button type="submit" class="btn btn-primary">Register</button>
+            <button type="submit" class="btn btn-primary">Create Account</button>
         </div>
         
         <div class="auth-links">
@@ -59,8 +80,12 @@ <h5>Registration Options:</h5>
         </div>
         
         <div class="verification-notice">
-            <p>After registration, you'll need to verify your email address before you can log in.</p>
+            <p>💡 You can register without an email, but we recommend adding one later for account recovery.</p>
         </div>
     </form>
 </div>
-{% endblock %}
\ No newline at end of file
+
+<script src="{{ url_for('static', filename='js/password-strength.js') }}"></script>
+<script src="{{ url_for('static', filename='js/auth-animations.js') }}"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/register_freelancer.html b/templates/register_freelancer.html
index dab1a35..7e7abb7 100644
--- a/templates/register_freelancer.html
+++ b/templates/register_freelancer.html
@@ -1,9 +1,19 @@
-{% extends "layout.html" %}
-
-{% block content %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Freelancer Registration - TimeTrack</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
+</head>
+<body class="auth-page">
 <div class="auth-container">
-    <h1>Register as Freelancer</h1>
-    <p class="text-muted">Create your independent freelancer account</p>
+    <div class="auth-brand">
+        <h1>Start Freelancing</h1>
+        <p>Create your independent workspace</p>
+    </div>
     
     {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
@@ -13,36 +23,64 @@ <h1>Register as Freelancer</h1>
         {% endif %}
     {% endwith %}
     
+    <div class="registration-progress">
+        <div class="progress-step active">
+            <div class="progress-step-number">1</div>
+            <div class="progress-step-label">Account Info</div>
+        </div>
+        <div class="progress-step">
+            <div class="progress-step-number">2</div>
+            <div class="progress-step-label">Verify Email</div>
+        </div>
+        <div class="progress-step">
+            <div class="progress-step-number">3</div>
+            <div class="progress-step-label">Start Tracking</div>
+        </div>
+    </div>
+
     <form method="POST" action="{{ url_for('register_freelancer') }}" class="auth-form">
-        <div class="form-group">
+        <div class="form-group input-icon">
+            <i>👤</i>
+            <input type="text" id="username" name="username" class="form-control" placeholder="Choose your username" required autofocus>
             <label for="username">Username</label>
-            <input type="text" id="username" name="username" class="form-control" required autofocus>
         </div>
         
-        <div class="form-group">
-            <label for="email">Email</label>
-            <input type="email" id="email" name="email" class="form-control" required>
+        <div class="form-group input-icon">
+            <i>📧</i>
+            <input type="email" id="email" name="email" class="form-control" placeholder="your@email.com (optional)">
+            <label for="email">Email Address (Optional)</label>
+            <small class="form-text text-muted">Recommended for account recovery</small>
         </div>
         
-        <div class="form-group">
-            <label for="business_name">Business Name (Optional)</label>
+        <div class="form-group input-icon">
+            <i>🏢</i>
             <input type="text" id="business_name" name="business_name" class="form-control" 
-                   placeholder="Your business or freelance name">
-            <small class="form-text text-muted">Leave blank to use your username as your workspace name.</small>
+                   placeholder="Your Business Name (optional)">
+            <label for="business_name">Business Name</label>
+            <small class="form-text text-muted">Leave blank to use your username as workspace name</small>
         </div>
         
-        <div class="form-group">
+        <div class="form-group input-icon">
+            <i>🔒</i>
+            <input type="password" id="password" name="password" class="form-control" placeholder="Create a strong password" required>
             <label for="password">Password</label>
-            <input type="password" id="password" name="password" class="form-control" required>
         </div>
         
-        <div class="form-group">
+        <div class="form-group input-icon">
+            <i>🔒</i>
+            <input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Confirm your password" required>
             <label for="confirm_password">Confirm Password</label>
-            <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
+        </div>
+        
+        <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="terms" required>
+            <label class="form-check-label" for="terms">
+                I agree to the Terms of Service and Privacy Policy
+            </label>
         </div>
         
         <div class="form-group">
-            <button type="submit" class="btn btn-primary">Create Freelancer Account</button>
+            <button type="submit" class="btn btn-primary">Create My Workspace</button>
         </div>
         
         <div class="auth-links">
@@ -60,6 +98,20 @@ <h4>What you get as a freelancer:</h4>
                 <li>No company code required</li>
             </ul>
         </div>
+        
+        <div class="social-divider">
+            <span>Why choose TimeTrack?</span>
+        </div>
+        
+        <div class="freelancer-benefits" style="text-align: center; margin-top: 1.5rem;">
+            <p style="color: #666; font-size: 0.9rem;">
+                ✓ Free forever &nbsp;&nbsp; ✓ No credit card required &nbsp;&nbsp; ✓ Unlimited projects
+            </p>
+        </div>
     </form>
 </div>
-{% endblock %}
\ No newline at end of file
+
+<script src="{{ url_for('static', filename='js/password-strength.js') }}"></script>
+<script src="{{ url_for('static', filename='js/auth-animations.js') }}"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/setup_2fa.html b/templates/setup_2fa.html
index e8b2791..3b9c9da 100644
--- a/templates/setup_2fa.html
+++ b/templates/setup_2fa.html
@@ -25,7 +25,7 @@ <h2>Step 2: Scan QR Code or Enter Secret</h2>
                 <div class="manual-entry">
                     <h3>Can't scan? Enter this code manually:</h3>
                     <div class="secret-code">{{ secret }}</div>
-                    <p><small>Account: {{ g.user.email }}<br>Issuer: TimeTrack</small></p>
+                    <p><small>Account: {{ g.user.email }}<br>Issuer: {{ g.branding.app_name }}</small></p>
                 </div>
             </div>
         </div>
@@ -175,34 +175,7 @@ <h3>🔐 Security Notice</h3>
     margin-top: 1.5rem;
 }
 
-.btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 0.25rem;
-    text-decoration: none;
-    display: inline-block;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
+/* Button styles now centralized in main style.css */
 
 .security-notice {
     background: #fff3cd;
diff --git a/templates/setup_company.html b/templates/setup_company.html
index e380d5a..e2cd3ea 100644
--- a/templates/setup_company.html
+++ b/templates/setup_company.html
@@ -4,7 +4,7 @@
 <div class="admin-container">
     <h1>
         {% if is_initial_setup %}
-            Welcome to TimeTrack
+            Welcome to {{ g.branding.app_name }}
         {% else %}
             Create New Company
         {% endif %}
@@ -14,12 +14,12 @@ <h1>
     {% if is_initial_setup %}
         <div class="info-message">
             <h3>🎉 Let's Get Started!</h3>
-            <p>Set up your company and create the first administrator account to begin using TimeTrack.</p>
+            <p>Set up your company and create the first administrator account to begin using {{ g.branding.app_name }}.</p>
         </div>
     {% elif is_super_admin %}
         <div class="info-message">
             <h3>🏢 New Company Setup</h3>
-            <p>Create a new company with its own administrator. This will be a separate organization within TimeTrack.</p>
+            <p>Create a new company with its own administrator. This will be a separate organization within {{ g.branding.app_name }}.</p>
         </div>
     {% else %}
         <div class="error-message">
diff --git a/templates/sprint_management.html b/templates/sprint_management.html
new file mode 100644
index 0000000..4259b3c
--- /dev/null
+++ b/templates/sprint_management.html
@@ -0,0 +1,912 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="management-container sprint-management-container">
+    <!-- Header Section -->
+    <div class="management-header sprint-header">
+        <h1>🏃‍♂️ Sprint Management</h1>
+        <div class="management-controls sprint-controls">
+            <!-- View Switcher -->
+            <div class="view-switcher">
+                <button class="view-btn active" data-view="active">Active Sprints</button>
+                <button class="view-btn" data-view="all">All Sprints</button>
+                <button class="view-btn" data-view="planning">Planning</button>
+                <button class="view-btn" data-view="completed">Completed</button>
+            </div>
+            
+            <!-- Actions -->
+            <div class="management-actions sprint-actions">
+                <button id="add-sprint-btn" class="btn btn-primary">+ New Sprint</button>
+                <button id="refresh-sprints" class="btn btn-secondary">🔄 Refresh</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sprint Statistics -->
+    <div class="management-stats sprint-stats">
+        <div class="stat-card">
+            <div class="stat-number" id="total-sprints">0</div>
+            <div class="stat-label">Total Sprints</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number" id="active-sprints">0</div>
+            <div class="stat-label">Active</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number" id="completed-sprints">0</div>
+            <div class="stat-label">Completed</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number" id="total-tasks">0</div>
+            <div class="stat-label">Total Tasks</div>
+        </div>
+    </div>
+
+    <!-- Sprint Grid -->
+    <div class="management-grid sprint-grid" id="sprint-grid">
+        <!-- Sprint cards will be populated here -->
+    </div>
+
+    <!-- Loading and Error States -->
+    <div id="loading-indicator" class="loading-spinner" style="display: none;">
+        <div class="spinner"></div>
+        <p>Loading sprints...</p>
+    </div>
+    
+    <div id="error-message" class="error-alert" style="display: none;">
+        <p>Failed to load sprints. Please try again.</p>
+    </div>
+</div>
+
+<!-- Sprint Modal -->
+<div id="sprint-modal" class="modal" style="display: none;">
+    <div class="modal-content large">
+        <div class="modal-header">
+            <h2 id="modal-title">Sprint Details</h2>
+            <span class="close" onclick="closeSprintModal()">&times;</span>
+        </div>
+        <div class="modal-body">
+            <form id="sprint-form">
+                <input type="hidden" id="sprint-id">
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="sprint-name">Sprint Name *</label>
+                        <input type="text" id="sprint-name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="sprint-status">Status</label>
+                        <select id="sprint-status">
+                            <option value="PLANNING">Planning</option>
+                            <option value="ACTIVE">Active</option>
+                            <option value="COMPLETED">Completed</option>
+                            <option value="CANCELLED">Cancelled</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="sprint-description">Description</label>
+                    <textarea id="sprint-description" rows="3"></textarea>
+                </div>
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="sprint-project">Project (Optional)</label>
+                        <select id="sprint-project">
+                            <option value="">Company-wide Sprint</option>
+                            {% for project in available_projects %}
+                            <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="sprint-capacity">Capacity (Hours)</label>
+                        <input type="number" id="sprint-capacity" min="0" step="1">
+                    </div>
+                </div>
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="sprint-start-date">Start Date *</label>
+                        <div class="hybrid-date-input">
+                            <input type="date" id="sprint-start-date-native" class="date-input-native" required>
+                            <input type="text" id="sprint-start-date" class="date-input-formatted" required placeholder="{{ "YYYY-MM-DD" if (g.user.preferences.date_format if g.user.preferences else "ISO") == "ISO" else "MM/DD/YYYY" if (g.user.preferences.date_format if g.user.preferences else "ISO") == "US" else "DD/MM/YYYY" if (g.user.preferences.date_format if g.user.preferences else "ISO") in ["EU", "UK"] else "Mon, Dec 25, 2024" }}">
+                            <button type="button" class="calendar-picker-btn" onclick="openCalendarPicker('sprint-start-date')" title="Open calendar">📅</button>
+                        </div>
+                        <div class="date-error" id="sprint-start-date-error" style="display: none; color: #dc3545; font-size: 0.8rem; margin-top: 0.25rem;"></div>
+                    </div>
+                    <div class="form-group">
+                        <label for="sprint-end-date">End Date *</label>
+                        <div class="hybrid-date-input">
+                            <input type="date" id="sprint-end-date-native" class="date-input-native" required>
+                            <input type="text" id="sprint-end-date" class="date-input-formatted" required placeholder="{{ "YYYY-MM-DD" if (g.user.preferences.date_format if g.user.preferences else "ISO") == "ISO" else "MM/DD/YYYY" if (g.user.preferences.date_format if g.user.preferences else "ISO") == "US" else "DD/MM/YYYY" if (g.user.preferences.date_format if g.user.preferences else "ISO") in ["EU", "UK"] else "Mon, Dec 25, 2024" }}">
+                            <button type="button" class="calendar-picker-btn" onclick="openCalendarPicker('sprint-end-date')" title="Open calendar">📅</button>
+                        </div>
+                        <div class="date-error" id="sprint-end-date-error" style="display: none; color: #dc3545; font-size: 0.8rem; margin-top: 0.25rem;"></div>
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="sprint-goal">Sprint Goal</label>
+                    <textarea id="sprint-goal" rows="3" placeholder="What is the main objective of this sprint?"></textarea>
+                </div>
+            </form>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" onclick="closeSprintModal()">Cancel</button>
+            <button type="button" class="btn btn-primary" onclick="saveSprint()">Save Sprint</button>
+            <button type="button" class="btn btn-danger" onclick="deleteSprint()" id="delete-sprint-btn" style="display: none;">Delete Sprint</button>
+        </div>
+    </div>
+</div>
+
+<!-- Styles -->
+<style>
+.sprint-management-container {
+    padding: 1rem;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.sprint-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.sprint-header h1 {
+    margin: 0;
+    color: #333;
+}
+
+.sprint-controls {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.view-switcher {
+    display: flex;
+    background: #f8f9fa;
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.view-btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    background: transparent;
+    color: #495057;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
+    font-weight: 500;
+}
+
+.view-btn.active {
+    background: #007bff;
+    color: white;
+}
+
+.view-btn:hover:not(.active) {
+    background: #e9ecef;
+    color: #212529;
+}
+
+.sprint-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.sprint-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-card {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: center;
+}
+
+.stat-number {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #007bff;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    color: #666;
+    margin-top: 0.25rem;
+}
+
+.sprint-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+
+.sprint-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.sprint-name {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin: 0;
+    color: #333;
+}
+
+.status-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+}
+
+.sprint-dates {
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 1rem;
+}
+
+.sprint-progress {
+    margin-bottom: 1rem;
+}
+
+
+.sprint-metrics {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.metric {
+    text-align: center;
+    padding: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.metric-number {
+    font-weight: bold;
+    color: #007bff;
+}
+
+.metric-label {
+    font-size: 0.75rem;
+    color: #666;
+}
+
+.sprint-goal {
+    font-size: 0.9rem;
+    color: #666;
+    font-style: italic;
+    line-height: 1.4;
+}
+
+
+
+/* Hybrid Date Input Styles */
+.hybrid-date-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.hybrid-date-input.compact {
+    display: inline-flex;
+}
+
+.date-input-native {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(100% - 35px); /* Leave space for calendar button */
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+    pointer-events: auto;
+}
+
+.date-input-formatted {
+    flex: 1;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    background: white;
+    position: relative;
+    z-index: 2;
+}
+
+.calendar-picker-btn {
+    background: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 0.5rem;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+    z-index: 3;
+    position: relative;
+}
+
+.calendar-picker-btn:hover {
+    background: #e9ecef;
+}
+
+.calendar-picker-btn.compact {
+    padding: 0.375rem 0.5rem;
+    font-size: 12px;
+}
+
+.hybrid-date-input.compact .date-input-formatted {
+    padding: 0.375rem;
+    font-size: 12px;
+    width: 100px;
+    flex: none;
+}
+
+@media (max-width: 768px) {
+    .sprint-metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+</style>
+
+<script>
+// User preferences for date formatting
+const USER_DATE_FORMAT = '{{ g.user.preferences.date_format if g.user.preferences else "ISO" }}';
+
+// Date formatting utility function
+function formatUserDate(dateString) {
+    if (!dateString) return '';
+    
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) return '';
+    
+    switch (USER_DATE_FORMAT) {
+        case 'US':
+            return date.toLocaleDateString('en-US'); // MM/DD/YYYY
+        case 'EU':
+        case 'UK':
+            return date.toLocaleDateString('en-GB'); // DD/MM/YYYY
+        case 'Readable':
+            return date.toLocaleDateString('en-US', { 
+                weekday: 'short', 
+                year: 'numeric', 
+                month: 'short', 
+                day: 'numeric' 
+            }); // Mon, Dec 25, 2024
+        case 'ISO':
+        default:
+            return date.toISOString().split('T')[0]; // YYYY-MM-DD
+    }
+}
+
+// Date input formatting function - formats ISO date for user input
+function formatDateForInput(isoDateString) {
+    if (!isoDateString) return '';
+    
+    const date = new Date(isoDateString);
+    if (isNaN(date.getTime())) return '';
+    
+    return formatUserDate(isoDateString);
+}
+
+// Date parsing function - converts user-formatted date to ISO format
+function parseUserDate(dateString) {
+    if (!dateString || dateString.trim() === '') return null;
+    
+    const trimmed = dateString.trim();
+    let date;
+    
+    switch (USER_DATE_FORMAT) {
+        case 'US': // MM/DD/YYYY
+            const usParts = trimmed.split('/');
+            if (usParts.length === 3) {
+                const month = parseInt(usParts[0], 10);
+                const day = parseInt(usParts[1], 10);
+                const year = parseInt(usParts[2], 10);
+                if (month >= 1 && month <= 12 && day >= 1 && day <= 31 && year > 1900) {
+                    date = new Date(year, month - 1, day);
+                }
+            }
+            break;
+            
+        case 'EU':
+        case 'UK': // DD/MM/YYYY
+            const euParts = trimmed.split('/');
+            if (euParts.length === 3) {
+                const day = parseInt(euParts[0], 10);
+                const month = parseInt(euParts[1], 10);
+                const year = parseInt(euParts[2], 10);
+                if (month >= 1 && month <= 12 && day >= 1 && day <= 31 && year > 1900) {
+                    date = new Date(year, month - 1, day);
+                }
+            }
+            break;
+            
+        case 'Readable': // Mon, Dec 25, 2024
+            date = new Date(trimmed);
+            break;
+            
+        case 'ISO': // YYYY-MM-DD
+        default:
+            if (/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) {
+                date = new Date(trimmed);
+            }
+            break;
+    }
+    
+    if (!date || isNaN(date.getTime())) {
+        return null;
+    }
+    
+    return date.toISOString().split('T')[0];
+}
+
+// Date validation function
+function validateDateInput(inputElement, errorElement) {
+    const value = inputElement.value.trim();
+    if (!value) {
+        errorElement.style.display = 'none';
+        return true;
+    }
+    
+    const parsedDate = parseUserDate(value);
+    if (!parsedDate) {
+        let expectedFormat;
+        switch (USER_DATE_FORMAT) {
+            case 'US': expectedFormat = 'MM/DD/YYYY'; break;
+            case 'EU':
+            case 'UK': expectedFormat = 'DD/MM/YYYY'; break;
+            case 'Readable': expectedFormat = 'Mon, Dec 25, 2024'; break;
+            case 'ISO':
+            default: expectedFormat = 'YYYY-MM-DD'; break;
+        }
+        errorElement.textContent = `Invalid date format. Expected: ${expectedFormat}`;
+        errorElement.style.display = 'block';
+        return false;
+    }
+    
+    errorElement.style.display = 'none';
+    return true;
+}
+
+// Date range validation function
+function validateDateRange(startElement, endElement, startErrorElement, endErrorElement) {
+    const startValid = validateDateInput(startElement, startErrorElement);
+    const endValid = validateDateInput(endElement, endErrorElement);
+    
+    if (!startValid || !endValid) {
+        return false;
+    }
+    
+    const startDate = parseUserDate(startElement.value);
+    const endDate = parseUserDate(endElement.value);
+    
+    if (startDate && endDate) {
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+        
+        if (start >= end) {
+            endErrorElement.textContent = 'End date must be after start date';
+            endErrorElement.style.display = 'block';
+            return false;
+        }
+    }
+    
+    return true;
+}
+
+// Hybrid Date Input Functions
+function setupHybridDateInput(inputId) {
+    const formattedInput = document.getElementById(inputId);
+    const nativeInput = document.getElementById(inputId + '-native');
+    
+    if (!formattedInput || !nativeInput) return;
+    
+    // Sync from native input to formatted input
+    nativeInput.addEventListener('change', function() {
+        if (this.value) {
+            formattedInput.value = formatDateForInput(this.value);
+            // Trigger change event on formatted input
+            formattedInput.dispatchEvent(new Event('change'));
+        }
+    });
+    
+    // Sync from formatted input to native input
+    formattedInput.addEventListener('change', function() {
+        const isoDate = parseUserDate(this.value);
+        if (isoDate) {
+            nativeInput.value = isoDate;
+        } else {
+            nativeInput.value = '';
+        }
+    });
+    
+    // Clear both inputs when formatted input is cleared
+    formattedInput.addEventListener('input', function() {
+        if (this.value === '') {
+            nativeInput.value = '';
+        }
+    });
+}
+
+function openCalendarPicker(inputId) {
+    const nativeInput = document.getElementById(inputId + '-native');
+    if (nativeInput) {
+        // Try multiple methods to open the date picker
+        nativeInput.focus();
+        
+        // For modern browsers
+        if (nativeInput.showPicker) {
+            try {
+                nativeInput.showPicker();
+            } catch (e) {
+                // Fallback to click if showPicker fails
+                nativeInput.click();
+            }
+        } else {
+            // Fallback for older browsers
+            nativeInput.click();
+        }
+    }
+}
+
+// Sprint Management Controller
+class SprintManager {
+    constructor() {
+        this.sprints = [];
+        this.currentView = 'active';
+        this.currentSprint = null;
+    }
+
+    async init() {
+        this.setupEventListeners();
+        await this.loadSprints();
+    }
+
+    setupEventListeners() {
+        // View switcher
+        document.querySelectorAll('.view-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                this.switchView(e.target.dataset.view);
+            });
+        });
+
+        // Actions
+        document.getElementById('add-sprint-btn').addEventListener('click', () => {
+            this.openSprintModal();
+        });
+
+        document.getElementById('refresh-sprints').addEventListener('click', () => {
+            this.loadSprints();
+        });
+        
+        // Date validation
+        document.getElementById('sprint-start-date').addEventListener('blur', () => {
+            const startInput = document.getElementById('sprint-start-date');
+            const endInput = document.getElementById('sprint-end-date');
+            const startError = document.getElementById('sprint-start-date-error');
+            const endError = document.getElementById('sprint-end-date-error');
+            validateDateRange(startInput, endInput, startError, endError);
+        });
+        
+        document.getElementById('sprint-end-date').addEventListener('blur', () => {
+            const startInput = document.getElementById('sprint-start-date');
+            const endInput = document.getElementById('sprint-end-date');
+            const startError = document.getElementById('sprint-start-date-error');
+            const endError = document.getElementById('sprint-end-date-error');
+            validateDateRange(startInput, endInput, startError, endError);
+        });
+        
+        // Setup hybrid date inputs
+        setupHybridDateInput('sprint-start-date');
+        setupHybridDateInput('sprint-end-date');
+
+        // Modal close handlers
+        document.querySelectorAll('.close').forEach(closeBtn => {
+            closeBtn.addEventListener('click', (e) => {
+                e.target.closest('.modal').style.display = 'none';
+            });
+        });
+
+        // Click outside modal to close
+        window.addEventListener('click', (e) => {
+            if (e.target.classList.contains('modal')) {
+                e.target.style.display = 'none';
+            }
+        });
+    }
+
+    switchView(view) {
+        // Update button states
+        document.querySelectorAll('.view-btn').forEach(btn => {
+            btn.classList.remove('active');
+        });
+        document.querySelector(`[data-view="${view}"]`).classList.add('active');
+        
+        this.currentView = view;
+        this.renderSprints();
+    }
+
+    async loadSprints() {
+        document.getElementById('loading-indicator').style.display = 'flex';
+        document.getElementById('error-message').style.display = 'none';
+
+        try {
+            const response = await fetch('/api/sprints');
+            const data = await response.json();
+            
+            if (data.success) {
+                this.sprints = data.sprints;
+                this.renderSprints();
+                this.updateStatistics();
+            } else {
+                throw new Error(data.message || 'Failed to load sprints');
+            }
+        } catch (error) {
+            console.error('Error loading sprints:', error);
+            document.getElementById('error-message').style.display = 'block';
+        } finally {
+            document.getElementById('loading-indicator').style.display = 'none';
+        }
+    }
+
+    renderSprints() {
+        const grid = document.getElementById('sprint-grid');
+        grid.innerHTML = '';
+
+        const filteredSprints = this.getFilteredSprints();
+        
+        if (filteredSprints.length === 0) {
+            grid.innerHTML = '<div class="empty-state">No sprints found for the selected view.</div>';
+            return;
+        }
+
+        filteredSprints.forEach(sprint => {
+            const sprintCard = this.createSprintCard(sprint);
+            grid.appendChild(sprintCard);
+        });
+    }
+
+    getFilteredSprints() {
+        return this.sprints.filter(sprint => {
+            switch (this.currentView) {
+                case 'active':
+                    return sprint.status === 'ACTIVE';
+                case 'planning':
+                    return sprint.status === 'PLANNING';
+                case 'completed':
+                    return sprint.status === 'COMPLETED';
+                case 'all':
+                default:
+                    return true;
+            }
+        });
+    }
+
+    createSprintCard(sprint) {
+        const card = document.createElement('div');
+        card.className = 'management-card sprint-card';
+        card.addEventListener('click', () => this.openSprintModal(sprint));
+
+        const startDate = new Date(sprint.start_date);
+        const endDate = new Date(sprint.end_date);
+        const today = new Date();
+        
+        // Calculate progress
+        let progressPercentage = 0;
+        if (today >= startDate && today <= endDate) {
+            const totalDays = (endDate - startDate) / (1000 * 60 * 60 * 24);
+            const elapsedDays = (today - startDate) / (1000 * 60 * 60 * 24);
+            progressPercentage = Math.min(100, Math.max(0, (elapsedDays / totalDays) * 100));
+        } else if (today > endDate) {
+            progressPercentage = 100;
+        }
+
+        card.innerHTML = `
+            <div class="sprint-card-header">
+                <h3 class="sprint-name">${sprint.name}</h3>
+                <span class="sprint-status ${sprint.status}">${sprint.status}</span>
+            </div>
+            
+            <div class="sprint-dates">
+                📅 ${formatUserDate(sprint.start_date)} - ${formatUserDate(sprint.end_date)}
+                ${sprint.days_remaining > 0 ? `(${sprint.days_remaining} days left)` : ''}
+            </div>
+            
+            <div class="sprint-progress">
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: ${progressPercentage}%"></div>
+                </div>
+                <div class="progress-text">${Math.round(progressPercentage)}% complete</div>
+            </div>
+            
+            <div class="sprint-metrics">
+                <div class="metric">
+                    <div class="metric-number">${sprint.task_summary.total}</div>
+                    <div class="metric-label">Total</div>
+                </div>
+                <div class="metric">
+                    <div class="metric-number">${sprint.task_summary.completed}</div>
+                    <div class="metric-label">Done</div>
+                </div>
+                <div class="metric">
+                    <div class="metric-number">${sprint.task_summary.in_progress}</div>
+                    <div class="metric-label">Active</div>
+                </div>
+                <div class="metric">
+                    <div class="metric-number">${sprint.task_summary.not_started}</div>
+                    <div class="metric-label">Todo</div>
+                </div>
+            </div>
+            
+            ${sprint.goal ? `<div class="sprint-goal">"${sprint.goal}"</div>` : ''}
+        `;
+
+        return card;
+    }
+
+    updateStatistics() {
+        const totalSprints = this.sprints.length;
+        const activeSprints = this.sprints.filter(s => s.status === 'ACTIVE').length;
+        const completedSprints = this.sprints.filter(s => s.status === 'COMPLETED').length;
+        const totalTasks = this.sprints.reduce((sum, s) => sum + s.task_summary.total, 0);
+
+        document.getElementById('total-sprints').textContent = totalSprints;
+        document.getElementById('active-sprints').textContent = activeSprints;
+        document.getElementById('completed-sprints').textContent = completedSprints;
+        document.getElementById('total-tasks').textContent = totalTasks;
+    }
+
+    openSprintModal(sprint = null) {
+        this.currentSprint = sprint;
+        const modal = document.getElementById('sprint-modal');
+        
+        if (sprint) {
+            document.getElementById('modal-title').textContent = 'Edit Sprint';
+            document.getElementById('sprint-id').value = sprint.id;
+            document.getElementById('sprint-name').value = sprint.name;
+            document.getElementById('sprint-description').value = sprint.description || '';
+            document.getElementById('sprint-status').value = sprint.status;
+            document.getElementById('sprint-project').value = sprint.project_id || '';
+            document.getElementById('sprint-capacity').value = sprint.capacity_hours || '';
+            document.getElementById('sprint-start-date').value = formatDateForInput(sprint.start_date);
+            document.getElementById('sprint-end-date').value = formatDateForInput(sprint.end_date);
+            document.getElementById('sprint-goal').value = sprint.goal || '';
+            document.getElementById('delete-sprint-btn').style.display = 'inline-block';
+        } else {
+            document.getElementById('modal-title').textContent = 'Create New Sprint';
+            document.getElementById('sprint-form').reset();
+            document.getElementById('sprint-id').value = '';
+            
+            // Set default dates (next 2 weeks)
+            const today = new Date();
+            const twoWeeksLater = new Date(today.getTime() + 14 * 24 * 60 * 60 * 1000);
+            document.getElementById('sprint-start-date').value = formatDateForInput(today.toISOString().split('T')[0]);
+            document.getElementById('sprint-end-date').value = formatDateForInput(twoWeeksLater.toISOString().split('T')[0]);
+            
+            document.getElementById('delete-sprint-btn').style.display = 'none';
+        }
+        
+        modal.style.display = 'block';
+    }
+
+    async saveSprint() {
+        // Validate date inputs before saving
+        const startInput = document.getElementById('sprint-start-date');
+        const endInput = document.getElementById('sprint-end-date');
+        const startError = document.getElementById('sprint-start-date-error');
+        const endError = document.getElementById('sprint-end-date-error');
+        
+        if (!validateDateRange(startInput, endInput, startError, endError)) {
+            if (startError.style.display !== 'none') {
+                startInput.focus();
+            } else {
+                endInput.focus();
+            }
+            return;
+        }
+        
+        const sprintData = {
+            name: document.getElementById('sprint-name').value,
+            description: document.getElementById('sprint-description').value,
+            status: document.getElementById('sprint-status').value,
+            project_id: document.getElementById('sprint-project').value || null,
+            capacity_hours: document.getElementById('sprint-capacity').value || null,
+            start_date: parseUserDate(document.getElementById('sprint-start-date').value),
+            end_date: parseUserDate(document.getElementById('sprint-end-date').value),
+            goal: document.getElementById('sprint-goal').value || null
+        };
+
+        const sprintId = document.getElementById('sprint-id').value;
+        const isEdit = sprintId !== '';
+
+        try {
+            const response = await fetch(`/api/sprints${isEdit ? `/${sprintId}` : ''}`, {
+                method: isEdit ? 'PUT' : 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(sprintData)
+            });
+            
+            const data = await response.json();
+            if (data.success) {
+                closeSprintModal();
+                await this.loadSprints();
+            } else {
+                throw new Error(data.message || 'Failed to save sprint');
+            }
+        } catch (error) {
+            console.error('Error saving sprint:', error);
+            alert('Failed to save sprint: ' + error.message);
+        }
+    }
+
+    async deleteSprint() {
+        if (!this.currentSprint) return;
+        
+        if (confirm(`Are you sure you want to delete sprint "${this.currentSprint.name}"? This will also remove the sprint assignment from all tasks.`)) {
+            try {
+                const response = await fetch(`/api/sprints/${this.currentSprint.id}`, {
+                    method: 'DELETE'
+                });
+                
+                const data = await response.json();
+                if (data.success) {
+                    closeSprintModal();
+                    await this.loadSprints();
+                } else {
+                    throw new Error(data.message || 'Failed to delete sprint');
+                }
+            } catch (error) {
+                console.error('Error deleting sprint:', error);
+                alert('Failed to delete sprint: ' + error.message);
+            }
+        }
+    }
+}
+
+// Global functions
+let sprintManager;
+
+document.addEventListener('DOMContentLoaded', function() {
+    sprintManager = new SprintManager();
+    sprintManager.init();
+});
+
+function closeSprintModal() {
+    document.getElementById('sprint-modal').style.display = 'none';
+    sprintManager.currentSprint = null;
+}
+
+function saveSprint() {
+    sprintManager.saveSprint();
+}
+
+function deleteSprint() {
+    sprintManager.deleteSprint();
+}
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/system_admin_announcement_form.html b/templates/system_admin_announcement_form.html
index fefaa8e..f024836 100644
--- a/templates/system_admin_announcement_form.html
+++ b/templates/system_admin_announcement_form.html
@@ -326,35 +326,7 @@ <h3>Targeting</h3>
     border-top: 1px solid #e9ecef;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    text-align: center;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
+/* Button styles now centralized in main style.css */
 
 @media (max-width: 768px) {
     .form-row {
diff --git a/templates/system_admin_announcements.html b/templates/system_admin_announcements.html
index 53ebd40..ec4b577 100644
--- a/templates/system_admin_announcements.html
+++ b/templates/system_admin_announcements.html
@@ -4,7 +4,7 @@
 <div class="content-header">
     <div class="header-row">
         <h1>System Announcements</h1>
-        <a href="{{ url_for('system_admin_announcement_new') }}" class="btn btn-primary">
+        <a href="{{ url_for('system_admin_announcement_new') }}" class="btn btn-md btn-primary">
             <i class="icon">➕</i> New Announcement
         </a>
     </div>
diff --git a/templates/system_admin_branding.html b/templates/system_admin_branding.html
new file mode 100644
index 0000000..f4b11ba
--- /dev/null
+++ b/templates/system_admin_branding.html
@@ -0,0 +1,434 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="management-container">
+    <div class="management-header">
+        <h1>🎨 Branding Settings</h1>
+        <div class="management-actions">
+            <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">← Back to Dashboard</a>
+        </div>
+    </div>
+    
+    <p class="subtitle">Customize the appearance and branding of {{ branding.app_name }}</p>
+
+    <!-- Current Branding Preview -->
+    <div class="management-section">
+        <h2>👁️ Current Branding Preview</h2>
+        <div class="management-card branding-preview-card">
+            <div class="card-header">
+                <h3>Live Preview</h3>
+            </div>
+            <div class="card-body">
+                <div class="preview-demo">
+                    <div class="demo-header">
+                        {% if branding.logo_filename %}
+                            <img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}" 
+                                 alt="{{ branding.logo_alt_text }}" 
+                                 class="demo-logo">
+                        {% else %}
+                            <span class="demo-text-logo">{{ branding.app_name }}</span>
+                        {% endif %}
+                    </div>
+                    <div class="demo-content">
+                        <p>Welcome to {{ branding.app_name }}</p>
+                        <button class="btn btn-primary" style="background-color: {{ branding.primary_color }}; border-color: {{ branding.primary_color }};">
+                            Sample Button
+                        </button>
+                        <a href="#" style="color: {{ branding.primary_color }};">Sample Link</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Branding Settings Form -->
+    <div class="management-section">
+        <h2>🔧 Branding Configuration</h2>
+        <div class="management-card">
+            <form method="POST" enctype="multipart/form-data" class="settings-form">
+                <!-- Application Name -->
+                <div class="form-section">
+                    <h3>📝 Basic Information</h3>
+                    <div class="form-group">
+                        <label for="app_name">Application Name</label>
+                        <input type="text" id="app_name" name="app_name" 
+                               value="{{ branding.app_name }}" 
+                               class="form-control"
+                               placeholder="TimeTrack" 
+                               required>
+                        <small class="form-text text-muted">
+                            This name will appear in the title, navigation, and throughout the interface.
+                        </small>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="logo_alt_text">Logo Alternative Text</label>
+                        <input type="text" id="logo_alt_text" name="logo_alt_text" 
+                               value="{{ branding.logo_alt_text }}" 
+                               class="form-control"
+                               placeholder="Company Logo">
+                        <small class="form-text text-muted">
+                            Text displayed when the logo cannot be loaded (accessibility).
+                        </small>
+                    </div>
+                </div>
+
+                <!-- Visual Assets -->
+                <div class="form-section">
+                    <h3>🖼️ Visual Assets</h3>
+                    <div class="form-row">
+                        <div class="form-group col-md-6">
+                            <label for="logo_file">Logo Image</label>
+                            <input type="file" id="logo_file" name="logo_file" 
+                                   accept="image/*" 
+                                   class="form-control-file">
+                            {% if branding.logo_filename %}
+                                <div class="current-asset">
+                                    <img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}" 
+                                         alt="{{ branding.logo_alt_text }}" 
+                                         class="current-logo">
+                                    <span class="asset-label">Current logo</span>
+                                </div>
+                            {% endif %}
+                            <small class="form-text text-muted">
+                                PNG, JPG, GIF, SVG. Recommended: 200x50px
+                            </small>
+                        </div>
+
+                        <div class="form-group col-md-6">
+                            <label for="favicon_file">Favicon</label>
+                            <input type="file" id="favicon_file" name="favicon_file" 
+                                   accept="image/*" 
+                                   class="form-control-file">
+                            {% if branding.favicon_filename %}
+                                <div class="current-asset">
+                                    <img src="{{ url_for('static', filename='uploads/branding/' + branding.favicon_filename) }}" 
+                                         alt="Current favicon" 
+                                         class="current-favicon">
+                                    <span class="asset-label">Current favicon</span>
+                                </div>
+                            {% endif %}
+                            <small class="form-text text-muted">
+                                ICO, PNG. Recommended: 16x16px or 32x32px
+                            </small>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Theme Settings -->
+                <div class="form-section">
+                    <h3>🎨 Theme Settings</h3>
+                    <div class="form-group">
+                        <label for="primary_color">Primary Color</label>
+                        <div class="color-picker-wrapper">
+                            <input type="color" id="primary_color" name="primary_color" 
+                                   value="{{ branding.primary_color }}" 
+                                   class="form-control color-picker">
+                            <input type="text" value="{{ branding.primary_color }}" 
+                                   class="form-control color-value" 
+                                   id="primary_color_text"
+                                   pattern="^#[0-9A-Fa-f]{6}$"
+                                   placeholder="#007bff">
+                        </div>
+                        <small class="form-text text-muted">
+                            This color will be used for buttons, links, and other UI elements.
+                        </small>
+                    </div>
+                </div>
+
+                <!-- Imprint/Legal Page -->
+                <div class="form-section">
+                    <h3>⚖️ Imprint / Legal Page</h3>
+                    <div class="form-group">
+                        <label class="toggle-label">
+                            <input type="checkbox" name="imprint_enabled" id="imprint_enabled"
+                                   {% if branding.imprint_enabled %}checked{% endif %}>
+                            <span class="toggle-slider"></span>
+                            <span class="toggle-text">Enable Imprint Page</span>
+                        </label>
+                        <small class="form-text text-muted">
+                            When enabled, an "Imprint" link will appear in the footer linking to your custom legal page.
+                        </small>
+                    </div>
+                    
+                    <div class="imprint-settings" id="imprint-settings" style="{% if not branding.imprint_enabled %}display: none;{% endif %}">
+                        <div class="form-group">
+                            <label for="imprint_title">Page Title</label>
+                            <input type="text" id="imprint_title" name="imprint_title" 
+                                   value="{{ branding.imprint_title or 'Imprint' }}" 
+                                   class="form-control"
+                                   placeholder="Imprint">
+                            <small class="form-text text-muted">
+                                The title that will be displayed on the imprint page.
+                            </small>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="imprint_content">Page Content (HTML supported)</label>
+                            <textarea id="imprint_content" name="imprint_content" 
+                                      class="form-control content-editor"
+                                      rows="15"
+                                      placeholder="Enter your imprint/legal information here...">{{ branding.imprint_content or '' }}</textarea>
+                            <small class="form-text text-muted">
+                                You can use HTML to format your content. Common tags: &lt;h2&gt;, &lt;h3&gt;, &lt;p&gt;, &lt;strong&gt;, &lt;br&gt;, &lt;a href=""&gt;
+                            </small>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Save Button -->
+                <div class="form-actions">
+                    <button type="submit" class="btn btn-primary">💾 Save Branding Settings</button>
+                    <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">Cancel</a>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<style>
+/* Branding-specific styles */
+.branding-preview-card {
+    margin-bottom: 2rem;
+}
+
+.preview-demo {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 2rem;
+    text-align: center;
+}
+
+.demo-header {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.demo-logo {
+    max-height: 50px;
+    max-width: 200px;
+    object-fit: contain;
+}
+
+.demo-text-logo {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.demo-content {
+    margin-top: 1rem;
+}
+
+.demo-content p {
+    color: #6c757d;
+    margin-bottom: 1rem;
+}
+
+.demo-content .btn {
+    margin-right: 1rem;
+}
+
+/* Current assets display */
+.current-asset {
+    margin-top: 0.5rem;
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.current-logo {
+    max-height: 40px;
+    max-width: 120px;
+    object-fit: contain;
+}
+
+.current-favicon {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+}
+
+.asset-label {
+    font-size: 0.875rem;
+    color: #6c757d;
+}
+
+/* Color picker styling */
+.color-picker-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    max-width: 300px;
+}
+
+.color-picker {
+    width: 60px;
+    height: 38px;
+    padding: 0.25rem;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.color-value {
+    flex: 1;
+    font-family: monospace;
+}
+
+/* Form sections */
+.form-section {
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.form-section:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+.form-section h3 {
+    margin-bottom: 1rem;
+    color: #495057;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+/* File input styling */
+.form-control-file {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0;
+}
+
+/* Form row for two-column layout */
+.form-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+}
+
+.form-row > .col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+}
+
+@media (max-width: 768px) {
+    .form-row > .col-md-6 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+/* Sync color inputs */
+
+/* Toggle label styling - ensuring proper alignment */
+.form-group .toggle-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    margin-bottom: 0.5rem;
+    padding: 0;
+}
+
+.toggle-label input[type="checkbox"] {
+    display: none;
+}
+
+.toggle-slider {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 24px;
+    background: #ccc;
+    border-radius: 24px;
+    transition: background 0.3s;
+    flex-shrink: 0;
+}
+
+.toggle-slider::before {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: white;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.3s;
+}
+
+.toggle-label input[type="checkbox"]:checked + .toggle-slider {
+    background: var(--primary-color);
+}
+
+.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
+    transform: translateX(26px);
+}
+
+.toggle-text {
+    font-weight: 500;
+    color: #495057;
+    line-height: 1;
+}
+
+/* Content editor styling */
+.content-editor {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background: #f8f9fa;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    padding: 0.75rem;
+    resize: vertical;
+}
+
+.imprint-settings {
+    margin-top: 1.5rem;
+    padding: 1.5rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+</style>
+
+<script>
+// Sync color picker with text input
+document.addEventListener('DOMContentLoaded', function() {
+    const colorPicker = document.getElementById('primary_color');
+    const colorText = document.getElementById('primary_color_text');
+    
+    colorPicker.addEventListener('input', function() {
+        colorText.value = this.value;
+    });
+    
+    colorText.addEventListener('input', function() {
+        if (this.value.match(/^#[0-9A-Fa-f]{6}$/)) {
+            colorPicker.value = this.value;
+        }
+    });
+    
+    // Toggle imprint settings visibility
+    const imprintEnabled = document.getElementById('imprint_enabled');
+    const imprintSettings = document.getElementById('imprint-settings');
+    
+    imprintEnabled.addEventListener('change', function() {
+        if (this.checked) {
+            imprintSettings.style.display = 'block';
+        } else {
+            imprintSettings.style.display = 'none';
+        }
+    });
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/system_admin_companies.html b/templates/system_admin_companies.html
index 1dde556..974ace8 100644
--- a/templates/system_admin_companies.html
+++ b/templates/system_admin_companies.html
@@ -5,7 +5,7 @@
     <div class="header-section">
         <h1>🏢 System Admin - All Companies</h1>
         <p class="subtitle">Manage companies across the entire system</p>
-        <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">← Back to Dashboard</a>
+        <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-md btn-secondary">← Back to Dashboard</a>
     </div>
 
     <!-- Companies Table -->
@@ -221,39 +221,7 @@ <h4>Active Companies</h4>
     gap: 0.5rem;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
+/* Button styles now centralized in main style.css */
 
 .pagination-section {
     margin: 2rem 0;
diff --git a/templates/system_admin_company_detail.html b/templates/system_admin_company_detail.html
index b2b529a..7eac55d 100644
--- a/templates/system_admin_company_detail.html
+++ b/templates/system_admin_company_detail.html
@@ -536,30 +536,7 @@ <h4>View Time Entries</h4>
     color: #6a1b99;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
+/* Button styles now centralized in main style.css */
 
 .btn-outline {
     background: transparent;
diff --git a/templates/system_admin_dashboard.html b/templates/system_admin_dashboard.html
index d09785e..da34ec3 100644
--- a/templates/system_admin_dashboard.html
+++ b/templates/system_admin_dashboard.html
@@ -183,7 +183,10 @@ <h2>🛠️ System Management</h2>
             <a href="{{ url_for('system_admin_settings') }}" class="btn btn-primary">
                 ⚙️ System Settings
             </a>
-            <a href="{{ url_for('system_admin_health') }}" class="btn btn-warning">
+            <a href="{{ url_for('system_admin_branding') }}" class="btn btn-primary">
+                🎨 Branding Settings
+            </a>
+            <a href="{{ url_for('system_admin_health') }}" class="btn btn-primary">
                 🏥 System Health
             </a>
         </div>
@@ -327,30 +330,7 @@ <h2>🛠️ System Management</h2>
     flex-wrap: wrap;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
+/* Button styles now centralized in main style.css */
 
 .subtitle {
     color: #6c757d;
diff --git a/templates/system_admin_edit_user.html b/templates/system_admin_edit_user.html
index 25c151c..0a6beb0 100644
--- a/templates/system_admin_edit_user.html
+++ b/templates/system_admin_edit_user.html
@@ -308,43 +308,7 @@ <h4>Danger Zone</h4>
     flex-wrap: wrap;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-danger {
-    background: #dc3545;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #c82333;
-}
+/* Button styles now centralized in main style.css */
 
 .danger-zone {
     margin-left: auto;
diff --git a/templates/system_admin_health.html b/templates/system_admin_health.html
index 1c1c645..fe6164c 100644
--- a/templates/system_admin_health.html
+++ b/templates/system_admin_health.html
@@ -506,27 +506,7 @@ <h3>{{ health_summary.last_error.event_type }}</h3>
     white-space: pre-wrap;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-    text-decoration: none;
-    color: white;
-}
+/* Button styles now centralized in main style.css */
 
 @media (max-width: 768px) {
     .health-cards {
diff --git a/templates/system_admin_settings.html b/templates/system_admin_settings.html
index 4e6362c..f7cc023 100644
--- a/templates/system_admin_settings.html
+++ b/templates/system_admin_settings.html
@@ -119,7 +119,7 @@ <h3>ℹ️ System Information</h3>
         <div class="info-grid">
             <div class="info-card">
                 <h4>Application Version</h4>
-                <p>TimeTrack v1.0</p>
+                <p>{{ g.branding.app_name }} v1.0</p>
             </div>
             <div class="info-card">
                 <h4>Database</h4>
@@ -500,52 +500,7 @@ <h4>View Time Entries</h4>
     font-size: 0.875rem;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-danger {
-    background: #dc3545;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #c82333;
-}
-
-.btn-warning {
-    background: #ffc107;
-    color: #212529;
-}
-
-.btn-warning:hover {
-    background: #e0a800;
-}
+/* Button styles now centralized in main style.css */
 
 @media (max-width: 768px) {
     .setting-group {
diff --git a/templates/system_admin_time_entries.html b/templates/system_admin_time_entries.html
index dbc4f2e..aef84a9 100644
--- a/templates/system_admin_time_entries.html
+++ b/templates/system_admin_time_entries.html
@@ -390,30 +390,7 @@ <h4>Completed Today</h4>
     margin: 0;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
+/* Button styles now centralized in main style.css */
 
 .btn-outline {
     background: transparent;
diff --git a/templates/system_admin_users.html b/templates/system_admin_users.html
index 2752e0f..6f94df1 100644
--- a/templates/system_admin_users.html
+++ b/templates/system_admin_users.html
@@ -5,7 +5,7 @@
     <div class="header-section">
         <h1>👥 System Admin - All Users</h1>
         <p class="subtitle">Manage users across all companies</p>
-        <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">← Back to Dashboard</a>
+        <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-md btn-secondary">← Back to Dashboard</a>
     </div>
 
     <!-- Filter Options -->
@@ -328,37 +328,7 @@ <h3>No users found</h3>
     transition: background-color 0.2s;
 }
 
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-danger {
-    background: #dc3545;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #c82333;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
+/* Button styles now centralized in main style.css */
 
 .pagination-section {
     margin-top: 2rem;
diff --git a/templates/task_modal.html b/templates/task_modal.html
new file mode 100644
index 0000000..40f1f67
--- /dev/null
+++ b/templates/task_modal.html
@@ -0,0 +1,740 @@
+<!-- Task Detail Modal -->
+<div id="task-modal" class="modal task-modal" style="display: none;">
+    <div class="modal-content task-modal-content">
+        <div class="modal-header">
+            <h2 id="modal-title">Task Details</h2>
+            <span class="close" onclick="closeTaskModal()">&times;</span>
+        </div>
+        <div class="modal-body">
+            <form id="task-form">
+                <input type="hidden" id="task-id">
+                
+                <!-- Basic Information -->
+                <div class="form-section">
+                    <h3>📝 Basic Information</h3>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="task-name">Task Name *</label>
+                            <input type="text" id="task-name" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="task-priority">Priority</label>
+                            <select id="task-priority">
+                                <option value="LOW">Low</option>
+                                <option value="MEDIUM">Medium</option>
+                                <option value="HIGH">High</option>
+                                <option value="URGENT">Urgent</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="task-description">Description</label>
+                        <textarea id="task-description" rows="2"></textarea>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="task-status">Status</label>
+                        <select id="task-status">
+                            <option value="NOT_STARTED">Not Started</option>
+                            <option value="IN_PROGRESS">In Progress</option>
+                            <option value="ON_HOLD">On Hold</option>
+                            <option value="COMPLETED">Completed</option>
+                            <option value="ARCHIVED">Archived</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <!-- Assignment & Planning -->
+                <div class="form-section">
+                    <h3>👥 Assignment & Planning</h3>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="task-project">Project</label>
+                            <select id="task-project">
+                                <option value="">Select Project</option>
+                                {% for project in available_projects %}
+                                <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="task-assignee">Assigned To</label>
+                            <select id="task-assignee">
+                                <option value="">Unassigned</option>
+                                {% for user in team_members %}
+                                <option value="{{ user.id }}">{{ user.username }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="task-sprint">Sprint</label>
+                            <select id="task-sprint">
+                                <option value="">No Sprint</option>
+                                <!-- Sprint options will be populated dynamically -->
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="task-estimated-hours">Estimated Hours</label>
+                            <input type="number" id="task-estimated-hours" min="0" step="0.5">
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="task-due-date">Due Date</label>
+                        <div class="hybrid-date-input">
+                            <input type="date" id="task-due-date-native" class="date-input-native">
+                            <input type="text" id="task-due-date" class="date-input-formatted" placeholder="{{ "YYYY-MM-DD" if (g.user.preferences.date_format if g.user.preferences else "ISO") == "ISO" else "MM/DD/YYYY" if (g.user.preferences.date_format if g.user.preferences else "ISO") == "US" else "DD/MM/YYYY" if (g.user.preferences.date_format if g.user.preferences else "ISO") in ["EU", "UK"] else "Mon, Dec 25, 2024" }}">
+                            <button type="button" class="calendar-picker-btn" onclick="openCalendarPicker('task-due-date')" title="Open calendar">📅</button>
+                        </div>
+                        <div class="date-error" id="task-due-date-error" style="display: none; color: #dc3545; font-size: 0.8rem; margin-top: 0.25rem;"></div>
+                    </div>
+                </div>
+                
+                <!-- Dependencies -->
+                <div class="form-section">
+                    <h3>🔗 Dependencies</h3>
+                    <div class="dependencies-grid">
+                        <!-- Blocked By -->
+                        <div class="dependency-column">
+                            <h4>🚫 Blocked By</h4>
+                            <p class="dependency-help">Tasks that must be completed before this task can start</p>
+                            <div id="blocked-by-container" class="dependency-list">
+                                <!-- Blocked by tasks will be populated here -->
+                            </div>
+                            <div class="add-dependency-form">
+                                <input type="text" id="blocked-by-input" placeholder="TSK-001" class="dependency-input">
+                                <button type="button" class="btn btn-sm btn-secondary" onclick="addBlockedBy()">Add</button>
+                            </div>
+                        </div>
+                        
+                        <!-- Blocks -->
+                        <div class="dependency-column">
+                            <h4>🔒 Blocks</h4>
+                            <p class="dependency-help">Tasks that cannot start until this task is completed</p>
+                            <div id="blocks-container" class="dependency-list">
+                                <!-- Blocks tasks will be populated here -->
+                            </div>
+                            <div class="add-dependency-form">
+                                <input type="text" id="blocks-input" placeholder="TSK-002" class="dependency-input">
+                                <button type="button" class="btn btn-sm btn-secondary" onclick="addBlocks()">Add</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Subtasks -->
+                <div class="form-section">
+                    <h3>📋 Subtasks</h3>
+                    <div id="subtasks-container">
+                        <!-- Subtasks will be populated here -->
+                    </div>
+                    <button type="button" class="btn btn-sm btn-secondary" onclick="addSubtask()">+ Add Subtask</button>
+                </div>
+            </form>
+            
+            <!-- Comments Section (outside form) -->
+            <div class="form-section" id="comments-section" style="display: none;">
+                <h3>💬 Comments</h3>
+                <div id="comments-container">
+                    <!-- Comments will be populated here -->
+                </div>
+                <div class="comment-form">
+                    <textarea id="new-comment" placeholder="Add a comment..." rows="2"></textarea>
+                    <div class="comment-form-actions">
+                        <select id="comment-visibility" class="comment-visibility-select" style="display: none;">
+                            <option value="COMPANY">🏢 Company</option>
+                            <option value="TEAM">👥 Team Only</option>
+                        </select>
+                        <button type="button" class="btn btn-sm btn-primary" onclick="addComment()">Post Comment</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" onclick="closeTaskModal()">Cancel</button>
+            <button type="button" class="btn btn-primary" onclick="saveTask()">Save Task</button>
+            <button type="button" class="btn btn-danger" onclick="deleteTask()" id="delete-task-btn" style="display: none;">Delete Task</button>
+        </div>
+    </div>
+</div>
+
+<!-- Task Modal JavaScript Functions -->
+<script>
+// Hybrid Date Input Functions for task modal
+function setupHybridDateInput(inputId) {
+    const formattedInput = document.getElementById(inputId);
+    const nativeInput = document.getElementById(inputId + '-native');
+    
+    if (!formattedInput || !nativeInput) return;
+    
+    // Sync from native input to formatted input
+    nativeInput.addEventListener('change', function() {
+        if (this.value) {
+            formattedInput.value = formatDateForInput(this.value);
+            // Trigger change event on formatted input
+            formattedInput.dispatchEvent(new Event('change'));
+        }
+    });
+    
+    // Sync from formatted input to native input
+    formattedInput.addEventListener('change', function() {
+        const isoDate = parseUserDate(this.value);
+        if (isoDate) {
+            nativeInput.value = isoDate;
+        } else {
+            nativeInput.value = '';
+        }
+    });
+    
+    // Clear both inputs when formatted input is cleared
+    formattedInput.addEventListener('input', function() {
+        if (this.value === '') {
+            nativeInput.value = '';
+        }
+    });
+}
+
+function openCalendarPicker(inputId) {
+    const nativeInput = document.getElementById(inputId + '-native');
+    if (nativeInput) {
+        // Try multiple methods to open the date picker
+        nativeInput.focus();
+        
+        // For modern browsers
+        if (nativeInput.showPicker) {
+            try {
+                nativeInput.showPicker();
+            } catch (e) {
+                // Fallback to click if showPicker fails
+                nativeInput.click();
+            }
+        } else {
+            // Fallback for older browsers
+            nativeInput.click();
+        }
+    }
+}
+
+// Initialize hybrid date inputs when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+    // Setup hybrid date inputs for task modal
+    setupHybridDateInput('task-due-date');
+});
+</script>
+
+<!-- Task Modal Styles -->
+<style>
+/* Task Modal Specific Styles - Compact Design */
+.task-modal .modal-content {
+    width: 95%;
+    max-width: 900px;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+.task-modal .modal-header {
+    padding: 0.75rem 1rem;
+}
+
+.task-modal .modal-header h2 {
+    font-size: 1.25rem;
+    margin: 0;
+}
+
+.task-modal-content .modal-body {
+    padding: 1rem;
+}
+
+.form-section {
+    margin-bottom: 1.25rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.form-section:last-of-type {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+.form-section h3 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 1rem;
+    font-weight: 600;
+    padding-bottom: 0.25rem;
+    border-bottom: 2px solid #f8f9fa;
+}
+
+/* Dependencies Grid - Compact */
+.dependencies-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.dependency-column {
+    background: #f8f9fa;
+    border-radius: 6px;
+    padding: 0.75rem;
+}
+
+.dependency-column h4 {
+    margin: 0 0 0.25rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.dependency-help {
+    font-size: 0.75rem;
+    color: #6c757d;
+    margin: 0 0 0.5rem 0;
+    line-height: 1.3;
+}
+
+.dependency-list {
+    min-height: 40px;
+    margin-bottom: 0.5rem;
+}
+
+.dependency-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.4rem 0.5rem;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    margin-bottom: 0.3rem;
+    font-size: 0.85rem;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.dependency-task-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+}
+
+.dependency-task-number {
+    font-family: 'Courier New', monospace;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #007bff;
+    background: #e3f2fd;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.dependency-task-title {
+    color: #333;
+    font-weight: 500;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dependency-remove-btn {
+    background: #dc3545;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: background-color 0.2s;
+    flex-shrink: 0;
+}
+
+.dependency-remove-btn:hover {
+    background: #c82333;
+}
+
+.add-dependency-form {
+    display: flex;
+    gap: 0.3rem;
+}
+
+.dependency-input {
+    flex: 1;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-family: 'Courier New', monospace;
+    background: white;
+}
+
+.dependency-input:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+}
+
+.dependency-input::placeholder {
+    color: #adb5bd;
+    font-style: italic;
+}
+
+/* Subtasks Section - Compact */
+.subtask-item {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin-bottom: 0.3rem;
+    padding: 0.3rem 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.subtask-item input[type="text"] {
+    flex: 1;
+    margin: 0;
+    padding: 0.3rem 0.5rem;
+    font-size: 0.85rem;
+}
+
+.subtask-item button {
+    padding: 0.2rem 0.4rem;
+    font-size: 0.7rem;
+}
+
+/* Hybrid Date Input Styles */
+.hybrid-date-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.date-input-native {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(100% - 35px);
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+    pointer-events: auto;
+}
+
+.date-input-formatted {
+    flex: 1;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    background: white;
+    position: relative;
+    z-index: 1;
+}
+
+.calendar-picker-btn {
+    background: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 0.5rem;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+    z-index: 3;
+    position: relative;
+}
+
+.calendar-picker-btn:hover {
+    background: #e9ecef;
+}
+
+/* Compact Form Styles */
+.form-group {
+    margin-bottom: 0.75rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #495057;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.85rem;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    transition: border-color 0.15s ease-in-out;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #80bdff;
+    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
+}
+
+.form-group textarea {
+    resize: vertical;
+    min-height: 50px;
+}
+
+.form-row {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.form-row .form-group {
+    flex: 1;
+    margin-bottom: 0;
+}
+
+/* Compact button styles */
+.btn-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+}
+
+.modal-footer {
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+}
+
+.modal-footer .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+    .task-modal .modal-content {
+        width: 98%;
+        margin: 1% auto;
+        max-height: 98vh;
+    }
+    
+    .dependencies-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .form-row {
+        flex-direction: column;
+    }
+    
+    .dependency-task-title {
+        font-size: 0.85rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .task-modal-content .modal-body {
+        padding: 1rem;
+    }
+    
+    .form-section {
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+    }
+    
+    .dependency-item {
+        padding: 0.5rem;
+    }
+    
+    .dependency-task-number {
+        font-size: 0.7rem;
+        padding: 0.15rem 0.3rem;
+    }
+}
+
+/* Comments Section Styles */
+#comments-container {
+    max-height: 300px;
+    overflow-y: auto;
+    margin-bottom: 1rem;
+}
+
+.no-comments {
+    text-align: center;
+    color: #6c757d;
+    font-style: italic;
+    padding: 2rem;
+}
+
+.comment-edited {
+    font-size: 0.75rem;
+    color: #6c757d;
+    font-style: italic;
+}
+
+.comment-item {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    border: 1px solid #e9ecef;
+}
+
+.comment-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.comment-author-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.comment-author-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.comment-author-details {
+    display: flex;
+    flex-direction: column;
+}
+
+.comment-author {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: #333;
+}
+
+.comment-time {
+    font-size: 0.75rem;
+    color: #6c757d;
+}
+
+.comment-visibility-badge {
+    font-size: 0.7rem;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    background: #e9ecef;
+    color: #6c757d;
+}
+
+.comment-visibility-badge.team {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.comment-content {
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: #495057;
+    white-space: pre-wrap;
+}
+
+.comment-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.comment-action {
+    font-size: 0.75rem;
+    color: #6c757d;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.comment-action:hover {
+    background: #e9ecef;
+}
+
+.comment-form {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 0.75rem;
+    border: 1px solid #e9ecef;
+}
+
+#new-comment {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    resize: vertical;
+    min-height: 60px;
+    font-size: 0.85rem;
+}
+
+.comment-form-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0.5rem;
+}
+
+.comment-visibility-select {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+}
+
+/* Edit comment form */
+.comment-edit-form {
+    margin-top: 0.5rem;
+    display: none;
+}
+
+.comment-edit-textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    resize: vertical;
+    min-height: 60px;
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+}
+
+.comment-edit-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Reply form */
+.comment-reply-form {
+    margin-top: 0.5rem;
+    padding-left: 2rem;
+    display: none;
+}
+
+.comment-replies {
+    margin-top: 0.5rem;
+    padding-left: 2rem;
+}
+
+.comment-reply {
+    background: white;
+    border-radius: 6px;
+    padding: 0.5rem;
+    margin-bottom: 0.3rem;
+    border: 1px solid #e9ecef;
+}
+</style>
\ No newline at end of file
diff --git a/templates/unified_task_management.html b/templates/unified_task_management.html
new file mode 100644
index 0000000..7296a6f
--- /dev/null
+++ b/templates/unified_task_management.html
@@ -0,0 +1,2463 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="management-container task-management-container">
+    <!-- Header Section -->
+    <div class="management-header task-header">
+        <h1>📋 Task Management</h1>
+        <div class="management-controls task-controls">
+            <!-- Smart Search -->
+            <div class="smart-search-container">
+                <div class="smart-search-box">
+                    <input type="text" id="smart-search-input" class="smart-search-input" placeholder="Search tasks... (e.g., my-tasks priority:high, project:TimeTrack, overdue)">
+                    <button type="button" class="smart-search-clear" id="smart-search-clear" title="Clear search">×</button>
+                </div>
+                <div class="smart-search-suggestions" id="smart-search-suggestions" style="display: none;">
+                    <!-- Suggestions will be populated here -->
+                </div>
+            </div>
+            
+            <!-- Actions -->
+            <div class="management-actions task-actions">
+                <button id="add-task-btn" class="btn btn-primary">+ Add Task</button>
+                <button id="refresh-tasks" class="btn btn-secondary">🔄 Refresh</button>
+                <button id="toggle-archived" class="btn btn-outline" title="Show/Hide Archived Tasks">📦 Show Archived</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Task Statistics -->
+    <div class="management-stats task-stats">
+        <div class="stat-card">
+            <div class="stat-number" id="total-tasks">0</div>
+            <div class="stat-label">Total Tasks</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number" id="completed-tasks">0</div>
+            <div class="stat-label">Completed</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number" id="in-progress-tasks">0</div>
+            <div class="stat-label">In Progress</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number" id="overdue-tasks">0</div>
+            <div class="stat-label">Overdue</div>
+        </div>
+        <div class="stat-card" id="archived-stat-card" style="display: none;">
+            <div class="stat-number" id="archived-tasks">0</div>
+            <div class="stat-label">Archived</div>
+        </div>
+    </div>
+
+    <!-- Task Board -->
+    <div class="task-board" id="task-board">
+        <div class="task-column" data-status="NOT_STARTED">
+            <div class="column-header">
+                <h3>📝 Not Started</h3>
+                <span class="task-count">0</span>
+            </div>
+            <div class="column-content" id="column-NOT_STARTED">
+                <!-- Task cards will be populated here -->
+            </div>
+        </div>
+        
+        <div class="task-column" data-status="IN_PROGRESS">
+            <div class="column-header">
+                <h3>⚡ In Progress</h3>
+                <span class="task-count">0</span>
+            </div>
+            <div class="column-content" id="column-IN_PROGRESS">
+                <!-- Task cards will be populated here -->
+            </div>
+        </div>
+        
+        <div class="task-column" data-status="ON_HOLD">
+            <div class="column-header">
+                <h3>⏸️ On Hold</h3>
+                <span class="task-count">0</span>
+            </div>
+            <div class="column-content" id="column-ON_HOLD">
+                <!-- Task cards will be populated here -->
+            </div>
+        </div>
+        
+        <div class="task-column" data-status="COMPLETED">
+            <div class="column-header">
+                <h3>✅ Completed</h3>
+                <span class="task-count">0</span>
+            </div>
+            <div class="column-content" id="column-COMPLETED">
+                <!-- Task cards will be populated here -->
+            </div>
+        </div>
+        
+        <div class="task-column archived-column" data-status="ARCHIVED" style="display: none;">
+            <div class="column-header">
+                <h3>📦 Archived</h3>
+                <span class="task-count">0</span>
+            </div>
+            <div class="column-content" id="column-ARCHIVED">
+                <!-- Archived task cards will be populated here -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading and Error States -->
+    <div id="loading-indicator" class="loading-spinner" style="display: none;">
+        <div class="spinner"></div>
+        <p>Loading tasks...</p>
+    </div>
+    
+    <div id="error-message" class="error-alert" style="display: none;">
+        <p>Failed to load tasks. Please try again.</p>
+    </div>
+</div>
+
+<!-- Include Task Modal -->
+{% include 'task_modal.html' %}
+
+<!-- Styles -->
+<style>
+/* Smart Search Styles */
+.smart-search-container {
+    margin-bottom: 1rem;
+    position: relative;
+    width: 100%;
+    flex: 1;
+}
+
+.smart-search-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.smart-search-input {
+    width: 100%;
+    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    background: white;
+}
+
+.smart-search-input:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+}
+
+.smart-search-clear {
+    position: absolute;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    font-size: 16px;
+    color: #999;
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 3px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.smart-search-clear:hover {
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+.smart-search-suggestions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #ddd;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 1000;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.suggestion-item {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.1s;
+    font-size: 14px;
+}
+
+.suggestion-item:hover,
+.suggestion-item.active {
+    background-color: #f8f9fa;
+}
+
+.suggestion-item:last-child {
+    border-bottom: none;
+}
+
+.suggestion-type {
+    background: #e9ecef;
+    color: #495057;
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.suggestion-value {
+    font-weight: 500;
+    color: #333;
+}
+
+.suggestion-description {
+    color: #6c757d;
+    font-size: 0.8rem;
+}
+
+/* Task Management Layout */
+.task-controls {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.task-controls .smart-search-container {
+    flex: 1;
+    min-width: 300px;
+    max-width: 600px;
+    margin-bottom: 0; /* Remove margin to align with buttons */
+}
+
+.task-controls .management-actions {
+    flex-shrink: 0;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+/* Ensure all buttons and search input have same height */
+.smart-search-input,
+.task-controls .btn {
+    height: 38px; /* Standard height for consistency */
+}
+
+.task-controls .btn {
+    padding: 0.5rem 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap; /* Prevent button text from wrapping */
+}
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .task-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .task-controls .smart-search-container {
+        max-width: 100%;
+        margin-bottom: 0.5rem;
+    }
+    
+    .task-controls .management-actions {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 576px) {
+    .task-controls .management-actions {
+        flex-wrap: wrap;
+        gap: 0.25rem;
+    }
+    
+    .task-controls .btn {
+        font-size: 0.875rem;
+        padding: 0.4rem 0.8rem;
+    }
+}
+
+/* Subtask progress styles */
+.task-subtasks {
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.subtask-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.subtask-progress-bar {
+    flex: 1;
+    height: 6px;
+    background: #e9ecef;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.subtask-progress-fill {
+    height: 100%;
+    background: #28a745;
+    transition: width 0.3s ease;
+}
+
+.subtask-count {
+    font-size: 0.75rem;
+    color: #6c757d;
+    white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+    .task-controls {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.75rem;
+    }
+    
+    .task-controls .smart-search-container {
+        min-width: auto;
+        max-width: none;
+    }
+}
+
+
+
+.task-board {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.task-column {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 1rem;
+    min-height: 500px;
+}
+
+.column-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid #ddd;
+}
+
+.column-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #333;
+}
+
+.task-count {
+    background: #007bff;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+}
+
+/* Archived Column Styles */
+.archived-column {
+    background: #f1f3f4;
+    border: 2px dashed #9aa0a6;
+    opacity: 0.8;
+}
+
+.archived-column .column-header {
+    border-bottom-color: #9aa0a6;
+}
+
+.archived-column .task-count {
+    background: #9aa0a6;
+}
+
+/* Archived Task Card Styles */
+.archived-column .task-card {
+    opacity: 0.7;
+    border-left: 4px solid #9aa0a6;
+}
+
+/* Button Styles */
+.btn.btn-outline {
+    background: transparent;
+    border: 1px solid #6c757d;
+    color: #6c757d;
+}
+
+.btn.btn-outline:hover {
+    background: #6c757d;
+    color: white;
+}
+
+.btn.btn-outline.active {
+    background: #6c757d;
+    color: white;
+}
+
+/* Task Action Buttons */
+.task-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.25rem;
+}
+
+.archive-btn, .restore-btn {
+    background: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.2s;
+}
+
+.archive-btn:hover {
+    background: #f8f9fa;
+    border-color: #6c757d;
+}
+
+.restore-btn:hover {
+    background: #e3f2fd;
+    border-color: #007bff;
+}
+
+/* Task Date Displays */
+.task-completed-date, .task-archived-date {
+    font-size: 0.75rem;
+    color: #6c757d;
+    margin-top: 0.25rem;
+    font-style: italic;
+}
+
+.task-completed-date {
+    color: #28a745;
+}
+
+.task-archived-date {
+    color: #9aa0a6;
+}
+
+.column-content {
+    min-height: 400px;
+    padding: 0.5rem 0;
+}
+
+.task-card {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 1rem;
+    margin-bottom: 0.75rem;
+    cursor: pointer;
+    transition: box-shadow 0.2s, transform 0.1s;
+}
+
+.task-card:hover {
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    transform: translateY(-1px);
+}
+
+.task-card.dragging {
+    opacity: 0.5;
+    transform: rotate(5deg);
+}
+
+.task-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.5rem;
+}
+
+.task-title-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex: 1;
+}
+
+.task-number {
+    font-family: 'Courier New', monospace;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #007bff;
+    background: #e3f2fd;
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
+    align-self: flex-start;
+}
+
+.task-title {
+    font-weight: bold;
+    margin: 0;
+    color: #333;
+    font-size: 0.95rem;
+}
+
+
+.task-project {
+    font-size: 0.8rem;
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+
+.task-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.task-assignee {
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.task-assignee-avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid #e9ecef;
+}
+
+.task-due-date {
+    color: #666;
+}
+
+.task-due-date.overdue {
+    color: #dc3545;
+    font-weight: bold;
+}
+
+
+
+
+
+@media (max-width: 768px) {
+    .task-board {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+
+<!-- SortableJS for drag and drop -->
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+
+<script>
+// User preferences for date formatting
+const USER_DATE_FORMAT = '{{ g.user.preferences.date_format if g.user.preferences else "ISO" }}';
+
+// Date formatting utility function
+function formatUserDate(dateString) {
+    if (!dateString) return '';
+    
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) return '';
+    
+    switch (USER_DATE_FORMAT) {
+        case 'US':
+            return date.toLocaleDateString('en-US'); // MM/DD/YYYY
+        case 'EU':
+        case 'UK':
+            return date.toLocaleDateString('en-GB'); // DD/MM/YYYY
+        case 'Readable':
+            return date.toLocaleDateString('en-US', { 
+                weekday: 'short', 
+                year: 'numeric', 
+                month: 'short', 
+                day: 'numeric' 
+            }); // Mon, Dec 25, 2024
+        case 'ISO':
+        default:
+            return date.toISOString().split('T')[0]; // YYYY-MM-DD
+    }
+}
+
+// Date input formatting function - formats ISO date for user input
+function formatDateForInput(isoDateString) {
+    if (!isoDateString) return '';
+    
+    const date = new Date(isoDateString);
+    if (isNaN(date.getTime())) return '';
+    
+    return formatUserDate(isoDateString);
+}
+
+// Date parsing function - converts user-formatted date to ISO format
+function parseUserDate(dateString) {
+    if (!dateString || dateString.trim() === '') return null;
+    
+    const trimmed = dateString.trim();
+    let date;
+    
+    switch (USER_DATE_FORMAT) {
+        case 'US': // MM/DD/YYYY
+            const usParts = trimmed.split('/');
+            if (usParts.length === 3) {
+                const month = parseInt(usParts[0], 10);
+                const day = parseInt(usParts[1], 10);
+                const year = parseInt(usParts[2], 10);
+                if (month >= 1 && month <= 12 && day >= 1 && day <= 31 && year > 1900) {
+                    date = new Date(year, month - 1, day);
+                }
+            }
+            break;
+            
+        case 'EU':
+        case 'UK': // DD/MM/YYYY
+            const euParts = trimmed.split('/');
+            if (euParts.length === 3) {
+                const day = parseInt(euParts[0], 10);
+                const month = parseInt(euParts[1], 10);
+                const year = parseInt(euParts[2], 10);
+                if (month >= 1 && month <= 12 && day >= 1 && day <= 31 && year > 1900) {
+                    date = new Date(year, month - 1, day);
+                }
+            }
+            break;
+            
+        case 'Readable': // Mon, Dec 25, 2024
+            date = new Date(trimmed);
+            break;
+            
+        case 'ISO': // YYYY-MM-DD
+        default:
+            if (/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) {
+                date = new Date(trimmed);
+            }
+            break;
+    }
+    
+    if (!date || isNaN(date.getTime())) {
+        return null;
+    }
+    
+    return date.toISOString().split('T')[0];
+}
+
+// Date validation function
+function validateDateInput(inputElement, errorElement) {
+    const value = inputElement.value.trim();
+    if (!value) {
+        errorElement.style.display = 'none';
+        return true;
+    }
+    
+    const parsedDate = parseUserDate(value);
+    if (!parsedDate) {
+        let expectedFormat;
+        switch (USER_DATE_FORMAT) {
+            case 'US': expectedFormat = 'MM/DD/YYYY'; break;
+            case 'EU':
+            case 'UK': expectedFormat = 'DD/MM/YYYY'; break;
+            case 'Readable': expectedFormat = 'Mon, Dec 25, 2024'; break;
+            case 'ISO':
+            default: expectedFormat = 'YYYY-MM-DD'; break;
+        }
+        errorElement.textContent = `Invalid date format. Expected: ${expectedFormat}`;
+        errorElement.style.display = 'block';
+        return false;
+    }
+    
+    errorElement.style.display = 'none';
+    return true;
+}
+
+// Hybrid Date Input Functions
+function setupHybridDateInput(inputId) {
+    const formattedInput = document.getElementById(inputId);
+    const nativeInput = document.getElementById(inputId + '-native');
+    
+    if (!formattedInput || !nativeInput) return;
+    
+    // Sync from native input to formatted input
+    nativeInput.addEventListener('change', function() {
+        if (this.value) {
+            formattedInput.value = formatDateForInput(this.value);
+            // Trigger change event on formatted input
+            formattedInput.dispatchEvent(new Event('change'));
+        }
+    });
+    
+    // Sync from formatted input to native input
+    formattedInput.addEventListener('change', function() {
+        const isoDate = parseUserDate(this.value);
+        if (isoDate) {
+            nativeInput.value = isoDate;
+        } else {
+            nativeInput.value = '';
+        }
+    });
+    
+    // Clear both inputs when formatted input is cleared
+    formattedInput.addEventListener('input', function() {
+        if (this.value === '') {
+            nativeInput.value = '';
+        }
+    });
+}
+
+function openCalendarPicker(inputId) {
+    const nativeInput = document.getElementById(inputId + '-native');
+    if (nativeInput) {
+        nativeInput.focus();
+        
+        // Try showPicker() first for modern browsers
+        if (nativeInput.showPicker) {
+            try {
+                nativeInput.showPicker();
+            } catch (e) {
+                // Fallback to click if showPicker fails
+                nativeInput.click();
+            }
+        } else {
+            // Fallback for older browsers
+            nativeInput.click();
+        }
+    }
+}
+
+// Smart Search Parser
+class SmartTaskSearch {
+    constructor() {
+        this.searchTokens = {
+            'assigned:': { 
+                type: 'user', 
+                suggestions: [],
+                description: 'Filter by assigned user'
+            },
+            'created-by:': { 
+                type: 'user', 
+                suggestions: [],
+                description: 'Filter by task creator'
+            },
+            'project:': { 
+                type: 'project', 
+                suggestions: [],
+                description: 'Filter by project'
+            },
+            'sprint:': { 
+                type: 'sprint', 
+                suggestions: [],
+                description: 'Filter by sprint'
+            },
+            'status:': { 
+                type: 'status', 
+                suggestions: ['not-started', 'in-progress', 'on-hold', 'completed'],
+                description: 'Filter by task status'
+            },
+            'priority:': { 
+                type: 'priority', 
+                suggestions: ['low', 'medium', 'high', 'urgent'],
+                description: 'Filter by priority level'
+            },
+            'due:': { 
+                type: 'date', 
+                suggestions: ['today', 'tomorrow', 'this-week', 'next-week', 'overdue'],
+                description: 'Filter by due date'
+            },
+            'created:': { 
+                type: 'date', 
+                suggestions: ['today', 'yesterday', 'this-week', 'last-week'],
+                description: 'Filter by creation date'
+            }
+        };
+        
+        this.specialKeywords = [
+            { value: 'overdue', type: 'keyword', description: 'Tasks past their due date' },
+            { value: 'unassigned', type: 'keyword', description: 'Tasks without assignee' },
+            { value: 'my-tasks', type: 'view', description: 'Tasks assigned to me' },
+            { value: 'all-tasks', type: 'view', description: 'All tasks in the system' },
+            { value: 'project-tasks', type: 'view', description: 'Tasks grouped by project' },
+            { value: 'urgent', type: 'keyword', description: 'High priority tasks' }
+        ];
+        
+        // Add team-tasks only if user has a team
+        const hasTeam = {{ 'true' if g.user.team_id else 'false' }};
+        if (hasTeam) {
+            this.specialKeywords.splice(4, 0, { 
+                value: 'team-tasks', 
+                type: 'view', 
+                description: 'Tasks for my team' 
+            });
+        }
+        
+        this.currentSuggestionIndex = -1;
+    }
+    
+    parseQuery(searchText) {
+        const filters = {
+            assignee: '',
+            creator: '',
+            project: '',
+            sprint: '',
+            status: '',
+            priority: '',
+            dueDate: '',
+            createdDate: '',
+            view: '',
+            keywords: []
+        };
+        
+        // Split search text into tokens
+        const tokens = searchText.match(/\S+/g) || [];
+        
+        for (const token of tokens) {
+            if (token.includes(':')) {
+                const [key, value] = token.split(':', 2);
+                const fullKey = key + ':';
+                
+                switch (fullKey) {
+                    case 'assigned:':
+                        filters.assignee = value.replace('@', '');
+                        break;
+                    case 'created-by:':
+                        filters.creator = value.replace('@', '');
+                        break;
+                    case 'project:':
+                        filters.project = value;
+                        break;
+                    case 'sprint:':
+                        filters.sprint = value;
+                        break;
+                    case 'status:':
+                        filters.status = this.normalizeStatus(value);
+                        break;
+                    case 'priority:':
+                        filters.priority = value.toUpperCase();
+                        break;
+                    case 'due:':
+                        filters.dueDate = this.parseDate(value);
+                        break;
+                    case 'created:':
+                        filters.createdDate = this.parseDate(value);
+                        break;
+                }
+            } else {
+                // Handle special keywords and view keywords
+                const lowerToken = token.toLowerCase();
+                if (['my-tasks', 'all-tasks', 'team-tasks', 'project-tasks'].includes(lowerToken)) {
+                    filters.view = lowerToken;
+                } else {
+                    filters.keywords.push(lowerToken);
+                }
+            }
+        }
+        
+        return filters;
+    }
+    
+    normalizeStatus(status) {
+        const statusMap = {
+            'not-started': 'NOT_STARTED',
+            'in-progress': 'IN_PROGRESS',
+            'on-hold': 'ON_HOLD',
+            'completed': 'COMPLETED'
+        };
+        return statusMap[status.toLowerCase()] || status.toUpperCase();
+    }
+    
+    parseDate(dateStr) {
+        const today = new Date();
+        const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+        
+        switch (dateStr.toLowerCase()) {
+            case 'today':
+                return {
+                    start: todayStart,
+                    end: new Date(todayStart.getTime() + 24 * 60 * 60 * 1000 - 1)
+                };
+            case 'yesterday':
+                const yesterday = new Date(todayStart.getTime() - 24 * 60 * 60 * 1000);
+                return {
+                    start: yesterday,
+                    end: new Date(yesterday.getTime() + 24 * 60 * 60 * 1000 - 1)
+                };
+            case 'tomorrow':
+                const tomorrow = new Date(todayStart.getTime() + 24 * 60 * 60 * 1000);
+                return {
+                    start: tomorrow,
+                    end: new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000 - 1)
+                };
+            case 'this-week':
+                const startOfWeek = new Date(todayStart);
+                startOfWeek.setDate(todayStart.getDate() - todayStart.getDay());
+                const endOfWeek = new Date(startOfWeek.getTime() + 7 * 24 * 60 * 60 * 1000 - 1);
+                return { start: startOfWeek, end: endOfWeek };
+            case 'overdue':
+                return { end: todayStart, type: 'before' };
+            default:
+                // Try to parse as ISO date
+                if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
+                    const date = new Date(dateStr);
+                    return {
+                        start: date,
+                        end: new Date(date.getTime() + 24 * 60 * 60 * 1000 - 1)
+                    };
+                }
+                return null;
+        }
+    }
+    
+    async getSuggestions(query, cursorPosition) {
+        const suggestions = [];
+        
+        // Get the current token being typed
+        const beforeCursor = query.substring(0, cursorPosition);
+        const tokens = beforeCursor.split(/\s+/);
+        const currentToken = tokens[tokens.length - 1] || '';
+        
+        // Check if we're typing a token with ':'
+        if (currentToken.includes(':')) {
+            const [key, partial] = currentToken.split(':', 2);
+            const fullKey = key + ':';
+            
+            if (this.searchTokens[fullKey]) {
+                const tokenInfo = this.searchTokens[fullKey];
+                
+                // Get suggestions for this token type
+                if (tokenInfo.type === 'user') {
+                    const users = await this.fetchUserSuggestions(partial);
+                    users.forEach(user => {
+                        suggestions.push({
+                            type: 'user',
+                            value: `${key}:@${user.username}`,
+                            display: `@${user.username}`,
+                            description: `Assigned to ${user.username}`
+                        });
+                    });
+                } else if (tokenInfo.type === 'project') {
+                    const projects = await this.fetchProjectSuggestions(partial);
+                    projects.forEach(project => {
+                        suggestions.push({
+                            type: 'project',
+                            value: `${key}:${project.code}`,
+                            display: project.code,
+                            description: project.name
+                        });
+                    });
+                } else if (tokenInfo.type === 'sprint') {
+                    const sprints = await this.fetchSprintSuggestions(partial);
+                    sprints.forEach(sprint => {
+                        suggestions.push({
+                            type: 'sprint',
+                            value: `${key}:${sprint.name}`,
+                            display: sprint.name,
+                            description: `Sprint (${sprint.status})`
+                        });
+                    });
+                } else {
+                    // Static suggestions
+                    tokenInfo.suggestions
+                        .filter(s => s.toLowerCase().includes(partial.toLowerCase()))
+                        .forEach(suggestion => {
+                            suggestions.push({
+                                type: tokenInfo.type,
+                                value: `${key}:${suggestion}`,
+                                display: suggestion,
+                                description: tokenInfo.description
+                            });
+                        });
+                }
+            }
+        } else {
+            // Suggest token keys
+            Object.keys(this.searchTokens).forEach(tokenKey => {
+                if (tokenKey.toLowerCase().includes(currentToken.toLowerCase())) {
+                    suggestions.push({
+                        type: 'token',
+                        value: tokenKey,
+                        display: tokenKey,
+                        description: this.searchTokens[tokenKey].description
+                    });
+                }
+            });
+            
+            // Suggest special keywords
+            this.specialKeywords
+                .filter(keyword => keyword.value.toLowerCase().includes(currentToken.toLowerCase()))
+                .forEach(keyword => {
+                    suggestions.push({
+                        type: keyword.type,
+                        value: keyword.value,
+                        display: keyword.value,
+                        description: keyword.description
+                    });
+                });
+        }
+        
+        return suggestions.slice(0, 8); // Limit to 8 suggestions
+    }
+    
+    async fetchUserSuggestions(partial) {
+        try {
+            const response = await fetch(`/api/search/users?q=${encodeURIComponent(partial)}`);
+            const data = await response.json();
+            return data.success ? data.users : [];
+        } catch (error) {
+            console.error('Error fetching user suggestions:', error);
+            return [];
+        }
+    }
+    
+    async fetchProjectSuggestions(partial) {
+        try {
+            const response = await fetch(`/api/search/projects?q=${encodeURIComponent(partial)}`);
+            const data = await response.json();
+            return data.success ? data.projects : [];
+        } catch (error) {
+            console.error('Error fetching project suggestions:', error);
+            return [];
+        }
+    }
+    
+    async fetchSprintSuggestions(partial) {
+        try {
+            const response = await fetch(`/api/search/sprints?q=${encodeURIComponent(partial)}`);
+            const data = await response.json();
+            return data.success ? data.sprints : [];
+        } catch (error) {
+            console.error('Error fetching sprint suggestions:', error);
+            return [];
+        }
+    }
+}
+
+// Task Management Controller
+class UnifiedTaskManager {
+    constructor() {
+        this.tasks = [];
+        this.currentView = 'all';
+        this.filters = {
+            project: '',
+            assignee: '',
+            priority: '',
+            status: '',
+            startDate: '',
+            endDate: '',
+            dateField: 'created',
+            sprint: ''
+        };
+        this.currentTask = null;
+        this.sortableInstances = [];
+        this.showArchived = false;
+        this.currentUserId = {{ g.user.id|tojson }};
+        this.smartSearch = new SmartTaskSearch();
+        this.searchQuery = '';
+        this.isSearching = false;
+    }
+
+    async init() {
+        this.setupEventListeners();
+        this.setupSortable();
+        await this.loadTasks();
+    }
+
+    getUserAvatar(userId) {
+        // Find user in team members
+        const user = window.teamMembers.find(member => member.id === userId);
+        if (user && user.avatar_url) {
+            return user.avatar_url;
+        }
+        
+        // Generate default avatar using DiceBear API
+        const username = user ? user.username : `user_${userId}`;
+        const hash = this.hashCode(username + '_' + userId);
+        return `https://api.dicebear.com/7.x/initials/svg?seed=${hash}&size=24&backgroundColor=ffffff`;
+    }
+    
+    hashCode(str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash; // Convert to 32bit integer
+        }
+        return Math.abs(hash).toString(16);
+    }
+
+    setupEventListeners() {
+        // Smart Search
+        this.setupSmartSearch();
+        
+
+
+        // Actions
+        document.getElementById('add-task-btn').addEventListener('click', () => {
+            this.openTaskModal();
+        });
+
+        document.getElementById('refresh-tasks').addEventListener('click', () => {
+            this.loadTasks();
+        });
+
+        document.getElementById('toggle-archived').addEventListener('click', () => {
+            this.toggleArchivedView();
+        });
+        
+        // Date validation
+        document.getElementById('task-due-date').addEventListener('blur', () => {
+            const input = document.getElementById('task-due-date');
+            const error = document.getElementById('task-due-date-error');
+            validateDateInput(input, error);
+        });
+        
+        // Setup hybrid date inputs
+        setupHybridDateInput('task-due-date');
+    }
+
+    setupSortable() {
+        const columns = document.querySelectorAll('.column-content');
+        columns.forEach(column => {
+            const sortable = Sortable.create(column, {
+                group: 'tasks',
+                animation: 150,
+                onEnd: (evt) => {
+                    this.handleTaskMove(evt);
+                }
+            });
+            this.sortableInstances.push(sortable);
+        });
+    }
+
+    setupSmartSearch() {
+        const searchInput = document.getElementById('smart-search-input');
+        const searchClear = document.getElementById('smart-search-clear');
+        const suggestions = document.getElementById('smart-search-suggestions');
+        
+        let suggestionTimeout;
+        
+        // Search input handling
+        searchInput.addEventListener('input', async (e) => {
+            const query = e.target.value;
+            this.searchQuery = query;
+            
+            // Clear previous timeout
+            clearTimeout(suggestionTimeout);
+            
+            if (query.trim() === '') {
+                suggestions.style.display = 'none';
+                this.clearSmartSearch();
+                return;
+            }
+            
+            // Debounce suggestions
+            suggestionTimeout = setTimeout(async () => {
+                await this.showSuggestions(query, e.target.selectionStart);
+            }, 200);
+        });
+        
+        // Handle key navigation
+        searchInput.addEventListener('keydown', (e) => {
+            if (suggestions.style.display === 'none') return;
+            
+            const suggestionItems = suggestions.querySelectorAll('.suggestion-item');
+            
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.smartSearch.currentSuggestionIndex = 
+                        Math.min(this.smartSearch.currentSuggestionIndex + 1, suggestionItems.length - 1);
+                    this.updateSuggestionSelection();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.smartSearch.currentSuggestionIndex = 
+                        Math.max(this.smartSearch.currentSuggestionIndex - 1, -1);
+                    this.updateSuggestionSelection();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this.smartSearch.currentSuggestionIndex >= 0) {
+                        this.applySuggestion(suggestionItems[this.smartSearch.currentSuggestionIndex]);
+                    } else {
+                        this.applySmartSearch();
+                    }
+                    break;
+                case 'Escape':
+                    suggestions.style.display = 'none';
+                    break;
+                case 'Tab':
+                    if (this.smartSearch.currentSuggestionIndex >= 0) {
+                        e.preventDefault();
+                        this.applySuggestion(suggestionItems[this.smartSearch.currentSuggestionIndex]);
+                    }
+                    break;
+            }
+        });
+        
+        // Apply search on enter or when losing focus
+        searchInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && suggestions.style.display === 'none') {
+                this.applySmartSearch();
+            }
+        });
+        
+        searchInput.addEventListener('blur', () => {
+            // Delay hiding suggestions to allow clicking
+            setTimeout(() => {
+                suggestions.style.display = 'none';
+            }, 200);
+        });
+        
+        // Clear search
+        searchClear.addEventListener('click', () => {
+            searchInput.value = '';
+            this.searchQuery = '';
+            suggestions.style.display = 'none';
+            this.clearSmartSearch();
+        });
+        
+        // Hide suggestions when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.smart-search-container')) {
+                suggestions.style.display = 'none';
+            }
+        });
+    }
+    
+    async showSuggestions(query, cursorPosition) {
+        const suggestions = document.getElementById('smart-search-suggestions');
+        const suggestionItems = await this.smartSearch.getSuggestions(query, cursorPosition);
+        
+        if (suggestionItems.length === 0) {
+            suggestions.style.display = 'none';
+            return;
+        }
+        
+        suggestions.innerHTML = '';
+        suggestionItems.forEach((item, index) => {
+            const div = document.createElement('div');
+            div.className = 'suggestion-item';
+            div.innerHTML = `
+                <span class="suggestion-type">${item.type}</span>
+                <span class="suggestion-value">${item.display}</span>
+                <span class="suggestion-description">${item.description}</span>
+            `;
+            
+            div.addEventListener('click', () => {
+                this.applySuggestion(div, item);
+            });
+            
+            suggestions.appendChild(div);
+        });
+        
+        suggestions.style.display = 'block';
+        this.smartSearch.currentSuggestionIndex = -1;
+    }
+    
+    updateSuggestionSelection() {
+        const suggestionItems = document.querySelectorAll('.suggestion-item');
+        suggestionItems.forEach((item, index) => {
+            item.classList.toggle('active', index === this.smartSearch.currentSuggestionIndex);
+        });
+    }
+    
+    applySuggestion(suggestionElement, suggestionData = null) {
+        const searchInput = document.getElementById('smart-search-input');
+        const suggestions = document.getElementById('smart-search-suggestions');
+        
+        if (!suggestionData) {
+            const type = suggestionElement.querySelector('.suggestion-type').textContent;
+            const value = suggestionElement.querySelector('.suggestion-value').textContent;
+            suggestionData = { type, value, display: value };
+        }
+        
+        // Get current query and replace last token
+        const currentQuery = searchInput.value;
+        const cursorPos = searchInput.selectionStart;
+        const beforeCursor = currentQuery.substring(0, cursorPos);
+        const afterCursor = currentQuery.substring(cursorPos);
+        
+        const tokens = beforeCursor.split(/\s+/);
+        tokens[tokens.length - 1] = suggestionData.value;
+        
+        const newQuery = tokens.join(' ') + ' ' + afterCursor;
+        searchInput.value = newQuery.trim();
+        this.searchQuery = newQuery.trim();
+        
+        // Position cursor after the completed token
+        const newCursorPos = tokens.join(' ').length;
+        searchInput.setSelectionRange(newCursorPos, newCursorPos);
+        
+        suggestions.style.display = 'none';
+        searchInput.focus();
+        
+        // Apply the search immediately if it's a complete filter
+        if (suggestionData.type !== 'token') {
+            this.applySmartSearch();
+        }
+    }
+    
+    applySmartSearch() {
+        if (!this.searchQuery.trim()) {
+            this.clearSmartSearch();
+            return;
+        }
+        
+        const parsedFilters = this.smartSearch.parseQuery(this.searchQuery);
+        
+        // Convert smart search filters to existing filter format
+        if (parsedFilters.assignee) {
+            // Find user by username
+            const user = this.getTeamMemberByUsername(parsedFilters.assignee);
+            this.filters.assignee = user ? user.id : '';
+        }
+        
+        if (parsedFilters.project) {
+            // Find project by code
+            const project = this.getProjectByCode(parsedFilters.project);
+            this.filters.project = project ? project.id : '';
+        }
+        
+        if (parsedFilters.sprint) {
+            // Find sprint by name
+            const sprint = this.getSprintByName(parsedFilters.sprint);
+            this.filters.sprint = sprint ? sprint.id : parsedFilters.sprint;
+        }
+        
+        if (parsedFilters.status) {
+            this.filters.status = parsedFilters.status;
+        }
+        
+        if (parsedFilters.priority) {
+            this.filters.priority = parsedFilters.priority;
+        }
+        
+        // Handle date filters
+        if (parsedFilters.dueDate) {
+            this.filters.dateField = 'due';
+            if (parsedFilters.dueDate.start) {
+                this.filters.startDate = parsedFilters.dueDate.start.toISOString().split('T')[0];
+            }
+            if (parsedFilters.dueDate.end) {
+                this.filters.endDate = parsedFilters.dueDate.end.toISOString().split('T')[0];
+            }
+        }
+        
+        if (parsedFilters.createdDate) {
+            this.filters.dateField = 'created';
+            if (parsedFilters.createdDate.start) {
+                this.filters.startDate = parsedFilters.createdDate.start.toISOString().split('T')[0];
+            }
+            if (parsedFilters.createdDate.end) {
+                this.filters.endDate = parsedFilters.createdDate.end.toISOString().split('T')[0];
+            }
+        }
+        
+        // Handle view switching
+        if (parsedFilters.view) {
+            switch (parsedFilters.view) {
+                case 'my-tasks':
+                    this.currentView = 'personal';
+                    break;
+                case 'all-tasks':
+                    this.currentView = 'all';
+                    break;
+                case 'team-tasks':
+                    this.currentView = 'team';
+                    break;
+                case 'project-tasks':
+                    this.currentView = 'project';
+                    break;
+            }
+        }
+        
+        // Handle special keywords
+        if (parsedFilters.keywords.includes('overdue')) {
+            this.filters.dateField = 'due';
+            this.filters.endDate = new Date().toISOString().split('T')[0];
+        }
+        
+        if (parsedFilters.keywords.includes('unassigned')) {
+            this.filters.assignee = 'unassigned';
+        }
+        
+        if (parsedFilters.keywords.includes('urgent')) {
+            this.filters.priority = 'URGENT';
+        }
+        
+        this.isSearching = true;
+        this.applyFilters();
+    }
+    
+    clearSmartSearch() {
+        // Reset all filters and view
+        this.filters = {
+            project: '',
+            assignee: '',
+            priority: '',
+            status: '',
+            startDate: '',
+            endDate: '',
+            dateField: 'created',
+            sprint: ''
+        };
+        this.currentView = 'all'; // Reset to default view
+        this.isSearching = false;
+        this.applyFilters();
+    }
+    
+    // Helper methods for finding data by name/code
+    getTeamMemberByUsername(username) {
+        // This would need to be populated from the available team members
+        // For now, return null and let the backend handle it
+        return null;
+    }
+    
+    getProjectByCode(code) {
+        // This would need to be populated from available projects
+        return null;
+    }
+    
+    getSprintByName(name) {
+        // This would need to be populated from available sprints
+        return null;
+    }
+
+    async loadSprintsForModal() {
+        try {
+            const response = await fetch('/api/sprints');
+            const data = await response.json();
+            
+            if (data.success) {
+                // Update task modal sprint dropdown
+                const taskSprintSelect = document.getElementById('task-sprint');
+                // Clear existing options except the default "No Sprint" option
+                taskSprintSelect.innerHTML = '<option value="">No Sprint</option>';
+                
+                // Add sprint options to modal dropdown
+                data.sprints.forEach(sprint => {
+                    const modalOption = document.createElement('option');
+                    modalOption.value = sprint.id;
+                    modalOption.textContent = `${sprint.name} (${sprint.status})`;
+                    taskSprintSelect.appendChild(modalOption);
+                });
+            }
+        } catch (error) {
+            console.error('Error loading sprints:', error);
+        }
+    }
+
+    async loadTasks() {
+        document.getElementById('loading-indicator').style.display = 'flex';
+        document.getElementById('error-message').style.display = 'none';
+
+        try {
+            const response = await fetch('/api/tasks/unified');
+            const data = await response.json();
+            
+            if (data.success) {
+                this.tasks = data.tasks;
+                this.renderTasks();
+                this.updateStatistics();
+            } else {
+                throw new Error(data.message || 'Failed to load tasks');
+            }
+        } catch (error) {
+            console.error('Error loading tasks:', error);
+            document.getElementById('error-message').style.display = 'block';
+        } finally {
+            document.getElementById('loading-indicator').style.display = 'none';
+        }
+    }
+
+    renderTasks() {
+        // Clear all columns
+        document.querySelectorAll('.column-content').forEach(column => {
+            column.innerHTML = '';
+        });
+
+        // Filter tasks based on current view and filters
+        const filteredTasks = this.getFilteredTasks();
+        
+        // Group tasks by status
+        const tasksByStatus = {
+            'NOT_STARTED': [],
+            'IN_PROGRESS': [],
+            'ON_HOLD': [],
+            'COMPLETED': [],
+            'ARCHIVED': []
+        };
+
+        filteredTasks.forEach(task => {
+            if (tasksByStatus[task.status]) {
+                tasksByStatus[task.status].push(task);
+            }
+        });
+
+        // Render tasks in each column
+        Object.keys(tasksByStatus).forEach(status => {
+            const column = document.getElementById(`column-${status}`);
+            const tasks = tasksByStatus[status];
+            
+            tasks.forEach(task => {
+                const taskCard = this.createTaskCard(task);
+                column.appendChild(taskCard);
+            });
+            
+            // Update task count
+            const countElement = column.parentElement.querySelector('.task-count');
+            countElement.textContent = tasks.length;
+        });
+    }
+
+    getFilteredTasks() {
+        return this.tasks.filter(task => {
+            // View filter
+            if (this.currentView === 'personal' && task.assigned_to_id !== this.currentUserId) {
+                return false;
+            }
+            if (this.currentView === 'team' && !task.is_team_task) {
+                return false;
+            }
+            if (this.currentView === 'project' && !task.project_id) {
+                return false;
+            }
+
+            // Project filter
+            if (this.filters.project && task.project_id != this.filters.project) {
+                return false;
+            }
+
+            // Assignee filter
+            if (this.filters.assignee) {
+                if (this.filters.assignee === 'unassigned' && task.assigned_to_id) {
+                    return false;
+                }
+                if (this.filters.assignee !== 'unassigned' && task.assigned_to_id != this.filters.assignee) {
+                    return false;
+                }
+            }
+
+            // Priority filter
+            if (this.filters.priority && task.priority !== this.filters.priority) {
+                return false;
+            }
+
+            // Status filter
+            if (this.filters.status && task.status !== this.filters.status) {
+                return false;
+            }
+
+            // Date range filter
+            if (this.filters.startDate || this.filters.endDate) {
+                let taskDate = null;
+                
+                switch (this.filters.dateField) {
+                    case 'created':
+                        taskDate = task.created_at ? new Date(task.created_at) : null;
+                        break;
+                    case 'due':
+                        taskDate = task.due_date ? new Date(task.due_date) : null;
+                        break;
+                    case 'completed':
+                        taskDate = task.completed_date ? new Date(task.completed_date) : null;
+                        break;
+                }
+                
+                if (taskDate) {
+                    if (this.filters.startDate && taskDate < new Date(this.filters.startDate)) {
+                        return false;
+                    }
+                    if (this.filters.endDate && taskDate > new Date(this.filters.endDate)) {
+                        return false;
+                    }
+                } else if (this.filters.startDate || this.filters.endDate) {
+                    // If we're filtering by date but task has no date in the selected field, exclude it
+                    return false;
+                }
+            }
+
+            // Sprint filter
+            if (this.filters.sprint) {
+                if (this.filters.sprint === 'no-sprint' && task.sprint_id) {
+                    return false;
+                }
+                if (this.filters.sprint === 'current' && !task.is_current_sprint) {
+                    return false;
+                }
+                if (this.filters.sprint !== 'no-sprint' && this.filters.sprint !== 'current' && 
+                    task.sprint_id != this.filters.sprint) {
+                    return false;
+                }
+            }
+
+            return true;
+        });
+    }
+
+    createTaskCard(task) {
+        const card = document.createElement('div');
+        card.className = 'management-card task-card';
+        card.dataset.taskId = task.id;
+        card.addEventListener('click', () => this.openTaskModal(task));
+
+        const dueDate = task.due_date ? new Date(task.due_date) : null;
+        const isOverdue = dueDate && dueDate < new Date() && task.status !== 'COMPLETED' && task.status !== 'ARCHIVED';
+        
+        // Add archive/restore buttons for completed and archived tasks
+        let actionButtons = '';
+        if (task.status === 'COMPLETED') {
+            actionButtons = `
+                <div class="task-actions">
+                    <button class="archive-btn" onclick="taskManager.archiveTask(${task.id}); event.stopPropagation();" title="Archive Task">📦</button>
+                </div>
+            `;
+        } else if (task.status === 'ARCHIVED') {
+            actionButtons = `
+                <div class="task-actions">
+                    <button class="restore-btn" onclick="taskManager.restoreTask(${task.id}); event.stopPropagation();" title="Restore Task">↩️</button>
+                </div>
+            `;
+        }
+        
+        card.innerHTML = `
+            <div class="task-card-header">
+                <div class="task-title-section">
+                    <span class="task-number">${task.task_number || 'TSK-???'}</span>
+                    <h4 class="task-title">${task.name}</h4>
+                </div>
+                <span class="priority-badge ${task.priority}">${task.priority}</span>
+            </div>
+            ${task.project_name ? `<div class="task-project">${task.project_code} - ${task.project_name}</div>` : ''}
+            <div class="task-meta">
+                <span class="task-assignee">
+                    ${task.assigned_to_id ? `<img src="${this.getUserAvatar(task.assigned_to_id)}" alt="${task.assigned_to_name}" class="task-assignee-avatar">` : ''}
+                    ${task.assigned_to_name || 'Unassigned'}
+                </span>
+                ${dueDate ? `<span class="task-due-date ${isOverdue ? 'overdue' : ''}">${formatUserDate(task.due_date)}</span>` : ''}
+            </div>
+            ${task.subtasks && task.subtasks.length > 0 ? this.renderSubtaskProgress(task.subtasks) : ''}
+            ${task.status === 'COMPLETED' ? `<div class="task-completed-date">Completed: ${formatUserDate(task.completed_date)}</div>` : ''}
+            ${task.status === 'ARCHIVED' ? `<div class="task-archived-date">Archived: ${formatUserDate(task.archived_date)}</div>` : ''}
+            ${actionButtons}
+        `;
+
+        return card;
+    }
+
+    renderSubtaskProgress(subtasks) {
+        if (!subtasks || subtasks.length === 0) return '';
+        
+        const completedCount = subtasks.filter(s => s.status === 'COMPLETED').length;
+        const totalCount = subtasks.length;
+        const percentage = Math.round((completedCount / totalCount) * 100);
+        
+        return `
+            <div class="task-subtasks">
+                <div class="subtask-progress">
+                    <div class="subtask-progress-bar">
+                        <div class="subtask-progress-fill" style="width: ${percentage}%"></div>
+                    </div>
+                    <span class="subtask-count">${completedCount}/${totalCount} subtasks</span>
+                </div>
+            </div>
+        `;
+    }
+
+    applyFilters() {
+        this.renderTasks();
+    }
+
+    updateStatistics() {
+        const total = this.tasks.length;
+        const completed = this.tasks.filter(t => t.status === 'COMPLETED').length;
+        const inProgress = this.tasks.filter(t => t.status === 'IN_PROGRESS').length;
+        const archived = this.tasks.filter(t => t.status === 'ARCHIVED').length;
+        const overdue = this.tasks.filter(t => {
+            const dueDate = t.due_date ? new Date(t.due_date) : null;
+            return dueDate && dueDate < new Date() && t.status !== 'COMPLETED' && t.status !== 'ARCHIVED';
+        }).length;
+
+        document.getElementById('total-tasks').textContent = total;
+        document.getElementById('completed-tasks').textContent = completed;
+        document.getElementById('in-progress-tasks').textContent = inProgress;
+        document.getElementById('overdue-tasks').textContent = overdue;
+        document.getElementById('archived-tasks').textContent = archived;
+    }
+
+    toggleArchivedView() {
+        this.showArchived = !this.showArchived;
+        const toggleBtn = document.getElementById('toggle-archived');
+        const archivedColumn = document.querySelector('.archived-column');
+        const archivedStatCard = document.getElementById('archived-stat-card');
+        
+        if (this.showArchived) {
+            toggleBtn.textContent = '📦 Hide Archived';
+            toggleBtn.classList.add('active');
+            archivedColumn.style.display = 'block';
+            archivedStatCard.style.display = 'block';
+        } else {
+            toggleBtn.textContent = '📦 Show Archived';
+            toggleBtn.classList.remove('active');
+            archivedColumn.style.display = 'none';
+            archivedStatCard.style.display = 'none';
+        }
+        
+        this.renderTasks();
+    }
+
+    async archiveTask(taskId) {
+        if (confirm('Are you sure you want to archive this task? It will be moved to the archived section.')) {
+            try {
+                const response = await fetch(`/api/tasks/${taskId}/archive`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                });
+                
+                const data = await response.json();
+                if (data.success) {
+                    await this.loadTasks();
+                } else {
+                    alert('Failed to archive task: ' + data.message);
+                }
+            } catch (error) {
+                console.error('Error archiving task:', error);
+                alert('Failed to archive task: ' + error.message);
+            }
+        }
+    }
+
+    async restoreTask(taskId) {
+        if (confirm('Are you sure you want to restore this task? It will be moved back to completed status.')) {
+            try {
+                const response = await fetch(`/api/tasks/${taskId}/restore`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                });
+                
+                const data = await response.json();
+                if (data.success) {
+                    await this.loadTasks();
+                } else {
+                    alert('Failed to restore task: ' + data.message);
+                }
+            } catch (error) {
+                console.error('Error restoring task:', error);
+                alert('Failed to restore task: ' + error.message);
+            }
+        }
+    }
+
+    async refreshTaskCard(taskId) {
+        // Fetch updated task data
+        try {
+            const response = await fetch(`/api/tasks/${taskId}`);
+            const task = await response.json();
+            
+            if (task) {
+                // Find and replace the task card
+                const oldCard = document.querySelector(`[data-task-id="${taskId}"]`);
+                if (oldCard) {
+                    const newCard = this.createTaskCard(task);
+                    oldCard.replaceWith(newCard);
+                }
+                
+                // Update task in local array
+                const index = this.tasks.findIndex(t => t.id == taskId);
+                if (index !== -1) {
+                    this.tasks[index] = task;
+                }
+            }
+        } catch (error) {
+            console.error('Error refreshing task card:', error);
+        }
+    }
+
+    async handleTaskMove(evt) {
+        const taskId = evt.item.dataset.taskId;
+        const newStatus = evt.to.id.replace('column-', '');
+        
+        try {
+            const response = await fetch(`/api/tasks/${taskId}/status`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ status: newStatus })
+            });
+            
+            const data = await response.json();
+            if (data.success) {
+                // Update local task data
+                const task = this.tasks.find(t => t.id == taskId);
+                if (task) {
+                    task.status = newStatus;
+                    this.updateStatistics();
+                }
+            } else {
+                throw new Error(data.message || 'Failed to update task');
+            }
+        } catch (error) {
+            console.error('Error updating task status:', error);
+            // Revert the move
+            this.renderTasks();
+        }
+    }
+
+    async openTaskModal(task = null) {
+        this.currentTask = task;
+        const modal = document.getElementById('task-modal');
+        
+        // Load sprints for the modal dropdown
+        await this.loadSprintsForModal();
+        
+        if (task) {
+            document.getElementById('modal-title').textContent = 'Edit Task';
+            document.getElementById('task-id').value = task.id;
+            document.getElementById('task-name').value = task.name;
+            document.getElementById('task-description').value = task.description || '';
+            document.getElementById('task-priority').value = task.priority;
+            document.getElementById('task-project').value = task.project_id || '';
+            document.getElementById('task-assignee').value = task.assigned_to_id || '';
+            document.getElementById('task-due-date').value = formatDateForInput(task.due_date) || '';
+            document.getElementById('task-estimated-hours').value = task.estimated_hours || '';
+            document.getElementById('task-status').value = task.status;
+            document.getElementById('task-sprint').value = task.sprint_id || '';
+            document.getElementById('delete-task-btn').style.display = 'inline-block';
+            
+            // Load dependencies
+            await this.loadDependencies(task.id);
+            
+            // Initialize subtasks
+            initializeSubtasks(task.id);
+            
+            // Show comments section and load comments
+            document.getElementById('comments-section').style.display = 'block';
+            await this.loadComments(task.id);
+        } else {
+            document.getElementById('modal-title').textContent = 'Add New Task';
+            document.getElementById('task-form').reset();
+            document.getElementById('task-id').value = '';
+            document.getElementById('delete-task-btn').style.display = 'none';
+            
+            // Clear dependencies
+            this.clearDependencies();
+            
+            // Initialize empty subtasks
+            initializeSubtasks(null);
+            
+            // Hide comments section for new tasks
+            document.getElementById('comments-section').style.display = 'none';
+        }
+        
+        modal.style.display = 'block';
+    }
+
+    async saveTask() {
+        // Validate date input before saving
+        const dueDateInput = document.getElementById('task-due-date');
+        const dueDateError = document.getElementById('task-due-date-error');
+        
+        if (!validateDateInput(dueDateInput, dueDateError)) {
+            dueDateInput.focus();
+            return;
+        }
+        
+        const taskData = {
+            name: document.getElementById('task-name').value,
+            description: document.getElementById('task-description').value,
+            priority: document.getElementById('task-priority').value,
+            project_id: document.getElementById('task-project').value || null,
+            assigned_to_id: document.getElementById('task-assignee').value || null,
+            due_date: parseUserDate(document.getElementById('task-due-date').value) || null,
+            estimated_hours: document.getElementById('task-estimated-hours').value || null,
+            status: document.getElementById('task-status').value,
+            sprint_id: document.getElementById('task-sprint').value || null
+        };
+
+        const taskId = document.getElementById('task-id').value;
+        const isEdit = taskId !== '';
+
+        try {
+            const response = await fetch(`/api/tasks${isEdit ? `/${taskId}` : ''}`, {
+                method: isEdit ? 'PUT' : 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(taskData)
+            });
+            
+            const data = await response.json();
+            if (data.success) {
+                // Save subtasks if we have a task ID
+                const savedTaskId = isEdit ? taskId : data.task.id;
+                if (savedTaskId) {
+                    await saveSubtasks(savedTaskId);
+                }
+                
+                closeTaskModal();
+                await this.loadTasks();
+            } else {
+                throw new Error(data.message || 'Failed to save task');
+            }
+        } catch (error) {
+            console.error('Error saving task:', error);
+            alert('Failed to save task: ' + error.message);
+        }
+    }
+
+    async deleteTask() {
+        if (!this.currentTask) return;
+        
+        if (confirm('Are you sure you want to delete this task?')) {
+            try {
+                const response = await fetch(`/api/tasks/${this.currentTask.id}`, {
+                    method: 'DELETE'
+                });
+                
+                const data = await response.json();
+                if (data.success) {
+                    closeTaskModal();
+                    await this.loadTasks();
+                } else {
+                    throw new Error(data.message || 'Failed to delete task');
+                }
+            } catch (error) {
+                console.error('Error deleting task:', error);
+                alert('Failed to delete task: ' + error.message);
+            }
+        }
+    }
+    
+    // Dependency management methods
+    async loadDependencies(taskId) {
+        try {
+            const response = await fetch(`/api/tasks/${taskId}/dependencies`);
+            const data = await response.json();
+            
+            if (data.success) {
+                this.renderDependencies(data.dependencies);
+            } else {
+                console.error('Failed to load dependencies:', data.message);
+            }
+        } catch (error) {
+            console.error('Error loading dependencies:', error);
+        }
+    }
+    
+    renderDependencies(dependencies) {
+        const blockedByContainer = document.getElementById('blocked-by-container');
+        const blocksContainer = document.getElementById('blocks-container');
+        
+        // Clear existing dependencies
+        blockedByContainer.innerHTML = '';
+        blocksContainer.innerHTML = '';
+        
+        // Render blocked by dependencies
+        dependencies.blocked_by.forEach(dep => {
+            const depElement = this.createDependencyElement(dep, 'blocked_by');
+            blockedByContainer.appendChild(depElement);
+        });
+        
+        // Render blocks dependencies
+        dependencies.blocks.forEach(dep => {
+            const depElement = this.createDependencyElement(dep, 'blocks');
+            blocksContainer.appendChild(depElement);
+        });
+    }
+    
+    createDependencyElement(dependency, type) {
+        const element = document.createElement('div');
+        element.className = 'dependency-item';
+        
+        element.innerHTML = `
+            <div class="dependency-task-info">
+                <span class="dependency-task-number">${dependency.task_number}</span>
+                <span class="dependency-task-title">${dependency.name}</span>
+            </div>
+            <button class="dependency-remove-btn" onclick="taskManager.removeDependency(${dependency.id}, '${type}')">Remove</button>
+        `;
+        
+        return element;
+    }
+    
+    clearDependencies() {
+        document.getElementById('blocked-by-container').innerHTML = '';
+        document.getElementById('blocks-container').innerHTML = '';
+        document.getElementById('blocked-by-input').value = '';
+        document.getElementById('blocks-input').value = '';
+    }
+    
+    async addDependency(taskNumber, type) {
+        const taskId = document.getElementById('task-id').value;
+        if (!taskId) {
+            alert('Please save the task first before adding dependencies.');
+            return;
+        }
+        
+        if (!taskNumber || taskNumber.trim() === '') {
+            alert('Please enter a task number.');
+            return;
+        }
+        
+        try {
+            const response = await fetch(`/api/tasks/${taskId}/dependencies`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    task_number: taskNumber.trim(),
+                    type: type
+                })
+            });
+            
+            const data = await response.json();
+            if (data.success) {
+                // Reload dependencies
+                await this.loadDependencies(taskId);
+                // Clear input
+                document.getElementById(`${type.replace('_', '-')}-input`).value = '';
+            } else {
+                alert('Failed to add dependency: ' + data.message);
+            }
+        } catch (error) {
+            console.error('Error adding dependency:', error);
+            alert('Failed to add dependency: ' + error.message);
+        }
+    }
+    
+    async removeDependency(dependencyTaskId, type) {
+        const taskId = document.getElementById('task-id').value;
+        if (!taskId) return;
+        
+        if (confirm('Are you sure you want to remove this dependency?')) {
+            try {
+                const response = await fetch(`/api/tasks/${taskId}/dependencies/${dependencyTaskId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        type: type
+                    })
+                });
+                
+                const data = await response.json();
+                if (data.success) {
+                    // Reload dependencies
+                    await this.loadDependencies(taskId);
+                } else {
+                    alert('Failed to remove dependency: ' + data.message);
+                }
+            } catch (error) {
+                console.error('Error removing dependency:', error);
+                alert('Failed to remove dependency: ' + error.message);
+            }
+        }
+    }
+    
+    // Comment management methods
+    async loadComments(taskId) {
+        try {
+            const response = await fetch(`/api/tasks/${taskId}/comments`);
+            const data = await response.json();
+            
+            if (data.success) {
+                this.renderComments(data.comments);
+                
+                // Show/hide team visibility option based on company settings
+                const visibilitySelect = document.getElementById('comment-visibility');
+                if (data.allow_team_visibility) {
+                    visibilitySelect.style.display = 'inline-block';
+                } else {
+                    visibilitySelect.style.display = 'none';
+                }
+            } else {
+                console.error('Failed to load comments:', data.message);
+            }
+        } catch (error) {
+            console.error('Error loading comments:', error);
+        }
+    }
+    
+    renderComments(comments) {
+        const container = document.getElementById('comments-container');
+        container.innerHTML = '';
+        
+        if (comments.length === 0) {
+            container.innerHTML = '<p class="no-comments">No comments yet. Be the first to comment!</p>';
+            return;
+        }
+        
+        comments.forEach(comment => {
+            const commentElement = this.createCommentElement(comment);
+            container.appendChild(commentElement);
+        });
+    }
+    
+    createCommentElement(comment) {
+        const element = document.createElement('div');
+        element.className = 'comment-item';
+        element.dataset.commentId = comment.id;
+        
+        const visibilityBadge = comment.visibility === 'Team' ? 
+            '<span class="comment-visibility-badge team">👥 Team</span>' : '';
+        
+        const editedText = comment.is_edited ? 
+            ` <span class="comment-edited">(edited)</span>` : '';
+        
+        element.innerHTML = `
+            <div class="comment-header">
+                <div class="comment-author-info">
+                    <img src="${comment.author.avatar_url}" alt="${comment.author.username}" class="comment-author-avatar">
+                    <div class="comment-author-details">
+                        <span class="comment-author">${comment.author.username}</span>
+                        <span class="comment-time">${this.formatRelativeTime(comment.created_at)}${editedText}</span>
+                    </div>
+                </div>
+                ${visibilityBadge}
+            </div>
+            <div class="comment-content">${this.escapeHtml(comment.content)}</div>
+            <div class="comment-actions">
+                ${comment.can_edit ? '<button class="comment-action" onclick="taskManager.editComment(' + comment.id + ')">Edit</button>' : ''}
+                ${comment.can_delete ? '<button class="comment-action" onclick="taskManager.deleteComment(' + comment.id + ')">Delete</button>' : ''}
+                <button class="comment-action" onclick="taskManager.replyToComment(${comment.id})">Reply</button>
+            </div>
+            <div class="comment-edit-form" id="comment-edit-${comment.id}" style="display: none;">
+                <textarea class="comment-edit-textarea">${this.escapeHtml(comment.content)}</textarea>
+                <div class="comment-edit-actions">
+                    <button class="btn btn-sm btn-primary" onclick="taskManager.saveCommentEdit(${comment.id})">Save</button>
+                    <button class="btn btn-sm btn-secondary" onclick="taskManager.cancelCommentEdit(${comment.id})">Cancel</button>
+                </div>
+            </div>
+            <div class="comment-reply-form" id="comment-reply-${comment.id}" style="display: none;">
+                <textarea placeholder="Write a reply..." rows="2"></textarea>
+                <div class="comment-edit-actions">
+                    <button class="btn btn-sm btn-primary" onclick="taskManager.saveReply(${comment.id})">Reply</button>
+                    <button class="btn btn-sm btn-secondary" onclick="taskManager.cancelReply(${comment.id})">Cancel</button>
+                </div>
+            </div>
+        `;
+        
+        // Add replies if any
+        if (comment.replies && comment.replies.length > 0) {
+            const repliesContainer = document.createElement('div');
+            repliesContainer.className = 'comment-replies';
+            
+            comment.replies.forEach(reply => {
+                const replyElement = this.createReplyElement(reply);
+                repliesContainer.appendChild(replyElement);
+            });
+            
+            element.appendChild(repliesContainer);
+        }
+        
+        return element;
+    }
+    
+    createReplyElement(reply) {
+        const element = document.createElement('div');
+        element.className = 'comment-reply';
+        element.dataset.commentId = reply.id;
+        
+        const editedText = reply.is_edited ? 
+            ` <span class="comment-edited">(edited)</span>` : '';
+        
+        element.innerHTML = `
+            <div class="comment-header">
+                <div class="comment-author-info">
+                    <img src="${reply.author.avatar_url}" alt="${reply.author.username}" class="comment-author-avatar">
+                    <div class="comment-author-details">
+                        <span class="comment-author">${reply.author.username}</span>
+                        <span class="comment-time">${this.formatRelativeTime(reply.created_at)}${editedText}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="comment-content">${this.escapeHtml(reply.content)}</div>
+            <div class="comment-actions">
+                ${reply.can_edit ? '<button class="comment-action" onclick="taskManager.editComment(' + reply.id + ')">Edit</button>' : ''}
+                ${reply.can_delete ? '<button class="comment-action" onclick="taskManager.deleteComment(' + reply.id + ')">Delete</button>' : ''}
+            </div>
+        `;
+        
+        return element;
+    }
+    
+    async addComment() {
+        const taskId = document.getElementById('task-id').value;
+        const contentTextarea = document.getElementById('new-comment');
+        const content = contentTextarea.value.trim();
+        const visibility = document.getElementById('comment-visibility').value;
+        
+        if (!taskId || !content) {
+            alert('Please enter a comment');
+            return;
+        }
+        
+        try {
+            const response = await fetch(`/api/tasks/${taskId}/comments`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    content: content,
+                    visibility: visibility
+                })
+            });
+            
+            const data = await response.json();
+            if (data.success) {
+                contentTextarea.value = '';
+                await this.loadComments(taskId);
+            } else {
+                alert('Failed to post comment: ' + data.message);
+            }
+        } catch (error) {
+            console.error('Error posting comment:', error);
+            alert('Failed to post comment: ' + error.message);
+        }
+    }
+    
+    editComment(commentId) {
+        const commentElement = document.querySelector(`[data-comment-id="${commentId}"]`);
+        const editForm = document.getElementById(`comment-edit-${commentId}`);
+        const content = commentElement.querySelector('.comment-content');
+        
+        content.style.display = 'none';
+        editForm.style.display = 'block';
+    }
+    
+    cancelCommentEdit(commentId) {
+        const editForm = document.getElementById(`comment-edit-${commentId}`);
+        const content = document.querySelector(`[data-comment-id="${commentId}"] .comment-content`);
+        
+        content.style.display = 'block';
+        editForm.style.display = 'none';
+    }
+    
+    async saveCommentEdit(commentId) {
+        const editForm = document.getElementById(`comment-edit-${commentId}`);
+        const textarea = editForm.querySelector('textarea');
+        const content = textarea.value.trim();
+        
+        if (!content) {
+            alert('Comment cannot be empty');
+            return;
+        }
+        
+        try {
+            const response = await fetch(`/api/comments/${commentId}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    content: content
+                })
+            });
+            
+            const data = await response.json();
+            if (data.success) {
+                const taskId = document.getElementById('task-id').value;
+                await this.loadComments(taskId);
+            } else {
+                alert('Failed to update comment: ' + data.message);
+            }
+        } catch (error) {
+            console.error('Error updating comment:', error);
+            alert('Failed to update comment: ' + error.message);
+        }
+    }
+    
+    async deleteComment(commentId) {
+        if (!confirm('Are you sure you want to delete this comment?')) {
+            return;
+        }
+        
+        try {
+            const response = await fetch(`/api/comments/${commentId}`, {
+                method: 'DELETE'
+            });
+            
+            const data = await response.json();
+            if (data.success) {
+                const taskId = document.getElementById('task-id').value;
+                await this.loadComments(taskId);
+            } else {
+                alert('Failed to delete comment: ' + data.message);
+            }
+        } catch (error) {
+            console.error('Error deleting comment:', error);
+            alert('Failed to delete comment: ' + error.message);
+        }
+    }
+    
+    replyToComment(commentId) {
+        const replyForm = document.getElementById(`comment-reply-${commentId}`);
+        replyForm.style.display = 'block';
+        replyForm.querySelector('textarea').focus();
+    }
+    
+    cancelReply(commentId) {
+        const replyForm = document.getElementById(`comment-reply-${commentId}`);
+        replyForm.style.display = 'none';
+        replyForm.querySelector('textarea').value = '';
+    }
+    
+    async saveReply(parentCommentId) {
+        const taskId = document.getElementById('task-id').value;
+        const replyForm = document.getElementById(`comment-reply-${parentCommentId}`);
+        const content = replyForm.querySelector('textarea').value.trim();
+        
+        if (!content) {
+            alert('Please enter a reply');
+            return;
+        }
+        
+        try {
+            const response = await fetch(`/api/tasks/${taskId}/comments`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    content: content,
+                    parent_comment_id: parentCommentId,
+                    visibility: 'COMPANY' // Replies inherit parent visibility
+                })
+            });
+            
+            const data = await response.json();
+            if (data.success) {
+                replyForm.style.display = 'none';
+                replyForm.querySelector('textarea').value = '';
+                await this.loadComments(taskId);
+            } else {
+                alert('Failed to post reply: ' + data.message);
+            }
+        } catch (error) {
+            console.error('Error posting reply:', error);
+            alert('Failed to post reply: ' + error.message);
+        }
+    }
+    
+    formatRelativeTime(dateString) {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffMs = now - date;
+        const diffSecs = Math.floor(diffMs / 1000);
+        const diffMins = Math.floor(diffSecs / 60);
+        const diffHours = Math.floor(diffMins / 60);
+        const diffDays = Math.floor(diffHours / 24);
+        
+        if (diffSecs < 60) {
+            return 'just now';
+        } else if (diffMins < 60) {
+            return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
+        } else if (diffHours < 24) {
+            return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+        } else if (diffDays < 7) {
+            return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+        } else {
+            return date.toLocaleDateString();
+        }
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Global functions
+let taskManager;
+
+document.addEventListener('DOMContentLoaded', function() {
+    taskManager = new UnifiedTaskManager();
+    taskManager.init();
+});
+
+function closeTaskModal() {
+    document.getElementById('task-modal').style.display = 'none';
+    taskManager.currentTask = null;
+}
+
+function saveTask() {
+    taskManager.saveTask();
+}
+
+function deleteTask() {
+    taskManager.deleteTask();
+}
+
+function addComment() {
+    taskManager.addComment();
+}
+
+function addSubtask() {
+    // TODO: Implement subtask functionality
+}
+
+function addBlockedBy() {
+    const input = document.getElementById('blocked-by-input');
+    const taskNumber = input.value.trim();
+    if (taskNumber) {
+        taskManager.addDependency(taskNumber, 'blocked_by');
+    }
+}
+
+function addBlocks() {
+    const input = document.getElementById('blocks-input');
+    const taskNumber = input.value.trim();
+    if (taskNumber) {
+        taskManager.addDependency(taskNumber, 'blocks');
+    }
+}
+
+// Close modal when clicking outside
+window.onclick = function(event) {
+    const modal = document.getElementById('task-modal');
+    if (event.target === modal) {
+        closeTaskModal();
+    }
+};
+
+// Make team members available globally for subtasks
+window.teamMembers = {{ team_members | tojson }};
+
+// Make refreshTaskCard available globally
+window.refreshTaskCard = function(taskId) {
+    if (window.taskManager) {
+        window.taskManager.refreshTaskCard(taskId);
+    }
+};
+</script>
+
+<!-- Include subtasks functionality -->
+<script src="{{ url_for('static', filename='js/subtasks.js') }}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/verify_2fa.html b/templates/verify_2fa.html
index 354558b..194fbcf 100644
--- a/templates/verify_2fa.html
+++ b/templates/verify_2fa.html
@@ -102,24 +102,7 @@ <h1>Two-Factor Authentication</h1>
     margin-bottom: 1.5rem;
 }
 
-.btn {
-    padding: 0.75rem 2rem;
-    border: none;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.2s;
-    width: 100%;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
+/* Button styles now centralized in main style.css */
 
 .help-section {
     text-align: center;