diff --git a/src/client/MediaPesataApp.tsx b/src/client/MediaPesataApp.tsx
index a9991b3..03f7be3 100644
--- a/src/client/MediaPesataApp.tsx
+++ b/src/client/MediaPesataApp.tsx
@@ -186,7 +186,7 @@ const CORSI_DISPONIBILI: Corso[] = [
     { nome: 'Ultrafiltri e metodi non-standard', anno: 'M', cfu: 6 },
 ]
 
-function MediaPesataApp() {
+export function MediaPesataApp() {
     // Funzioni per localStorage
     const loadFromStorage = () => {
         try {
@@ -220,13 +220,22 @@ function MediaPesataApp() {
     }
 
     // Inizializzazione con dati salvati
-    const initialData = loadFromStorage()
-    const [tipoStudente, setTipoStudente] = useState<TipoStudente>(initialData.tipoStudente)
-    const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>(initialData.corsiSelezionati)
+    // const initialData = loadFromStorage()
+    const [tipoStudente, setTipoStudente] = useState<TipoStudente>('triennale')
+    const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>([])
     const [showCustomForm, setShowCustomForm] = useState(false)
     const [customCorso, setCustomCorso] = useState<CorsoCustom>({ nome: '', cfu: 0 })
-    const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>(initialData.sezioniAperte)
-    const [mostraRisultati, setMostraRisultati] = useState(initialData.mostraRisultati)
+    const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>({})
+    const [mostraRisultati, setMostraRisultati] = useState(false)
+
+    // Load data from localStorage on mount
+    useEffect(() => {
+        const initialData = loadFromStorage()
+        setTipoStudente(initialData.tipoStudente)
+        setCorsiSelezionati(initialData.corsiSelezionati)
+        setSezioniAperte(initialData.sezioniAperte)
+        setMostraRisultati(initialData.mostraRisultati)
+    }, [])
 
     // Salva automaticamente quando cambiano i dati importanti
     useEffect(() => {
@@ -482,15 +491,6 @@ function MediaPesataApp() {
     }
 
     const cambiaTipoStudente = (nuovoTipo: TipoStudente) => {
-        if (corsiSelezionati.length > 0 && nuovoTipo !== tipoStudente) {
-            if (
-                !confirm(
-                    'Cambiando il tipo di studente, alcune materie potrebbero non essere più disponibili. Continuare?',
-                )
-            ) {
-                return
-            }
-        }
         setTipoStudente(nuovoTipo)
     }
 
@@ -501,217 +501,207 @@ function MediaPesataApp() {
     const cfuError = totaleCfu > maxCfu
 
     return (
-        <div className="media-pesata-app">
+        <div class="media-pesata-app">
             {/* Selezione tipo studente */}
-            <div className="student-type-selector">
-                <h2>Corso di Laurea</h2>
-                <div className="radio-group">
-                    <label>
-                        <input
-                            type="radio"
-                            value="triennale"
-                            checked={tipoStudente === 'triennale'}
-                            onChange={e => cambiaTipoStudente((e.target as HTMLInputElement).value as TipoStudente)}
-                        />
-                        Triennale
-                    </label>
-                    <label>
-                        <input
-                            type="radio"
-                            value="magistrale"
-                            checked={tipoStudente === 'magistrale'}
-                            onChange={e => cambiaTipoStudente((e.target as HTMLInputElement).value as TipoStudente)}
-                        />
-                        Magistrale
-                    </label>
+            <div class="card student-type-switcher wide">
+                <div class="grid-center">
+                    <h2>Corso di Laurea</h2>
+                    <div class="compound-button">
+                        <button
+                            class={tipoStudente === 'triennale' ? 'active' : ''}
+                            onClick={() => cambiaTipoStudente('triennale')}
+                        >
+                            Triennale
+                        </button>
+                        <button
+                            class={tipoStudente === 'magistrale' ? 'active' : ''}
+                            onClick={() => cambiaTipoStudente('magistrale')}
+                        >
+                            Magistrale
+                        </button>
+                    </div>
                 </div>
             </div>
 
             {/* Counter CFU */}
-            <div className={`cfu-counter ${cfuError ? 'error' : ''}`}>
+            <div class={`cfu-counter wide ${cfuError ? 'error' : ''}`}>
                 <h3>
                     CFU Totali: {totaleCfu}/{maxCfu}
                     {tipoStudente === 'triennale' ? ' (+9 tesi)' : ' (+27 tesi)'}
                 </h3>
-                {cfuError && <p className="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>}
+                {cfuError && <p class="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>}
             </div>
 
-            <div className="main-content">
-                {/* Sezione selezione corsi */}
-                <div className="course-selection">
+            {/* Sezione selezione corsi */}
+            <div class="card">
+                <div class="title">
                     <h2>Seleziona Materie</h2>
+                </div>
 
-                    {Object.entries(gruppiCorsi).map(([categoria, corsi]) => (
-                        <div key={categoria} className="course-category">
-                            <button className="category-header" onClick={() => toggleSezione(categoria)}>
-                                <h3>{categoria}</h3>
-                                <span className={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span>
-                            </button>
-
-                            {sezioniAperte[categoria] && (
-                                <div className="course-grid">
-                                    {corsi.map((corso, index) => (
-                                        <button
-                                            key={index}
-                                            className="course-button"
-                                            onClick={() => aggiungiCorso(corso)}
-                                            disabled={corsiSelezionati.some(c => c.nome === corso.nome)}
-                                        >
-                                            <span className="course-name">{corso.nome}</span>
-                                            <span className="course-cfu">{corso.cfu} CFU</span>
-                                        </button>
-                                    ))}
-                                </div>
-                            )}
-                        </div>
-                    ))}
-
-                    {/* Form per materia custom */}
-                    <div className="custom-course">
-                        <h3>Materia Personalizzata</h3>
-                        {!showCustomForm ? (
-                            <button onClick={() => setShowCustomForm(true)} className="add-custom-btn">
-                                + Aggiungi Materia Personalizzata
-                            </button>
-                        ) : (
-                            <div className="custom-form">
-                                <input
-                                    type="text"
-                                    placeholder="Nome materia"
-                                    value={customCorso.nome}
-                                    onChange={e =>
-                                        setCustomCorso({ ...customCorso, nome: (e.target as HTMLInputElement).value })
-                                    }
-                                />
-                                <input
-                                    type="number"
-                                    placeholder="CFU"
-                                    min="1"
-                                    max="30"
-                                    step="1"
-                                    value={customCorso.cfu || ''}
-                                    onChange={e =>
-                                        setCustomCorso({
-                                            ...customCorso,
-                                            cfu: parseInt((e.target as HTMLInputElement).value) || 0,
-                                        })
-                                    }
-                                />
-                                <button onClick={aggiungiCorsoCustom} className="confirm-btn">
-                                    Aggiungi
-                                </button>
-                                <button onClick={() => setShowCustomForm(false)} className="cancel-btn">
-                                    Annulla
-                                </button>
+                {Object.entries(gruppiCorsi).map(([categoria, corsi]) => (
+                    <div key={categoria} class="course-category">
+                        <button onClick={() => toggleSezione(categoria)}>
+                            <div class="h-flex">
+                                {categoria}
+                                <div class="spacer"></div>
+                                <span class={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span>
+                            </div>
+                        </button>
+
+                        {sezioniAperte[categoria] && (
+                            <div class="course-grid">
+                                {corsi.map((corso, index) => (
+                                    <button
+                                        key={index}
+                                        class="course-button"
+                                        onClick={() => aggiungiCorso(corso)}
+                                        disabled={corsiSelezionati.some(c => c.nome === corso.nome)}
+                                    >
+                                        <span class="course-name">{corso.nome}</span>
+                                        <span class="course-cfu">{corso.cfu} CFU</span>
+                                    </button>
+                                ))}
                             </div>
                         )}
                     </div>
+                ))}
+
+                {/* Form per materia custom */}
+                <div class="custom-course">
+                    <h3>Materia Personalizzata</h3>
+                    {!showCustomForm ? (
+                        <button onClick={() => setShowCustomForm(true)}>+ Aggiungi Materia Personalizzata</button>
+                    ) : (
+                        <div class="custom-form">
+                            <input
+                                type="text"
+                                placeholder="Nome materia"
+                                value={customCorso.nome}
+                                onChange={e =>
+                                    setCustomCorso({ ...customCorso, nome: (e.target as HTMLInputElement).value })
+                                }
+                            />
+                            <input
+                                type="number"
+                                placeholder="CFU"
+                                min="1"
+                                max="30"
+                                step="1"
+                                value={customCorso.cfu || ''}
+                                onChange={e =>
+                                    setCustomCorso({
+                                        ...customCorso,
+                                        cfu: parseInt((e.target as HTMLInputElement).value) || 0,
+                                    })
+                                }
+                            />
+                            <button onClick={aggiungiCorsoCustom}>Aggiungi</button>
+                            <button onClick={() => setShowCustomForm(false)}>Annulla</button>
+                        </div>
+                    )}
                 </div>
+            </div>
 
-                {/* Sezione lista corsi selezionati */}
-                <div className="selected-courses">
-                    <div className="section-header">
+            {/* Sezione lista corsi selezionati */}
+            <div class="card">
+                <div class="h-flex">
+                    <div class="title">
                         <h2>Materie Selezionate</h2>
-                        {corsiSelezionati.length > 0 && (
-                            <button onClick={resetTutto} className="reset-btn">
-                                🗑️ Cancella Tutto
-                            </button>
-                        )}
                     </div>
+                    <div class="spacer"></div>
+                    {corsiSelezionati.length > 0 && <button onClick={resetTutto}>🗑️ Cancella Tutto</button>}
+                </div>
 
-                    {corsiSelezionati.length === 0 ? (
-                        <p className="no-courses">Nessuna materia selezionata</p>
-                    ) : (
-                        <div className="courses-list">
-                            {corsiSelezionati.map(corso => (
-                                <div key={corso.id} className="course-item">
-                                    <div className="course-info">
-                                        <span className="course-name">{corso.nome}</span>
-                                        <span className="course-cfu">{corso.cfu} CFU</span>
-                                        {corso.passFailOnly && <span className="pass-fail-badge">Pass/Fail</span>}
-                                    </div>
-
-                                    {!corso.passFailOnly && (
-                                        <div className="course-grade">
+                {corsiSelezionati.length === 0 ? (
+                    <p>Nessuna materia selezionata</p>
+                ) : (
+                    <div class="courses-list">
+                        {corsiSelezionati.map(corso => (
+                            <div key={corso.id} class="course-item">
+                                <span class="course-name">{corso.nome}</span>
+                                <span class="course-cfu">{corso.cfu} CFU</span>
+
+                                {!corso.passFailOnly && (
+                                    <div class="course-grade tall">
+                                        <input
+                                            type="number"
+                                            placeholder="Voto"
+                                            min="18"
+                                            max="30"
+                                            step="1"
+                                            value={corso.voto || ''}
+                                            onChange={e =>
+                                                aggiornaVoto(
+                                                    corso.id,
+                                                    parseInt((e.target as HTMLInputElement).value) || null,
+                                                )
+                                            }
+                                        />
+
+                                        <label class={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
                                             <input
-                                                type="number"
-                                                placeholder="Voto"
-                                                min="18"
-                                                max="30"
-                                                step="1"
-                                                value={corso.voto || ''}
+                                                class="star"
+                                                type="checkbox"
+                                                checked={corso.lode}
+                                                disabled={corso.voto !== 30}
                                                 onChange={e =>
-                                                    aggiornaVoto(
-                                                        corso.id,
-                                                        parseInt((e.target as HTMLInputElement).value) || null,
-                                                    )
+                                                    aggiornaLode(corso.id, (e.target as HTMLInputElement).checked)
                                                 }
                                             />
+                                            Lode
+                                        </label>
+                                    </div>
+                                )}
 
-                                            <label className={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
-                                                <input
-                                                    type="checkbox"
-                                                    checked={corso.lode}
-                                                    disabled={corso.voto !== 30}
-                                                    onChange={e =>
-                                                        aggiornaLode(corso.id, (e.target as HTMLInputElement).checked)
-                                                    }
-                                                />
-                                                Lode
-                                            </label>
-                                        </div>
-                                    )}
-
+                                <div class="actions tall">
                                     <button
+                                        class="icon remove-btn"
                                         onClick={() => rimuoviCorso(corso.id)}
-                                        className="remove-btn"
                                         title="Rimuovi materia"
                                     >
                                         ×
                                     </button>
                                 </div>
-                            ))}
-                        </div>
-                    )}
-                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
             </div>
 
             {/* Pulsante Calcola */}
             {corsiSelezionati.length > 0 && (
-                <div className="calculate-section">
-                    <button onClick={calcolaMedia} className="calculate-btn">
-                        🧮 Calcola Media e Voto di Laurea
-                    </button>
+                <div class="calculate-section wide">
+                    <button onClick={calcolaMedia}>🧮 Calcola Media e Voto di Laurea</button>
                 </div>
             )}
 
             {/* Risultati */}
             {risultati && mostraRisultati && (
-                <div className="results">
+                <div class="results wide">
                     <h2>Risultati</h2>
                     {risultati.errore ? (
-                        <div className="error-message">
+                        <div class="error-message">
                             <p>⚠️ {risultati.errore}</p>
                         </div>
                     ) : (
-                        <div className="results-grid">
-                            <div className="result-item">
-                                <span className="label">Media Pesata:</span>
-                                <span className="value">{risultati.mediaPesata}</span>
+                        <div class="results-grid">
+                            <div class="result-item">
+                                <span class="label">Media Pesata:</span>
+                                <span class="value">{risultati.mediaPesata}</span>
                             </div>
-                            <div className="result-item">
-                                <span className="label">Bonus Lodi:</span>
-                                <span className="value">+{risultati.bonusLodi}</span>
+                            <div class="result-item">
+                                <span class="label">Bonus Lodi:</span>
+                                <span class="value">+{risultati.bonusLodi}</span>
                             </div>
-                            <div className="result-item highlight">
-                                <span className="label">Voto di Ammissione:</span>
-                                <span className="value">{risultati.votoAmmissione}</span>
+                            <div class="result-item highlight">
+                                <span class="label">Voto di Ammissione:</span>
+                                <span class="value">{risultati.votoAmmissione}</span>
                             </div>
-                            <div className="result-item highlight">
-                                <span className="label">Massimo Voto Di Laurea Possibile:</span>
-                                <span className="value">
+                            <div class="result-item highlight">
+                                <span class="label">Massimo Voto Di Laurea Possibile:</span>
+                                <span class="value">
                                     {risultati.massimoVotoLaurea}
-                                    {risultati.conLode && <span className="lode-badge">(+lode)</span>}
+                                    {risultati.conLode && <span class="lode-badge">(+lode)</span>}
                                 </span>
                             </div>
                         </div>
@@ -720,9 +710,9 @@ function MediaPesataApp() {
             )}
 
             {/* Nota informativa */}
-            <div className="info-section">
+            <div class="card wide">
                 <h3>📋 Come viene calcolata la media</h3>
-                <div className="info-content">
+                <div class="info-content">
                     <h4>Regole di esclusione CFU:</h4>
                     <ul>
                         <li>
@@ -763,11 +753,11 @@ function MediaPesataApp() {
 }
 
 // Funzione per inizializzare l'app
-export function initMediaPesataApp() {
-    const container = document.getElementById('media-pesata-app')
-    if (container) {
-        render(<MediaPesataApp />, container)
-    }
-}
-
-export default MediaPesataApp
+// export function initMediaPesataApp() {
+//     const container = document.getElementById('media-pesata-app')
+//     if (container) {
+//         render(<MediaPesataApp />, container)
+//     }
+// }
+
+// export default MediaPesataApp
diff --git a/src/pages/media-pesata.astro b/src/pages/media-pesata.astro
index b80c1d9..6654f55 100644
--- a/src/pages/media-pesata.astro
+++ b/src/pages/media-pesata.astro
@@ -1,42 +1,21 @@
 ---
 import '@/styles/pages/media-pesata.css'
 import PageLayout from '../layouts/PageLayout.astro'
+
+import { MediaPesataApp } from '@/client/MediaPesataApp'
 ---
 
-<PageLayout title="Voto Laurea" description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento">
+<PageLayout
+    title="Voto Laurea"
+    description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento"
+>
     <div class="media-pesata-container">
         <h1>Calcolo Media e Voto di Laurea</h1>
-        <p>Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del dipartimento di Matematica.</p>
+        <p>
+            Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del
+            dipartimento di Matematica.
+        </p>
 
-        <div id="media-pesata-app"></div>
+        <MediaPesataApp client:load />
     </div>
 </PageLayout>
-
-<script>
-    // Importiamo e inizializziamo l'applicazione
-    import('../client/MediaPesataApp')
-        .then(module => {
-            const { initMediaPesataApp } = module
-            initMediaPesataApp()
-        })
-</script>
-
-<style>
-    .media-pesata-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 2rem;
-    }
-
-    h1 {
-        text-align: center;
-        margin-bottom: 1rem;
-        color: var(--color-primary);
-    }
-
-    p {
-        text-align: center;
-        margin-bottom: 2rem;
-        color: var(--color-text-secondary);
-    }
-</style>
diff --git a/src/styles/controls.css b/src/styles/controls.css
index 3bac52b..098273a 100644
--- a/src/styles/controls.css
+++ b/src/styles/controls.css
@@ -75,7 +75,7 @@ Controls - for things like buttons, input, select
     input[type='text'],
     input[type='password'] {
         width: 100%;
-        height: 2.5rem;
+        min-height: 1.75rem;
 
         /* @include neo-brutalist-card; */
         border: 3px solid #222;
@@ -89,6 +89,95 @@ Controls - for things like buttons, input, select
         }
     }
 
+    input[type='checkbox'] {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+
+        width: calc(1.5rem + 1px);
+        height: calc(1.5rem + 1px);
+
+        background: #fff;
+        border: 3px solid #222;
+        border-radius: 4px;
+        box-shadow: 3px 3px 0 0 #222;
+
+        position: relative;
+        cursor: pointer;
+
+        transition: all 64ms linear;
+
+        &:hover {
+            transform: translate(-1px, -1px);
+            box-shadow: 4px 4px 0 0 #222;
+        }
+
+        &:active {
+            transform: translate(1px, 1px);
+            box-shadow: 2px 2px 0 0 #222;
+        }
+
+        &:checked {
+            background: #1e6733;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+
+                width: 0.8rem;
+                height: 0.8rem;
+                background: #1e6733;
+
+                clip-path: polygon(10% 55%, 35% 75%, 85% 25%, 90% 35%, 40% 95%, 5% 60%);
+            }
+
+            &:hover {
+                background: #2b8b47;
+            }
+        }
+
+        &:disabled {
+            background: #eee;
+            border-color: #888;
+            box-shadow: 3px 3px 0 0 #888;
+            cursor: not-allowed;
+
+            &:hover {
+                transform: none;
+                box-shadow: 3px 3px 0 0 #888;
+            }
+
+            &:checked {
+                background: #aaa;
+
+                &::after {
+                    background: #666;
+                }
+            }
+        }
+
+        &.star {
+            &:checked::after {
+                background: rgb(255, 197, 49);
+                clip-path: polygon(
+                    50% 0%,
+                    61% 35%,
+                    98% 35%,
+                    68% 57%,
+                    79% 91%,
+                    50% 70%,
+                    21% 91%,
+                    32% 57%,
+                    2% 35%,
+                    39% 35%
+                );
+            }
+        }
+    }
+
     form {
         display: grid;
         gap: 1rem;
diff --git a/src/styles/main.css b/src/styles/main.css
index 3ab0f56..cec7c82 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -325,6 +325,38 @@ Custom Page Styles
         opacity: 0 !important;
     }
 
+    .grid-center {
+        display: grid;
+        place-content: center;
+        place-items: center;
+    }
+
+    .h-flex {
+        display: flex;
+        gap: 0.5rem;
+        flex-direction: row;
+    }
+
+    .v-flex {
+        display: flex;
+        gap: 0.5rem;
+        flex-direction: column;
+    }
+
+    .h-flex,
+    .v-flex {
+        place-self: stretch;
+        align-items: center;
+
+        > * {
+            flex-shrink: 0;
+        }
+
+        > .spacer {
+            flex-grow: 1;
+        }
+    }
+
     @media screen and (min-width: 1024px) {
         .mobile-only {
             display: none !important;
diff --git a/src/styles/pages.scss b/src/styles/pages.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/pages/media-pesata.css b/src/styles/pages/media-pesata.css
index 0c16d19..4668b47 100644
--- a/src/styles/pages/media-pesata.css
+++ b/src/styles/pages/media-pesata.css
@@ -1,10 +1,116 @@
 @layer page {
+    :root {
+        --media-pesata-accent: #e4c5ff;
+        --media-pesata-bg: hsl(from var(--media-pesata-accent) h s 95%);
+
+        --media-pesata-accent-2: #ffe4c5;
+        --media-pesata-accent-3: #c5ffe4;
+
+        --card-base: var(--media-pesata-accent);
+    }
+
+    main {
+        justify-self: center;
+        background: var(--media-pesata-bg);
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        padding: 4.5rem 3rem;
+        gap: 4.5rem;
+
+        @media screen and (max-width: 1024px) {
+            padding: 3rem 1rem;
+            gap: 3rem;
+
+            .card {
+                width: 100%;
+            }
+        }
+    }
+
+    .media-pesata-container {
+        max-width: 72rem;
+        margin: 0 auto;
+        padding: 2rem;
+
+        @media screen and (max-width: 768px) {
+            padding: 0;
+        }
+    }
+
+    h1 {
+        text-align: center;
+        margin-bottom: 1rem;
+        color: var(--color-primary);
+    }
+
+    p {
+        text-align: center;
+        margin-bottom: 2rem;
+        color: var(--color-text-secondary);
+    }
+
+    .card {
+        align-content: start;
+        gap: 1rem;
+    }
+
+    button {
+        display: grid;
+        grid-auto-flow: column;
+        place-content: center;
+        place-items: center;
+
+        padding: 0.25rem 1rem;
+        gap: 0.5rem;
+        font-size: 16px;
+
+        border: 2px solid #222;
+        border-radius: 4px;
+        box-shadow: 2px 2px 0 0 #222;
+
+        transition: all 64ms linear;
+        text-decoration: none;
+        color: #222;
+
+        cursor: pointer;
+
+        &:hover {
+            transform: translate(-1px, -1px);
+            box-shadow: 3px 3px 0 0 #222;
+        }
+
+        &:active {
+            transform: translate(1px, 1px);
+            box-shadow: 1px 1px 0 0 #222;
+        }
+    }
+
     .media-pesata-app {
         max-width: 1200px;
         margin: 0 auto;
         padding: 2rem;
         min-height: 100vh;
-        background: var(--homepage-whatsphc-bg);
+
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: repeat(7, auto);
+
+        align-items: start;
+        gap: 2rem;
+
+        > .wide {
+            grid-column: 1 / -1;
+        }
+
+        @media screen and (max-width: 1024px) {
+            padding: 0;
+
+            grid-template-columns: 1fr;
+            gap: 1rem;
+        }
     }
 
     .media-pesata-title {
@@ -24,70 +130,120 @@
         box-shadow: 4px 4px 0 0 var(--palette-black);
         padding: 1.5rem;
         margin-bottom: 2rem;
-    }
 
-    .student-type-selector h2 {
-        margin-bottom: 1rem;
-        color: var(--palette-black);
-        font-family: var(--font-display);
-        font-weight: 600;
-        font-size: 1.5rem;
-        text-align: center;
+        display: grid;
+        place-content: center;
+
+        h2 {
+            margin-bottom: 1rem;
+            color: var(--palette-black);
+            font-family: var(--font-display);
+            font-weight: 600;
+            font-size: 1.5rem;
+            text-align: center;
+        }
     }
 
-    .radio-group {
+    /* .radio-group {
         display: flex;
         gap: 1.5rem;
         justify-content: center;
-    }
 
-    .radio-group label {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        font-size: 1.1rem;
-        cursor: pointer;
-        padding: 0.5rem 1rem;
-        border: 2px solid var(--palette-black);
-        border-radius: 6px;
-        background: #fff;
-        font-family: var(--font-secondary);
-        font-weight: 600;
-        transition: all 64ms linear;
-        box-shadow: 2px 2px 0 0 var(--palette-black);
-    }
+        label {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1.1rem;
+            cursor: pointer;
+            padding: 0.5rem 1rem;
+            border: 2px solid var(--palette-black);
+            border-radius: 6px;
+            background: #fff;
+            font-family: var(--font-secondary);
+            font-weight: 600;
+            transition: all 64ms linear;
+            box-shadow: 2px 2px 0 0 var(--palette-black);
+        }
 
-    .radio-group label:hover {
-        transform: translate(-1px, -1px);
-        box-shadow: 3px 3px 0 0 var(--palette-black);
-    }
+        label:hover {
+            transform: translate(-1px, -1px);
+            box-shadow: 3px 3px 0 0 var(--palette-black);
+        }
 
-    .radio-group label:active {
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--palette-black);
-    }
+        label:active {
+            transform: translate(1px, 1px);
+            box-shadow: 1px 1px 0 0 var(--palette-black);
+        }
 
-    .radio-group input[type='radio'] {
-        width: 18px;
-        height: 18px;
-        margin: 0;
-        accent-color: #007bff;
+        input[type='radio'] {
+            width: 18px;
+            height: 18px;
+            margin: 0;
+            accent-color: #007bff;
+        }
+    } */
+
+    .compound-button {
+        display: flex;
+        border: 3px solid #222;
+        border-radius: 6px;
+        box-shadow: 4px 4px 0 0 #222;
+        overflow: hidden;
+        width: fit-content;
+
+        button {
+            border: none;
+            border-radius: 0;
+            box-shadow: none;
+            margin: 0;
+            flex: 1;
+            min-width: 120px;
+            padding: 0.5rem;
+
+            &:not(:last-child) {
+                border-right: 3px solid #222;
+            }
+
+            &:hover {
+                transform: none;
+                box-shadow: none;
+                background: #f0f0f0;
+            }
+
+            &:active {
+                transform: none;
+                box-shadow: none;
+                background: #e0e0e0;
+            }
+
+            &.active {
+                background: hsl(from var(--media-pesata-accent) h s 75%);
+                color: #f4fef7;
+
+                &:hover {
+                    background: hsl(from var(--media-pesata-accent) h s 85%);
+                }
+
+                &:active {
+                    background: hsl(from var(--media-pesata-accent) h s 95%);
+                }
+            }
+        }
     }
 
     /* Counter CFU */
     .cfu-counter {
-        background: var(--project-card-bg);
+        background: hsl(from var(--media-pesata-accent-2) h s 75%);
         border: var(--border-large);
         border-radius: 6px;
         box-shadow: 4px 4px 0 0 var(--palette-black);
         padding: 1rem;
-        margin-bottom: 2rem;
         text-align: center;
-    }
 
-    .cfu-counter.error {
-        background: #fee;
-        border-color: #dc3545;
+        &.error {
+            background: #ffd8d8;
+            border-color: #dc3545;
+        }
     }
 
     .cfu-counter h3 {
@@ -119,14 +275,6 @@
         text-align: center;
     }
 
-    /* Layout principale */
-    .main-content {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 2rem;
-        margin-bottom: 2rem;
-    }
-
     @media (max-width: 768px) {
         .main-content {
             grid-template-columns: 1fr;
@@ -151,75 +299,97 @@
     }
 
     .course-category {
-        margin-bottom: 2rem;
-    }
-
-    /* Rimozione del vecchio stile per h3 che causava il rettangolo blu */
-
-    .course-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         gap: 0.5rem;
-        margin-top: 1rem;
-        padding-top: 0.5rem;
-    }
-
-    .course-button {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 0.75rem;
-        border: 2px solid var(--palette-black);
-        border-radius: 4px;
-        background: #f8f9fa;
-        cursor: pointer;
-        transition: all 64ms linear;
-        text-align: left;
-        font-family: var(--font-secondary);
-        box-shadow: 2px 2px 0 0 var(--palette-black);
-    }
-
-    .course-button:hover:not(:disabled) {
-        background: var(--homepage-projects-bg);
-        transform: translate(-1px, -1px);
-        box-shadow: 3px 3px 0 0 var(--palette-black);
-    }
-
-    .course-button:active:not(:disabled) {
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--palette-black);
-    }
 
-    .course-button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background: #e0e0e0;
-    }
+        > button {
+            padding: 0.25rem 0.75rem 0.25rem 0.5rem;
+            font-size: 20px;
 
-    .course-button.selected {
-        background: var(--guide-base);
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--palette-black);
-    }
+            place-content: stretch;
+            place-items: stretch;
+        }
 
-    .course-name {
-        font-weight: 600;
-        font-size: 0.9rem;
-        line-height: 1.3;
-        margin-bottom: 0.25rem;
-        color: var(--palette-black);
-    }
+        .course-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 0.5rem;
 
-    .course-cfu {
-        font-size: 0.8rem;
-        color: #666;
-        font-weight: bold;
-        font-family: var(--font-mono);
+            padding: 0.25rem;
+
+            border-radius: 0.25rem;
+            overflow-y: auto;
+            max-height: 50vh;
+
+            position: relative;
+
+            /* bottom linear gradient for scroll */
+            &::after {
+                content: '';
+                position: sticky;
+                bottom: -0.25rem;
+                left: 0;
+                right: 0;
+                height: 1rem;
+                margin-top: calc(-1rem - 0.25rem);
+
+                background: linear-gradient(to top, #0004, transparent);
+            }
+
+            .course-button {
+                display: grid;
+                grid-template-rows: auto auto;
+                padding: 0.5rem;
+                gap: 0.25rem;
+                justify-content: stretch;
+                justify-items: start;
+
+                border: 2px solid var(--palette-black);
+                border-radius: 4px;
+                background: #f8f9fa;
+                cursor: pointer;
+                transition: all 64ms linear;
+                text-align: left;
+                font-family: var(--font-secondary);
+                box-shadow: 2px 2px 0 0 var(--palette-black);
+
+                &:hover:not(:disabled) {
+                    background: var(--homepage-projects-bg);
+                    transform: translate(-1px, -1px);
+                    box-shadow: 3px 3px 0 0 var(--palette-black);
+                }
+
+                &:active:not(:disabled) {
+                    transform: translate(1px, 1px);
+                    box-shadow: 1px 1px 0 0 var(--palette-black);
+                }
+
+                &:disabled {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+                    background: #e0e0e0;
+                }
+
+                > .course-name {
+                    font-weight: 600;
+                    font-size: 0.9rem;
+                    line-height: 1.3;
+                    color: var(--palette-black);
+                }
+
+                > .course-cfu {
+                    font-size: 0.8rem;
+                    color: #666;
+                    font-weight: bold;
+                    /* font-family: var(--font-mono); */
+                }
+            }
+        }
     }
 
     /* Materia personalizzata */
     .custom-course {
-        margin-top: 2rem;
+        margin-top: 1rem;
         padding-top: 1.5rem;
         border-top: 3px solid var(--palette-black);
     }
@@ -252,29 +422,31 @@
         box-shadow: 5px 5px 0 0 var(--palette-black);
     }
 
-    .custom-form {
-        display: flex;
-        gap: 0.5rem;
-        flex-wrap: wrap;
-        margin-top: 1rem;
-    }
+    input {
+        padding: 0.25rem 0.5rem;
+        font-size: 14px;
 
-    .custom-form input {
-        padding: 0.5rem;
-        border: 2px solid var(--palette-black);
+        border: 2px solid #222;
         border-radius: 4px;
-        font-size: 0.9rem;
+        box-shadow: 2px 2px 0 0 #222;
+
         background: #fff;
         font-family: var(--font-primary);
     }
 
-    .custom-form input[type='text'] {
-        flex: 2;
-        min-width: 200px;
-    }
+    .custom-form {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+
+        input[type='text'] {
+            flex: 2;
+            min-width: 200px;
+        }
 
-    .custom-form input[type='number'] {
-        flex: 0 0 80px;
+        input[type='number'] {
+            flex: 0 0 80px;
+        }
     }
 
     .confirm-btn,
@@ -351,122 +523,150 @@
     .courses-list {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
+        gap: 0.5rem;
+
+        /* @media screen and (max-width: 1024px) {
+            gap: 0;
+
+            .course-item {
+                &:first-child:not(:last-child) {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+
+                &:last-child:not(:first-child) {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+
+                    border-top: none;
+                }
+
+                &:not(:first-child, :last-child) {
+                    border-radius: 0;
+                    border-top: none;
+                }
+            }
+        } */
     }
 
     .course-item {
-        display: flex;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr auto auto;
         align-items: center;
-        gap: 1rem;
-        padding: 1rem;
-        background: var(--guide-base);
+
+        gap: 0.5rem 1rem;
+        padding: 0.5rem 1rem 0.5rem 0.5rem;
+        background: #fff;
         border: 2px solid var(--palette-black);
         border-radius: 4px;
         transition: all 64ms linear;
-    }
 
-    .course-item:hover {
-        transform: translate(-1px, -1px);
-        box-shadow: 2px 2px 0 0 var(--palette-black);
-    }
+        > .course-name {
+            grid-column: 1 / 2;
+            grid-row: 1 / 2;
 
-    .course-info {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-    }
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: var(--palette-black);
+            font-family: var(--font-secondary);
+        }
 
-    .course-info .course-name {
-        font-weight: 600;
-        font-size: 0.9rem;
-        color: var(--palette-black);
-        font-family: var(--font-secondary);
-    }
+        > .course-cfu {
+            grid-column: 1 / 2;
+            grid-row: 2 / 3;
 
-    .course-info .course-cfu {
-        font-size: 0.8rem;
-        color: #666;
-        font-family: var(--font-mono);
-    }
+            font-size: 0.8rem;
+            font-weight: bold;
+            color: #666;
+            /* font-family: var(--font-mono); */
+        }
 
-    .course-grade {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-    }
+        > .tall {
+            grid-row: 1 / -1;
+        }
 
-    .course-grade input[type='number'] {
-        width: 90px;
-        padding: 0.5rem;
-        border: 2px solid var(--palette-black);
-        border-radius: 4px;
-        font-size: 0.9rem;
-        text-align: center;
-        background: #fff;
-        font-weight: 600;
-        font-family: var(--font-primary);
-    }
+        .course-grade {
+            display: grid;
+            grid-auto-flow: column;
+            place-content: center;
 
-    .lode-checkbox {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        font-size: 0.8rem;
-        cursor: pointer;
-        font-weight: 600;
-        font-family: var(--font-secondary);
-    }
+            gap: 0.5rem;
+        }
 
-    .lode-checkbox.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
+        > .actions {
+            grid-column: -2 / -1;
+        }
 
-    .lode-checkbox input[type='checkbox'] {
-        width: 16px;
-        height: 16px;
-        margin: 0;
-    }
+        .lode-checkbox {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            font-size: 0.8rem;
+            cursor: pointer;
+            font-weight: 600;
+            font-family: var(--font-secondary);
+
+            &.disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+        }
 
-    .remove-btn {
-        background: #d63031;
-        color: white;
-        border: 2px solid var(--palette-black);
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        aspect-ratio: 1;
-        cursor: pointer;
-        font-size: 1.2rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 64ms linear;
-        flex-shrink: 0;
-        box-shadow: 2px 2px 0 0 var(--palette-black);
-    }
+        .remove-btn {
+            background: #d63031;
+            color: white;
+            width: 1.75rem;
+            height: 1.75rem;
+            font-size: 20px;
+            padding: 0;
+
+            margin-top: 4px;
+
+            &:hover {
+                background: #b71c1c;
+            }
+        }
 
-    .remove-btn:hover {
-        background: #b71c1c;
-        transform: translate(-1px, -1px);
-        box-shadow: 3px 3px 0 0 var(--palette-black);
-    }
+        @media screen and (max-width: 1024px) {
+            justify-items: start;
+            align-items: center;
+            gap: 0.5rem;
 
-    .remove-btn:active {
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--palette-black);
-    }
+            grid-template-columns: 1fr auto;
+            grid-template-rows: auto auto;
 
-    /* Calcolo e risultati */
-    .calculation-section {
-        background: var(--homepage-principal-bg);
-        border: var(--border-large);
-        border-radius: 6px;
-        box-shadow: 4px 4px 0 0 var(--palette-black);
-        padding: 2rem;
-        text-align: center;
-        margin-top: 2rem;
+            padding: 0.5rem;
+
+            .course-name {
+                display: grid;
+                place-content: center;
+                place-items: center;
+
+                grid-column: 1 / 2;
+                grid-row: 1 / 2;
+            }
+
+            .course-cfu {
+                display: grid;
+                justify-self: center;
+                align-self: start;
+
+                grid-column: 2 / 3;
+                grid-row: 1 / 2;
+            }
+
+            .course-grade {
+                grid-row: 2 / 3;
+            }
+
+            .actions {
+                grid-column: 2 / 3;
+                grid-row: 2 / 3;
+
+                justify-self: end;
+            }
+        }
     }
 
     .calculate-button {
@@ -482,17 +682,17 @@
         cursor: pointer;
         transition: all 64ms linear;
         margin-bottom: 2rem;
-    }
 
-    .calculate-button:hover {
-        background: #2b8b47;
-        transform: translate(-1px, -1px);
-        box-shadow: 5px 5px 0 0 var(--palette-black);
-    }
+        &:hover {
+            background: #2b8b47;
+            transform: translate(-1px, -1px);
+            box-shadow: 5px 5px 0 0 var(--palette-black);
+        }
 
-    .calculate-button:active {
-        transform: translate(2px, 2px);
-        box-shadow: 2px 2px 0 0 var(--palette-black);
+        &:active {
+            transform: translate(2px, 2px);
+            box-shadow: 2px 2px 0 0 var(--palette-black);
+        }
     }
 
     .results {
@@ -502,21 +702,25 @@
         box-shadow: 4px 4px 0 0 var(--palette-black);
         padding: 2rem;
         margin-top: 1rem;
-    }
 
-    .results h2 {
-        margin-bottom: 1.5rem;
-        color: var(--palette-black);
-        font-family: var(--font-display);
-        font-weight: 600;
-        font-size: 1.6rem;
-        text-align: center;
-    }
+        > h2 {
+            margin-bottom: 1.5rem;
+            color: var(--palette-black);
+            font-family: var(--font-display);
+            font-weight: 600;
+            font-size: 1.6rem;
+            text-align: center;
+        }
 
-    .results-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        gap: 1rem;
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1rem;
+        }
+
+        @media screen and (max-width: 1024px) {
+            padding: 1rem;
+        }
     }
 
     /* Ordine degli elementi: il massimo voto di laurea al centro */
@@ -533,7 +737,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 1rem;
-        background: var(--guide-base);
+        background: hsl(from var(--media-pesata-accent-3) h s 75%);
         border: 2px solid var(--palette-black);
         border-radius: 4px;
         font-family: var(--font-secondary);
@@ -542,7 +746,7 @@
     }
 
     .result-item.highlight {
-        background: var(--homepage-projects-bg);
+        background: hsl(from var(--media-pesata-accent-2) h s 75%);
         font-weight: bold;
         font-size: 1.2rem;
     }
@@ -579,11 +783,7 @@
     }
 
     /* Responsive */
-    @media (max-width: 768px) {
-        .media-pesata-app {
-            padding: 1rem;
-        }
-
+    /* @media (max-width: 768px) {
         .course-grid {
             grid-template-columns: 1fr;
         }
@@ -629,17 +829,16 @@
             grid-template-columns: 1fr;
         }
 
-        /* Mantieni il massimo voto centrato anche su mobile */
         .result-item:nth-child(4) {
             order: -1;
             grid-column: 1;
             justify-self: center;
             max-width: 100%;
         }
-    }
+    } */
 
     /* Layout ultra-compatto per schermi molto piccoli */
-    @media (max-width: 480px) {
+    /* @media (max-width: 480px) {
         .course-item {
             padding: 0.5rem;
             gap: 0.25rem;
@@ -678,7 +877,7 @@
             height: 26px;
             font-size: 0.9rem;
         }
-    }
+    } */
 
     .section-header {
         display: flex;
@@ -773,8 +972,31 @@
 
     /* Calculate button */
     .calculate-section {
-        text-align: center;
-        margin: 2rem 0;
+        display: grid;
+        place-content: center;
+        padding: 2rem 0 1rem;
+
+        button {
+            font-size: 20px;
+            padding: 1rem;
+
+            /* border 3px */
+            border: 3px solid var(--palette-black);
+            border-radius: 6px;
+            box-shadow: 4px 4px 0 0 var(--palette-black);
+
+            &:hover {
+                transform: translate(-1px, -1px);
+                box-shadow: 5px 5px 0 0 var(--palette-black);
+            }
+
+            &:active {
+                transform: translate(2px, 2px);
+                box-shadow: 2px 2px 0 0 var(--palette-black);
+            }
+
+            background: hsl(from var(--media-pesata-accent-2) h s 75%);
+        }
     }
 
     .calculate-btn {
@@ -855,3 +1077,18 @@
         }
     }
 }
+
+@layer utility {
+    @media screen and (max-width: 1024px) {
+        .card {
+            > .h-flex {
+                flex-direction: column;
+                align-items: start;
+
+                > .spacer {
+                    display: none;
+                }
+            }
+        }
+    }
+}