diff --git a/WebApp/Components/Shared/Layout/MainLayout.razor b/WebApp/Components/Shared/Layout/MainLayout.razor
index eceaf15..95f2cbb 100644
--- a/WebApp/Components/Shared/Layout/MainLayout.razor
+++ b/WebApp/Components/Shared/Layout/MainLayout.razor
@@ -12,7 +12,12 @@
diff --git a/docs/plans/style-improvements.md b/docs/plans/style-improvements.md
new file mode 100644
index 0000000..17cd191
--- /dev/null
+++ b/docs/plans/style-improvements.md
@@ -0,0 +1,362 @@
+# TSA Chapter Organizer - Style Improvement Plan
+
+## Overview
+This document outlines recommended style improvements to enhance the visual design, consistency, and user experience of the TSA Chapter Organizer application.
+
+## Priority Improvements
+
+### 1. Fix MudBlazor/Bootstrap Inconsistency ✅ COMPLETED
+**Location**: `WebApp/Components/Shared/Layout/MainLayout.razor`
+
+**Issue**: The logout button uses Bootstrap classes (`btn btn-primary`) instead of MudBlazor components, creating visual inconsistency.
+
+**Current Code**:
+```razor
+
+```
+
+**Recommended Fix**:
+```razor
+
+```
+
+**Benefits**:
+- Consistent component usage across the application
+- Matches MudBlazor theme styling
+- Better integration with application theme
+
+---
+
+### 2. Enhance Visual Hierarchy with Elevation
+**Locations**: Multiple page components
+
+**Issue**: Most MudPapers use Elevation="0" which makes the UI feel flat and lacks visual hierarchy.
+
+**Recommendations**:
+- **Primary content containers** (data grids, forms): `Elevation="2"`
+- **Secondary content** (cards within pages): `Elevation="1"`
+- **Navigation** (current usage): `Elevation="0"` ✓ Correct
+
+**Example Files to Update**:
+- `WebApp/Components/Features/Students/Index.razor`
+- `WebApp/Components/Features/Events/Index.razor`
+- `WebApp/Components/Features/Teams/Index.razor`
+- `WebApp/Components/Features/Students/Create.razor`
+- `WebApp/Components/Features/Events/Create.razor`
+
+**Benefits**:
+- Better visual separation of content areas
+- Improved depth perception
+- More modern, material design aesthetic
+
+---
+
+### 3. Improve Table Density and Spacing
+**Locations**: All MudDataGrid components
+
+**Current State**: Tables lack visual distinction between rows and don't have optimal spacing.
+
+**Recommendations**:
+```razor
+
+
+
+
+
+```
+
+**Properties to Add**:
+- `Dense="true"` - Tighter spacing for more data visibility
+- `Striped="true"` - Alternating row colors for easier scanning
+- `Hover="true"` - Visual feedback on row hover
+- Wrap in `MudPaper` with `Elevation="2"` and padding
+
+**Benefits**:
+- Better row distinction and readability
+- More professional appearance
+- Improved user experience when scanning data
+
+---
+
+### 4. Refine Typography Hierarchy
+**Locations**: Throughout the application
+
+**Current State**: Good theme typography definition, but inconsistent usage.
+
+**Recommendations**:
+
+| Element | Typography |
+|---------|------------|
+| Page titles | `Typo.h3` (via PageHeader) ✓ Current |
+| Section headings | `Typo.h4` |
+| Subsection headings | `Typo.subtitle1` |
+| Body text | `Typo.body1` ✓ Default |
+| Supporting text | `Typo.body2` with `Class="mud-text-secondary"` |
+| Labels | `Typo.caption` |
+
+**Example Usage**:
+```razor
+
+
+Recent Activity
+
+ Last updated: @DateTime.Now.ToShortDateString()
+
+```
+
+**Benefits**:
+- Clear visual hierarchy
+- Improved readability
+- Consistent information architecture
+
+---
+
+### 5. Add Loading States
+**Locations**: All MudDataGrid and async components
+
+**Issue**: No visual feedback during data loading operations.
+
+**Recommendations**:
+```csharp
+@code {
+ private bool _isLoading = true;
+
+ private async Task> ServerReload(GridState state)
+ {
+ _isLoading = true;
+ try
+ {
+ // ... existing code
+ }
+ finally
+ {
+ _isLoading = false;
+ }
+ }
+}
+```
+
+```razor
+
+```
+
+**Benefits**:
+- Better user feedback during async operations
+- Reduces perceived wait time
+- Professional appearance
+
+---
+
+### 6. Improve Button Hierarchy
+**Current State**: Generally good, but needs consistency checks.
+
+**Standard to Apply**:
+- **Primary actions** (Create, Save, Submit): `Variant="Variant.Filled" Color="Color.Primary"`
+- **Secondary actions** (Edit, View): `Variant="Variant.Outlined"`
+- **Tertiary actions** (Cancel): `Variant="Variant.Text"`
+- **Destructive actions** (Delete): Use IconButtonWithTooltip with `HoverColor="Color.Error"`
+
+**Files to Audit**:
+- All Index.razor pages (mostly correct ✓)
+- All Create.razor pages (mostly correct ✓)
+- All Edit.razor pages (mostly correct ✓)
+
+**Benefits**:
+- Clear action priority
+- Better user guidance
+- Consistent UX patterns
+
+---
+
+### 7. Add Consistent Page Container Styling
+**Locations**: All page components
+
+**Recommendation**:
+Wrap main page content in consistent containers:
+
+```razor
+
+
+
+
+
+```
+
+**Or for multiple sections**:
+```razor
+
+
+
+
+ Section 1
+
+
+
+
+ Section 2
+
+
+
+```
+
+**Benefits**:
+- Visual consistency across pages
+- Better content organization
+- Professional appearance
+
+---
+
+### 8. Enhance Event Rank Color System
+**Current State**: Good color-coding system (ranks 1-6) defined in app.css
+
+**Potential Enhancement**:
+Consider using MudChip components with rank colors for better visual distinction:
+
+```razor
+
+ Rank @rank
+
+```
+
+**Files Using Rank Colors**:
+- `WebApp/Components/Features/Students/EventRanking.razor`
+- `WebApp/Components/Features/Teams/Components/TeamStudents.razor`
+
+**Benefits**:
+- More prominent rank visualization
+- Better accessibility with chip component
+- Maintains existing color scheme
+
+---
+
+### 9. Improve Form Layout
+**Locations**: Create.razor and Edit.razor pages
+
+**Recommendations**:
+- Ensure consistent spacing between form fields using MudGrid's `Spacing` parameter
+- Group related fields in MudPaper containers with subtle backgrounds
+- Use consistent label positioning
+
+**Example**:
+```razor
+
+
+
+
+ Basic Information
+
+
+
+
+
+
+
+
+
+
+
+ Save
+ Cancel
+
+
+```
+
+**Benefits**:
+- Better visual grouping
+- Improved form scanability
+- Reduced cognitive load
+
+---
+
+### 10. Add Micro-interactions
+**Current State**: Hover effect for delete buttons implemented ✓
+
+**Additional Opportunities**:
+
+1. **Table row transitions** (app.css):
+```css
+.mud-table-row {
+ transition: background-color 0.2s ease;
+}
+```
+
+2. **Button ripple effects**: Ensure MudBlazor's default ripple is not disabled (check by default ✓)
+
+3. **Page transitions**: Consider adding fade-in animation for page content:
+```css
+.page-enter {
+ animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+```
+
+**Benefits**:
+- More polished user experience
+- Better feedback for user actions
+- Modern, responsive feel
+
+---
+
+## Implementation Priority
+
+### Phase 1: Quick Wins (High Impact, Low Effort)
+1. ✅ Fix logout button (MudBlazor consistency)
+2. Add elevation to data grids and content containers
+3. Add table density and hover properties
+
+### Phase 2: Visual Polish (Medium Impact, Medium Effort)
+4. Audit and ensure button hierarchy consistency
+5. Add loading states to all grids
+6. Wrap pages in consistent container styling
+
+### Phase 3: Enhancements (Nice to Have)
+7. Refine typography hierarchy usage
+8. Enhance event rank visualization
+9. Improve form layout grouping
+10. Add micro-interactions and transitions
+
+---
+
+## Testing Checklist
+
+After each implementation:
+- [ ] Visual consistency across all pages
+- [ ] Responsive design (mobile, tablet, desktop)
+- [ ] Theme colors applied correctly
+- [ ] Accessibility (contrast ratios, keyboard navigation)
+- [ ] Print styles not affected
+- [ ] No performance regressions
+
+---
+
+## Notes
+
+- All changes maintain compatibility with existing MudBlazor v7+ theme
+- Cerulean theme colors are preserved
+- Print styles (@media print) are not affected
+- No breaking changes to existing functionality